'use client';

import { MediaPicker } from '@/../../Website/Gallery/resources/assets/js/components/MediaPicker';
import { GalleryItem } from '@/../../Website/Gallery/resources/assets/js/types';
import { cn } from '@/utils/common';
import { Image as ImageIcon, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

interface MediaPickerFieldProps {
    name: string;
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    multiple?: boolean;
    initialMedia?: GalleryItem | GalleryItem[];
    app_name?: string;
    app_module?: string;
    onChange?: (media: GalleryItem | GalleryItem[] | null) => void;
}

export const MediaPickerField = ({
    name,
    disabled,
    className,
    placeholder = 'Select Media',
    multiple = false,
    initialMedia,
    app_name,
    app_module,
    onChange,
}: MediaPickerFieldProps) => {
    const { control, setValue, watch } = useFormContext();
    // Local state to track the full object objects for preview
    const [selectedMedia, setSelectedMedia] = useState<GalleryItem[]>([]);

    useEffect(() => {
        if (initialMedia) {
            setSelectedMedia(Array.isArray(initialMedia) ? initialMedia : [initialMedia]);
        }
    }, [initialMedia]);

    const handleSelect = (item: GalleryItem) => {
        setSelectedMedia([item]);
        setValue(name, item.id, { shouldDirty: true });
        onChange?.(item);
    };

    const handleMultiSelect = (items: GalleryItem[]) => {
        setSelectedMedia(items);
        setValue(
            name,
            items.map((i) => i.id),
            { shouldDirty: true },
        );
        onChange?.(items);
    };

    const handleRemove = (id: number) => {
        const newMedia = selectedMedia.filter((item) => item.id !== id);
        setSelectedMedia(newMedia);
        if (multiple) {
            setValue(
                name,
                newMedia.map((i) => i.id),
                { shouldDirty: true },
            );
            onChange?.(newMedia);
        } else {
            setValue(name, null, { shouldDirty: true });
            onChange?.(null);
        }
    };

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <div className={cn('space-y-3', className)}>
                    {selectedMedia.length > 0 && !multiple ? (
                        /* Single image preview — full-width, same size as the upload zone */
                        <MediaPicker
                            onSelect={handleSelect}
                            onMultiSelect={handleMultiSelect}
                            enableMultiSelect={false}
                            defaultValue={selectedMedia[0]}
                            app_name={app_name}
                            app_module={app_module}
                            trigger={
                                <div className="group relative w-full cursor-pointer overflow-hidden rounded-md border border-dashed border-gray-300 bg-gray-50">
                                    {(selectedMedia[0].file_type ?? '').startsWith('image') ? (
                                        <img
                                            src={selectedMedia[0].file_url}
                                            alt={selectedMedia[0].alt_text || selectedMedia[0].title}
                                            className="h-full max-h-48 w-full object-cover"
                                        />
                                    ) : (
                                        <div className="flex flex-col items-center px-6 py-8 text-center">
                                            <ImageIcon className="mb-1 h-8 w-8 text-gray-400" />
                                            <span className="w-full truncate text-xs text-gray-500">{selectedMedia[0].file_name}</span>
                                        </div>
                                    )}
                                    <button
                                        type="button"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            handleRemove(selectedMedia[0].id);
                                        }}
                                        className="absolute top-1 right-1 rounded-full bg-red-500 p-1 text-white opacity-0 transition-opacity group-hover:opacity-100"
                                        disabled={disabled}
                                    >
                                        <X className="h-3 w-3" />
                                    </button>
                                </div>
                            }
                        />
                    ) : (
                        <>
                            {/* Multi-select previews */}
                            {multiple && selectedMedia.length > 0 && (
                                <div className="flex flex-wrap gap-4">
                                    {selectedMedia.map((item) => (
                                        <div
                                            key={item.id}
                                            className="group relative flex h-full w-32 items-center justify-center overflow-hidden rounded-lg border bg-gray-50"
                                        >
                                            {(item.file_type ?? '').startsWith('image') ? (
                                                <img src={item.file_url} alt={item.alt_text || item.title} className="h-full w-full object-cover" />
                                            ) : (
                                                <div className="flex flex-col items-center p-2 text-center">
                                                    <ImageIcon className="mb-1 h-8 w-8 text-gray-400" />
                                                    <span className="w-full truncate text-xs text-gray-500">{item.file_name}</span>
                                                </div>
                                            )}
                                            <button
                                                type="button"
                                                onClick={() => handleRemove(item.id)}
                                                className="absolute top-1 right-1 rounded-full bg-red-500 p-1 text-white opacity-0 transition-opacity group-hover:opacity-100"
                                                disabled={disabled}
                                            >
                                                <X className="h-3 w-3" />
                                            </button>
                                        </div>
                                    ))}
                                </div>
                            )}

                            {/* Picker Trigger */}
                            <MediaPicker
                                onSelect={handleSelect}
                                onMultiSelect={handleMultiSelect}
                                enableMultiSelect={multiple}
                                defaultValue={multiple ? selectedMedia : selectedMedia[0]}
                                app_name={app_name}
                                app_module={app_module}
                                trigger={
                                    <button
                                        type="button"
                                        disabled={disabled}
                                        className={cn(
                                            'inline-flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed border-gray-300 bg-white px-6 py-8 text-sm font-medium text-gray-700 hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none',
                                            disabled && 'cursor-not-allowed opacity-50',
                                            className,
                                        )}
                                    >
                                        <div className="text-center">
                                            <ImageIcon className="mx-auto h-8 w-8 text-gray-400" />
                                        </div>
                                    </button>
                                }
                            />
                        </>
                    )}
                </div>
            )}
        />
    );
};