import { useConfirm } from '@/Components/ConfirmDialog';
import { router } from '@inertiajs/react';
import { Camera, Loader2, Trash2, Upload, User as UserIcon } from 'lucide-react';
import { ChangeEvent, DragEvent, useRef, useState } from 'react';

/**
 * Sürükle-bırak avatar yükleme komponenti.
 *
 * - Mevcut avatar varsa daire içinde göster, yoksa ad baş harfini
 * - Tıklayınca dosya seç, dosya sürükleyince drop alanı vurgulanır
 * - Yüklendikten sonra Inertia ile sayfa state'i tazelenir
 *
 * Örnek (kendi profilim):
 *   <AvatarUpload
 *     mevcutUrl={authUser.avatar_url_full}
 *     adSoyad={authUser.name}
 *     yukleUrl="/profile/avatar"
 *     silUrl="/profile/avatar"
 *   />
 *
 * Örnek (admin başkasının avatarını):
 *   <AvatarUpload
 *     mevcutUrl={k.avatar_url_full}
 *     adSoyad={k.name}
 *     yukleUrl={`/kullanicilar/${k.id}/avatar`}
 *     silUrl={`/kullanicilar/${k.id}/avatar`}
 *   />
 */
interface Props {
    mevcutUrl?: string | null;
    adSoyad?: string;
    yukleUrl: string;
    silUrl: string;
    boyut?: 'sm' | 'md' | 'lg';
    aciklama?: boolean;
}

export default function AvatarUpload({
    mevcutUrl,
    adSoyad = '',
    yukleUrl,
    silUrl,
    boyut = 'lg',
    aciklama = true,
}: Props) {
    const [yukleniyor, setYukleniyor] = useState(false);
    const [dragUstte, setDragUstte] = useState(false);
    const [hata, setHata] = useState<string | null>(null);
    const inputRef = useRef<HTMLInputElement>(null);
    const confirm = useConfirm();

    const harf = (adSoyad || '?').trim().charAt(0).toUpperCase();
    const cevreCap = boyut === 'sm' ? 'h-16 w-16 text-xl'
                   : boyut === 'md' ? 'h-24 w-24 text-3xl'
                                    : 'h-32 w-32 text-4xl';

    const dosyaYukle = (file: File) => {
        if (!file.type.startsWith('image/')) {
            setHata('Sadece görsel dosya yüklenebilir (PNG, JPG, GIF, WEBP).');
            return;
        }
        if (file.size > 2 * 1024 * 1024) {
            setHata('Dosya boyutu en fazla 2 MB olabilir.');
            return;
        }
        setHata(null);
        setYukleniyor(true);
        const form = new FormData();
        form.append('dosya', file);
        router.post(yukleUrl, form, {
            forceFormData: true,
            // Modal içinde kullanıldığında bileşen yeniden kurulmasın (modal kapanır)
            preserveState: true,
            preserveScroll: true,
            onFinish: () => setYukleniyor(false),
            onError: (errs: any) => setHata(errs?.dosya || 'Yükleme başarısız.'),
        });
    };

    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
        const f = e.target.files?.[0];
        if (f) dosyaYukle(f);
        e.target.value = '';
    };

    const dragOver = (e: DragEvent<HTMLDivElement>) => {
        e.preventDefault(); e.stopPropagation();
        if (!yukleniyor) setDragUstte(true);
    };
    const dragLeave = (e: DragEvent<HTMLDivElement>) => {
        e.preventDefault(); e.stopPropagation();
        setDragUstte(false);
    };
    const drop = (e: DragEvent<HTMLDivElement>) => {
        e.preventDefault(); e.stopPropagation();
        setDragUstte(false);
        if (yukleniyor) return;
        const f = e.dataTransfer.files?.[0];
        if (f) dosyaYukle(f);
    };

    const sil = async () => {
        const onay = await confirm({
            tip: 'tehlike', baslik: 'Avatarı Kaldır',
            mesaj: 'Yüklü avatar silinsin mi? Ad baş harfine geri dönülür.',
            onayMetni: 'Kaldır',
        });
        if (!onay) return;
        router.delete(silUrl, { preserveScroll: true });
    };

    return (
        <div className="flex flex-col items-center gap-3">
            <div
                onClick={() => !yukleniyor && inputRef.current?.click()}
                onDragOver={dragOver}
                onDragEnter={dragOver}
                onDragLeave={dragLeave}
                onDrop={drop}
                className={`group relative ${cevreCap} cursor-pointer overflow-hidden rounded-full border-4 border-white shadow-md transition ring-2 ${
                    dragUstte ? 'ring-blue-500 scale-105' : 'ring-slate-200 hover:ring-blue-300'
                }`}
            >
                {mevcutUrl ? (
                    <img src={mevcutUrl} alt={adSoyad} className="h-full w-full object-cover" />
                ) : (
                    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700 font-bold text-white">
                        {harf || <UserIcon className="h-1/2 w-1/2 opacity-80" />}
                    </div>
                )}

                {/* Hover overlay */}
                <div className={`absolute inset-0 flex items-center justify-center bg-black/40 text-white transition ${
                    yukleniyor ? 'opacity-100' : dragUstte ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
                }`}>
                    {yukleniyor ? (
                        <Loader2 className="h-6 w-6 animate-spin" />
                    ) : (
                        <div className="flex flex-col items-center gap-1">
                            <Camera className="h-6 w-6" />
                            <span className="text-[10px] font-medium uppercase tracking-wide">
                                {dragUstte ? 'Bırak' : 'Değiştir'}
                            </span>
                        </div>
                    )}
                </div>

                <input ref={inputRef} type="file" accept="image/*"
                    onChange={onChange} className="hidden" disabled={yukleniyor} />
            </div>

            <div className="flex items-center gap-2">
                <button type="button" onClick={() => inputRef.current?.click()} disabled={yukleniyor}
                    className="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50">
                    <Upload className="h-3.5 w-3.5" /> {mevcutUrl ? 'Değiştir' : 'Yükle'}
                </button>
                {mevcutUrl && (
                    <button type="button" onClick={sil} disabled={yukleniyor}
                        className="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-rose-700 hover:bg-rose-50 hover:border-rose-300 disabled:opacity-50">
                        <Trash2 className="h-3.5 w-3.5" /> Kaldır
                    </button>
                )}
            </div>

            {aciklama && (
                <p className="max-w-[240px] text-center text-[11px] text-slate-500">
                    Dosyayı buraya sürükleyin veya tıklayın. PNG/JPG/GIF/WEBP, maks 2 MB.
                </p>
            )}
            {hata && <p className="text-xs text-rose-600">{hata}</p>}
        </div>
    );
}