import Modal from '@/Components/Modal';
import { Toaster } from '@/Components/Toaster';
import Toggle from '@/Components/Toggle';
import { router } from '@inertiajs/react';
import { Loader2, Mail, Plus, Send, Trash2, X } from 'lucide-react';
import { FormEvent, useCallback, useEffect, useState } from 'react';

interface Kayit {
    id: number;
    sozlesme_kod: string;
    sozlesme_ad: string;
    imza_ad_soyad: string | null;
}

interface Props {
    kayit: Kayit | null;
    musteri: { id: number; unvan: string };
    onClose: () => void;
}

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

/**
 * Onaylanmış sözleşmeyi müşteriye (ve istenirse ek adreslere) PDF ekli
 * e-posta ile iletir. Sözleşme SNAPSHOT'ına dokunulmaz — yalnızca gönderim yapılır
 * ve müşteri log ekranına "İşlem" tipinde kayıt düşer.
 */
export default function SozlesmeIletModal({ kayit, musteri, onClose }: Props) {
    const acik = kayit !== null;

    const [musteriyeGonder, setMusteriyeGonder] = useState(true);
    const [ekMailler, setEkMailler] = useState<string[]>([]);
    const [yeniMail, setYeniMail] = useState('');
    const [gonderiliyor, setGonderiliyor] = useState(false);

    const sifirla = useCallback(() => {
        setMusteriyeGonder(true);
        setEkMailler([]);
        setYeniMail('');
    }, []);

    useEffect(() => { if (!acik) sifirla(); }, [acik, sifirla]);

    const kapat = () => { sifirla(); onClose(); };

    const mailEkle = () => {
        const m = yeniMail.trim();
        if (!m) return;
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(m)) {
            Toaster.uyari('Geçerli bir e-posta adresi girin.');
            return;
        }
        if (ekMailler.includes(m)) { setYeniMail(''); return; }
        setEkMailler((p) => [...p, m]);
        setYeniMail('');
    };

    const mailSil = (m: string) => setEkMailler((p) => p.filter((x) => x !== m));

    const gonder = async (e: FormEvent | null) => {
        if (e) e.preventDefault();
        if (gonderiliyor || !kayit) return;

        // Müşteriye gönderim kapalıysa en az bir ek adres şart — aksi halde alıcı yok.
        if (!musteriyeGonder && ekMailler.length === 0) {
            Toaster.uyari('En az bir alıcı seçin: müşteriye gönderin veya e-posta adresi ekleyin.');
            return;
        }

        setGonderiliyor(true);
        try {
            const r = await fetch(`/musteriler/${musteri.id}/sozlesmeler/${kayit.id}/ilet/`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': csrf(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    musteriye_gonder: musteriyeGonder,
                    ek_mailler: ekMailler,
                }),
            });

            const d = await r.json().catch(() => ({}));

            if (!r.ok || d?.ok === false) {
                Toaster.hata(d?.mesaj || 'Sözleşme iletilemedi.');
                return;
            }

            Toaster.basari(d?.mesaj || 'Sözleşme iletildi.');
            router.reload({ only: ['sozlesmeler'] });
            kapat();
        } catch {
            Toaster.hata('Beklenmeyen bir hata oluştu.');
        } finally {
            setGonderiliyor(false);
        }
    };

    return (
        <Modal show={acik} onClose={kapat} maxWidth="lg">
            <form onSubmit={gonder}>
                <div className="flex items-center justify-between border-b border-slate-200 bg-white px-5 py-3">
                    <div className="flex min-w-0 items-center gap-2">
                        <Send className="h-5 w-5 flex-shrink-0 text-indigo-600" />
                        <div className="min-w-0">
                            <h2 className="truncate text-base font-semibold text-slate-900">Sözleşmeyi Müşteriye İlet</h2>
                            <p className="truncate text-[11px] text-slate-500">{musteri.unvan}</p>
                        </div>
                    </div>
                    <button type="button" onClick={kapat}
                        className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700">
                        <X className="h-5 w-5" />
                    </button>
                </div>

                <div className="space-y-4 p-5">
                    {kayit && (
                        <div className="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                            <span className="rounded bg-white px-2 py-0.5 font-mono text-[11px] font-medium text-slate-700">
                                {kayit.sozlesme_kod}
                            </span>
                            <div className="min-w-0 flex-1">
                                <div className="truncate text-sm font-medium text-slate-900">{kayit.sozlesme_ad}</div>
                                <div className="truncate text-[11px] text-slate-500">İmza: {kayit.imza_ad_soyad || "—"}</div>
                            </div>
                        </div>
                    )}

                    <Toggle
                        checked={musteriyeGonder}
                        onChange={setMusteriyeGonder}
                        label="Müşteriyi bilgilendir (kayıtlı e-posta adreslerine gönder)"
                    />

                    <div>
                        <label className="mb-1 block text-sm font-medium text-slate-700">
                            Ek Bilgilendirme Adresleri
                        </label>
                        <div className="flex gap-1.5">
                            <input
                                type="email"
                                value={yeniMail}
                                onChange={(e) => setYeniMail(e.target.value)}
                                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); mailEkle(); } }}
                                placeholder="ornek@firma.com"
                                className="w-full min-w-0 rounded-md border border-slate-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                            />
                            <button type="button" onClick={mailEkle} title="E-posta adresi ekle"
                                className="inline-flex h-[34px] w-[34px] flex-shrink-0 items-center justify-center rounded-md bg-blue-600 text-white transition hover:bg-blue-700">
                                <Plus className="h-4 w-4" />
                            </button>
                        </div>
                        <p className="mt-1 text-[11px] text-slate-500">
                            Bu adreslere de sözleşme PDF'i iletilir. Enter ile ekleyebilirsin.
                        </p>

                        {ekMailler.length > 0 && (
                            <div className="mt-2 space-y-1">
                                {ekMailler.map((m) => (
                                    <div key={m} className="flex items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2 py-1">
                                        <Mail className="h-3.5 w-3.5 flex-shrink-0 text-slate-400" />
                                        <span className="min-w-0 flex-1 truncate text-[12px] text-slate-700">{m}</span>
                                        <button type="button" onClick={() => mailSil(m)} title="Kaldır"
                                            className="rounded p-0.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600">
                                            <Trash2 className="h-3.5 w-3.5" />
                                        </button>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>

                    <div className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-[11px] leading-relaxed text-slate-600">
                        Sözleşme, onaylandığı andaki hâliyle PDF olarak eklenir. Gönderim müşteri log kayıtlarına işlenir.
                    </div>
                </div>

                <div className="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-5 py-3">
                    <button type="button" onClick={kapat}
                        className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">
                        İptal
                    </button>
                    <button type="submit" disabled={gonderiliyor}
                        className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 disabled:opacity-50">
                        {gonderiliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                        {gonderiliyor ? 'Gönderiliyor...' : 'Gönder'}
                    </button>
                </div>
            </form>
        </Modal>
    );
}