import Toggle from '@/Components/Toggle';
import { Toaster } from '@/Components/Toaster';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { router, usePage } from '@inertiajs/react';
import { Building2, Copy, Loader2, X } from 'lucide-react';
import { Fragment, useMemo, useState } from 'react';

interface Firma { id: number; ad: string }

export interface KopyalaModalProps {
    /** Kopyalanacak cari id'leri */
    cariIds: number[];
    /** Modal açık mı (cariIds boş değilse açık sayılır) */
    open: boolean;
    onClose: () => void;
    /** Başarı sonrası dış komponente sinyal — örn. listeyi yenile */
    onBasari?: () => void;
}

const csrf = (): string => {
    const m = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
    return m ? decodeURIComponent(m[1]) : '';
};

export default function CariKopyalaModal({ cariIds, open, onClose, onBasari }: KopyalaModalProps) {
    const sayfa = usePage<any>().props;
    const aktifFirmaId: number | null = sayfa?.aktif_firma?.id ?? null;
    const firmalar: Firma[] = useMemo(() => (sayfa?.firmalar ?? []).map((f: any) => ({ id: f.id, ad: f.ad })), [sayfa?.firmalar]);

    // Kaynak firma dışındaki firmalar gösterilsin
    const hedefAdaylari = useMemo(
        () => firmalar.filter((f) => f.id !== aktifFirmaId),
        [firmalar, aktifFirmaId],
    );

    const [secili, setSecili] = useState<Set<number>>(new Set());
    const [yukleniyor, setYukleniyor] = useState(false);

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

    const gonder = async () => {
        if (secili.size === 0) return;
        setYukleniyor(true);
        try {
            const r = await fetch('/cariler/kopyala/', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                    'X-XSRF-TOKEN': csrf(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    cari_ids: cariIds,
                    hedef_firma_ids: Array.from(secili),
                }),
            });
            if (!r.ok) {
                Toaster.hata('Kopyalama başarısız (HTTP ' + r.status + ')');
                return;
            }
            const d = await r.json();
            Toaster.basari(d.mesaj ?? 'Kopyalandı');
            router.reload({ only: ['cariler'] });
            onBasari?.();
            onClose();
            setSecili(new Set());
        } catch (e: any) {
            Toaster.hata('Kopyalama sırasında hata: ' + (e?.message ?? 'bilinmiyor'));
        } finally {
            setYukleniyor(false);
        }
    };

    if (!open) return null;

    return (
        <Transition show appear as={Fragment}>
            <Dialog onClose={onClose} className="relative z-[95]">
                <TransitionChild as={Fragment}
                    enter="ease-out duration-200" enterFrom="opacity-0" enterTo="opacity-100"
                    leave="ease-in duration-150" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" />
                </TransitionChild>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-start justify-center p-4">
                        <TransitionChild as={Fragment}
                            enter="ease-out duration-200"
                            enterFrom="opacity-0 scale-95 translate-y-4"
                            enterTo="opacity-100 scale-100 translate-y-0"
                            leave="ease-in duration-150"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95">
                            <DialogPanel className="my-8 w-full max-w-lg overflow-hidden bg-white shadow-2xl">
                                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2">
                                    <DialogTitle className="flex min-w-0 items-center gap-1.5 text-xs font-semibold text-slate-900 sm:text-sm">
                                        <Copy className="h-4 w-4 flex-shrink-0 text-blue-600" />
                                        <span className="truncate">Cari Kopyala <span className="font-normal text-slate-500">· {cariIds.length} cari</span></span>
                                    </DialogTitle>
                                    <button type="button" onClick={onClose}
                                        className="rounded-md p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-700">
                                        <X className="h-4 w-4" />
                                    </button>
                                </div>

                                <div className="space-y-3 p-5">
                                    <p className="text-xs text-slate-600">
                                        Seçili cari(ler) aşağıdaki <strong>hedef firmalara</strong> kopyalanacak. Hareketler/borç-alacak
                                        kopyalanmaz; sadece temel kimlik bilgileri (unvan, vergi, adres, iletişim, kategori) taşınır.
                                        Hedef firmada kategori adı yoksa otomatik oluşturulur.
                                    </p>

                                    {hedefAdaylari.length === 0 ? (
                                        <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
                                            Kopyalanabilecek başka firma yok. En az 2 firmaya yetkili olmanız gerekir.
                                        </div>
                                    ) : (
                                        <div className="divide-y divide-slate-200 rounded-lg border border-slate-200 bg-white">
                                            {hedefAdaylari.map((f) => (
                                                <div key={f.id}
                                                    className={`flex items-center justify-between gap-3 px-3 py-2 transition ${secili.has(f.id) ? 'bg-blue-50/60' : 'hover:bg-slate-50'}`}>
                                                    <div className="flex min-w-0 flex-1 items-center gap-2">
                                                        <Building2 className="h-4 w-4 flex-shrink-0 text-slate-400" />
                                                        <span className="truncate text-sm font-medium text-slate-800">{f.ad}</span>
                                                    </div>
                                                    <Toggle checked={secili.has(f.id)} onChange={() => toggle(f.id)} boyut="sm" />
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>

                                <div className="flex items-center justify-between gap-2 border-t border-slate-200 bg-slate-50/60 px-5 py-3">
                                    <div className="text-xs text-slate-500">
                                        {secili.size > 0 && <>Toplam <strong>{cariIds.length * secili.size}</strong> yeni kayıt oluşacak.</>}
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <button type="button" onClick={onClose}
                                            className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                            İptal
                                        </button>
                                        <button type="button" onClick={gonder}
                                            disabled={yukleniyor || secili.size === 0 || hedefAdaylari.length === 0}
                                            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50">
                                            {yukleniyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Copy className="h-4 w-4" />}
                                            Kopyala
                                        </button>
                                    </div>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
}