import { type FC, useState, useEffect } from 'react';
import Button from '../../../components/Button';
import UploadBoxDraggble from '../../../components/UploadBoxDraggble';
import UploadBox from '../../../components/UploadBox';
import { useUploadMultiple } from '../../uploader/hooks/useUploaderData';
import { type SaveProductRequestType } from '../types/Types';

interface Step3FormProps {
    onSubmit: (data: Omit<SaveProductRequestType, 'productId'>) => void;
    loading: boolean;
    onPrevious: () => void;
    initialData?: Partial<Omit<SaveProductRequestType, 'productId'>>;
}

const Step3Form: FC<Step3FormProps> = ({ onSubmit, loading, onPrevious, initialData }) => {

    const [uploadedImages, setUploadedImages] = useState<string[]>([]);
    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
    const [coverImage, setCoverImage] = useState<string>('');
    const [selectedCoverFile, setSelectedCoverFile] = useState<File | null>(null);

    useEffect(() => {
        if (initialData) {
            setUploadedImages(initialData.imagesList || []);
            setCoverImage(initialData.coverImage || '');
        }
    }, [initialData]);

    const uploadMultipleMutation = useUploadMultiple();

    const handleFileSelect = (files: File[]) => {
        setSelectedFiles(files);
    };

    const handleCoverSelect = (url: string) => {
        setCoverImage(url);
    };

    const handleCoverFileSelect = (files: File[]) => {
        setSelectedCoverFile(files.length > 0 ? files[0] : null);
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        // اگر هیچ فایلی انتخاب نشده، مستقیم save کن
        if (selectedFiles.length === 0 && !selectedCoverFile) {
            const finalData = {
                imagesList: uploadedImages,
                coverImage: coverImage || uploadedImages[0] || ''
            };
            onSubmit(finalData);
            return;
        }

        // آپلود فایل‌های محصول
        if (selectedFiles.length > 0) {
            uploadMultipleMutation.mutate(selectedFiles, {
                onSuccess: (response) => {
                    const newUrls = response?.results?.urls?.map(file => file.url) || [];
                    const allImages = [...uploadedImages, ...newUrls];
                    setUploadedImages(allImages);

                    // اگر فایل کاور هم انتخاب شده، آن را هم آپلود کن
                    if (selectedCoverFile) {
                        uploadMultipleMutation.mutate([selectedCoverFile], {
                            onSuccess: (coverResponse) => {
                                const coverUrl = coverResponse?.results?.urls?.[0]?.url || '';
                                const finalData = {
                                    imagesList: allImages,
                                    coverImage: coverUrl || coverImage || allImages[0] || ''
                                };
                                onSubmit(finalData);
                            },
                            onError: (error) => {
                                console.error('Cover upload failed:', error);
                                // حتی اگر کاور آپلود نشد، با تصاویر محصول save کن
                                const finalData = {
                                    imagesList: allImages,
                                    coverImage: coverImage || allImages[0] || ''
                                };
                                onSubmit(finalData);
                            }
                        });
                    } else {
                        // فقط تصاویر محصول آپلود شده، save کن
                        const finalData = {
                            imagesList: allImages,
                            coverImage: coverImage || allImages[0] || ''
                        };
                        onSubmit(finalData);
                    }
                },
                onError: (error) => {
                    console.error('Product images upload failed:', error);
                    // می‌توانیم اینجا پیام خطا نمایش دهیم
                }
            });
        } else if (selectedCoverFile) {
            // فقط فایل کاور انتخاب شده
            uploadMultipleMutation.mutate([selectedCoverFile], {
                onSuccess: (response) => {
                    const coverUrl = response?.results?.urls?.[0]?.url || '';
                    const finalData = {
                        imagesList: uploadedImages,
                        coverImage: coverUrl || coverImage || uploadedImages[0] || ''
                    };
                    onSubmit(finalData);
                },
                onError: (error) => {
                    console.error('Cover upload failed:', error);
                }
            });
        }
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-6">
            {/* اپلود تصویر کاور */}
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    تصویر کاور محصول
                </label>
                <UploadBox
                    label="تصویر کاور را انتخاب کنید"
                    onChange={handleCoverFileSelect}
                />
                {coverImage && (
                    <div className="mt-2 text-sm text-green-600">
                        تصویر کاور انتخاب شده است.
                    </div>
                )}
            </div>

            {/* اپلود تصاویر محصول */}
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    تصاویر محصول
                </label>
                <UploadBoxDraggble
                    label="تصاویر محصول را انتخاب یا اینجا رها کنید"
                    onChange={handleFileSelect}
                    isMultiple={true}
                    preview={uploadedImages}
                    onChangePreview={setUploadedImages}
                    getCover={handleCoverSelect}
                    coverUrl={coverImage}
                />

                <div className="text-sm text-gray-600 mt-2">
                    برای انتخاب تصویر کاور روی یکی از تصاویر کلیک کنید (اختیاری).
                    {coverImage && (
                        <span className="text-green-600 font-medium">
                            {' '}تصویر کاور انتخاب شده است.
                        </span>
                    )}
                </div>
            </div>

            <div className="flex gap-4 justify-between">
                <Button
                    type="button"
                    variant="outline"
                    onClick={onPrevious}
                >
                    مرحله قبلی
                </Button>
                <Button
                    type="submit"
                    isLoading={loading || uploadMultipleMutation.isPending}
                    disabled={selectedFiles.length === 0 && uploadedImages.length === 0 && !selectedCoverFile && !coverImage}
                >
                    ذخیره
                </Button>
            </div>
        </form>
    );
};

export default Step3Form;
