import Modal from '@/Components/Modal';
import { Toaster } from '@/Components/Toaster';
import Toggle from '@/Components/Toggle';
import { router } from '@inertiajs/react';
import { Check, Copy, Link2, 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;
}

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]) : '';
}

/**
 * MEVCUT sözleşme kaydını imza için müşteriye gönderir.
 *
 * Yeni sözleşme AÇMAZ — müşteri linkten imzaladığında bu kayıt imzalanmış
 * hâle gelir. Dolayısıyla panelde metne yapılan müşteriye özel düzenlemeler
 * aynen müşteriye gider.
 */
export default function SozlesmeImzaGonderModal({ kayit, musteri, onClose }: Props) {
    const acik = kayit !== null;

    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 [uretilenLink, setUretilenLink] = useState<string | null>(null);
    const [kopyalandi, setKopyalandi] = useState(false);

    const sifirla = useCallback(() => {
        setMailGonder(true); setEkMailler([]); setYeniMail('');
        setGecerlilik(30); setUretilenLink(null); setKopyalandi(false);
    }, []);

    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 linkKopyala = async () => {
        if (!uretilenLink) return;
        try {
            await navigator.clipboard.writeText(uretilenLink);
            setKopyalandi(true);
            setTimeout(() => setKopyalandi(false), 2000);
        } catch {
            Toaster.uyari('Kopyalanamadı — bağlantıyı elle seçip kopyalayabilirsiniz.');
        }
    };

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

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

            if (!r.ok || d?.ok === false) {
                Toaster.hata(d?.mesaj || 'İmza bağlantısı oluşturulamadı.');
                return;
            }

            Toaster.basari(d?.mesaj || 'İmza bağlantısı hazır.');
            setUretilenLink(d?.imza_url ?? null);
            router.reload({ only: ['sozlesmeler'] });
        } 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">
                        <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 İçin Gönder</h2>
                            <p className="truncate text-[11px] text-slate-500">
                                {kayit?.sozlesme_kod} — {kayit?.sozlesme_ad}
                            </p>
                        </div>
                    </div>
                    <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>

                {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" /> Bağlantı hazır
                            </div>
                            <p className="mt-1 text-[12px] leading-relaxed text-emerald-700">
                                {mailGonder
                                    ? 'E-posta gönderildi. Bağlantıyı dilediğiniz kanaldan da paylaşabilirsiniz.'
                                    : 'E-posta gönderilmedi. Aşağıdaki bağlantıyı müşteriye siz iletebilirsiniz.'}
                                {' '}Müşteri imzaladığında <strong>bu sözleşme</strong> imzalanmış olarak işaretlenir.
                            </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={linkKopyala} 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 ${
                                        kopyalandi ? 'bg-emerald-600' : 'bg-blue-600 hover:bg-blue-700'
                                    }`}>
                                    {kopyalandi ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
                                    <span className="hidden sm:inline">{kopyalandi ? '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 border-t border-slate-200 pt-4">
                            <button type="button" onClick={kapat}
                                className="rounded-lg bg-slate-800 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-900">
                                Kapat
                            </button>
                        </div>
                    </div>
                ) : (
                    <>
                        <div className="space-y-4 p-5">
                            <div className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-[11px] leading-relaxed text-blue-800">
                                Müşteriye <strong>bu sözleşmenin panelde kayıtlı metni</strong> gönderilir —
                                yaptığınız müşteriye özel düzenlemeler dahil. Yeni bir sözleşme oluşturulmaz.
                            </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="Bağlantıyı 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={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">
                                İ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 ? 'Gönderiliyor...' : 'Gönder'}
                            </button>
                        </div>
                    </>
                )}
            </form>
        </Modal>
    );
}