import AsyncSelect from '@/Components/AsyncSelect';
import { useConfirm } from '@/Components/ConfirmDialog';
import Modal from '@/Components/Modal';
import { Toaster } from '@/Components/Toaster';
import Toggle from '@/Components/Toggle';
import {
    AlertTriangle, ArrowLeft, Ban, Check, ChevronDown, ChevronRight, Copy, Eye, FileSignature,
    History, Link2, Loader2, Mail, MailX, Plus, RefreshCw, Send, Timer, Trash2, X,
} from 'lucide-react';
import { FormEvent, useCallback, useEffect, useState } from 'react';

interface Davet {
    id: number;
    sozlesme_kod: string;
    sozlesme_ad: string;
    durum: string;
    imza_url: string;
    gonderilen_mail: string | null;
    gonderim_tarihi: string | null;
    ilk_goruntuleme: string | null;
    tamamlanma_tarihi: string | null;
    son_gecerlilik: string | null;
    olusturan: string | null;
    created_at: string | null;
    imzalanabilir: boolean;
    musteri_sozlesme_id: number | null;
}

interface ImzaLog {
    id: number;
    tip: string;
    baslik: string;
    aciklama: string | null;
    ip_adresi: string | null;
    tarayici: string | null;
    user_ad: string | null;
    detay: Record<string, string> | null;
    created_at: string | null;
}

interface Props {
    acik: boolean;
    musteri: { id: number; unvan: string };
    onClose: () => void;
}

/** Log tipi → ikon + renk. Denetim kaydı tek bakışta okunabilsin diye. */
const LOG_STIL: Record<string, { ikon: typeof Link2; sinif: string }> = {
    olusturuldu:              { ikon: Plus,           sinif: 'bg-slate-100 text-slate-600' },
    mail_gonderildi:          { ikon: Send,           sinif: 'bg-indigo-100 text-indigo-700' },
    mail_hatasi:              { ikon: MailX,          sinif: 'bg-rose-100 text-rose-700' },
    link_acildi:              { ikon: Eye,            sinif: 'bg-blue-100 text-blue-700' },
    imzalandi:                { ikon: FileSignature,  sinif: 'bg-emerald-100 text-emerald-700' },
    iptal_edildi:             { ikon: Ban,            sinif: 'bg-slate-200 text-slate-700' },
    suresi_doldu:             { ikon: Timer,          sinif: 'bg-amber-100 text-amber-700' },
    bilgilendirme_gonderildi: { ikon: Mail,           sinif: 'bg-indigo-100 text-indigo-700' },
};

const DURUM_ETIKET: Record<string, { ad: string; sinif: string }> = {
    bekliyor:     { ad: 'Bekliyor',     sinif: 'bg-amber-100 text-amber-800' },
    goruntulendi: { ad: 'Görüntülendi', sinif: 'bg-blue-100 text-blue-800' },
    tamamlandi:   { ad: 'İmzalandı',    sinif: 'bg-emerald-100 text-emerald-800' },
    iptal:        { ad: 'İptal',        sinif: 'bg-slate-200 text-slate-700' },
    suresi_doldu: { ad: 'Süresi Doldu', sinif: 'bg-rose-100 text-rose-800' },
};

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

function tarih(v: string | null): string {
    if (!v) return '—';
    const d = new Date(v);
    if (Number.isNaN(d.getTime())) return '—';
    return d.toLocaleString('tr-TR', {
        day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
    });
}

/**
 * İmza davetleri — müşteriye bağlantı göndererek uzaktan imzalatma.
 *
 * İki görünüm tek modalda: davet listesi (varsayılan) ve yeni davet formu.
 * Bağlantı her hâlükârda üretilir; e-posta göndermek isteğe bağlıdır — gönderilmese
 * bile bağlantı kopyalanıp istenen kanaldan iletilebilir.
 */
export default function SozlesmeDavetModal({ acik, musteri, onClose }: Props) {
    const onayla = useConfirm();
    const [gorunum, setGorunum] = useState<'liste' | 'form'>('liste');

    // --- Liste ---
    const [davetler, setDavetler] = useState<Davet[]>([]);
    const [listeYukleniyor, setListeYukleniyor] = useState(false);
    const [islemdeki, setIslemdeki] = useState<number | null>(null);
    const [kopyalananId, setKopyalananId] = useState<number | null>(null);
    /** Açık log akordiyonu — aynı anda tek davetin geçmişi gösterilir. */
    const [acikLogId, setAcikLogId] = useState<number | null>(null);
    const [loglar, setLoglar] = useState<ImzaLog[]>([]);
    const [logYukleniyor, setLogYukleniyor] = useState(false);

    // --- Form ---
    const [sozlesmeId, setSozlesmeId] = useState<number | string>('');
    const [mailGonder, setMailGonder] = useState(true);
    const [ekMailler, setEkMailler] = useState<string[]>([]);
    const [yeniMail, setYeniMail] = useState('');
    const [gecerlilik, setGecerlilik] = useState(30);
    const [gonderiliyor, setGonderiliyor] = useState(false);
    const [errors, setErrors] = useState<Record<string, string>>({});
    const [uretilenLink, setUretilenLink] = useState<string | null>(null);
    const [linkKopyalandi, setLinkKopyalandi] = useState(false);

    const formSifirla = useCallback(() => {
        setSozlesmeId(''); setMailGonder(true); setEkMailler([]);
        setYeniMail(''); setGecerlilik(30); setErrors({});
        setUretilenLink(null); setLinkKopyalandi(false);
    }, []);

    const listeYukle = useCallback(async () => {
        setListeYukleniyor(true);
        try {
            const r = await fetch(`/musteriler/${musteri.id}/imza-davetleri/`, {
                credentials: 'same-origin',
                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            if (!r.ok) { setDavetler([]); return; }
            const d = await r.json();
            setDavetler(d?.davetler ?? []);
        } catch {
            setDavetler([]);
        } finally {
            setListeYukleniyor(false);
        }
    }, [musteri.id]);

    /** Akordiyon: kapalıysa aç ve logları çek, açıksa kapat. */
    const logAcKapa = async (davetId: number) => {
        if (acikLogId === davetId) { setAcikLogId(null); return; }
        setAcikLogId(davetId);
        setLoglar([]);
        setLogYukleniyor(true);
        try {
            const r = await fetch(`/musteriler/${musteri.id}/imza-davetleri/${davetId}/loglar/`, {
                credentials: 'same-origin',
                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            if (!r.ok) return;
            const d = await r.json();
            setLoglar(d?.loglar ?? []);
        } catch {
            /* sessizce boş kalır — kullanıcıya hata basmaya değmez */
        } finally {
            setLogYukleniyor(false);
        }
    };

    useEffect(() => {
        if (!acik) return;
        setGorunum('liste');
        setAcikLogId(null);
        setLoglar([]);
        formSifirla();
        listeYukle();
    }, [acik, formSifirla, listeYukle]);

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

    const panoyaKopyala = async (metin: string, id: number | null) => {
        try {
            await navigator.clipboard.writeText(metin);
            if (id === null) { setLinkKopyalandi(true); setTimeout(() => setLinkKopyalandi(false), 2000); }
            else { setKopyalananId(id); setTimeout(() => setKopyalananId(null), 2000); }
        } catch {
            Toaster.uyari('Kopyalanamadı — bağlantıyı elle seçip kopyalayabilirsiniz.');
        }
    };

    // ------------------------------------------------------------------
    // Liste işlemleri
    // ------------------------------------------------------------------
    const istek = async (url: string, basariMesaji: string, davetId: number) => {
        setIslemdeki(davetId);
        try {
            const r = await fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': csrf(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: '{}',
            });
            const d = await r.json().catch(() => ({}));
            if (!r.ok || d?.ok === false) Toaster.hata(d?.mesaj || 'İşlem tamamlanamadı.');
            else Toaster.basari(d?.mesaj || basariMesaji);
            await listeYukle();
        } catch {
            Toaster.hata('Beklenmeyen bir hata oluştu.');
        } finally {
            setIslemdeki(null);
        }
    };

    const tekrarGonder = (d: Davet) =>
        istek(`/musteriler/${musteri.id}/imza-davetleri/${d.id}/gonder`, 'E-posta gönderildi.', d.id);

    const iptalEt = async (d: Davet) => {
        const ok = await onayla({
            baslik: 'İmza Davetini İptal Et',
            mesaj: <>'<strong>{d.sozlesme_ad}</strong>' daveti iptal edilecek. Bağlantı bir daha açılamaz.</>,
            onayMetni: 'İptal Et',
            tip: 'tehlike',
        });
        if (!ok) return;
        istek(`/musteriler/${musteri.id}/imza-davetleri/${d.id}/iptal`, 'Davet iptal edildi.', d.id);
    };

    // ------------------------------------------------------------------
    // Yeni davet
    // ------------------------------------------------------------------
    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 olustur = async (e: FormEvent) => {
        e.preventDefault();
        if (gonderiliyor) return;

        if (!sozlesmeId) {
            setErrors({ sozlesme_id: 'Bu alan zorunludur.' });
            Toaster.uyari('Zorunlu alanları doldurunuz.');
            return;
        }
        setErrors({});
        setGonderiliyor(true);

        try {
            const r = await fetch(`/musteriler/${musteri.id}/imza-davetleri/`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': csrf(),
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    sozlesme_id: sozlesmeId,
                    mail_gonder: mailGonder,
                    ek_mailler: ekMailler,
                    gecerlilik_gun: gecerlilik,
                }),
            });
            const d = await r.json().catch(() => ({}));

            if (!r.ok || d?.ok === false) {
                if (d?.errors) {
                    const flat: Record<string, string> = {};
                    for (const [k, v] of Object.entries(d.errors)) flat[k] = (v as string[])[0];
                    setErrors(flat);
                    Toaster.uyari('Zorunlu alanları kontrol ediniz.');
                } else {
                    Toaster.hata(d?.mesaj || 'Davet oluşturulamadı.');
                }
                return;
            }

            Toaster.basari(d?.mesaj || 'İmza daveti oluşturuldu.');
            setUretilenLink(d?.imza_url ?? null);
            listeYukle();
        } catch {
            Toaster.hata('Beklenmeyen bir hata oluştu.');
        } finally {
            setGonderiliyor(false);
        }
    };

    return (
        <Modal show={acik} onClose={kapat} maxWidth="2xl">
            <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">
                    {gorunum === 'form' && (
                        <button type="button" onClick={() => { formSifirla(); setGorunum('liste'); }}
                            title="Listeye dön"
                            className="rounded-md p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700">
                            <ArrowLeft className="h-4 w-4" />
                        </button>
                    )}
                    <Link2 className="h-5 w-5 flex-shrink-0 text-blue-600" />
                    <div className="min-w-0">
                        <h2 className="truncate text-base font-semibold text-slate-900">
                            İmza Gönderim Geçmişi
                        </h2>
                        <p className="truncate text-[11px] text-slate-500">{musteri.unvan}</p>
                    </div>
                </div>
                <div className="flex flex-shrink-0 items-center gap-1">
                    {gorunum === 'liste' && (
                        <>
                            <button type="button" onClick={listeYukle} title="Yenile"
                                className="rounded-md p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700">
                                <RefreshCw className={`h-4 w-4 ${listeYukleniyor ? 'animate-spin' : ''}`} />
                            </button>

                        </>
                    )}
                    <button type="button" onClick={kapat} title="Kapat"
                        className="rounded-md p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700">
                        <X className="h-5 w-5" />
                    </button>
                </div>
            </div>

            {/* ============================ LİSTE ============================ */}
            {gorunum === 'liste' && (
                <>
                    <div className="max-h-[60vh] min-h-[220px] overflow-y-auto bg-slate-50 p-4">
                        {listeYukleniyor && davetler.length === 0 ? (
                            <div className="space-y-2">
                                {Array.from({ length: 3 }).map((_, i) => (
                                    <div key={`dsk-${i}`} className="h-20 animate-pulse rounded-lg bg-white" />
                                ))}
                            </div>
                        ) : davetler.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-12 text-center">
                                <Link2 className="mb-2 h-8 w-8 text-slate-300" />
                                <p className="text-sm text-slate-500">Henüz imza için gönderim yapılmamış.</p>
                                <p className="mt-1.5 max-w-sm text-[11px] leading-relaxed text-slate-500">
                                    Bir sözleşmeyi imza için göndermek üzere listeden ilgili sözleşmenin
                                    <strong> bağlantı ikonuna</strong> tıklayın.
                                </p>
                            </div>
                        ) : (
                            <div className="space-y-2">
                                {davetler.map((d) => {
                                    const durum = DURUM_ETIKET[d.durum] ?? { ad: d.durum, sinif: 'bg-slate-100 text-slate-700' };
                                    const mesgul = islemdeki === d.id;
                                    return (
                                        <div key={d.id} className="rounded-lg border border-slate-200 bg-white p-3 shadow-sm">
                                            <div className="flex flex-wrap items-start justify-between gap-2">
                                                <div className="min-w-0 flex-1">
                                                    <div className="flex flex-wrap items-center gap-1.5">
                                                        <span className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[11px] font-medium text-slate-700">
                                                            {d.sozlesme_kod}
                                                        </span>
                                                        <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${durum.sinif}`}>
                                                            {durum.ad}
                                                        </span>
                                                    </div>
                                                    <div className="mt-1 truncate text-sm font-medium text-slate-900" title={d.sozlesme_ad}>
                                                        {d.sozlesme_ad}
                                                    </div>
                                                </div>

                                                <div className="flex flex-shrink-0 items-center gap-1">
                                                    <button type="button" onClick={() => logAcKapa(d.id)}
                                                        title="İşlem geçmişi (denetim kaydı)"
                                                        className={`rounded-md p-1.5 transition ${
                                                            acikLogId === d.id
                                                                ? 'bg-slate-200 text-slate-800'
                                                                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800'
                                                        }`}>
                                                        <History className="h-4 w-4" />
                                                    </button>
                                                    <button type="button" onClick={() => panoyaKopyala(d.imza_url, d.id)}
                                                        title="Bağlantıyı kopyala"
                                                        className={`rounded-md p-1.5 transition ${
                                                            kopyalananId === d.id
                                                                ? 'bg-emerald-50 text-emerald-600'
                                                                : 'text-slate-600 hover:bg-blue-50 hover:text-blue-700'
                                                        }`}>
                                                        {kopyalananId === d.id ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                                                    </button>
                                                    {d.imzalanabilir && (
                                                        <>
                                                            <button type="button" onClick={() => tekrarGonder(d)} disabled={mesgul}
                                                                title="E-posta ile (tekrar) gönder"
                                                                className="rounded-md p-1.5 text-slate-600 transition hover:bg-indigo-50 hover:text-indigo-700 disabled:opacity-40">
                                                                {mesgul ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                                                            </button>
                                                            <button type="button" onClick={() => iptalEt(d)} disabled={mesgul}
                                                                title="Daveti iptal et"
                                                                className="rounded-md p-1.5 text-slate-600 transition hover:bg-rose-50 hover:text-rose-700 disabled:opacity-40">
                                                                <Ban className="h-4 w-4" />
                                                            </button>
                                                        </>
                                                    )}
                                                </div>
                                            </div>

                                            <div className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 border-t border-slate-100 pt-2 text-[11px] text-slate-600 sm:grid-cols-4">
                                                <div>
                                                    <span className="block text-slate-400">Oluşturma</span>
                                                    {tarih(d.created_at)}
                                                </div>
                                                <div>
                                                    <span className="block text-slate-400">Gönderim</span>
                                                    {tarih(d.gonderim_tarihi)}
                                                </div>
                                                <div>
                                                    <span className="block text-slate-400">İlk Görüntüleme</span>
                                                    {tarih(d.ilk_goruntuleme)}
                                                </div>
                                                <div>
                                                    <span className="block text-slate-400">
                                                        {d.durum === 'tamamlandi' ? 'İmza Tarihi' : 'Son Geçerlilik'}
                                                    </span>
                                                    {tarih(d.durum === 'tamamlandi' ? d.tamamlanma_tarihi : d.son_gecerlilik)}
                                                </div>
                                            </div>

                                            {d.gonderilen_mail && (
                                                <div className="mt-1.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                                                    <Mail className="h-3 w-3 flex-shrink-0" />
                                                    <span className="truncate" title={d.gonderilen_mail}>{d.gonderilen_mail}</span>
                                                </div>
                                            )}

                                            {/* Denetim kaydı — imza hukuki sonuç doğurduğu için her adım saklanır */}
                                            {acikLogId === d.id && (
                                                <div className="mt-2 rounded-lg border border-slate-200 bg-slate-50 p-2.5">
                                                    <div className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                                                        <History className="h-3.5 w-3.5" /> İşlem Geçmişi
                                                    </div>

                                                    {logYukleniyor ? (
                                                        <div className="space-y-1.5">
                                                            {Array.from({ length: 3 }).map((_, i) => (
                                                                <div key={`lsk-${i}`} className="h-8 animate-pulse rounded bg-white" />
                                                            ))}
                                                        </div>
                                                    ) : loglar.length === 0 ? (
                                                        <p className="py-2 text-center text-[11px] text-slate-500">Kayıt bulunamadı.</p>
                                                    ) : (
                                                        <ol className="space-y-2">
                                                            {loglar.map((l) => {
                                                                const stil = LOG_STIL[l.tip] ?? { ikon: AlertTriangle, sinif: 'bg-slate-100 text-slate-600' };
                                                                const LogIkon = stil.ikon;
                                                                return (
                                                                    <li key={l.id} className="flex gap-2">
                                                                        <span className={`mt-0.5 inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full ${stil.sinif}`}>
                                                                            <LogIkon className="h-3.5 w-3.5" />
                                                                        </span>
                                                                        <div className="min-w-0 flex-1">
                                                                            <div className="flex flex-wrap items-baseline gap-x-2">
                                                                                <span className="text-[12px] font-medium text-slate-800">{l.baslik}</span>
                                                                                <span className="text-[10px] text-slate-400">{tarih(l.created_at)}</span>
                                                                            </div>
                                                                            {l.aciklama && (
                                                                                <div className="text-[11px] leading-snug text-slate-600">{l.aciklama}</div>
                                                                            )}
                                                                            {l.detay && Object.keys(l.detay).length > 0 && (
                                                                                <div className="mt-0.5 text-[10px] leading-snug text-slate-500">
                                                                                    {Object.entries(l.detay).map(([k, v]) => (
                                                                                        <div key={k}>
                                                                                            <span className="text-slate-400">{k}:</span> {String(v)}
                                                                                        </div>
                                                                                    ))}
                                                                                </div>
                                                                            )}
                                                                            <div className="mt-0.5 flex flex-wrap gap-x-3 text-[10px] text-slate-400">
                                                                                {l.user_ad && <span>Kullanıcı: {l.user_ad}</span>}
                                                                                {l.ip_adresi && <span>IP: {l.ip_adresi}</span>}
                                                                            </div>
                                                                            {l.tarayici && (
                                                                                <div className="truncate text-[10px] text-slate-400" title={l.tarayici}>
                                                                                    {l.tarayici}
                                                                                </div>
                                                                            )}
                                                                        </div>
                                                                    </li>
                                                                );
                                                            })}
                                                        </ol>
                                                    )}
                                                </div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>

                    <div className="flex items-center justify-end border-t border-slate-200 bg-white 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 transition hover:bg-slate-100">
                            Kapat
                        </button>
                    </div>
                </>
            )}

            {/* ============================ FORM ============================ */}
            {gorunum === 'form' && (
                uretilenLink ? (
                    <div className="space-y-4 p-5">
                        <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3">
                            <div className="flex items-center gap-2 text-sm font-medium text-emerald-800">
                                <Check className="h-4 w-4" /> Davet oluşturuldu
                            </div>
                            <p className="mt-1 text-[12px] leading-relaxed text-emerald-700">
                                {mailGonder
                                    ? 'E-posta gönderildi. Aşağıdaki bağlantıyı dilediğiniz kanaldan da paylaşabilirsiniz.'
                                    : 'E-posta gönderilmedi. Aşağıdaki bağlantıyı müşteriye siz iletebilirsiniz.'}
                            </p>
                        </div>

                        <div>
                            <label className="mb-1 block text-xs font-medium text-slate-700">İmza Bağlantısı</label>
                            <div className="flex gap-1.5">
                                <input
                                    type="text"
                                    value={uretilenLink}
                                    readOnly
                                    onFocus={(e) => e.currentTarget.select()}
                                    placeholder="Bağlantı"
                                    className="w-full min-w-0 rounded-md border border-slate-300 bg-slate-50 px-2 py-1.5 font-mono text-[11px] text-slate-700"
                                />
                                <button type="button" onClick={() => panoyaKopyala(uretilenLink, null)}
                                    title="Kopyala"
                                    className={`inline-flex h-[34px] flex-shrink-0 items-center gap-1.5 rounded-md px-3 text-xs font-semibold text-white transition ${
                                        linkKopyalandi ? 'bg-emerald-600' : 'bg-blue-600 hover:bg-blue-700'
                                    }`}>
                                    {linkKopyalandi ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
                                    <span className="hidden sm:inline">{linkKopyalandi ? 'Kopyalandı' : 'Kopyala'}</span>
                                </button>
                            </div>
                            <p className="mt-1 text-[11px] text-slate-500">
                                Bağlantı {gecerlilik} gün geçerlidir ve imzalandıktan sonra kullanılamaz.
                            </p>
                        </div>

                        <div className="flex justify-end gap-2 border-t border-slate-200 pt-4">
                            <button type="button" onClick={formSifirla}
                                className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100">
                                Yeni Davet
                            </button>
                            <button type="button" onClick={() => { formSifirla(); setGorunum('liste'); }}
                                className="rounded-lg bg-slate-800 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-900">
                                Listeye Dön
                            </button>
                        </div>
                    </div>
                ) : (
                    <form onSubmit={olustur}>
                        <div className="space-y-4 p-5">
                            <div>
                                <label className="mb-1 block text-sm font-medium text-slate-700">
                                    Sözleşme Şablonu <span className="text-rose-600">*</span>
                                </label>
                                <AsyncSelect
                                    endpoint="/api/ara/sozlesmeler"
                                    cozumleEndpoint="/api/ara/cozumle"
                                    cozumleTip="sozlesme"
                                    value={sozlesmeId}
                                    onChange={(v) => { setSozlesmeId(v); if (errors.sozlesme_id) setErrors((p) => ({ ...p, sozlesme_id: '' })); }}
                                    placeholder="Sözleşme adı veya kodu ile ara..."
                                    required
                                    error={!!errors.sozlesme_id}
                                />
                                {errors.sozlesme_id && <p className="mt-1 text-xs text-rose-600">{errors.sozlesme_id}</p>}
                                <p className="mt-1 text-[11px] leading-relaxed text-slate-500">
                                    Metin davet anında dondurulur; şablon sonradan değişse bile müşteri gördüğü metni imzalar.
                                </p>
                            </div>

                            <div>
                                <label className="mb-1 block text-sm font-medium text-slate-700">Geçerlilik Süresi (gün)</label>
                                <input
                                    type="number"
                                    min={1}
                                    max={365}
                                    value={gecerlilik}
                                    onChange={(e) => setGecerlilik(Math.max(1, Math.min(365, Number(e.target.value) || 30)))}
                                    placeholder="30"
                                    className="w-32 rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                                />
                            </div>

                            <Toggle
                                checked={mailGonder}
                                onChange={setMailGonder}
                                label="Daveti e-posta ile gönder"
                                aciklama="Kapalıysa yalnızca bağlantı üretilir; kopyalayıp siz iletirsiniz."
                            />

                            <div>
                                <label className="mb-1 block text-sm font-medium text-slate-700">Ek E-Posta 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"
                                        disabled={!mailGonder}
                                        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 disabled:bg-slate-100"
                                    />
                                    <button type="button" onClick={mailEkle} title="Ekle" disabled={!mailGonder}
                                        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 disabled:opacity-40">
                                        <Plus className="h-4 w-4" />
                                    </button>
                                </div>
                                <p className="mt-1 text-[11px] text-slate-500">
                                    Müşterinin kayıtlı adreslerine ek olarak bu adreslere de gönderilir.
                                </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={() => setEkMailler((p) => p.filter((x) => x !== 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>

                        <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={() => { formSifirla(); setGorunum('liste'); }}
                                className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100">
                                İptal
                            </button>
                            <button type="submit" disabled={gonderiliyor}
                                className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50">
                                {gonderiliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                                {gonderiliyor ? 'Oluşturuluyor...' : 'Davet Oluştur'}
                            </button>
                        </div>
                    </form>
                )
            )}
        </Modal>
    );
}