import MailHtmlEditor, { MailHtmlEditorRef } from '@/Components/MailHtmlEditor';
import Select from '@/Components/Select';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { Toaster } from '@/Components/Toaster';
import { krediHesapla } from '@/lib/smsKredi';
import {
    Building2, Calendar, CheckCircle2, Contact, Copy, Loader2, LucideIcon, Mail, MessageSquareText, Package, Phone, RefreshCw, Save, Search, Send, Settings, X,
} from 'lucide-react';
import { Fragment, useEffect, useRef, useState } from 'react';

export interface YenilemeSablonu {
    id: number | 'yeni';
    ad: string;
    konu: string;
    govde: string;
    sms_mesaj?: string;
    bildirim_durum_id?: number | null;
    onay_durum_id?: number | null;
    red_durum_id?: number | null;
}

export interface YenilemeDurum {
    id: number;
    ad: string;
    renk?: string;
}

interface Props {
    sablon: YenilemeSablonu;
    onClose: () => void;
    onSaved: (s: any, mod: 'yeni' | 'duzenle') => void;
    durumlar?: YenilemeDurum[];
}

type YT = { kod: string; aciklama: string };
type YTGrubu = { baslik: string; ikon: LucideIcon; yt: YT[] };

const YT_FIRMA: YT[] = [
    { kod: '{firma_ad}',            aciklama: 'Şirketinizin adı' },
    { kod: '{firma_unvan}',         aciklama: 'Şirket unvanı (alternatif)' },
    { kod: '{firma_telefon}',       aciklama: 'Şirket telefonu' },
    { kod: '{firma_email}',         aciklama: 'Şirket e-postası' },
    { kod: '{firma_adres}',         aciklama: 'Şirket adresi' },
    { kod: '{firma_vergi_no}',      aciklama: 'Şirket vergi numarası' },
    { kod: '{firma_vergi_dairesi}', aciklama: 'Şirket vergi dairesi' },
];
const YT_MUSTERI: YT[] = [
    { kod: '{musteri_ad}',          aciklama: 'Müşteri firma adı/unvanı' },
    { kod: '{musteri_unvan}',       aciklama: 'Müşteri unvanı (alternatif)' },
    { kod: '{musteri_vergi_no}',    aciklama: 'Müşteri vergi no' },
    { kod: '{musteri_vergi_dairesi}',aciklama: 'Müşteri vergi dairesi' },
    { kod: '{musteri_sehir}',       aciklama: 'Müşteri şehri' },
    { kod: '{musteri_adres}',       aciklama: 'Müşteri adresi' },
    { kod: '{musteri_web}',         aciklama: 'Müşteri web sitesi' },
    { kod: '{musteri_yetkili_ad}',  aciklama: 'Ana yetkili kişi (ad + soyad)' },
    { kod: '{musteri_yetkili_email}',aciklama: 'Ana yetkili e-postası' },
    { kod: '{musteri_yetkili_telefon}',aciklama: 'Ana yetkili telefonu' },
];
const YT_SISTEM: YT[] = [
    { kod: '{tarih}',      aciklama: 'Gönderim anı (d.m.Y H:i)' },
    { kod: '{tarih_kisa}', aciklama: 'Gönderim tarihi (d.m.Y)' },
    { kod: '{saat}',       aciklama: 'Saat (H:i)' },
    { kod: '{kullanici_ad}',aciklama: 'Sistem kullanıcısı' },
];

const YT_GRUPLARI: YTGrubu[] = [
    { baslik: 'Müşteri', ikon: Contact, yt: YT_MUSTERI },
    { baslik: 'Yenileme Bilgileri', ikon: RefreshCw, yt: [
        { kod: '{baslik}',          aciklama: 'Yenilemenin başlığı' },
        { kod: '{durum_ad}',        aciklama: 'Mevcut durumu' },
        { kod: '{durum}',           aciklama: 'Durum (alternatif)' },
        { kod: '{tur_listesi}',     aciklama: 'Türler (virgüllü)' },
        { kod: '{takip_ay}',        aciklama: 'Takip süresi (ay)' },
    ]},
    { baslik: 'Ürünler / Tutarlar', ikon: Package, yt: [
        { kod: '{urunler}',           aciklama: 'Ürün satırları — mailde tablo, SMS\'te "ad x miktar = tutar" listesi' },
        { kod: '{ara_toplam}',        aciklama: 'Satır toplamı — KDV hariç (para birimi ile)' },
        { kod: '{indirimsiz_toplam}', aciklama: 'İndirim uygulanmadan önceki toplam (para birimi ile)' },
        { kod: '{kdv}',               aciklama: 'Satırlardan hesaplanan toplam KDV tutarı (para birimi ile)' },
        { kod: '{kdv_orani}',         aciklama: 'Satırlarda kullanılan KDV oranları (%20)' },
        { kod: '{tutar}',             aciklama: 'GENEL TOPLAM — KDV dahil, para birimi ile (satırlardan hesaplanır)' },
        { kod: '{genel_toplam}',      aciklama: 'Genel toplam (alternatif)' },
        { kod: '{para_birimi}',       aciklama: 'Para birimi sembolü (₺/$/€)' },
        { kod: '{para_birimi_kod}',   aciklama: 'Para birimi kodu (TRY/USD/EUR)' },
    ]},
    { baslik: 'Tarihler', ikon: Calendar, yt: [
        { kod: '{kayit_tarihi}',    aciklama: 'Yenileme kayıt tarihi' },
        { kod: '{yenileme_tarihi}', aciklama: 'Yenileme tarihi' },
        { kod: '{kalan_gun}',       aciklama: 'Kalan gün' },
        { kod: '{gecen_gun}',       aciklama: 'Kayıttan geçen gün' },
    ]},
    { baslik: 'Sistem', ikon: Settings, yt: YT_SISTEM },
    { baslik: 'Firma', ikon: Building2, yt: YT_FIRMA },
    { baslik: 'Onay (Mail/SMS)', ikon: CheckCircle2, yt: [
        { kod: '{onay_butonlari}', aciklama: 'Onay Veriyorum / Onay Vermiyorum butonları (yalnızca mail içinde anlamlıdır)' },
        { kod: '{onay_link}',      aciklama: 'Onay sayfası kısa URL — SMS\'te kullanın, müşteri tıklayıp karar verir' },
    ] },
];
const TUM_YT = YT_GRUPLARI.flatMap((g) => g.yt);

const VARSAYILAN_GOVDE = `<p>Sayın {musteri_ad},</p>
<p><strong>{baslik}</strong> kaydınız için bilgilendirme:</p>
<ul>
    <li><strong>Türler:</strong> {tur_listesi}</li>
    <li><strong>Yenileme Tarihi:</strong> {yenileme_tarihi}</li>
</ul>
<p><strong>Ürün / Hizmet Listesi:</strong></p>
{urunler}
<p><strong>Ara Toplam:</strong> {ara_toplam}<br>
<strong>KDV:</strong> {kdv}<br>
<strong>Genel Toplam:</strong> {tutar}</p>
<p>Bilginize, {firma_ad}.</p>`;
const VARSAYILAN_KONU = 'Yenileme Bilgilendirme: {baslik}';
const VARSAYILAN_SMS = 'Sayin {musteri_ad}, {baslik} kaydiniz {yenileme_tarihi} tarihinde yenilenecektir. Genel Toplam: {tutar}. {firma_ad}';

export default function YenilemeSablonModal({ sablon, onClose, onSaved, durumlar = [] }: Props) {
    const yeni = sablon.id === 'yeni';
    const [aktifKanal, setAktifKanal] = useState<'mail' | 'sms'>('mail');
    const [ad, setAd] = useState(sablon.ad ?? '');
    const [konu, setKonu] = useState(sablon.konu ?? '');
    const [govde, setGovde] = useState(sablon.govde ?? '');
    const [smsMesaj, setSmsMesaj] = useState(sablon.sms_mesaj ?? '');
    const [bildirimDurumId, setBildirimDurumId] = useState<number | null>(sablon.bildirim_durum_id ?? null);
    const [onayDurumId, setOnayDurumId] = useState<number | null>(sablon.onay_durum_id ?? null);
    const [redDurumId, setRedDurumId] = useState<number | null>(sablon.red_durum_id ?? null);
    const [yukleniyor, setYukleniyor] = useState(false);
    const [hangiAlan, setHangiAlan] = useState<'konu' | 'govde' | 'sms'>('govde');
    const [kopyalandi, setKopyalandi] = useState<string | null>(null);
    const [ytArama, setYtArama] = useState('');
    const [testEmail, setTestEmail] = useState('');
    const [testGsm, setTestGsm] = useState('');
    const [testGonderiliyor, setTestGonderiliyor] = useState(false);
    // YT akordiyonları HEPSİ KAPALI başlasın
    const [acikGruplar, setAcikGruplar] = useState<Set<string>>(() => new Set());
    const [mobilSekme, setMobilSekme] = useState<'detay' | 'icerik' | 'yt'>('detay');

    const grupToggle = (baslik: string) => {
        setAcikGruplar((p) => {
            const yeniSet = new Set(p);
            if (yeniSet.has(baslik)) yeniSet.delete(baslik); else yeniSet.add(baslik);
            return yeniSet;
        });
    };

    const adRef = useRef<HTMLInputElement>(null);
    const konuRef = useRef<HTMLInputElement>(null);
    const editorRef = useRef<MailHtmlEditorRef>(null);
    const smsRef = useRef<HTMLTextAreaElement>(null);
    const sms = krediHesapla(smsMesaj);

    useEffect(() => {
        if (!kopyalandi) return;
        const t = setTimeout(() => setKopyalandi(null), 1200);
        return () => clearTimeout(t);
    }, [kopyalandi]);

    const yerTutucuEkle = (kod: string) => {
        if (hangiAlan === 'konu') {
            const input = konuRef.current;
            if (!input) { setKonu((k) => k + kod); setKopyalandi(kod); return; }
            const s = input.selectionStart ?? konu.length;
            const e = input.selectionEnd ?? konu.length;
            setKonu(konu.slice(0, s) + kod + konu.slice(e));
            setTimeout(() => { input.focus(); input.setSelectionRange(s + kod.length, s + kod.length); }, 30);
        } else if (hangiAlan === 'sms') {
            const ta = smsRef.current;
            if (!ta) { setSmsMesaj((m) => m + kod); setKopyalandi(kod); return; }
            const s = ta.selectionStart ?? smsMesaj.length;
            const e = ta.selectionEnd ?? smsMesaj.length;
            setSmsMesaj(smsMesaj.slice(0, s) + kod + smsMesaj.slice(e));
            setTimeout(() => { ta.focus(); ta.setSelectionRange(s + kod.length, s + kod.length); }, 30);
        } else {
            editorRef.current?.insertAtCursor(kod);
        }
        setKopyalandi(kod);
    };

    const varsayilanaDon = () => {
        if (aktifKanal === 'mail') {
            setKonu(VARSAYILAN_KONU);
            setGovde(VARSAYILAN_GOVDE);
        } else {
            setSmsMesaj(VARSAYILAN_SMS);
        }
    };

    const testMailGonder = async () => {
        if (!testEmail.trim()) { Toaster.uyari('E-posta adresi girin'); return; }
        if (yeni) { Toaster.uyari('Önce şablonu kaydedin'); return; }
        setTestGonderiliyor(true);
        try {
            const csrf = (document.cookie.match(/XSRF-TOKEN=([^;]+)/) || [])[1] || '';
            const r = await fetch(`/yenilemeler/sablonlar/${sablon.id}/test-mail/`, {
                method: 'POST', credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': decodeURIComponent(csrf), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ email: testEmail, konu, govde }),
            });
            const d = await r.json();
            if (d.ok) Toaster.basari(d.mesaj || 'Test mail gönderildi');
            else Toaster.hata(d.mesaj || 'Hata');
        } catch (e: any) { Toaster.hata('Hata: ' + (e?.message ?? '')); }
        finally { setTestGonderiliyor(false); }
    };

    const testSmsGonder = async () => {
        if (!testGsm.trim()) { Toaster.uyari('Telefon girin'); return; }
        if (yeni) { Toaster.uyari('Önce şablonu kaydedin'); return; }
        setTestGonderiliyor(true);
        try {
            const csrf = (document.cookie.match(/XSRF-TOKEN=([^;]+)/) || [])[1] || '';
            const r = await fetch(`/yenilemeler/sablonlar/${sablon.id}/test-sms/`, {
                method: 'POST', credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': decodeURIComponent(csrf), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ gsm: testGsm, sms_mesaj: smsMesaj }),
            });
            const d = await r.json();
            if (d.ok) Toaster.basari(d.mesaj || 'Test SMS gönderildi');
            else Toaster.hata(d.mesaj || 'Hata');
        } catch (e: any) { Toaster.hata('Hata: ' + (e?.message ?? '')); }
        finally { setTestGonderiliyor(false); }
    };

    const kaydet = async () => {
        if (!ad.trim()) { Toaster.uyari('Şablon Adı zorunludur'); return; }
        // En az birinin dolu olması gerekir
        const mailVar = konu.trim() && govde.trim();
        const smsVar = smsMesaj.trim();
        if (!mailVar && !smsVar) {
            Toaster.uyari('En az bir kanal için içerik girin (Mail veya SMS)');
            return;
        }
        setYukleniyor(true);
        try {
            const csrf = (document.cookie.match(/XSRF-TOKEN=([^;]+)/) || [])[1] || '';
            const url = yeni ? '/yenilemeler/sablonlar' : `/yenilemeler/sablonlar/${sablon.id}`;
            const method = yeni ? 'POST' : 'PUT';
            const r = await fetch(url, {
                method, credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': decodeURIComponent(csrf), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({
                    ad, konu, govde, sms_mesaj: smsMesaj,
                    bildirim_durum_id: bildirimDurumId,
                    onay_durum_id: onayDurumId,
                    red_durum_id: redDurumId,
                }),
            });
            const d = await r.json();
            if (!d.ok) throw new Error(d.mesaj || 'Hata');
            Toaster.basari(yeni ? 'Şablon oluşturuldu' : 'Şablon güncellendi');
            onSaved(d.sablon, yeni ? 'yeni' : 'duzenle');
            onClose();
        } catch (e: any) { Toaster.hata(e?.message ?? 'Hata'); }
        finally { setYukleniyor(false); }
    };

    const dolulukYuzde = Math.round(
        ((ad.trim() ? 1 : 0) + (konu.trim() ? 1 : 0) + (govde.trim() ? 1 : 0) + (smsMesaj.trim() ? 1 : 0)) / 4 * 100
    );

    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-center justify-center p-[10px] md:py-6">
                        <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="flex h-[calc(100dvh-20px)] w-full max-w-[95vw] flex-col overflow-hidden bg-white shadow-2xl md:mx-auto md:h-[90vh]">
                                <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">
                                        <Mail className="h-4 w-4 flex-shrink-0 text-blue-600" />
                                        <MessageSquareText className="h-4 w-4 flex-shrink-0 text-emerald-600" />
                                        <span className="truncate">
                                            {yeni ? 'Yeni Bildirim Şablonu' : 'Bildirim Şablonu'}
                                            {!yeni && ad && <><span className="font-normal text-slate-500"> — </span><span className="text-slate-700">{ad}</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>

                                {/* MOBİL SEKME — 3 sekme */}
                                <div className="flex flex-shrink-0 border-b border-slate-200 bg-white lg:hidden">
                                    {[
                                        { kod: 'detay'  as const, etiket: 'Detaylar', ikon: Settings },
                                        { kod: 'icerik' as const, etiket: 'İçerik',   ikon: Mail },
                                        { kod: 'yt'     as const, etiket: `Yer Tutucular (${TUM_YT.length})`, ikon: Copy },
                                    ].map(({ kod, etiket, ikon: Ikon }) => (
                                        <button key={kod} type="button" onClick={() => setMobilSekme(kod)}
                                            className={`flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition ${
                                                mobilSekme === kod ? 'border-b-2 border-blue-600 text-blue-700' : 'border-b-2 border-transparent text-slate-500 hover:text-slate-800'
                                            }`}>
                                            <Ikon className="h-4 w-4" /> {etiket}
                                        </button>
                                    ))}
                                </div>

                                <div className="grid min-h-0 flex-1 grid-cols-1 gap-0 lg:grid-cols-12">
                                    {/* SOL — %25 — Şablon Adı + Otomatik Durum Atama */}
                                    <div className={`min-h-0 space-y-4 overflow-y-auto p-4 lg:col-span-3 ${mobilSekme === 'detay' ? '' : 'hidden lg:block'}`}>
                                        <div>
                                            <label className="mb-1 block text-sm font-medium text-slate-700">Şablon Adı</label>
                                            <input ref={adRef} type="text" value={ad} onChange={(e) => setAd(e.target.value)}
                                                placeholder="örn. Standart Yenileme Hatırlatma"
                                                className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500" />
                                        </div>

                                        <div className="rounded-lg border border-slate-200 bg-slate-50/60 p-3">
                                            <div className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-slate-700">
                                                <Settings className="h-3.5 w-3.5" /> Otomatik Durum Atama
                                            </div>
                                            <div className="space-y-3">
                                                <div>
                                                    <label className="mb-1 block text-[11px] font-medium text-slate-700">Bilgilendirme Durumu</label>
                                                    <Select
                                                        value={bildirimDurumId ?? ''}
                                                        onChange={(v) => setBildirimDurumId(v ? Number(v) : null)}
                                                        options={durumlar.map((d) => ({
                                                            value: d.id, label: d.ad,
                                                            icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: d.renk }} />,
                                                        }))}
                                                        placeholder="— Otomatik atama yok —"
                                                        hizliEkleUrl="/tanimlamalar/tip/yenileme-durumu"
                                                        hizliEkleBaslik="Yeni Yenileme Durumu"
                                                    />
                                                    <p className="mt-1 text-[10px] leading-snug text-slate-500">Bildirim gönderildiğinde kayıt bu duruma geçer.</p>
                                                </div>
                                                <div>
                                                    <label className="mb-1 block text-[11px] font-medium text-emerald-700">Onaylanma Durumu</label>
                                                    <Select
                                                        value={onayDurumId ?? ''}
                                                        onChange={(v) => setOnayDurumId(v ? Number(v) : null)}
                                                        options={durumlar.map((d) => ({
                                                            value: d.id, label: d.ad,
                                                            icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: d.renk }} />,
                                                        }))}
                                                        placeholder="— Otomatik atama yok —"
                                                        hizliEkleUrl="/tanimlamalar/tip/yenileme-durumu"
                                                        hizliEkleBaslik="Yeni Yenileme Durumu"
                                                    />
                                                    <p className="mt-1 text-[10px] leading-snug text-slate-500">Yetkili onay verirse kayıt bu duruma geçer.</p>
                                                </div>
                                                <div>
                                                    <label className="mb-1 block text-[11px] font-medium text-rose-700">Onaylanmama Durumu</label>
                                                    <Select
                                                        value={redDurumId ?? ''}
                                                        onChange={(v) => setRedDurumId(v ? Number(v) : null)}
                                                        options={durumlar.map((d) => ({
                                                            value: d.id, label: d.ad,
                                                            icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: d.renk }} />,
                                                        }))}
                                                        placeholder="— Otomatik atama yok —"
                                                        hizliEkleUrl="/tanimlamalar/tip/yenileme-durumu"
                                                        hizliEkleBaslik="Yeni Yenileme Durumu"
                                                    />
                                                    <p className="mt-1 text-[10px] leading-snug text-slate-500">Yetkili red verirse kayıt bu duruma geçer.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {/* ORTA — %50 — Sekmeli içerik (Mail / SMS) */}
                                    <div className={`flex min-h-0 flex-col overflow-hidden border-slate-200 lg:col-span-6 lg:border-l ${mobilSekme === 'icerik' ? '' : 'hidden lg:flex'}`}>
                                        {/* KANAL SEKMELERİ */}
                                        <div className="flex flex-shrink-0 border-b border-slate-200 bg-slate-50">
                                            <button type="button" onClick={() => { setAktifKanal('mail'); setHangiAlan('govde'); }}
                                                className={`flex items-center gap-1.5 px-5 py-2.5 text-sm font-semibold transition ${aktifKanal === 'mail' ? 'border-b-2 border-blue-600 bg-white text-blue-700' : 'text-slate-500 hover:bg-slate-100'}`}>
                                                <Mail className="h-4 w-4" /> E-Posta
                                                {(konu || govde) && <span className="ml-1 h-1.5 w-1.5 rounded-full bg-blue-500" />}
                                            </button>
                                            <button type="button" onClick={() => { setAktifKanal('sms'); setHangiAlan('sms'); }}
                                                className={`flex items-center gap-1.5 px-5 py-2.5 text-sm font-semibold transition ${aktifKanal === 'sms' ? 'border-b-2 border-emerald-600 bg-white text-emerald-700' : 'text-slate-500 hover:bg-slate-100'}`}>
                                                <MessageSquareText className="h-4 w-4" /> SMS
                                                {smsMesaj && <span className="ml-1 h-1.5 w-1.5 rounded-full bg-emerald-500" />}
                                            </button>
                                        </div>

                                        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
                                            {aktifKanal === 'mail' && (
                                                <>
                                                    <div>
                                                        <label className="mb-1 block text-sm font-medium text-slate-700">Mail Konusu</label>
                                                        <input ref={konuRef} type="text" value={konu}
                                                            onChange={(e) => setKonu(e.target.value)}
                                                            onFocus={() => setHangiAlan('konu')}
                                                            placeholder="Yenileme Bilgilendirme: {baslik}"
                                                            className="w-full rounded-lg border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500" />
                                                    </div>

                                                    <div>
                                                        <div className="mb-1 flex items-end justify-between">
                                                            <label className="block text-sm font-medium text-slate-700">Mail İçeriği</label>
                                                            <button type="button" onClick={varsayilanaDon}
                                                                className="text-[11px] font-medium text-blue-600 hover:text-blue-800">
                                                                Varsayılana Dön
                                                            </button>
                                                        </div>
                                                        <div onFocusCapture={() => setHangiAlan('govde')}>
                                                            <MailHtmlEditor ref={editorRef} key={`mail-${sablon.id}`} value={govde} onChange={setGovde} minHeight={220} />
                                                            <div className="mt-1 text-[11px] text-slate-500">
                                                                İframe içinde doğrudan düzenleyebilir, yer tutucuları sağdan ekleyebilirsin.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </>
                                            )}

                                            {aktifKanal === 'sms' && (
                                                <div>
                                                    <div className="mb-1 flex items-end justify-between">
                                                        <label className="block text-sm font-medium text-slate-700">SMS Mesajı (düz metin)</label>
                                                        <button type="button" onClick={varsayilanaDon}
                                                            className="text-[11px] font-medium text-emerald-600 hover:text-emerald-800">
                                                            Varsayılana Dön
                                                        </button>
                                                    </div>
                                                    <textarea ref={smsRef} rows={12} value={smsMesaj}
                                                        onChange={(e) => setSmsMesaj(e.target.value)}
                                                        onFocus={() => setHangiAlan('sms')}
                                                        placeholder="Sayin {musteri_ad}, {baslik} kaydiniz {yenileme_tarihi} tarihinde yenilenecektir."
                                                        className="w-full rounded-lg border-slate-300 font-mono text-sm focus:border-emerald-500 focus:ring-emerald-500" />

                                                    <div className="mt-2 flex flex-wrap items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs">
                                                        <div className="flex items-center gap-1.5">
                                                            <span className="font-medium text-slate-700">Karakter:</span>
                                                            <span className="font-mono font-bold text-slate-900">{sms.uzunluk}</span>
                                                        </div>
                                                        <div className="flex items-center gap-1.5">
                                                            <span className="font-medium text-slate-700">Segment (kredi):</span>
                                                            <span className={`font-mono font-bold ${sms.segment > 1 ? 'text-orange-600' : 'text-emerald-700'}`}>{sms.segment}</span>
                                                        </div>
                                                        <div className="flex items-center gap-1.5">
                                                            <span className="font-medium text-slate-700">Kalan:</span>
                                                            <span className="font-mono text-slate-900">{sms.kalan}</span>
                                                        </div>
                                                        <span className={`rounded px-2 py-0.5 text-[10px] font-bold ${sms.gsm7 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'}`}>
                                                            {sms.gsm7 ? `GSM-7 · ${sms.tek_limit}/${sms.coklu_limit}` : `UCS-2 (TR) · ${sms.tek_limit}/${sms.coklu_limit}`}
                                                        </span>
                                                    </div>

                                                    <div className="mt-2 text-[11px] leading-snug text-slate-500">
                                                        <strong>NETGSM kredi kuralı:</strong> TR karakter (ç ğ ı ş ü ö) içeren mesajlar UCS-2 ile gönderilir (tek SMS 70 / çoklu 67); sadece İngilizce karakterler GSM-7 (tek 160 / çoklu 153).
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>

                                    {/* SAĞ — %25 Yer Tutucular */}
                                    <div className={`flex min-h-0 flex-col border-t border-slate-200 bg-slate-50/50 lg:col-span-3 lg:border-l lg:border-t-0 ${mobilSekme === 'yt' ? '' : 'hidden lg:flex'}`}>
                                        <div className="flex-shrink-0 border-b border-slate-200 bg-white p-3">
                                            <div className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-slate-600">
                                                <Copy className="h-3.5 w-3.5" /> Yer Tutucular
                                                <span className="ml-auto rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-bold text-blue-700">{TUM_YT.length}</span>
                                            </div>
                                            <p className="mb-2 text-[11px] leading-snug text-slate-500">
                                                Tıklayarak <strong>{hangiAlan === 'konu' ? 'konuya' : hangiAlan === 'sms' ? 'SMS mesajına' : 'mail içeriğine'}</strong> ekle.
                                            </p>
                                            <div className="relative">
                                                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" />
                                                <input type="text" value={ytArama} onChange={(e) => setYtArama(e.target.value)}
                                                    placeholder="Yer tutucu ara..."
                                                    className="w-full rounded-lg border-slate-300 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500" />
                                            </div>
                                        </div>

                                        <div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto p-2">
                                            {YT_GRUPLARI.map((grup) => {
                                                const filtre = ytArama.trim().toLowerCase();
                                                const goster = filtre
                                                    ? grup.yt.filter((y) =>
                                                        y.kod.toLowerCase().includes(filtre) ||
                                                        y.aciklama.toLowerCase().includes(filtre))
                                                    : grup.yt;
                                                if (goster.length === 0) return null;
                                                const acik = filtre !== '' || acikGruplar.has(grup.baslik);
                                                const GrupIcon = grup.ikon;
                                                return (
                                                    <div key={grup.baslik} className="overflow-hidden rounded-lg border border-slate-200 bg-white">
                                                        <button type="button" onClick={() => grupToggle(grup.baslik)}
                                                            className="flex w-full items-center gap-2 px-3 py-2 text-left transition hover:bg-slate-50">
                                                            <GrupIcon className="h-4 w-4 text-slate-600" />
                                                            <span className="text-xs font-semibold uppercase tracking-wider text-slate-700">{grup.baslik}</span>
                                                            <span className="ml-auto rounded-full bg-slate-200 px-1.5 text-[10px] font-semibold text-slate-600">{goster.length}</span>
                                                            <svg className={`h-3.5 w-3.5 text-slate-400 transition-transform ${acik ? 'rotate-90' : ''}`} viewBox="0 0 20 20" fill="currentColor">
                                                                <path fillRule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.94 10 7.21 6.29a.75.75 0 111.08-1.04l4.25 4.25a.75.75 0 010 1.04l-4.25 4.25a.75.75 0 01-1.08-.02z" clipRule="evenodd" />
                                                            </svg>
                                                        </button>
                                                        {acik && (
                                                            <div className="space-y-1 border-t border-slate-100 bg-slate-50/40 p-2">
                                                                {goster.map((yt) => (
                                                                    <button key={yt.kod} type="button"
                                                                        onMouseDown={(e) => e.preventDefault()}
                                                                        onClick={() => yerTutucuEkle(yt.kod)}
                                                                        title={yt.aciklama}
                                                                        className="group flex w-full items-start gap-2 rounded-md border border-slate-200 bg-white px-2 py-1.5 text-left transition hover:border-blue-400 hover:bg-blue-50">
                                                                        <div className="min-w-0 flex-1">
                                                                            <div className="font-mono text-xs font-semibold text-blue-700 group-hover:text-blue-800">{yt.kod}</div>
                                                                            <div className="truncate text-[10px] text-slate-500">{yt.aciklama}</div>
                                                                        </div>
                                                                        {kopyalandi === yt.kod && <span className="self-center text-[10px] font-semibold text-emerald-600">✓</span>}
                                                                    </button>
                                                                ))}
                                                            </div>
                                                        )}
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                </div>

                                {/* FOOTER */}
                                <div className="flex items-center justify-between border-t border-slate-200 bg-slate-50/60 px-5 py-3">
                                    <div className="flex items-center gap-2 text-xs text-slate-500">
                                        <div className="h-1.5 w-16 overflow-hidden rounded-full bg-slate-200">
                                            <div className="h-full bg-emerald-500 transition-all" style={{ width: `${dolulukYuzde}%` }} />
                                        </div>
                                        <span>{dolulukYuzde}% dolu</span>
                                    </div>
                                    <div className="flex flex-wrap items-center gap-2">
                                        {!yeni && aktifKanal === 'mail' && (
                                            <div className="flex items-center overflow-hidden rounded-lg border border-slate-300 bg-white">
                                                <Mail className="ml-2 h-3.5 w-3.5 text-slate-400" />
                                                <input type="email" value={testEmail} onChange={(e) => setTestEmail(e.target.value)}
                                                    placeholder="test@ornek.com"
                                                    className="w-48 border-0 px-2 py-1.5 text-xs focus:outline-none focus:ring-0" />
                                                <button type="button" onClick={testMailGonder} disabled={testGonderiliyor || !testEmail}
                                                    className="inline-flex items-center gap-1 border-l border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 disabled:opacity-50">
                                                    {testGonderiliyor ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Send className="h-3.5 w-3.5" />}
                                                    <span className="hidden md:inline">Test Mail</span>
                                                </button>
                                            </div>
                                        )}
                                        {!yeni && aktifKanal === 'sms' && (
                                            <div className="flex items-center overflow-hidden rounded-lg border border-slate-300 bg-white">
                                                <Phone className="ml-2 h-3.5 w-3.5 text-slate-400" />
                                                <input type="text" value={testGsm} onChange={(e) => setTestGsm(e.target.value)}
                                                    placeholder="5XX XXX XX XX"
                                                    className="w-40 border-0 px-2 py-1.5 text-xs focus:outline-none focus:ring-0" />
                                                <button type="button" onClick={testSmsGonder} disabled={testGonderiliyor || !testGsm}
                                                    className="inline-flex items-center gap-1 border-l border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 disabled:opacity-50">
                                                    {testGonderiliyor ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Send className="h-3.5 w-3.5" />}
                                                    <span className="hidden md:inline">Test SMS</span>
                                                </button>
                                            </div>
                                        )}
                                        <button type="button" onClick={onClose}
                                            className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                            <X className="h-4 w-4 md:hidden" /><span className="hidden md:inline">İptal</span>
                                        </button>
                                        <button type="button" onClick={kaydet} disabled={yukleniyor}
                                            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" /> : <Save className="h-4 w-4" />}
                                            <span className="hidden md:inline">Kaydet</span>
                                        </button>
                                    </div>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
}