import AppLayout from '@/Layouts/AppLayout';
import YenilemeSablonModal, { YenilemeSablonu } from './_SablonModal';
import { Toaster } from '@/Components/Toaster';
import { useConfirm } from '@/Components/ConfirmDialog';
import { paraSembol } from '@/lib/format';
import Link from '@/Components/Link';
import { Head, router } from '@inertiajs/react';
import { ArrowLeft, ChevronLeft, ChevronRight, FileText, Loader2, Mail, MessageSquareText, Pencil, Plus, Send, Trash2 } from 'lucide-react';
import { useEffect, useState } from 'react';

interface Sablon {
    id: number;
    ad: string;
    konu: string;
    govde: string;
    sms_mesaj?: string | null;
    bildirim_durum_id?: number | null;
    onay_durum_id?: number | null;
    red_durum_id?: number | null;
}
interface Durum { id: number; ad: string; renk?: string }
interface Kayit {
    id: number; baslik?: string | null;
    musteri?: { id: number; unvan: string } | null;
    durum?: { ad: string; renk: string } | null;
    yenileme_tarihi?: string | null;
    satir_sayisi?: number;
    // tutar kayıtta saklanmaz — ürün satırlarından hesaplanan genel toplam
    tutar: number; para_birimi: string;
}
interface Props {
    kayitlar: Kayit[];
    sablonlar: Sablon[];
    durumlar?: Durum[];
}

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

export default function YenilemeBildirim({ kayitlar: ilkKayitlar, sablonlar: ilkSablonlar, durumlar = [] }: Props) {
    const confirm = useConfirm();
    const [adim, setAdim] = useState<1 | 2 | 3>(1);
    const [sablonlar, setSablonlar] = useState<Sablon[]>(ilkSablonlar);
    const [seciliSablonId, setSeciliSablonId] = useState<number | null>(null);
    const seciliSablon = sablonlar.find((s) => s.id === seciliSablonId) ?? null;
    const [sablonModal, setSablonModal] = useState<YenilemeSablonu | null>(null);

    // Önizleme — şablonun mail ve/veya SMS içeriği (varsa ikisi birden)
    const [onizleme, setOnizleme] = useState<{ konu?: string; govde?: string; mesaj?: string } | null>(null);
    const [onizlemeYukleniyor, setOnizlemeYukleniyor] = useState(false);

    const [gonderiliyor, setGonderiliyor] = useState(false);

    const sablonMailIcerirMi = (s: Sablon | null) => !!(s?.konu && s?.govde);
    const sablonSmsIcerirMi  = (s: Sablon | null) => !!s?.sms_mesaj;

    const sablonModalAc = (s: Sablon | 'yeni') => {
        if (s === 'yeni') {
            setSablonModal({ id: 'yeni', ad: '', konu: '', govde: '', sms_mesaj: '', bildirim_durum_id: null, onay_durum_id: null, red_durum_id: null });
        } else {
            setSablonModal({
                id: s.id, ad: s.ad, konu: s.konu, govde: s.govde,
                sms_mesaj: s.sms_mesaj ?? '',
                bildirim_durum_id: s.bildirim_durum_id ?? null,
                onay_durum_id:     s.onay_durum_id ?? null,
                red_durum_id:      s.red_durum_id ?? null,
            });
        }
    };

    const sablonKaydedildi = (sablon: Sablon, mod: 'yeni' | 'duzenle') => {
        if (mod === 'yeni') {
            setSablonlar((p) => [...p, sablon]);
            setSeciliSablonId(sablon.id);
        } else {
            setSablonlar((p) => p.map((x) => (x.id === sablon.id ? sablon : x)));
        }
    };

    const sablonSil = async (s: Sablon) => {
        const onay = await confirm({
            tip: 'tehlike', baslik: 'Şablonu Sil',
            mesaj: <><strong>{s.ad}</strong> şablonunu silmek istediğinden emin misin?</>,
            onayMetni: 'Sil',
        });
        if (!onay) return;
        const r = await fetch(`/yenilemeler/sablonlar/${s.id}/`, {
            method: 'DELETE', credentials: 'same-origin',
            headers: { Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' },
        });
        if (r.ok) {
            setSablonlar((p) => p.filter((x) => x.id !== s.id));
            if (seciliSablonId === s.id) setSeciliSablonId(null);
            Toaster.basari('Silindi');
        }
    };

    const onizlemeYukle = async () => {
        if (!seciliSablonId || ilkKayitlar.length === 0 || !seciliSablon) return;
        setOnizlemeYukleniyor(true);
        try {
            const promiseler: Promise<any>[] = [];
            // Mail önizleme
            if (sablonMailIcerirMi(seciliSablon)) {
                promiseler.push(fetch('/yenilemeler/bildirim/onizleme/', {
                    method: 'POST', credentials: 'same-origin',
                    headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ sablon_id: seciliSablonId, kayit_id: ilkKayitlar[0].id }),
                }).then((r) => r.json()).then((d) => d.ok ? { tip: 'mail', icerik: d.icerik } : null));
            }
            // SMS önizleme
            if (sablonSmsIcerirMi(seciliSablon)) {
                promiseler.push(fetch('/yenilemeler/bildirim/sms-onizleme/', {
                    method: 'POST', credentials: 'same-origin',
                    headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ sablon_id: seciliSablonId, kayit_id: ilkKayitlar[0].id }),
                }).then((r) => r.json()).then((d) => d.ok ? { tip: 'sms', mesaj: d.mesaj } : null));
            }
            const sonuclar = await Promise.all(promiseler);
            const mailRes = sonuclar.find((s) => s?.tip === 'mail');
            const smsRes  = sonuclar.find((s) => s?.tip === 'sms');
            setOnizleme({
                konu: mailRes?.icerik?.konu,
                govde: mailRes?.icerik?.govde,
                mesaj: smsRes?.mesaj,
            });
        } catch { Toaster.hata('Önizleme alınamadı'); }
        finally { setOnizlemeYukleniyor(false); }
    };

    useEffect(() => {
        if (adim === 2 && seciliSablonId) onizlemeYukle();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [adim, seciliSablonId]);

    const gonder = async () => {
        if (!seciliSablonId || ilkKayitlar.length === 0 || !seciliSablon) return;
        const mailVar = sablonMailIcerirMi(seciliSablon);
        const smsVar  = sablonSmsIcerirMi(seciliSablon);
        if (!mailVar && !smsVar) {
            Toaster.hata('Bu şablonun ne mail ne SMS içeriği var. Şablonu düzenleyin.');
            return;
        }

        const kanallar = [mailVar && 'mail', smsVar && 'SMS'].filter(Boolean).join(' + ');
        const onay = await confirm({
            tip: 'soru', baslik: 'Bilgilendirmeyi Başlat',
            mesaj: <>Toplam <strong>{ilkKayitlar.length}</strong> kayda <strong>{kanallar}</strong> gönderilecek. Emin misin?</>,
            onayMetni: 'Gönder',
        });
        if (!onay) return;

        setGonderiliyor(true);
        try {
            const ids = ilkKayitlar.map((k) => k.id);
            const headers = { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' };
            // BİRLEŞİK ENDPOINT — backend her yetkili için tek log + mail/sms paralel gönderim
            const r = await fetch('/yenilemeler/bildirim/birlesik/', {
                method: 'POST', credentials: 'same-origin', headers,
                body: JSON.stringify({ sablon_id: seciliSablonId, ids }),
            });
            const d = await r.json();
            const detay = d.detay || {};
            const mailOk = (detay.mail_gonderildi ?? 0) > 0;
            const smsOk  = (detay.sms_gonderildi ?? 0) > 0;
            const hataVar = (detay.mail_hata ?? 0) > 0 || (detay.sms_hata ?? 0) > 0;
            if (hataVar) {
                Toaster.hata(d.mesaj || 'Gönderimde hatalar oluştu');
            } else if (mailOk || smsOk) {
                Toaster.basari(d.mesaj || 'Gönderildi');
                router.visit('/yenilemeler/tablo/');
            } else {
                Toaster.uyari(d.mesaj || 'Hiç bildirim gönderilemedi (yetkililerde e-posta/telefon yok mu?)');
            }
        } catch { Toaster.hata('Gönderim hatası'); }
        finally { setGonderiliyor(false); }
    };

    const tarihFmt = (s?: string | null) => s ? new Date(s).toLocaleDateString('tr-TR') : '-';

    return (
        <AppLayout title="Yenileme Bilgilendirme" actions={
            <Link href="/yenilemeler/tablo/" className="inline-flex h-10 items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 text-sm font-medium text-slate-700 hover:bg-slate-50">
                <ArrowLeft className="h-4 w-4" /> <span className="hidden md:inline">Tabloya Dön</span>
            </Link>
        }>
            <Head title="Yenileme Bilgilendirme" />

            {/* ADIM SHOWER */}
            <div className="mb-4 flex items-center gap-2">
                {[
                    { n: 1, ad: 'Şablon Seç' },
                    { n: 2, ad: 'Önizleme' },
                    { n: 3, ad: 'Gönder' },
                ].map((a, i, arr) => (
                    <div key={a.n} className="flex flex-1 items-center gap-2">
                        <div className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold ${(adim as number) >= a.n ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-600'}`}>{a.n}</div>
                        <span className={`text-xs font-medium ${adim === a.n ? 'text-slate-900' : 'text-slate-500'}`}>{a.ad}</span>
                        {i < arr.length - 1 && <div className={`mx-2 h-0.5 flex-1 ${(adim as number) > a.n ? 'bg-blue-500' : 'bg-slate-200'}`} />}
                    </div>
                ))}
            </div>

            <div className="mb-3 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-900">
                <strong>{ilkKayitlar.length}</strong> kayıt seçili. Şablonda mail ve/veya SMS içeriği varsa, müşterinin yetkililerinde "Bilgilendirme için bu kişiyi kullan" işaretli olanlara (yoksa tüm yetkililere) gönderilir.
            </div>

            {/* ADIM 1: ŞABLON LİSTESİ */}
            {adim === 1 && (
                <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
                    <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2">
                        <h3 className="text-sm font-semibold text-slate-900">Bildirim Şablonları</h3>
                        <button type="button" onClick={() => sablonModalAc('yeni')}
                            className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">
                            <Plus className="h-3.5 w-3.5" /> Yeni Şablon
                        </button>
                    </div>
                    <div className="divide-y divide-slate-100">
                        {sablonlar.length === 0 ? (
                            <div className="py-12 text-center text-slate-400">
                                <FileText className="mx-auto mb-2 h-10 w-10 text-slate-300" />
                                <p className="text-sm">Henüz şablon yok. "Yeni Şablon" butonuyla ekleyin.</p>
                            </div>
                        ) : sablonlar.map((s) => {
                            const mailVar = sablonMailIcerirMi(s);
                            const smsVar  = sablonSmsIcerirMi(s);
                            const uygunmu = mailVar || smsVar;
                            return (
                                <label key={s.id} className={`flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-slate-50 ${seciliSablonId === s.id ? 'bg-blue-50' : ''} ${!uygunmu ? 'opacity-60' : ''}`}>
                                    <input type="radio" name="sablon" checked={seciliSablonId === s.id} onChange={() => setSeciliSablonId(s.id)}
                                        disabled={!uygunmu}
                                        className="mt-1 h-4 w-4" />
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2">
                                            <span className="font-semibold text-slate-900">{s.ad}</span>
                                            {mailVar && (
                                                <span title="Mail içeriği var" className="inline-flex items-center gap-0.5 rounded bg-blue-100 px-1.5 py-0.5 text-[9px] font-bold text-blue-700">
                                                    <Mail className="h-2.5 w-2.5" /> MAIL
                                                </span>
                                            )}
                                            {smsVar && (
                                                <span title="SMS içeriği var" className="inline-flex items-center gap-0.5 rounded bg-emerald-100 px-1.5 py-0.5 text-[9px] font-bold text-emerald-700">
                                                    <MessageSquareText className="h-2.5 w-2.5" /> SMS
                                                </span>
                                            )}
                                            {!uygunmu && (
                                                <span className="text-[10px] italic text-slate-400">(içerik yok)</span>
                                            )}
                                        </div>
                                        <div className="line-clamp-2 text-xs text-slate-600">
                                            {s.konu || s.sms_mesaj || '—'}
                                        </div>
                                    </div>
                                    <button type="button" onClick={(e) => { e.preventDefault(); sablonModalAc(s); }}
                                        className="rounded p-1 text-slate-500 hover:bg-blue-100 hover:text-blue-700">
                                        <Pencil className="h-4 w-4" />
                                    </button>
                                    <button type="button" onClick={(e) => { e.preventDefault(); sablonSil(s); }}
                                        className="rounded p-1 text-slate-500 hover:bg-rose-100 hover:text-rose-700">
                                        <Trash2 className="h-4 w-4" />
                                    </button>
                                </label>
                            );
                        })}
                    </div>
                </div>
            )}

            {/* ADIM 2: ÖN İZLEME — mail ve sms birlikte (varsa ikisi de) */}
            {adim === 2 && (
                <div className="space-y-4">
                    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
                        <div className="border-b border-slate-200 px-4 py-2">
                            <h3 className="text-sm font-semibold text-slate-900">Önizleme</h3>
                            <p className="text-[11px] text-slate-500">İlk kayıt ({ilkKayitlar[0]?.musteri?.unvan ?? '-'}) bilgileri kullanılarak şablon uygulandı.</p>
                        </div>
                        <div className="p-4">
                            {onizlemeYukleniyor ? (
                                <div className="flex items-center justify-center py-12 text-slate-500">
                                    <Loader2 className="mr-2 h-5 w-5 animate-spin" /> Önizleme hazırlanıyor...
                                </div>
                            ) : onizleme ? (
                                <div className={`grid grid-cols-1 gap-4 ${sablonMailIcerirMi(seciliSablon) && sablonSmsIcerirMi(seciliSablon) ? 'lg:grid-cols-2' : ''}`}>
                                    {/* Mail önizleme */}
                                    {sablonMailIcerirMi(seciliSablon) && onizleme.konu !== undefined && (
                                        <div className="rounded-lg border border-blue-200 bg-blue-50/40 p-4">
                                            <div className="mb-3 flex items-center gap-2 text-xs font-semibold text-blue-700">
                                                <Mail className="h-4 w-4" /> E-Posta Önizleme
                                            </div>
                                            <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                                                <div className="mb-4 border-b border-slate-200 pb-3">
                                                    <div className="text-xs font-semibold uppercase tracking-wider text-slate-500">Konu</div>
                                                    <div className="mt-0.5 text-sm font-medium text-slate-900">{onizleme.konu}</div>
                                                </div>
                                                <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: onizleme.govde ?? '' }} />
                                            </div>
                                        </div>
                                    )}
                                    {/* SMS önizleme */}
                                    {sablonSmsIcerirMi(seciliSablon) && onizleme.mesaj !== undefined && (
                                        <div className="rounded-lg border border-emerald-200 bg-emerald-50/40 p-4">
                                            <div className="mb-2 flex items-center gap-2 text-xs font-semibold text-emerald-700">
                                                <MessageSquareText className="h-4 w-4" /> SMS Önizleme
                                            </div>
                                            <div className="whitespace-pre-wrap rounded border border-slate-200 bg-white p-3 font-mono text-sm text-slate-900">
                                                {onizleme.mesaj ?? ''}
                                            </div>
                                            <div className="mt-2 text-[11px] text-slate-500">
                                                {(onizleme.mesaj ?? '').length} karakter — her kayıt için yer tutucular ayrı doldurulur.
                                            </div>
                                        </div>
                                    )}
                                </div>
                            ) : (
                                <div className="py-12 text-center text-slate-400">Önizleme yüklenemedi</div>
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* ADIM 3: GÖNDER */}
            {adim === 3 && (
                <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
                    <div className="border-b border-slate-200 px-4 py-2">
                        <h3 className="text-sm font-semibold text-slate-900">Bilgilendirme Listesi</h3>
                        <p className="text-[11px] text-slate-500">
                            Aşağıdaki kayıtlara şablonun içeriklerine göre gönderim yapılacak:&nbsp;
                            {sablonMailIcerirMi(seciliSablon) && <span className="font-semibold text-blue-700">Mail</span>}
                            {sablonMailIcerirMi(seciliSablon) && sablonSmsIcerirMi(seciliSablon) && ' + '}
                            {sablonSmsIcerirMi(seciliSablon) && <span className="font-semibold text-emerald-700">SMS</span>}
                        </p>
                    </div>
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                            <thead className="bg-slate-50 text-xs uppercase text-slate-600">
                                <tr>
                                    <th className="px-3 py-2 text-left">Başlık</th>
                                    <th className="px-3 py-2 text-left">Müşteri</th>
                                    <th className="px-3 py-2 text-left">Yenileme</th>
                                    <th className="px-3 py-2 text-center">Ürün</th>
                                    <th className="px-3 py-2 text-right">Genel Toplam</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100">
                                {ilkKayitlar.map((k) => (
                                    <tr key={k.id} className="hover:bg-slate-50">
                                        <td className="px-3 py-2 font-medium">{k.baslik ?? '—'}</td>
                                        <td className="px-3 py-2 text-slate-600">{k.musteri?.unvan}</td>
                                        <td className="px-3 py-2 text-xs">{tarihFmt(k.yenileme_tarihi)}</td>
                                        <td className="px-3 py-2 text-center text-xs text-slate-600">{k.satir_sayisi ?? 0} satır</td>
                                        <td className="px-3 py-2 text-right font-mono">{(k.tutar ?? 0).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(k.para_birimi)}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {/* ADIM BUTONLARI */}
            <div className="mt-4 flex items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
                <button type="button" onClick={() => setAdim((p) => (p - 1) as 1 | 2 | 3)}
                    disabled={adim === 1}
                    className="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50">
                    <ChevronLeft className="h-3.5 w-3.5" /> Geri
                </button>
                {adim < 3 ? (
                    <button type="button" onClick={() => setAdim((p) => (p + 1) as 1 | 2 | 3)}
                        disabled={!seciliSablonId}
                        className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
                        İleri <ChevronRight className="h-3.5 w-3.5" />
                    </button>
                ) : (
                    <button type="button" onClick={gonder} disabled={gonderiliyor || !seciliSablonId}
                        className="inline-flex items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700 disabled:opacity-50">
                        {gonderiliyor ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Send className="h-3.5 w-3.5" />}
                        İşlemi Başlat ({ilkKayitlar.length})
                    </button>
                )}
            </div>

            {sablonModal && (
                <YenilemeSablonModal
                    sablon={sablonModal}
                    durumlar={durumlar}
                    onClose={() => setSablonModal(null)}
                    onSaved={sablonKaydedildi}
                />
            )}
        </AppLayout>
    );
}