import { useRef, useState } from 'react';
import { Label } from '@heroui/react';
import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { FilePreview } from '@/Components/ui/FilePreview';

interface FileDropzoneProps {
    label: string;
    file: File | null;
    onChange: (file: File | null) => void;
    accept?: string;
    currentUrl?: string | null;
}

export function FileDropzone({ label, file, onChange, accept = 'image/*,application/pdf', currentUrl }: FileDropzoneProps) {
    const inputRef = useRef<HTMLInputElement>(null);
    const [isDragOver, setIsDragOver] = useState(false);

    return (
        <div className="flex flex-col gap-1.5">
            <Label>{label}</Label>

            {file ? (
                <div className="flex items-center gap-3 rounded-xl border border-gray-300 bg-white p-2">
                    <span className="flex w-10 h-10 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-gray-400">
                        <DocumentIcon className="w-5 h-5" />
                    </span>
                    <div className="flex-1 truncate text-sm text-gray-700">
                        {file.name}
                        <span className="ml-1.5 text-xs text-gray-400">({(file.size / 1024).toFixed(0)} KB)</span>
                    </div>
                    <button
                        type="button"
                        onClick={() => onChange(null)}
                        className="shrink-0 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-500"
                        aria-label="Hapus file"
                    >
                        <XMarkIcon className="w-4 h-4" />
                    </button>
                </div>
            ) : currentUrl ? (
                <div className="flex items-center gap-3 rounded-xl border border-gray-300 bg-white p-2">
                    <FilePreview url={currentUrl} size={40} />
                    <div className="flex-1 text-sm text-gray-600">Berkas saat ini</div>
                    <button
                        type="button"
                        onClick={() => inputRef.current?.click()}
                        className="shrink-0 rounded-lg px-2.5 py-1.5 text-xs font-medium text-sky-600 hover:bg-sky-50"
                    >
                        Ganti file
                    </button>
                </div>
            ) : (
                <div
                    role="button"
                    tabIndex={0}
                    onClick={() => inputRef.current?.click()}
                    onKeyDown={(e) => e.key === 'Enter' && inputRef.current?.click()}
                    onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
                    onDragLeave={() => setIsDragOver(false)}
                    onDrop={(e) => {
                        e.preventDefault();
                        setIsDragOver(false);
                        const dropped = e.dataTransfer.files?.[0];
                        if (dropped) onChange(dropped);
                    }}
                    onPaste={(e) => {
                        const pasted = Array.from(e.clipboardData.items)
                            .find((item) => item.kind === 'file')
                            ?.getAsFile();
                        if (pasted) onChange(pasted);
                    }}
                    className={`flex flex-col items-center justify-center gap-1.5 rounded-xl border-2 border-dashed px-4 py-6 text-center cursor-pointer transition-colors ${
                        isDragOver ? 'border-sky-500 bg-sky-50' : 'border-gray-300 bg-white hover:border-sky-300 hover:bg-gray-50'
                    }`}
                >
                    <CloudArrowUpIcon className="w-6 h-6 text-gray-400" />
                    <p className="text-sm text-gray-600">
                        <span className="font-medium text-sky-600">Klik untuk unggah</span> atau seret file ke sini
                    </p>
                    <p className="text-xs text-gray-400">Gambar atau PDF, bisa juga tempel (paste) dari clipboard</p>
                </div>
            )}

            <input
                ref={inputRef}
                type="file"
                accept={accept}
                className="hidden"
                onChange={(e) => {
                    const picked = e.target.files?.[0];
                    if (picked) onChange(picked);
                    e.target.value = '';
                }}
            />
        </div>
    );
}