import AsyncSelect from '@/Components/AsyncSelect';
import ModulBilgi from '@/Components/ModulBilgi';
import { useSilVeyaPasif } from '@/Components/ConfirmDialog';
import DateTimeRangePicker from '@/Components/DateTimeRangePicker';
import FilterDrawer, { FilterSection } from '@/Components/FilterDrawer';
import Select from '@/Components/Select';
import AppLayout from '@/Layouts/AppLayout';
import { useBoardAutoScroll } from '@/lib/useBoardAutoScroll';
import { tarihFormat } from '@/lib/format';
import { useYetki } from '@/lib/yetki';
import { Head, router } from '@inertiajs/react';
import { Briefcase, Calendar, CircleDot, Contact, Filter, Plus, RefreshCw, Search, Trash2, User as UserIcon, X } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
import YenilemeFormModal from './_FormModal';
import GorunumToggle from './_GorunumToggle';

interface Durum { id: number; ad: string; renk: string; tamamlandi_mi?: boolean }
interface Tur { id: number; ad: string; renk: string }
interface KdvOraniOpt { id: number; oran: number; ad: string; varsayilan: boolean }
interface ParaBirimiOzet { kod: string; ad: string; sembol: string }
interface Kayit {
    id: number; baslik?: string | null;
    musteri?: { id: number; unvan: string } | null;
    durum?: { id: number; ad: string; renk: string; tamamlandi_mi?: boolean } | null;
    turler: { id: number; ad: string; renk: string }[];
    kayit_tarihi?: string; yenileme_tarihi?: string;
    takip_ay: number;
    // Tutar kayıtta tutulmuyor — satırlardan hesaplanır (varsayılan para birimine çevrilmiş)
    satir_toplam?: number;
    aktif: boolean;
}

interface Props {
    durumlar: Durum[];
    turler: Tur[];
    kdvOranlari: KdvOraniOpt[];
    kayitlar?: Kayit[];
    paraBirimi: ParaBirimiOzet;
    // Para birimi filtresi sabit liste değil — Para Birimleri ekranından yönetilir
    paraBirimleri?: ParaBirimiOzet[];
    filtreler: {
        arama?: string;
        durum_id?: number | number[];
        tur_id?: number | number[];
        musteri_id?: number | number[];
        kdv_orani_id?: number | number[];
        para_birimi?: string | string[];
        kayit_dan?: string; kayit_a?: string;
        yenileme_dan?: string; yenileme_a?: string;
    };
}

// YenilemeKart artık Draggable child render prop ile sarmalıdır — dnd-kit useSortable kaldırıldı.

function YenilemeKartIcerik({ k, can, sil, paraSembol }: { k: Kayit; can: (y: string) => boolean; sil: (e: React.MouseEvent, k: Kayit) => void; paraSembol: string }) {
    return (
        <>
            <div className="mb-1 flex items-start justify-between gap-2">
                <div className="min-w-0 flex-1 truncate text-sm font-medium leading-tight text-slate-900 group-hover:text-blue-700" title={k.baslik ?? ''}>
                    {k.baslik ?? '—'}
                </div>
                {can('yenileme.sil') && (
                    <button type="button"
                        onPointerDown={(e) => e.stopPropagation()}
                        onClick={(e) => { e.stopPropagation(); sil(e, k); }}
                        title="Sil"
                        className="flex-shrink-0 rounded p-0.5 text-slate-300 opacity-0 transition hover:bg-rose-50 hover:text-rose-600 group-hover:opacity-100">
                        <Trash2 className="h-3.5 w-3.5" />
                    </button>
                )}
            </div>
            {k.musteri && (
                <div className="truncate text-xs text-slate-600" title={k.musteri.unvan}>{k.musteri.unvan}</div>
            )}
            <div className="mt-2 flex flex-wrap items-center gap-1.5">
                {k.turler.slice(0, 3).map((t) => (
                    <span key={t.id} className="rounded-full px-2 py-0.5 text-[10px] font-medium"
                        style={{ backgroundColor: `${t.renk}15`, color: t.renk }}>
                        {t.ad}
                    </span>
                ))}
                {k.turler.length > 3 && (
                    <span className="text-[10px] text-slate-400">+{k.turler.length - 3}</span>
                )}
                {k.yenileme_tarihi && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">
                        <Calendar className="h-3 w-3" />{tarihFormat(k.yenileme_tarihi)}
                    </span>
                )}
                {typeof k.satir_toplam === 'number' && k.satir_toplam > 0 && (
                    <span className="ml-auto font-mono text-[11px] font-semibold text-emerald-700">
                        {k.satir_toplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol}
                    </span>
                )}
            </div>
        </>
    );
}

// DroppableKolon kaldırıldı — @hello-pangea/dnd <Droppable> kullanılıyor inline.

export default function YenilemeBoard({ durumlar, turler, kdvOranlari, kayitlar, paraBirimi, paraBirimleri, filtreler }: Props) {
    const { can } = useYetki();
    const [kayitModal, setKayitModal] = useState<number | 'yeni' | null>(null);
    const [yeniVarsayilanlar, setYeniVarsayilanlar] = useState<{ durum_id?: number } | undefined>(undefined);
    const yeniKayitAc = (durumId?: number) => {
        setYeniVarsayilanlar(durumId ? { durum_id: durumId } : undefined);
        setKayitModal('yeni');
    };

    // Satır toplamları varsayılan para birimine çevrilmiş gelir — sembol tek kaynaktan
    const paraSembol = paraBirimi?.sembol || paraBirimi?.kod || '₺';

    // Filtre seçenekleri DB'den (aktif para birimleri) — boşsa bölüm hiç gösterilmez
    const pbSecenekleri = (paraBirimleri ?? []).map((pb) => ({
        value: pb.kod,
        label: pb.sembol ? `${pb.kod} (${pb.sembol})` : pb.kod,
        description: pb.ad || undefined,
    }));

    const arr = (v: any) => Array.isArray(v) ? v.map(Number) : (v ? [Number(v)] : []);
    const arrS = (v: any) => Array.isArray(v) ? v.map(String) : (v ? [String(v)] : []);

    const [arama, setArama] = useState(filtreler.arama || '');
    const [durumId, setDurumId] = useState<number[]>(arr(filtreler.durum_id));
    const [turId, setTurId] = useState<number[]>(arr(filtreler.tur_id));
    const [musteriId, setMusteriId] = useState<number[]>(arr(filtreler.musteri_id));
    const [kdvOraniId, setKdvOraniId] = useState<number[]>(arr(filtreler.kdv_orani_id));
    const [paraBirimiFiltre, setParaBirimiFiltre] = useState<string[]>(arrS(filtreler.para_birimi));
    const [kayitDan, setKayitDan] = useState(filtreler.kayit_dan || '');
    const [kayitA, setKayitA] = useState(filtreler.kayit_a || '');
    const [yenilemeDan, setYenilemeDan] = useState(filtreler.yenileme_dan || '');
    const [yenilemeA, setYenilemeA] = useState(filtreler.yenileme_a || '');
    const [drawerAcik, setDrawerAcik] = useState(false);

    const filtreParam = () => ({
        arama: arama || undefined,
        durum_id: durumId.length ? durumId : undefined,
        tur_id: turId.length ? turId : undefined,
        musteri_id: musteriId.length ? musteriId : undefined,
        kdv_orani_id: kdvOraniId.length ? kdvOraniId : undefined,
        para_birimi: paraBirimiFiltre.length ? paraBirimiFiltre : undefined,
        kayit_dan: kayitDan || undefined,
        kayit_a: kayitA || undefined,
        yenileme_dan: yenilemeDan || undefined,
        yenileme_a: yenilemeA || undefined,
    });

    const aktifFiltreSayisi =
        (arama ? 1 : 0) +
        (durumId.length > 0 ? 1 : 0) + (turId.length > 0 ? 1 : 0) +
        (musteriId.length > 0 ? 1 : 0) + (kdvOraniId.length > 0 ? 1 : 0) +
        (paraBirimiFiltre.length > 0 ? 1 : 0) +
        (kayitDan || kayitA ? 1 : 0) + (yenilemeDan || yenilemeA ? 1 : 0);

    const uygula = () => { router.get('/yenilemeler/board/', filtreParam(), { preserveState: true, replace: true }); setDrawerAcik(false); };
    const temizle = () => {
        setArama(''); setDurumId([]); setTurId([]); setMusteriId([]); setKdvOraniId([]); setParaBirimiFiltre([]);
        setKayitDan(''); setKayitA(''); setYenilemeDan(''); setYenilemeA('');
        router.get('/yenilemeler/board/'); setDrawerAcik(false);
    };

    const ilkRender = useRef(true);
    useEffect(() => {
        if (ilkRender.current) { ilkRender.current = false; return; }
        const t = setTimeout(() => uygula(), 350);
        return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [arama]);

    const [yerel, setYerel] = useState<Kayit[]>(kayitlar ?? []);
    // Sürükleme aktifken kayitlar prop güncellenirse (örn dashboard polling) yerel state'i ezme
    useEffect(() => {
        if ((window as any).__dragAktif) return;
        setYerel(kayitlar ?? []);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [kayitlar]);
    const yukleniyor = !kayitlar;

    const boardRef = useRef<HTMLDivElement>(null);
    useBoardAutoScroll(boardRef);

    const SAYFA_BOYUT = 20;
    const [gosterilen, setGosterilen] = useState<Record<number, number>>({});
    const limit = (did: number) => gosterilen[did] ?? SAYFA_BOYUT;
    const dahaFazlaGoster = (did: number) => setGosterilen((p) => ({ ...p, [did]: (p[did] ?? SAYFA_BOYUT) + SAYFA_BOYUT }));

    const silVeyaPasif = useSilVeyaPasif();
    const sil = async (e: React.MouseEvent, k: Kayit) => {
        e.stopPropagation();
        const secim = await silVeyaPasif({
            baslik: 'Yenileme Kaydını Sil',
            mesaj: <>'<strong>{k.baslik ?? k.musteri?.unvan ?? 'Kayıt'}</strong>' için ne yapmak istersin?</>,
            pasifEdilebilir: can('yenileme.sil'),
            silEdilebilir: can('yenileme.sil'),
        });
        if (secim === 'iptal') return;
        setYerel((p) => secim === 'sil' ? p.filter((x) => x.id !== k.id) : p.map((x) => x.id === k.id ? { ...x, aktif: false } : x));
        const csrf = (document.cookie.match(/XSRF-TOKEN=([^;]+)/) || [])[1];
        fetch(`/yenilemeler/${k.id}/?mod=${secim}`, {
            method: 'DELETE', credentials: 'same-origin',
            headers: { Accept: 'application/json', 'X-XSRF-TOKEN': csrf ? decodeURIComponent(csrf) : '', 'X-Requested-With': 'XMLHttpRequest' },
        }).catch(() => setYerel(kayitlar ?? []));
    };

    // @hello-pangea/dnd — tek handler, cross-column otomatik yer açma
    const handleDragStart = () => {
        (window as any).__dragAktif = true;
    };

    const handleDragEnd = async (result: DropResult) => {
        (window as any).__dragAktif = false;
        const { source, destination, draggableId } = result;
        if (!destination) return;
        if (source.droppableId === destination.droppableId && source.index === destination.index) return;

        const kartId = Number(draggableId);
        const k = yerel.find((x) => x.id === kartId);
        if (!k) return;
        const hedefDurumId = Number(destination.droppableId);
        const yeniDurum = durumlar.find((d) => d.id === hedefDurumId);
        if (!yeniDurum) return;

        // Optimistic state update — hem cross-column hem aynı kolon sıralama
        const yeniListe = [...yerel];
        const kartIdx = yeniListe.findIndex((x) => x.id === kartId);
        if (kartIdx === -1) return;
        const [tasinan] = yeniListe.splice(kartIdx, 1);
        tasinan.durum = yeniDurum;

        // Hedef kolondaki diğer kartlar arasında destination.index pozisyonuna yerleştir
        const hedefKolondakiler = yeniListe.filter((x) => x.durum?.id === hedefDurumId);
        const digerler = yeniListe.filter((x) => x.durum?.id !== hedefDurumId);
        hedefKolondakiler.splice(destination.index, 0, tasinan);
        const yeniState = [...digerler, ...hedefKolondakiler];
        setYerel(yeniState);

        const csrf = (document.cookie.match(/XSRF-TOKEN=([^;]+)/) || [])[1];
        const csrfToken = csrf ? decodeURIComponent(csrf) : '';

        // Cross-column: durum güncelle
        if (source.droppableId !== destination.droppableId) {
            try {
                await fetch(`/yenilemeler/${kartId}/durum/`, {
                    method: 'POST', credentials: 'same-origin',
                    headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ durum_id: hedefDurumId }),
                });
            } catch { router.reload({ only: ['kayitlar'] }); }
        }

        // Aynı veya farklı kolonda hedef kolon sıralaması güncelle
        const siraIds = hedefKolondakiler.map((x) => x.id);
        fetch('/yenilemeler/sirala/', {
            method: 'POST', credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify({ sira: siraIds }),
        }).catch(() => setYerel(kayitlar ?? []));
    };

    useEffect(() => {
        if (typeof window === 'undefined') return;
        const sp = new URLSearchParams(window.location.search);
        if (sp.get('yeni') === '1') {
            setKayitModal('yeni');
            sp.delete('yeni');
            window.history.replaceState({}, '', window.location.pathname + (sp.toString() ? `?${sp}` : ''));
        }
    }, []);

    return (
        <AppLayout title="Yenileme Takibi" actions={
            <>
                <button type="button" onClick={() => setDrawerAcik(true)}
                    title={`Filtrele${aktifFiltreSayisi > 0 ? ` (${aktifFiltreSayisi} aktif)` : ''}`}
                    className="relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700">
                    <Filter className="h-4 w-4" />
                    {aktifFiltreSayisi > 0 && (
                        <span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-blue-600 px-1.5 text-[11px] font-bold text-white ring-2 ring-white">
                            {aktifFiltreSayisi}
                        </span>
                    )}
                </button>
                <ModulBilgi konu="yenileme" />
                <div className="flex-1" />
                <GorunumToggle aktif="board" />
                {can('yenileme.ekle') && (
                    <button type="button" title="Yeni Yenileme" onClick={() => setKayitModal('yeni')}
                        className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm transition hover:bg-blue-700">
                        <Plus className="h-4 w-4" />
                    </button>
                )}
            </>
        }>
            <Head title="Yenileme Takibi — Board" />

            <FilterDrawer open={drawerAcik} onClose={() => setDrawerAcik(false)}
                onApply={uygula} onClear={temizle} aktifFiltreSayisi={aktifFiltreSayisi}
                mobilArama={{ value: arama, onChange: setArama, placeholder: 'Ara — kod/müşteri/başlık...' }}>
                <FilterSection baslik="Durum" ikon={CircleDot}>
                    <Select multiple value={durumId} onChange={(v) => setDurumId((v as (string|number)[]).map(Number))}
                        options={durumlar.map((d) => ({ value: d.id, label: d.ad, icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: d.renk }} /> }))}
                        placeholder="Durum..." />
                </FilterSection>
                <FilterSection baslik="Yenileme Türü" ikon={RefreshCw}>
                    <Select multiple value={turId} onChange={(v) => setTurId((v as (string|number)[]).map(Number))}
                        options={turler.map((t) => ({ value: t.id, label: t.ad, icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: t.renk }} /> }))}
                        placeholder="Tür..." searchable />
                </FilterSection>
                <FilterSection baslik="KDV Oranı" ikon={CircleDot}>
                    <Select multiple value={kdvOraniId} onChange={(v) => setKdvOraniId((v as (string|number)[]).map(Number))}
                        options={kdvOranlari.map((k) => ({ value: k.id, label: k.ad, description: k.varsayilan ? 'Varsayılan' : undefined }))}
                        placeholder="KDV oranı..." searchable />
                </FilterSection>
                <FilterSection baslik="Müşteri" ikon={Contact}>
                    <AsyncSelect multiple endpoint="/api/ara/musteriler" value={musteriId}
                        onChange={(v) => setMusteriId((v as (string|number)[]).map(Number))}
                        cozumleEndpoint="/api/ara/cozumle" cozumleTip="musteri"
                        placeholder="Müşteri ara..." />
                </FilterSection>
                <FilterSection baslik="Kayıt Tarihi" ikon={Calendar}>
                    <DateTimeRangePicker baslangic={kayitDan} onBaslangicChange={setKayitDan}
                        bitis={kayitA} onBitisChange={setKayitA} placeholder="Kayıt Tarihi Aralığı" />
                </FilterSection>
                <FilterSection baslik="Yenileme Tarihi" ikon={Calendar}>
                    <DateTimeRangePicker baslangic={yenilemeDan} onBaslangicChange={setYenilemeDan}
                        bitis={yenilemeA} onBitisChange={setYenilemeA} placeholder="Yenileme Tarihi Aralığı" />
                </FilterSection>
                {/* Para birimi artık satır bazlı — filtre satırlar üzerinden çalışır */}
                {pbSecenekleri.length > 0 && (
                    <FilterSection baslik="Para Birimi" ikon={Briefcase}>
                        <Select multiple value={paraBirimiFiltre}
                            onChange={(v) => setParaBirimiFiltre((v as (string|number)[]).map(String))}
                            options={pbSecenekleri}
                            placeholder="Para birimi seçiniz..." searchable />
                    </FilterSection>
                )}
            </FilterDrawer>

            <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
                {/* BOARD — sayfaya sabit, kolonlar arasında tek dikey çizgi, kolon içi scroll */}
                <div ref={boardRef} className="-m-4 flex h-[calc(100dvh-130px)] overflow-x-auto overflow-y-hidden bg-white sm:-m-6">
                    {durumlar.map((d) => {
                        const kolonKayitlariTumu = yerel.filter((k) => k.durum?.id === d.id);
                        const kolonKayitlari = kolonKayitlariTumu.slice(0, limit(d.id));
                        const kalan = kolonKayitlariTumu.length - kolonKayitlari.length;
                        return (
                            <div key={d.id}
                                className={`flex min-w-[220px] flex-shrink-0 flex-col border-r border-slate-200 last:border-r-0 ${durumlar.length < 5 ? 'flex-1' : 'w-[calc(100%/5)]'}`}>
                                <div className="flex flex-shrink-0 items-center gap-2 border-b border-slate-200 px-3 py-2.5"
                                    style={{ backgroundColor: `${d.renk}10` }}>
                                    <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: d.renk }} />
                                    <div className="flex-1 text-sm font-semibold text-slate-900">{d.ad}</div>
                                    <span className="rounded-full bg-white px-2 py-0.5 text-xs font-semibold text-slate-700 shadow-sm">
                                        {kolonKayitlariTumu.length}
                                    </span>
                                </div>
                                <Droppable droppableId={String(d.id)}>
                                    {(provided) => (
                                        <div ref={provided.innerRef} {...provided.droppableProps}
                                            onScroll={(e: React.UIEvent<HTMLDivElement>) => {
                                                const el = e.currentTarget;
                                                if (kalan > 0 && el.scrollTop + el.clientHeight >= el.scrollHeight - 120) {
                                                    dahaFazlaGoster(d.id);
                                                }
                                            }}
                                            className="flex min-h-0 flex-1 flex-col space-y-2 overflow-y-auto p-2">
                                            {yukleniyor && (
                                                <>
                                                    {Array.from({ length: 3 }).map((_, i) => (
                                                        <div key={`skl-${d.id}-${i}`} className="h-20 animate-pulse rounded-lg bg-slate-100" />
                                                    ))}
                                                </>
                                            )}
                                            {!yukleniyor && !kolonKayitlari.length && (
                                                <div className="rounded-lg border border-dashed border-slate-200 py-4 text-center text-xs text-slate-400">
                                                    Kayıt yok
                                                </div>
                                            )}
                                            {kolonKayitlari.map((k, i) => (
                                                <Draggable key={k.id} draggableId={String(k.id)} index={i}>
                                                    {(p, snap) => (
                                                        <div ref={p.innerRef} {...p.draggableProps} {...p.dragHandleProps}
                                                            onClick={(e) => {
                                                                if (snap.isDragging) return;
                                                                if ((e.target as HTMLElement).closest('button')) return;
                                                                setKayitModal(k.id);
                                                            }}
                                                            className={`group relative cursor-grab rounded-lg border border-slate-200 bg-white p-3 shadow-sm transition hover:shadow-md active:cursor-grabbing ${snap.isDragging ? 'ring-2 ring-blue-400 shadow-2xl' : ''}`}>
                                                            <YenilemeKartIcerik k={k} can={can} sil={sil} paraSembol={paraSembol} />
                                                        </div>
                                                    )}
                                                </Draggable>
                                            ))}
                                            {provided.placeholder}
                                            {kalan > 0 && (
                                                <button type="button" onClick={() => dahaFazlaGoster(d.id)}
                                                    className="flex items-center justify-center gap-1.5 rounded-md py-2 text-xs text-slate-500 hover:bg-slate-50">
                                                    +{kalan} daha
                                                </button>
                                            )}
                                        </div>
                                    )}
                                </Droppable>
                                {can('yenileme.ekle') && (
                                    <button type="button"
                                        onClick={() => yeniKayitAc(d.id)}
                                        className="flex flex-shrink-0 items-center justify-center gap-1.5 border-t border-slate-200 bg-slate-50/60 py-2.5 text-xs font-medium text-slate-500 transition hover:bg-blue-50 hover:text-blue-700">
                                        <Plus className="h-3.5 w-3.5" /> Yenileme ekle
                                    </button>
                                )}
                            </div>
                        );
                    })}
                </div>
            </DragDropContext>

            <YenilemeFormModal mod={kayitModal} yeniVarsayilanlar={yeniVarsayilanlar}
                onClose={() => { setKayitModal(null); setYeniVarsayilanlar(undefined); }}
                onSuccess={() => router.reload({ only: ['kayitlar'] })} />
        </AppLayout>
    );
}