import AppLayout from '@/Layouts/AppLayout';
import ModulBilgi from '@/Components/ModulBilgi';
import { useYetki } from '@/lib/yetki';
import { Head, router } from '@inertiajs/react';
import { ChevronLeft, ChevronRight, Filter, Plus, Search, X } from 'lucide-react';

const AY_AD = ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'];
import { useEffect, useRef, useState } from 'react';
import RandevuFiltreDrawer from './_FiltreDrawer';
import GorunumToggle from './_GorunumToggle';
import TakvimEmbed, { Randevu, Statu, Tip, TakvimEmbedRef } from './_TakvimEmbed';

interface KullaniciOzet { id: number; name: string; avatar_url_full?: string | null }

interface Props {
    randevular?: Randevu[];
    yil: number;
    ay: number;
    statuler: Statu[];
    tipler: Tip[];
    seciliAtanan?: KullaniciOzet | null;
    seciliAtayan?: KullaniciOzet | null;
    filtreler: {
        arama: string; statu_id: number | number[]; tip_id: number | number[];
        musteri_id?: number | number[]; personel_id?: number | number[];
        atanan_id?: number | number[]; atayan_id?: number | number[];
        baslik?: string; aciklama?: string;
        baslangic: string; bitis: string; pasif: boolean;
    };
}

export default function RandevuTakvim({ randevular, yil, ay, statuler, tipler, seciliAtanan, seciliAtayan, filtreler }: Props) {
    const { can } = useYetki();
    const [aramaMetin, setAramaMetin] = useState(filtreler.arama || '');
    const [statuId, setStatuId] = useState<number[]>(Array.isArray(filtreler.statu_id) ? filtreler.statu_id.map(Number) : (filtreler.statu_id ? [Number(filtreler.statu_id)] : []));
    const [tipId, setTipId]     = useState<number[]>(Array.isArray(filtreler.tip_id) ? filtreler.tip_id.map(Number) : (filtreler.tip_id ? [Number(filtreler.tip_id)] : []));
    const [musteriId, setMusteriId] = useState<number[]>(Array.isArray(filtreler.musteri_id) ? filtreler.musteri_id.map(Number) : (filtreler.musteri_id ? [Number(filtreler.musteri_id)] : []));
    const [personelId, setPersonelId] = useState<number[]>(Array.isArray(filtreler.personel_id) ? filtreler.personel_id.map(Number) : (filtreler.personel_id ? [Number(filtreler.personel_id)] : []));
    const [atananId, setAtananId] = useState<number[]>(Array.isArray(filtreler.atanan_id) ? filtreler.atanan_id.map(Number) : (filtreler.atanan_id ? [Number(filtreler.atanan_id)] : []));
    const [atayanId, setAtayanId] = useState<number[]>(Array.isArray(filtreler.atayan_id) ? filtreler.atayan_id.map(Number) : (filtreler.atayan_id ? [Number(filtreler.atayan_id)] : []));
    const [baslikTxt, setBaslikTxt] = useState(filtreler.baslik || '');
    const [aciklamaTxt, setAciklamaTxt] = useState(filtreler.aciklama || '');
    const [bas, setBas] = useState(filtreler.baslangic || '');
    const [bit, setBit] = useState(filtreler.bitis || '');
    const [drawerAcik, setDrawerAcik] = useState(false);
    const embedRef = useRef<TakvimEmbedRef>(null);

    // Takvim için lokal state — ay geçişi URL'ye yazmadan silent fetch ile değişir
    const [yerelRandevular, setYerelRandevular] = useState<Randevu[] | undefined>(randevular);
    const [yerelYil, setYerelYil] = useState<number>(yil);
    const [yerelAy, setYerelAy] = useState<number>(ay);
    const [takvimYukleniyor, setTakvimYukleniyor] = useState(false);
    useEffect(() => setYerelRandevular(randevular), [randevular]);
    useEffect(() => setYerelYil(yil), [yil]);
    useEffect(() => setYerelAy(ay), [ay]);

    const yenile = (params: Record<string, any>) => {
        router.get('/randevular/takvim/', {
            yil, ay, ...params,
            arama: aramaMetin || undefined,
            statu_id: statuId.length ? statuId : undefined,
            tip_id: tipId.length ? tipId : undefined,
            baslangic: bas || undefined,
            bitis: bit || undefined,
        }, { preserveState: true, replace: true });
    };

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

    const onAyDegistir = async (y: number, a: number) => {
        setYerelYil(y); setYerelAy(a);
        setTakvimYukleniyor(true);
        const qs = new URLSearchParams({
            yil: String(y), ay: String(a),
            ...(aramaMetin ? { arama: aramaMetin } : {}),
            ...(statuId.length ? Object.fromEntries(statuId.map((s, i) => [`statu_id[${i}]`, String(s)])) : {}),
            ...(tipId.length ? Object.fromEntries(tipId.map((s, i) => [`tip_id[${i}]`, String(s)])) : {}),
            ...(bas ? { baslangic: bas } : {}),
            ...(bit ? { bitis: bit } : {}),
        }).toString();
        try {
            const r = await fetch(`/api/randevu/takvim-veri?${qs}`, {
                headers: { Accept: 'application/json' }, credentials: 'same-origin',
            });
            if (!r.ok) {
                router.reload({ only: ['randevular'] });
                return;
            }
            const ct = r.headers.get('content-type') || '';
            if (!ct.includes('application/json')) {
                router.reload({ only: ['randevular'] });
                return;
            }
            const d = await r.json();
            setYerelRandevular(d.randevular ?? []);
        } catch (e) {
            router.reload({ only: ['randevular'] });
        } finally {
            setTakvimYukleniyor(false);
        }
    };

    const aktifFiltreSayisi =
        (statuId.length > 0 ? 1 : 0) + (tipId.length > 0 ? 1 : 0) +
        (musteriId.length > 0 ? 1 : 0) + (personelId.length > 0 ? 1 : 0) +
        (atananId.length > 0 ? 1 : 0) + (atayanId.length > 0 ? 1 : 0) +
        (baslikTxt ? 1 : 0) + (aciklamaTxt ? 1 : 0) +
        (bas ? 1 : 0) + (bit ? 1 : 0);
    const filtreTemizle = () => { setStatuId([]); setTipId([]); setBas(''); setBit(''); };

    const oncekiAy = () => {
        const m = yerelAy === 1 ? 12 : yerelAy - 1;
        const y = yerelAy === 1 ? yerelYil - 1 : yerelYil;
        onAyDegistir(y, m);
    };
    const sonrakiAy = () => {
        const m = yerelAy === 12 ? 1 : yerelAy + 1;
        const y = yerelAy === 12 ? yerelYil + 1 : yerelYil;
        onAyDegistir(y, m);
    };
    const buAy = () => {
        const t = new Date();
        onAyDegistir(t.getFullYear(), t.getMonth() + 1);
    };

    return (
        <AppLayout title="Randevular — Takvim" actionsNowrap actions={
            <>
                <button type="button" onClick={() => setDrawerAcik(true)}
                    title={`Filtrele${aktifFiltreSayisi > 0 ? ` (${aktifFiltreSayisi} aktif)` : ''}`}
                    className="relative inline-flex h-10 w-10 flex-shrink-0 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="randevu" />
                <div className="hidden">
                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                    <input type="text" value={aramaMetin} onChange={(e) => setAramaMetin(e.target.value)}
                        placeholder="Ara..." className="h-10 w-full rounded-lg border-slate-300 pl-9 text-sm focus:border-blue-500 focus:ring-blue-500" />
                </div>
                {/* Ay nav — arama yanında */}
                <button type="button" onClick={oncekiAy} title="Önceki ay"
                    className="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 hover:bg-slate-50">
                    <ChevronLeft className="h-4 w-4" />
                </button>
                <div className="min-w-[140px] flex-shrink-0 px-2 text-center text-sm font-semibold text-slate-900">
                    {AY_AD[yerelAy - 1]} {yerelYil}
                </div>
                <button type="button" onClick={sonrakiAy} title="Sonraki ay"
                    className="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 hover:bg-slate-50">
                    <ChevronRight className="h-4 w-4" />
                </button>
                <button type="button" onClick={buAy} title="Bugün"
                    className="inline-flex h-10 flex-shrink-0 items-center rounded-lg border border-slate-300 bg-white px-3 text-xs font-medium text-slate-700 hover:bg-slate-50">
                    Bugün
                </button>
                <div className="flex-1" />
                <div className="flex-shrink-0"><GorunumToggle aktif="takvim" /></div>
                {can('randevu.ekle') && (
                    <button type="button" onClick={() => embedRef.current?.yeniRandevuAc()} title="Yeni Randevu"
                        className="inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm hover:bg-blue-700">
                        <Plus className="h-4 w-4" />
                    </button>
                )}
            </>
        }>
            <Head title="Randevu Takvimi" />

            <RandevuFiltreDrawer
                open={drawerAcik}
                onClose={() => setDrawerAcik(false)}
                onApply={() => setDrawerAcik(false)}
                filtre={{
                    statuId, tipId, musteriId, personelId, atananId, atayanId,
                    baslik: baslikTxt, aciklama: aciklamaTxt,
                    bas, bit,
                }}
                setFiltre={(f) => {
                    if (f.statuId !== undefined) setStatuId(f.statuId);
                    if (f.tipId !== undefined) setTipId(f.tipId);
                    if (f.musteriId !== undefined) setMusteriId(f.musteriId);
                    if (f.personelId !== undefined) setPersonelId(f.personelId);
                    if (f.atananId !== undefined) setAtananId(f.atananId);
                    if (f.atayanId !== undefined) setAtayanId(f.atayanId);
                    if (f.baslik !== undefined) setBaslikTxt(f.baslik);
                    if (f.aciklama !== undefined) setAciklamaTxt(f.aciklama);
                    if (f.bas !== undefined) setBas(f.bas);
                    if (f.bit !== undefined) setBit(f.bit);
                }}
                statuler={statuler}
                tipler={tipler}
                seciliAtanan={seciliAtanan}
                seciliAtayan={seciliAtayan}
                arama={aramaMetin}
                onAramaChange={setAramaMetin}
            />

            {/* TAKVİM — kalan yüksekliği tam doldurur, iç scroll yok */}
            <div className="-m-4 flex h-[calc(100dvh-130px)] flex-col overflow-hidden bg-white sm:-m-6">
                <TakvimEmbed
                    ref={embedRef}
                    randevular={yerelRandevular}
                    yil={yerelYil}
                    ay={yerelAy}
                    statuler={statuler}
                    tipler={tipler}
                    onAyDegistir={onAyDegistir}
                    onYenile={() => onAyDegistir(yerelYil, yerelAy)}
                    yukleniyor={takvimYukleniyor || !yerelRandevular}
                    navGizle
                    sade
                    dolu
                    urlYeniDinle
                />
            </div>
        </AppLayout>
    );
}