import { type FC, useState, useMemo, useEffect } from 'react';
import Button from '../../../components/Button';
import Input from '../../../components/Input';
import Select from '../../../components/Select';
import Switch from '../../../components/Switch';
import RadioGroup from '../../../components/RadioGroup';
import { type CreateProductDetailRequestType } from '../types/Types';
import { type CategoryTreeNode } from '../../category/types/Types';

interface Step1FormProps {
    onSubmit: (data: CreateProductDetailRequestType) => void;
    brands: { _id: string; title_fa: string }[];
    categories: CategoryTreeNode[];
    loading: boolean;
    initialData?: Partial<CreateProductDetailRequestType>;
}

// تابع برای پیدا کردن همه دسته‌بندی‌های leaf از تمام سطح‌ها
const findAllLeafCategories = (categories: CategoryTreeNode[]): CategoryTreeNode[] => {
    const leafCategories: CategoryTreeNode[] = [];

    const traverse = (nodes: CategoryTreeNode[]) => {
        for (const node of nodes) {
            if (node.leaf) {
                leafCategories.push(node);
            }
            // مهم: همیشه children ها را هم بررسی کن
            if (node.children && node.children.length > 0) {
                traverse(node.children);
            }
        }
    };

    traverse(categories);
    return leafCategories;
};


const Step1Form: FC<Step1FormProps> = ({ onSubmit, brands, categories, loading, initialData }) => {
    const [formData, setFormData] = useState<CreateProductDetailRequestType>({
        category: '',
        brand: '',
        model: '',
        title_fa: '',
        title_en: '',
        seoTitle: '',
        source: 'local',
        isFake: false
    });

    useEffect(() => {
        if (initialData) {
            setFormData(prev => ({ ...prev, ...initialData }));
        }
    }, [initialData]);

    // پیدا کردن همه دسته‌بندی‌های leaf
    const leafCategories = useMemo(() => {
        if (!categories || categories.length === 0) {
            // اگر داده‌ای وجود ندارد، لیست خالی برمی‌گردانیم
            return [];
        }

        return findAllLeafCategories(categories);
    }, [categories]);

    // تبدیل به فرمت مورد نیاز Combobox
    const categoryItems = useMemo(() =>
        leafCategories.map(cat => ({ value: cat._id, label: cat.title_fa })),
        [leafCategories]
    );

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Select
                    label="دسته‌بندی"
                    value={formData.category}
                    onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
                    items={categoryItems}
                    required
                />

                <Select
                    label="برند"
                    value={formData.brand}
                    onChange={(e) => setFormData(prev => ({ ...prev, brand: e.target.value }))}
                    items={brands.map(brand => ({ value: brand._id, label: brand.title_fa }))}
                    required
                />

                <Input
                    label="مدل"
                    value={formData.model}
                    onChange={(e) => setFormData(prev => ({ ...prev, model: e.target.value }))}
                    required
                />

                <Input
                    label="عنوان فارسی"
                    value={formData.title_fa}
                    onChange={(e) => setFormData(prev => ({ ...prev, title_fa: e.target.value }))}
                    required
                />

                <Input
                    label="عنوان انگلیسی"
                    value={formData.title_en}
                    onChange={(e) => setFormData(prev => ({ ...prev, title_en: e.target.value }))}
                    required
                />

                <Input
                    label="عنوان SEO"
                    value={formData.seoTitle}
                    onChange={(e) => setFormData(prev => ({ ...prev, seoTitle: e.target.value }))}
                    required
                />

                <RadioGroup
                    selected={formData.source}
                    onChange={(value) => setFormData(prev => ({ ...prev, source: value as string }))}
                    items={[
                        { value: 'local', label: 'محلی' },
                        { value: 'imported', label: 'وارداتی' }
                    ]}
                />

                <Switch
                    label="محصول تقلبی"
                    active={formData.isFake}
                    onChange={(active) => setFormData(prev => ({ ...prev, isFake: active }))}
                />
            </div>

            <div className="flex justify-end">
                <Button type="submit" isLoading={loading}>
                    مرحله بعدی
                </Button>
            </div>
        </form>
    );
};

export default Step1Form;
