import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useProductOption, useCreateProductOption, useUpdateProductOption } from '../core/_hooks';
import { ProductOptionFormData } from '../core/_models';
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { FileUploader } from "@/components/ui/FileUploader";
import { useFileUpload, useFileDelete } from "@/hooks/useFileUpload";
import { ArrowRight, Plus, Trash2 } from "lucide-react";
import { FormHeader, PageContainer, SectionTitle, Label } from '../../../components/ui/Typography';

const maintenanceSchema = yup.object({
    title: yup.string().required('عنوان نگهداری الزامی است'),
    description: yup.string(),
    content: yup.string().required('محتوای نگهداری الزامی است'),
    image: yup.string().required('تصویر نگهداری الزامی است'),
});

const optionSchema = yup.object({
    title: yup.string().required('عنوان گزینه الزامی است'),
    description: yup.string().required('توضیحات گزینه الزامی است'),
    meta_title: yup.string().required('متا تایتل الزامی است'),
});

const productOptionSchema = yup.object({
    title: yup.string().required('عنوان الزامی است').min(2, 'عنوان باید حداقل 2 کاراکتر باشد'),
    description: yup.string(),
    maintenance: maintenanceSchema.required('اطلاعات نگهداری الزامی است'),
    options: yup.array().of(optionSchema).min(1, 'حداقل یک گزینه باید وارد شود').required('گزینه‌ها الزامی است'),
});

const ProductOptionFormPage = () => {
    const navigate = useNavigate();
    const { id } = useParams<{ id: string }>();
    const isEdit = !!id;

    const { data: productOption, isLoading: isLoadingOption } = useProductOption(id || '', isEdit);
    const { mutate: createOption, isPending: isCreating } = useCreateProductOption();
    const { mutate: updateOption, isPending: isUpdating } = useUpdateProductOption();
    const { mutateAsync: uploadFile } = useFileUpload();
    const { mutate: deleteFile } = useFileDelete();

    const [uploadedImage, setUploadedImage] = useState<{ id: string, url: string } | null>(null);
    const [isUploading, setIsUploading] = useState(false);

    const isLoading = isCreating || isUpdating;

    const {
        register,
        handleSubmit,
        formState: { errors, isValid },
        setValue,
        watch,
        control
    } = useForm<ProductOptionFormData>({
        resolver: yupResolver(productOptionSchema) as any,
        mode: 'onChange',
        defaultValues: {
            title: '',
            description: '',
            maintenance: {
                title: '',
                description: '',
                content: '',
                image: ''
            },
            options: []
        }
    });

    const { fields: optionFields, append: appendOption, remove: removeOption } = useFieldArray({
        control,
        name: "options"
    });

    useEffect(() => {
        if (isEdit && productOption) {
            setValue('title', productOption.title, { shouldValidate: true });
            setValue('description', productOption.description, { shouldValidate: true });
            setValue('maintenance', productOption.maintenance, { shouldValidate: true });
            setValue('options', productOption.options, { shouldValidate: true });

            if (productOption.maintenance.image) {
                setUploadedImage({ id: productOption.maintenance.image, url: productOption.maintenance.image });
            }
        }
    }, [isEdit, productOption, setValue]);

    const onSubmit = (data: ProductOptionFormData) => {
        if (isEdit && id) {
            updateOption({
                id: parseInt(id),
                ...data
            }, {
                onSuccess: () => {
                    navigate('/product-options');
                }
            });
        } else {
            createOption(data, {
                onSuccess: () => {
                    navigate('/product-options');
                }
            });
        }
    };

    const addOption = () => {
        appendOption({
            title: '',
            description: '',
            meta_title: ''
        });
    };

    const handleFileUpload = async (file: File) => {
        try {
            const result = await uploadFile(file);
            const imageData = {
                id: result.id,
                url: result.url
            };
            setUploadedImage(imageData);
            // Store the file URL (not the internal id) in the form state so the backend receives the URL
            setValue('maintenance.image', result.url, { shouldValidate: true, shouldDirty: true });
            return result;
        } catch (error) {
            console.error('Upload error:', error);
            throw error;
        }
    };

    const handleFileRemove = (fileId: string) => {
        setUploadedImage(null);
        setValue('maintenance.image', '', { shouldValidate: true, shouldDirty: true });
        deleteFile(fileId);
    };

    if (isLoadingOption) {
        return (
            <PageContainer>
                <div className="space-y-6 animate-pulse">
                    <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48"></div>
                    <div className="card p-6 space-y-6">
                        {[...Array(4)].map((_, i) => (
                            <div key={i}>
                                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-2"></div>
                                <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
                            </div>
                        ))}
                    </div>
                </div>
            </PageContainer>
        );
    }

    const backButton = (
        <Button
            variant="secondary"
            onClick={() => navigate('/product-options')}
            className="flex items-center gap-2"
        >
            <ArrowRight className="h-4 w-4" />
            برگشت
        </Button>
    );

    return (
        <PageContainer className="max-w-4xl mx-auto">
            <FormHeader
                title={isEdit ? 'ویرایش گزینه محصول' : 'ایجاد گزینه محصول جدید'}
                subtitle="اطلاعات گزینه محصول را وارد کنید"
                backButton={backButton}
            />

            <div className="card">
                <div className="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
                    <SectionTitle>اطلاعات اصلی</SectionTitle>
                </div>

                <form onSubmit={handleSubmit(onSubmit)} className="p-6 space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <Input
                            label="عنوان"
                            {...register('title')}
                            error={errors.title?.message}
                            placeholder="عنوان گزینه محصول را وارد کنید"
                        />
                        <div>
                            <Label htmlFor="description">توضیحات</Label>
                            <textarea
                                id="description"
                                {...register('description')}
                                placeholder="توضیحات گزینه محصول را وارد کنید"
                                rows={4}
                                className="input resize-none"
                            />
                            {errors.description?.message && (
                                <p className="text-xs text-red-600 dark:text-red-400">{errors.description.message}</p>
                            )}
                        </div>
                    </div>

                    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                        <SectionTitle className="mb-4">اطلاعات نگهداری</SectionTitle>
                        <div className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <Input
                                    label="عنوان نگهداری"
                                    {...register('maintenance.title')}
                                    error={errors.maintenance?.title?.message}
                                    placeholder="عنوان نگهداری را وارد کنید"
                                />
                                <Input
                                    label="توضیحات نگهداری"
                                    {...register('maintenance.description')}
                                    error={errors.maintenance?.description?.message}
                                    placeholder="توضیحات نگهداری را وارد کنید"
                                />
                            </div>
                            <div>
                                <Label htmlFor="maintenance-content">محتوای نگهداری</Label>
                                <textarea
                                    id="maintenance-content"
                                    {...register('maintenance.content')}
                                    placeholder="محتوای نگهداری را وارد کنید"
                                    rows={4}
                                    className="input resize-none"
                                />
                                {errors.maintenance?.content?.message && (
                                    <p className="text-xs text-red-600 dark:text-red-400">{errors.maintenance.content.message}</p>
                                )}
                            </div>
                            <div>
                                <FileUploader
                                    onUpload={handleFileUpload}
                                    onRemove={handleFileRemove}
                                    acceptedTypes={['image/*']}
                                    maxFileSize={5 * 1024 * 1024} // 5MB
                                    maxFiles={1}
                                    mode="single"
                                    label="تصویر نگهداری"
                                    description="تصویر نگهداری را انتخاب کنید (حداکثر 5MB)"
                                    error={errors.maintenance?.image?.message}
                                    onUploadStart={() => setIsUploading(true)}
                                    onUploadComplete={() => setIsUploading(false)}
                                    initialFiles={uploadedImage ? [{ id: uploadedImage.id, url: uploadedImage.url }] : []}
                                />
                            </div>
                        </div>
                    </div>

                    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                        <div className="flex items-center justify-between mb-4">
                            <SectionTitle>گزینه‌ها</SectionTitle>
                            <Button
                                type="button"
                                variant="primary"
                                onClick={addOption}
                                className="flex items-center gap-2"
                            >
                                <Plus className="h-4 w-4" />
                                افزودن گزینه
                            </Button>
                        </div>

                        {optionFields.map((field, index) => (
                            <div key={field.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4">
                                <div className="flex items-center justify-between mb-4">
                                    <h4 className="text-md font-medium text-gray-900 dark:text-gray-100">گزینه {index + 1}</h4>
                                    <Button
                                        type="button"
                                        variant="danger"
                                        onClick={() => removeOption(index)}
                                        className="flex items-center gap-2"
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        حذف
                                    </Button>
                                </div>
                                <div className="space-y-4">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <Input
                                            label="عنوان"
                                            {...register(`options.${index}.title`)}
                                            error={errors.options?.[index]?.title?.message}
                                            placeholder="عنوان گزینه را وارد کنید"
                                        />
                                        <Input
                                            label="متا تایتل"
                                            {...register(`options.${index}.meta_title`)}
                                            error={errors.options?.[index]?.meta_title?.message}
                                            placeholder="متا تایتل را وارد کنید"
                                        />
                                    </div>
                                    <div>
                                        <Label htmlFor={`option-${index}-description`}>توضیحات</Label>
                                        <textarea
                                            id={`option-${index}-description`}
                                            {...register(`options.${index}.description`)}
                                            placeholder="توضیحات گزینه را وارد کنید"
                                            rows={3}
                                            className="input resize-none"
                                        />
                                        {errors.options?.[index]?.description?.message && (
                                            <p className="text-xs text-red-600 dark:text-red-400">{errors.options[index]?.description?.message}</p>
                                        )}
                                    </div>
                                </div>
                            </div>
                        ))}

                        {optionFields.length === 0 && (
                            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                                هیچ گزینه‌ای تعریف نشده است. برای شروع گزینه‌ای اضافه کنید.
                            </div>
                        )}
                    </div>

                    <div className="flex justify-end gap-4 pt-6">
                        <Button
                            type="button"
                            variant="secondary"
                            onClick={() => navigate('/product-options')}
                            disabled={isLoading}
                        >
                            لغو
                        </Button>
                        <Button
                            type="submit"
                            variant="primary"
                            disabled={!isValid || isLoading || isUploading}
                            loading={isLoading}
                        >
                            {isEdit ? 'ویرایش گزینه محصول' : 'ایجاد گزینه محصول'}
                        </Button>
                    </div>
                </form>
            </div>
        </PageContainer>
    );
};

export default ProductOptionFormPage; 