import AsyncSelect from '@/Components/AsyncSelect';
import Modal from '@/Components/Modal';
import SignaturePad, { SignaturePadRef } from '@/Components/SignaturePad';
import { Toaster } from '@/Components/Toaster';
import Toggle from '@/Components/Toggle';
import RichTextEditor, { RichTextEditorRef, sanitizeZengin } from '@/Components/RichTextEditor';
import { router } from '@inertiajs/react';
import {
    ArrowLeft, CheckCircle2, Eye, FileSignature, Loader2, Mail, Pencil, Plus, Trash2, X,
} from 'lucide-react';
import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';

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

interface SablonOnizleme {
    id: number;
    kod: string;
    ad: string;
    icerik: string;
}

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

export default function SozlesmeOnayModal({ acik, musteri, onClose }: Props) {
    // adim 1: şablon seç · adim 2: metni oku + imzala
    const [adim, setAdim] = useState<1 | 2>(1);
    /** Mobil/dar ekranda iki panel sekmeye dönüşür (sistem deseni). */
    const [aktifSekme, setAktifSekme] = useState<'sozlesme' | 'bilgilendirme'>('sozlesme');
    const [sozlesmeId, setSozlesmeId] = useState<number | string | ''>('');
    const [sablon, setSablon] = useState<SablonOnizleme | null>(null);
    const [yukleniyor, setYukleniyor] = useState(false);
    const [kaydediliyor, setKaydediliyor] = useState(false);

    const [adSoyad, setAdSoyad] = useState('');
    /**
     * Kaydedilecek metin. Şablondan doldurulmuş hâliyle başlar; kullanıcı
     * "Metni Düzenle" ile BU MÜŞTERİYE ÖZEL değiştirebilir (fiyat, madde, tarih).
     * Şablonun kendisi etkilenmez.
     */
    const [metin, setMetin] = useState('');
    const [duzenleAcik, setDuzenleAcik] = useState(false);
    // Onay sonrası bilgilendirme
    const [mailGonder, setMailGonder] = useState(true);
    const [ekMailler, setEkMailler] = useState<string[]>([]);
    const [yeniMail, setYeniMail] = useState('');
    const [errors, setErrors] = useState<Record<string, string>>({});
    const imzaRef = useRef<SignaturePadRef>(null);
    const editorRef = useRef<RichTextEditorRef>(null);

    const sifirla = useCallback(() => {
        setAdim(1); setSozlesmeId(''); setSablon(null); setAktifSekme('sozlesme');
        setAdSoyad(''); setErrors({});
        setMetin(''); setDuzenleAcik(false);
        setMailGonder(true); setEkMailler([]); setYeniMail('');
        imzaRef.current?.temizle();
    }, []);

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

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

    // Şablon seçilince: yer tutucuları bu müşterinin verisiyle DOLDURULMUŞ önizlemeyi çek
    const sozlesmeyiOlustur = async () => {
        if (!sozlesmeId) {
            setErrors({ sozlesme_id: 'Bu alan zorunludur.' });
            Toaster.uyari('Zorunlu alanları doldurunuz.');
            return;
        }
        setErrors({});
        setYukleniyor(true);
        try {
            const r = await fetch(
                `/musteriler/${musteri.id}/sozlesmeler/sablon/?sozlesme_id=${encodeURIComponent(String(sozlesmeId))}`,
                { credentials: 'same-origin', headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' } },
            );
            if (!r.ok) { Toaster.hata('Sözleşme metni yüklenemedi.'); return; }
            const d = await r.json();
            setSablon(d.sozlesme);
            setMetin(d.sozlesme?.icerik ?? '');
            setDuzenleAcik(false);
            if (d.onerilen_ad_soyad && !adSoyad) setAdSoyad(d.onerilen_ad_soyad);
            setAdim(2);
        } catch {
            Toaster.hata('Sözleşme metni yüklenemedi.');
        } finally {
            setYukleniyor(false);
        }
    };

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

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

    const onayla = async (e: FormEvent | null) => {
        if (e) e.preventDefault();
        if (kaydediliyor || !sablon) return;

        // İMZA ARTIK ZORUNLU DEĞİL.
        //   imza + ad soyad doluysa → imzalanmış kaydedilir,
        //   ikisi de boşsa          → taslak kaydedilir, sonra "İmza için gönder" ile iletilir.
        // Tek başına imza (ad soyad yok) anlamsız olduğu için uyarılır.
        const imzaBos = !imzaRef.current || imzaRef.current.bosMu();
        const imzaData = imzaBos ? null : (imzaRef.current?.getDataURL() ?? null);
        const adDolu = adSoyad.trim() !== '';

        if (imzaData && !adDolu) {
            setErrors({ imza_ad_soyad: 'İmza atıldı — imza sahibinin adı soyadı da gereklidir.' });
            Toaster.uyari('İmza sahibinin adını soyadını giriniz.');
            return;
        }
        setErrors({});
        setKaydediliyor(true);

        try {
            const r = await fetch(`/musteriler/${musteri.id}/sozlesmeler/`, {
                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: sablon.id,
                    imza_ad_soyad: adDolu ? adSoyad.trim() : null,
                    imza: imzaData,
                    // Metin müşteriye özel düzenlendiyse onu gönder
                    icerik: metin,
                    mail_gonder: imzaData ? mailGonder : false,
                    ek_mailler: ekMailler,
                }),
            });

            if (r.status === 422) {
                const d = await r.json();
                const flat: Record<string, string> = {};
                for (const [k, v] of Object.entries(d.errors ?? {})) {
                    flat[k] = Array.isArray(v) ? String(v[0]) : 'Bu alan zorunludur.';
                }
                setErrors(flat);
                Toaster.uyari(d.message || 'Zorunlu alanları doldurunuz.');
                return;
            }
            if (!r.ok) { Toaster.hata('Sözleşme kaydedilemedi (HTTP ' + r.status + ')'); return; }

            const d = await r.json().catch(() => ({}));
            Toaster.basari(d?.mesaj || (imzaData
                ? 'Sözleşme imzalandı ve müşteri kaydına eklendi.'
                : 'Sözleşme kaydedildi. İmza bekliyor.'));
            router.reload({ only: ['sozlesmeler'] });
            kapat();
        } catch {
            Toaster.hata('Beklenmeyen bir hata oluştu.');
        } finally {
            setKaydediliyor(false);
        }
    };

    return (
        <Modal show={acik} onClose={kapat} maxWidth={adim === 1 ? 'lg' : 'tam'}>
            <form onSubmit={onayla} className={adim === 1 ? '' : 'flex h-full flex-col'}>
                {/* Adım 1'de küçük bir başlık kalır; adım 2 (tam ekran) başlıksızdır. */}
                {adim === 1 && (
                    <div className="flex flex-shrink-0 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">
                            <FileSignature className="h-5 w-5 flex-shrink-0 text-indigo-600" />
                            <div className="min-w-0">
                                <h2 className="truncate text-base font-semibold text-slate-900">Sözleşme Ekle</h2>
                                <p className="truncate text-[11px] text-slate-500">{musteri.unvan}</p>
                            </div>
                        </div>
                        <button type="button" onClick={kapat}
                            className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700">
                            <X className="h-5 w-5" />
                        </button>
                    </div>
                )}

                {/* ADIM 1 — ŞABLON SEÇİMİ */}
                {adim === 1 && (
                    <>
                        <div className="p-5">
                            <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-2 text-[11px] leading-relaxed text-slate-500">
                                Seçtiğin şablonun metni, bu müşterinin bilgileriyle doldurularak bir sonraki adımda
                                gösterilir. Onayladıktan sonra metin bu müşteriye özel olarak saklanır ve şablon
                                sonradan değişse bile <strong>bu sözleşme değişmez</strong>.
                            </p>
                        </div>

                        <div className="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-5 py-3">
                            <button type="button" onClick={kapat}
                                className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">
                                İptal
                            </button>
                            <button type="button" onClick={sozlesmeyiOlustur} disabled={yukleniyor}
                                className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 disabled:opacity-50">
                                {yukleniyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileSignature className="h-4 w-4" />}
                                {yukleniyor ? 'Hazırlanıyor...' : 'Sözleşmeyi Oluştur'}
                            </button>
                        </div>
                    </>
                )}

                {/* ADIM 2 — METİN + İMZA */}
                {adim === 2 && sablon && (
                    <>
                        {/* MOBİL SEKME — dar ekranda iki panel sekmeye dönüşür */}
                        <div className="flex flex-shrink-0 border-b border-slate-200 bg-slate-50 lg:hidden">
                            {[
                                { kod: 'sozlesme', label: 'Sözleşme ve İmza' },
                                { kod: 'bilgilendirme', label: 'Bilgilendirme', sayi: ekMailler.length },
                            ].map((t) => (
                                <button key={t.kod} type="button" onClick={() => setAktifSekme(t.kod as any)}
                                    className={`flex-1 border-b-2 px-3 py-2 text-xs font-medium transition ${
                                        aktifSekme === t.kod ? 'border-blue-600 text-blue-700' : 'border-transparent text-slate-600'
                                    }`}>
                                    {t.label}
                                    {(t as any).sayi ? (
                                        <span className="ml-1 rounded-full bg-slate-200 px-1.5 text-[9px]">{(t as any).sayi}</span>
                                    ) : null}
                                </button>
                            ))}
                        </div>

                        <div className="flex min-h-0 flex-1 flex-col overflow-hidden lg:flex-row">
                            {/* Sözleşme metni — okunur BELGE görünümü (editör DEĞİL) */}
                            <div className={`min-h-0 flex-1 flex-col overflow-hidden lg:basis-[76%] ${
                                aktifSekme === 'sozlesme' ? 'flex' : 'hidden lg:flex'
                            }`}>
                                {/* Belge üst şeridi — sağ panelle AYNI yükseklik (h-12) */}
                                <div className="flex h-12 flex-shrink-0 items-center gap-2.5 border-b border-slate-200 bg-white px-5">
                                    <FileSignature className="h-4 w-4 flex-shrink-0 text-indigo-600" />
                                    <span className="truncate text-sm font-semibold text-slate-900">{sablon.ad}</span>
                                    <span className="hidden rounded bg-slate-100 px-2 py-0.5 font-mono text-[11px] text-slate-600 sm:inline">
                                        {sablon.kod}
                                    </span>
                                    <div className="flex-1" />
                                    <span className="hidden truncate text-[11px] text-slate-500 xl:inline">
                                        {musteri.unvan}
                                    </span>
                                    {/*
                                      * MÜŞTERİYE ÖZEL DÜZENLEME
                                      * Metin bu müşterinin kaydına kopyalanır; şablon etkilenmez.
                                      */}
                                    <button
                                        type="button"
                                        onClick={() => setDuzenleAcik((v) => !v)}
                                        title={duzenleAcik ? 'Belge görünümüne dön' : 'Metni bu müşteriye özel düzenle'}
                                        className={`ml-1 inline-flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-semibold transition lg:px-3 ${
                                            duzenleAcik
                                                ? 'border-slate-300 bg-white text-slate-700 hover:bg-slate-50'
                                                : 'border-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100'
                                        }`}
                                    >
                                        {duzenleAcik ? <Eye className="h-3.5 w-3.5" /> : <Pencil className="h-3.5 w-3.5" />}
                                        <span className="hidden lg:inline">{duzenleAcik ? 'Önizle' : 'Metni Düzenle'}</span>
                                    </button>
                                </div>

                                {/* DÜZENLEME MODU — müşteriye özel metin */}
                                {duzenleAcik ? (
                                    <div className="flex min-h-0 flex-1 flex-col gap-2 bg-white p-4">
                                        <div className="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2">
                                            <Pencil className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-amber-600" />
                                            <p className="text-[11px] leading-relaxed text-amber-800">
                                                Bu metin yalnızca <strong>{musteri.unvan}</strong> için geçerlidir.
                                                Yaptığınız değişiklik şablonu etkilemez, diğer müşterilerin
                                                sözleşmelerini de değiştirmez.
                                            </p>
                                        </div>
                                        <div className="min-h-0 flex-1">
                                            <RichTextEditor
                                                ref={editorRef}
                                                value={metin}
                                                onChange={setMetin}
                                                placeholder="Sözleşme metni — bu müşteriye özel düzenleyebilirsiniz."
                                                dolgu
                                                aracSeti="gelismis"
                                            />
                                        </div>
                                    </div>
                                ) : (

                                /* Kağıt zemin — okunabilirlik için ortalanmış, gölgeli sayfa */
                                <div className="min-h-0 flex-1 overflow-y-auto bg-slate-100 px-4 py-6">
                                    <div className="mx-auto max-w-[820px] rounded-lg bg-white px-10 py-9 shadow-sm ring-1 ring-slate-200">
                                        <div className="mb-6 border-b border-slate-200 pb-4">
                                            <h1 className="text-lg font-bold leading-snug text-slate-900">{sablon.ad}</h1>
                                            <p className="mt-1 text-[11px] text-slate-500">
                                                Sözleşme No: {sablon.kod} · {musteri.unvan}
                                            </p>
                                        </div>

                                        <div
                                            className="sozlesme-metni text-[13.5px] leading-[1.85] text-slate-800
                                                [&_h1]:mb-2 [&_h1]:mt-6 [&_h1]:text-base [&_h1]:font-bold [&_h1]:text-slate-900
                                                [&_h2]:mb-2 [&_h2]:mt-6 [&_h2]:text-[15px] [&_h2]:font-bold [&_h2]:text-slate-900
                                                [&_h3]:mb-1.5 [&_h3]:mt-5 [&_h3]:text-[13.5px] [&_h3]:font-semibold [&_h3]:text-slate-900
                                                [&_h4]:mb-1.5 [&_h4]:mt-4 [&_h4]:text-[13px] [&_h4]:font-semibold
                                                [&_p]:mb-3 [&_p]:text-justify
                                                [&_ul]:mb-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:mb-3 [&_ol]:list-decimal [&_ol]:pl-6
                                                [&_li]:mb-1
                                                [&_strong]:font-semibold [&_strong]:text-slate-900
                                                [&_a]:text-blue-600 [&_a]:underline
                                                [&_hr]:my-5 [&_hr]:border-slate-200
                                                [&_blockquote]:my-3 [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-slate-600
                                                [&_table]:my-3 [&_table]:w-full [&_table]:border-collapse
                                                [&_td]:border [&_td]:border-slate-300 [&_td]:p-2 [&_td]:align-top
                                                [&_th]:border [&_th]:border-slate-300 [&_th]:bg-slate-50 [&_th]:p-2 [&_th]:text-left [&_th]:font-semibold
                                                [&_img]:my-3 [&_img]:max-w-full [&_img]:rounded
                                                [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-slate-100 [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-xs"
                                            dangerouslySetInnerHTML={{ __html: sanitizeZengin(metin || sablon.icerik) }}
                                        />

                                        {/*
                                          * BELGE SONU İMZA ALANI
                                          * İmza, gerçek bir sözleşmede olduğu gibi metnin hemen altındadır.
                                          * Dar bir yan panelde imza atmak zor olduğu için alan belge
                                          * genişliğinde tutulur.
                                          */}
                                        <div className="mt-10 border-t-2 border-slate-300 pt-6">
                                            <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
                                                <div>
                                                    <div className="text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                                                        İmza Sahibi
                                                    </div>
                                                    <div className="mt-1 text-sm font-semibold text-slate-900">
                                                        {adSoyad.trim() || <span className="font-normal text-slate-400">Ad soyad aşağıya girilir</span>}
                                                    </div>
                                                </div>
                                                <div className="text-right text-[11px] text-slate-500">
                                                    {musteri.unvan}
                                                </div>
                                            </div>

                                            {/* Ad Soyad */}
                                            <label className="mb-1 block text-xs font-medium text-slate-700">
                                                İmza Sahibi Ad Soyad
                                                <span className="ml-1 font-normal text-slate-400">(imza atılacaksa zorunlu)</span>
                                            </label>
                                            <input
                                                type="text"
                                                value={adSoyad}
                                                onChange={(e) => {
                                                    setAdSoyad(e.target.value);
                                                    if (errors.imza_ad_soyad) setErrors((p) => ({ ...p, imza_ad_soyad: '' }));
                                                }}
                                                placeholder="Sözleşmeyi imzalayan kişinin adı soyadı"
                                                maxLength={150}
                                                className={`w-full max-w-sm rounded-lg text-sm focus:ring-1 ${
                                                    errors.imza_ad_soyad
                                                        ? 'border-rose-500 ring-1 ring-rose-500 focus:border-rose-500 focus:ring-rose-500'
                                                        : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500'
                                                }`}
                                            />
                                            {errors.imza_ad_soyad && (
                                                <p className="mt-1 text-xs text-rose-600">{errors.imza_ad_soyad}</p>
                                            )}

                                            {/* İmza — belge genişliğinde, rahat çizim alanı */}
                                            <label className="mt-4 block text-xs font-medium text-slate-700">
                                                İmza
                                                <span className="ml-1 font-normal text-slate-400">(isteğe bağlı)</span>
                                            </label>
                                            {/* Temizleme, imza atıldığında canvas'ın sağ üstünde beliren ikonla yapılır. */}
                                            <div className={`mt-1 overflow-hidden rounded-lg border bg-white ${
                                                errors.imza ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-300'
                                            }`}>
                                                <SignaturePad
                                                    ref={imzaRef}
                                                    yukseklik={210}
                                                    onTemizle={() => {
                                                        if (errors.imza) setErrors((p) => ({ ...p, imza: '' }));
                                                    }}
                                                />
                                            </div>
                                            {errors.imza
                                                ? <p className="mt-1 text-xs text-rose-600">{errors.imza}</p>
                                                : <p className="mt-1 text-[11px] text-slate-500">
                                                    Fare veya parmak ile imzalayın. İmza atmadan da kaydedebilirsiniz —
                                                    sözleşme "İmza Bekliyor" olarak listelenir.
                                                  </p>}
                                        </div>
                                    </div>
                                </div>
                                )}
                            </div>

                            {/* İmza paneli */}
                            <div className={`min-h-0 flex-1 flex-col overflow-y-auto border-slate-200 bg-slate-50 lg:basis-[24%] lg:border-l ${
                                aktifSekme === 'bilgilendirme' ? 'flex' : 'hidden lg:flex'
                            }`}>
                                {/* Sol paneldeki belge şeridiyle AYNI yükseklik (h-12) */}
                                <div className="flex h-12 flex-shrink-0 items-center justify-between border-b border-slate-200 bg-white px-4">
                                    <span className="truncate text-sm font-semibold text-slate-900">Sözleşmeyi Onayla</span>
                                    <button type="button" onClick={kapat} title="Kapat"
                                        className="-mr-1 flex-shrink-0 rounded-md p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700">
                                        <X className="h-4 w-4" />
                                    </button>
                                </div>

                                <div className="p-4">
                                {/* İmza alanları BELGENİN İÇİNDE (metnin altında) — burada yalnızca gönderim ayarları var. */}
                                <div>
                                    <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
                                        Bilgilendirme
                                    </h3>

                                    <Toggle
                                        checked={mailGonder}
                                        onChange={setMailGonder}
                                        label="Müşteriye mail olarak PDF dosyası şeklinde ilet"
                                    />

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

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

                                <div className="mt-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] leading-relaxed text-amber-800">
                                    Metin bu müşteriye özel olarak kaydedilir; şablon sonradan değiştirilse bile bu
                                    sözleşme <strong>olduğu gibi kalır</strong>. İmza atıldığı anda metin
                                    <strong> donar</strong> ve bir daha değiştirilemez.
                                </div>
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-shrink-0 items-center justify-between gap-2 border-t border-slate-200 bg-slate-50 px-5 py-3">
                            <button type="button" onClick={() => setAdim(1)}
                                className="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">
                                <ArrowLeft className="h-4 w-4" /> Şablon Değiştir
                            </button>
                            <div className="flex items-center gap-2">
                                <button type="button" onClick={kapat}
                                    className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100">
                                    İptal
                                </button>
                                <button type="submit" disabled={kaydediliyor}
                                    title="İmza atıldıysa imzalanmış, atılmadıysa imza bekliyor olarak kaydeder"
                                    className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 disabled:opacity-50">
                                    {kaydediliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle2 className="h-4 w-4" />}
                                    {kaydediliyor ? 'Kaydediliyor...' : 'Kaydet'}
                                </button>
                            </div>
                        </div>
                    </>
                )}
            </form>
        </Modal>
    );
}