import { useConfirm } from '@/Components/ConfirmDialog';
import { useYukleme } from '@/Components/YuklemeProvider';
import { tarihFormat } from '@/lib/format';
import { router } from '@inertiajs/react';
import { DragDropContext, Droppable, Draggable, DropResult, DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd';
import {
    AlertCircle, CheckCircle2, Download, File, FileImage, FileSpreadsheet, FileText, FileVideo,
    GripVertical, Loader2, Paperclip, Trash2, Upload, X,
} from 'lucide-react';
import { ChangeEvent, DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';

interface Belge {
    id: number;
    orijinal_ad: string;
    aciklama?: string | null;
    url: string;
    uzanti: string;
    resim_mi: boolean;
    pdf_mi: boolean;
    boyut: number;
    created_at: string;
    user?: { id: number; name: string } | null;
}

interface Props {
    tip: 'cari' | 'hareket' | 'personel' | 'urun' | 'gorev' | 'musteri' | 'proje' | 'randevu' | 'teklif' | 'servis' | 'yenileme_kayit';
    id: number;
    readonly?: boolean;
    compact?: boolean;
}

export default function FileManager({ tip, id, readonly = false, compact = false }: Props) {
    const [belgeler, setBelgeler] = useState<Belge[]>([]);
    const [loading, setLoading] = useState(true);
    const [dragOver, setDragOver] = useState(false);
    const [onizleme, setOnizleme] = useState<Belge | null>(null);
    const [secili, setSecili] = useState<Set<number>>(new Set());
    const [topluSiliniyor, setTopluSiliniyor] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const confirm = useConfirm();

    /*
     * Yükleme işi bu bileşene AİT DEĞİL — kökteki YuklemeProvider'a devredilir.
     * Böylece kullanıcı başka sayfaya geçse de yükleme sürer ve sağ alttaki
     * göstergeden izlenebilir. Buradaki kuyruk yalnızca bu kayda ait işlerin
     * SÜZÜLMÜŞ görüntüsüdür; ilerleme yine yerinde görünür.
     */
    const { ekle, iptal: yuklemeIptal, isler: tumIsler } = useYukleme();
    const hedefKey = `belge:${tip}:${id}`;
    const kuyruk = useMemo(
        // Biten ve iptal edilen satırlar burada GÖSTERİLMEZ: iş tamamlandığında
        // dosya zaten aşağıdaki listeye düşer, "Yüklendi" satırının yükleme
        // alanının üstünde asılı kalması gereksiz gürültü. Hatalar kalır —
        // kullanıcının dosyanın neden reddedildiğini görmesi gerekir.
        // Tam geçmiş sağ alttaki yükleme göstergesinde durmaya devam eder.
        () => tumIsler.filter(
            (x) => x.hedefKey === hedefKey
                && (x.durum === 'yukleniyor' || x.durum === 'bekliyor' || x.durum === 'hata'),
        ),
        [tumIsler, hedefKey],
    );
    const uploading = kuyruk.some((x) => x.durum === 'yukleniyor' || x.durum === 'bekliyor');

    const hepsiSecili = useMemo(
        () => belgeler.length > 0 && secili.size === belgeler.length,
        [belgeler.length, secili.size],
    );
    const kismiSecili = secili.size > 0 && !hepsiSecili;

    const seciliToggle = (belgeId: number) => {
        setSecili((prev) => {
            const yeni = new Set(prev);
            if (yeni.has(belgeId)) yeni.delete(belgeId);
            else yeni.add(belgeId);
            return yeni;
        });
    };

    const hepsiniTopla = () => {
        if (hepsiSecili) setSecili(new Set());
        else setSecili(new Set(belgeler.map((b) => b.id)));
    };

    const yukle = useCallback(async () => {
        setLoading(true);
        try {
            const r = await fetch(`/belgeler/${tip}/${id}/`, {
                headers: { Accept: 'application/json' },
                credentials: 'same-origin',
            });
            if (r.ok) {
                const data = await r.json();
                setBelgeler(data.belgeler ?? []);
            }
        } finally {
            setLoading(false);
        }
    }, [tip, id]);

    useEffect(() => { yukle(); }, [yukle]);

    // Bu kayda ait yüklemelerin tamamı bitince listeyi tazele.
    // Olayı YuklemeProvider tetikler (yükleme artık orada koşuyor).
    useEffect(() => {
        const olay = `${hedefKey}:tamam`;
        const tazele = (e: Event) => {
            // Hiçbir dosya yüklenmediyse (hepsi iptal/hata) listeyi tazeleme —
            // sunucuda değişen bir şey yok, boşuna istek ve göz kırpması olur.
            const basarili = (e as CustomEvent<{ basarili: number }>).detail?.basarili ?? 0;
            if (basarili > 0) yukle();
        };
        window.addEventListener(olay, tazele);
        return () => window.removeEventListener(olay, tazele);
    }, [hedefKey, yukle]);

    useEffect(() => {
        setSecili((prev) => {
            const mevcut = new Set(belgeler.map((b) => b.id));
            const yeni = new Set<number>();
            prev.forEach((idd) => mevcut.has(idd) && yeni.add(idd));
            return yeni;
        });
    }, [belgeler]);

    /**
     * Dosyaları kök seviyedeki yükleme merkezine devreder.
     *
     * Eskiden burada doğrudan XHR açılıyordu ve iki hata vardı: iptal
     * setState güncelleyicisinin İÇİNDE abort() çağırdığı için iç içe güncelleme
     * kayboluyor, satır sonsuza kadar "yükleniyor" kalıyordu; ayrıca tüm dosyalar
     * aynı anda gönderildiği için tarayıcı bağlantı sınırı + oturum kilidi
     * yüzünden istekler tıkanıyordu. Merkez ikisini de çözer (ref'te XHR,
     * sınırlı eşzamanlılık) ve yükleme sayfa değişince ölmez.
     */
    const yukleDosya = (files: FileList | null) => {
        if (!files || files.length === 0) return;

        ekle(
            {
                url: `/belgeler/${tip}/${id}/`,
                alan: 'dosyalar[]',
                etiket: 'Kayıt dosyaları',
                key: hedefKey,
                tamamlandiOlayi: `${hedefKey}:tamam`,
            },
            files,
        );

        if (fileInputRef.current) fileInputRef.current.value = '';
    };


    const sil = async (b: Belge) => {
        const onay = await confirm({
            tip: 'tehlike',
            baslik: 'Belgeyi Sil',
            mesaj: <>'<strong>{b.orijinal_ad}</strong>' silinsin mi?</>,
            detay: 'Dosya kalıcı olarak silinir, geri alınamaz.',
            onayMetni: 'Sil',
        });
        if (!onay) return;
        router.delete(`/belgeler/${b.id}/`, {
            preserveScroll: true,
            onSuccess: () => {
                setSecili((prev) => {
                    const yeni = new Set(prev);
                    yeni.delete(b.id);
                    return yeni;
                });
                yukle();
            },
        });
    };

    const topluSil = async () => {
        if (secili.size === 0) return;
        const sayi = secili.size;
        const onay = await confirm({
            tip: 'tehlike',
            baslik: 'Seçili Belgeleri Sil',
            mesaj: <><strong>{sayi}</strong> belge silinsin mi?</>,
            detay: 'Dosyalar kalıcı olarak silinir, geri alınamaz.',
            onayMetni: `${sayi} Belgeyi Sil`,
        });
        if (!onay) return;

        setTopluSiliniyor(true);
        router.post(
            '/belgeler/toplu-sil/',
            { ids: Array.from(secili) },
            {
                preserveState: true,
                preserveScroll: true,
                onSuccess: () => {
                    setSecili(new Set());
                    yukle();
                },
                onFinish: () => setTopluSiliniyor(false),
            },
        );
    };

    const siralamayiKaydet = async (yeniSira: Belge[]) => {
        try {
            const token = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
            await fetch(`/belgeler/${tip}/${id}/sirala/`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ ids: yeniSira.map((b) => b.id) }),
            });
        } catch { /* sessiz */ }
    };

    const onDragStartDnd = () => {
        (window as any).__dragAktif = true;
    };
    const onDragEndDnd = (result: DropResult) => {
        (window as any).__dragAktif = false;
        const { source, destination } = result;
        if (!destination) return;
        if (source.index === destination.index) return;
        const yeni = [...belgeler];
        const [tasinan] = yeni.splice(source.index, 1);
        yeni.splice(destination.index, 0, tasinan);
        setBelgeler(yeni);
        siralamayiKaydet(yeni);
    };

    const onDragOver = (e: DragEvent) => { e.preventDefault(); setDragOver(true); };
    const onDragLeave = () => setDragOver(false);
    const onDrop = (e: DragEvent) => {
        e.preventDefault();
        setDragOver(false);
        if (readonly) return;
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            yukleDosya(e.dataTransfer.files);
        }
    };

    return (
        // w-full + min-w-0: bileşen genişliği İÇERİĞE göre DEĞİŞMEMELİ. min-w-0
        // olmadan flex/grid içindeki bir kutunun asgari genişliği içeriğinin doğal
        // genişliği kadardır; uzun bir dosya adı truncate'e rağmen kabı zorlayıp
        // bölümü genişletiyordu. overflow-hidden taşmayı kesin olarak kapatır.
        <div className={`w-full min-w-0 overflow-hidden ${compact ? 'bg-white h-full' : 'rounded-xl border border-slate-200 bg-white shadow-sm'}`}>
            {!compact && (
                <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
                    <div className="flex items-center gap-2">
                        <Paperclip className="h-5 w-5 text-slate-700" />
                        <h3 className="text-base font-semibold text-slate-900">Belgeler</h3>
                        <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">
                            {belgeler.length}
                        </span>
                    </div>
                </div>
            )}

            {!readonly && belgeler.length > 0 && (
                <div className="flex items-center justify-between gap-2 border-b border-slate-200 bg-slate-50/70 px-3 py-1.5">
                    {/* Tümünü seç — küçük toggle + durum metni (ham checkbox değil) */}
                    <button
                        type="button"
                        onClick={hepsiniTopla}
                        title={hepsiSecili ? 'Seçimi kaldır' : 'Tümünü seç'}
                        className="group inline-flex items-center gap-2 text-[11px] font-medium text-slate-600 transition hover:text-slate-900"
                    >
                        <span
                            className={`relative inline-flex h-4 w-7 flex-shrink-0 items-center rounded-full transition ${
                                hepsiSecili ? 'bg-blue-600' : kismiSecili ? 'bg-blue-300' : 'bg-slate-300 group-hover:bg-slate-400'
                            }`}
                        >
                            <span
                                className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition ${
                                    hepsiSecili ? 'translate-x-3.5' : kismiSecili ? 'translate-x-2' : 'translate-x-0.5'
                                }`}
                            />
                        </span>
                        <span>
                            {secili.size > 0
                                ? `${secili.size} / ${belgeler.length} seçili`
                                : 'Tümünü seç'}
                        </span>
                    </button>
                    {secili.size > 0 && (
                        <div className="flex items-center gap-1.5">
                            <button
                                type="button"
                                onClick={() => setSecili(new Set())}
                                className="rounded px-2 py-0.5 text-[11px] font-medium text-slate-600 hover:bg-white hover:text-slate-900"
                            >
                                Temizle
                            </button>
                            <button
                                type="button"
                                onClick={topluSil}
                                disabled={topluSiliniyor}
                                className="inline-flex items-center gap-1 rounded bg-rose-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-sm hover:bg-rose-700 disabled:opacity-50"
                            >
                                {topluSiliniyor ? <Loader2 className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}
                                {topluSiliniyor ? 'Siliniyor...' : `Sil (${secili.size})`}
                            </button>
                        </div>
                    )}
                </div>
            )}

            {/* YÜKLEME KUYRUĞU — her dosya ayrı satırda, yüzde + iptal */}
            {kuyruk.length > 0 && (
                <div className="space-y-1.5 border-b border-slate-200 bg-slate-50/70 px-3 py-2">
                    {kuyruk.map((is) => {
                        const bittiMi = is.durum === 'tamam';
                        const hataliMi = is.durum === 'hata';
                        const iptalMi = is.durum === 'iptal';
                        return (
                            <div key={is.key} className="rounded-lg border border-slate-200 bg-white px-2.5 py-1.5">
                                <div className="flex items-center gap-2">
                                    {bittiMi ? (
                                        <CheckCircle2 className="h-3.5 w-3.5 flex-shrink-0 text-emerald-600" />
                                    ) : hataliMi || iptalMi ? (
                                        <AlertCircle className={`h-3.5 w-3.5 flex-shrink-0 ${hataliMi ? 'text-rose-600' : 'text-slate-400'}`} />
                                    ) : (
                                        <Loader2 className="h-3.5 w-3.5 flex-shrink-0 animate-spin text-blue-600" />
                                    )}

                                    <div className="min-w-0 flex-1">
                                        <div className="truncate text-[11px] font-medium text-slate-800" title={is.ad}>
                                            {is.ad}
                                        </div>
                                        <div className="text-[10px] text-slate-500">
                                            {hataliMi ? (
                                                <span className="text-rose-600">{is.hata}</span>
                                            ) : iptalMi ? (
                                                'İptal edildi'
                                            ) : bittiMi ? (
                                                'Yüklendi'
                                            ) : (
                                                `${boyutFormat(is.boyut)} · %${is.yuzde}`
                                            )}
                                        </div>
                                    </div>

                                    <button
                                        type="button"
                                        onClick={() => yuklemeIptal(is.key)}
                                        title={is.durum === 'yukleniyor' ? 'Yüklemeyi iptal et' : 'Listeden kaldır'}
                                        className="flex-shrink-0 rounded p-1 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600"
                                    >
                                        <X className="h-3.5 w-3.5" />
                                    </button>
                                </div>

                                {/* İlerleme çubuğu — yalnızca devam edenlerde */}
                                {!bittiMi && !hataliMi && !iptalMi && (
                                    <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-slate-200">
                                        <div
                                            className="h-full rounded-full bg-blue-600 transition-all duration-200"
                                            style={{ width: `${is.yuzde}%` }}
                                        />
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            )}

            <div className="space-y-2 p-3">
                {!readonly && (
                    <div
                        onDragOver={onDragOver}
                        onDragLeave={onDragLeave}
                        onDrop={onDrop}
                        onClick={() => fileInputRef.current?.click()}
                        className={`relative flex cursor-pointer items-center justify-center gap-2 rounded-md border border-dashed px-3 py-2 text-center transition ${
                            dragOver
                                ? 'border-blue-500 bg-blue-50'
                                : 'border-slate-300 bg-slate-50 hover:border-blue-400 hover:bg-blue-50/30'
                        }`}
                    >
                        <input
                            ref={fileInputRef}
                            type="file"
                            multiple
                            onChange={(e: ChangeEvent<HTMLInputElement>) => yukleDosya(e.target.files)}
                            className="hidden"
                        />
                        {uploading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-600" /> : <Upload className={`h-3.5 w-3.5 ${dragOver ? 'text-blue-700' : 'text-slate-500'}`} />}
                        <span className="text-[11px] font-medium text-slate-700">
                            {uploading
                                ? 'Yükleniyor...'
                                : dragOver
                                ? 'Bırakın'
                                : 'Dosya seç veya sürükle bırak'}
                        </span>
                        <span className="hidden text-[10px] text-slate-400 sm:inline">· maks 1 GB · 10 dosya</span>
                    </div>
                )}

                <div>
                    {loading ? (
                        <div className="flex items-center justify-center py-3 text-[11px] text-slate-500">
                            <Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
                            Yükleniyor...
                        </div>
                    ) : belgeler.length === 0 ? (
                        <div className="rounded border border-dashed border-slate-200 py-3 text-center text-[11px] text-slate-400">
                            <Paperclip className="mx-auto mb-1 h-4 w-4 text-slate-300" />
                            Henüz belge yok
                        </div>
                    ) : (
                        <DragDropContext onDragStart={onDragStartDnd} onDragEnd={onDragEndDnd}>
                            <Droppable droppableId="belgeler">
                                {(provided) => (
                                    <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-0.5">
                                        {belgeler.map((b, i) => (
                                            <Draggable key={b.id} draggableId={String(b.id)} index={i} isDragDisabled={readonly}>
                                                {(prov, snap) => (
                                                    <SortableBelgeKarti
                                                        belge={b}
                                                        onSil={sil}
                                                        onOnizleme={() => setOnizleme(b)}
                                                        readonly={readonly}
                                                        secili={secili.has(b.id)}
                                                        onSeciliToggle={() => seciliToggle(b.id)}
                                                        provided={prov}
                                                        snapshot={snap}
                                                    />
                                                )}
                                            </Draggable>
                                        ))}
                                        {provided.placeholder}
                                    </div>
                                )}
                            </Droppable>
                        </DragDropContext>
                    )}
                </div>
            </div>

            {onizleme && <OnizlemeModal belge={onizleme} onClose={() => setOnizleme(null)} />}
        </div>
    );
}

function SortableBelgeKarti({
    belge, onSil, onOnizleme, readonly, secili, onSeciliToggle, provided, snapshot,
}: {
    belge: Belge;
    onSil: (b: Belge) => void;
    onOnizleme: () => void;
    readonly: boolean;
    secili: boolean;
    onSeciliToggle: () => void;
    provided: DraggableProvided;
    snapshot: DraggableStateSnapshot;
}) {
    const Icon = ikonAl(belge.uzanti);
    const renkler = renkAl(belge.uzanti);

    return (
        <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            className={`group flex items-center gap-1.5 overflow-hidden rounded border px-1.5 py-1 transition ${
                secili
                    ? 'border-blue-400 bg-blue-50/40'
                    : 'border-slate-200 bg-white hover:border-blue-300 hover:bg-slate-50'
            } ${snapshot.isDragging ? 'shadow-2xl ring-2 ring-blue-400' : ''}`}
        >
            {!readonly && (
                <div
                    {...provided.dragHandleProps}
                    title="Sürükle-bırak ile sırala"
                    style={{ touchAction: 'none' }}
                    className="flex h-5 w-3 cursor-grab items-center justify-center text-slate-300 hover:text-slate-600 active:cursor-grabbing"
                >
                    <GripVertical className="h-3 w-3" />
                </div>
            )}
            {!readonly && (
                /* Seçim — listelerdeki gibi şık: küçük toggle (ham checkbox değil) */
                <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); onSeciliToggle(); }}
                    title={secili ? 'Seçimi kaldır' : 'Toplu işlem için seç'}
                    aria-pressed={secili}
                    className="flex-shrink-0"
                >
                    <span
                        className={`relative inline-flex h-4 w-7 items-center rounded-full transition ${
                            secili ? 'bg-blue-600' : 'bg-slate-300 hover:bg-slate-400'
                        }`}
                    >
                        <span
                            className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition ${
                                secili ? 'translate-x-3.5' : 'translate-x-0.5'
                            }`}
                        />
                    </span>
                </button>
            )}
            <button type="button" onClick={onOnizleme} className="flex flex-shrink-0 items-center justify-center" title="Önizle">
                {belge.resim_mi ? (
                    <img src={belge.url} alt="" className="h-6 w-6 rounded object-cover" />
                ) : (
                    <div className={`flex h-6 w-6 items-center justify-center rounded ${renkler.bg} ${renkler.text}`}>
                        <Icon className="h-3.5 w-3.5" />
                    </div>
                )}
            </button>
            <button type="button" onClick={onOnizleme} className="min-w-0 flex-1 text-left">
                <div className="truncate text-[11px] font-medium leading-tight text-slate-800" title={belge.orijinal_ad}>
                    {belge.orijinal_ad}
                </div>
            </button>
            <div className="hidden flex-shrink-0 items-center gap-1.5 text-[10px] text-slate-400 sm:flex">
                <span>{boyutFormat(belge.boyut)}</span>
                <span className="opacity-50">·</span>
                <span>{tarihFormat(belge.created_at)}</span>
            </div>
            {/* İndir/Sil sürekli görünür — hover'a bağlı gizlemek dokunmatik cihazda erişilemez kılıyordu */}
            <div className="flex flex-shrink-0 items-center gap-0.5">
                <a href={`/belgeler/${belge.id}/indir/`} title="İndir" className="rounded p-1 text-slate-500 hover:bg-blue-50 hover:text-blue-700">
                    <Download className="h-3.5 w-3.5" />
                </a>
                {!readonly && (
                    <button type="button" onClick={() => onSil(belge)} title="Sil" className="rounded p-1 text-slate-500 hover:bg-rose-50 hover:text-rose-700">
                        <Trash2 className="h-3.5 w-3.5" />
                    </button>
                )}
            </div>
        </div>
    );
}

function OnizlemeModal({ belge, onClose }: { belge: Belge; onClose: () => void }) {
    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center" onClick={onClose}>
            <div className="relative flex h-[calc(100dvh-96px)] w-[calc(100vw-96px)] flex-col overflow-hidden bg-white shadow-2xl" onClick={(e) => e.stopPropagation()}>
                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 px-5 py-3">
                    <div className="min-w-0 flex-1">
                        <div className="truncate text-sm font-semibold text-slate-900">{belge.orijinal_ad}</div>
                        <div className="text-xs text-slate-500">{boyutFormat(belge.boyut)} • {belge.uzanti.toUpperCase()}</div>
                    </div>
                    <div className="flex items-center gap-1">
                        <a href={`/belgeler/${belge.id}/indir/`} className="rounded-md p-2 text-slate-600 hover:bg-blue-50 hover:text-blue-700">
                            <Download className="h-5 w-5" />
                        </a>
                        <button type="button" onClick={onClose} className="rounded-md p-2 text-slate-600 hover:bg-slate-100">
                            <X className="h-5 w-5" />
                        </button>
                    </div>
                </div>
                <div className="min-h-0 flex-1 overflow-auto bg-slate-100">
                    {belge.resim_mi ? (
                        <div className="flex h-full items-center justify-center p-4">
                            <img src={belge.url} alt={belge.orijinal_ad} className="max-h-full max-w-full object-contain" />
                        </div>
                    ) : belge.pdf_mi ? (
                        <iframe src={belge.url} className="h-full w-full border-0" title={belge.orijinal_ad} />
                    ) : (
                        <div className="flex h-full flex-col items-center justify-center gap-4 p-12 text-center">
                            <File className="h-16 w-16 text-slate-400" />
                            <p className="text-sm text-slate-600">Bu dosya tarayıcıda önizlenemez.</p>
                            <a href={`/belgeler/${belge.id}/indir/`} className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white hover:bg-blue-700">
                                <Download className="h-4 w-4" />
                                İndir
                            </a>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

function ikonAl(uzanti: string): typeof File {
    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(uzanti)) return FileImage;
    if (['mp4', 'avi', 'mov', 'mkv'].includes(uzanti)) return FileVideo;
    if (['xls', 'xlsx', 'csv'].includes(uzanti)) return FileSpreadsheet;
    if (['doc', 'docx', 'pdf', 'txt'].includes(uzanti)) return FileText;
    return File;
}

function renkAl(uzanti: string): { bg: string; text: string } {
    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(uzanti)) return { bg: 'bg-emerald-50', text: 'text-emerald-700' };
    if (['mp4', 'avi', 'mov', 'mkv'].includes(uzanti)) return { bg: 'bg-purple-50', text: 'text-purple-700' };
    if (['xls', 'xlsx', 'csv'].includes(uzanti)) return { bg: 'bg-emerald-50', text: 'text-emerald-700' };
    if (uzanti === 'pdf') return { bg: 'bg-rose-50', text: 'text-rose-700' };
    if (['doc', 'docx', 'txt'].includes(uzanti)) return { bg: 'bg-blue-50', text: 'text-blue-700' };
    return { bg: 'bg-slate-100', text: 'text-slate-600' };
}

function boyutFormat(byte: number): string {
    if (byte < 1024) return `${byte} B`;
    if (byte < 1024 * 1024) return `${(byte / 1024).toFixed(1)} KB`;
    return `${(byte / (1024 * 1024)).toFixed(1)} MB`;
}