import Modal from '@/Components/Modal';
import RichTextEditor, { RichTextEditorRef, sanitizeZengin } from '@/Components/RichTextEditor';
import { Toaster } from '@/Components/Toaster';
import { useYetki } from '@/lib/yetki';
import {
    Clock, Download, Eye, FileSignature, FileText, Loader2, Pencil, Printer, Save, Send, X,
} from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { router } from '@inertiajs/react';

interface Detay {
    id: number;
    sozlesme_kod: string;
    sozlesme_ad: string;
    icerik: string;
    imza_ad_soyad: string | null;
    imza: string;
    durum?: string;
    imzalandi?: boolean;
    onay_tarihi?: string | null;
    onaylayan?: string | null;
    ip_adresi?: string | null;
}

interface Props {
    kayitId: number | null;
    musteri: { id: number; unvan: string };
    onClose: () => void;
    /** "Müşteriye İlet" tıklandığında — iletme modalını açan taraf yönetir. */
    onIlet?: (detay: Detay) => void;
}

/**
 * Onaylanmış sözleşmenin tam ekran görüntüleyicisi.
 *
 * İçerik SNAPSHOT'tır: onay anındaki hâliyle gösterilir, hiçbir yerde yeniden üretilmez.
 * Yazdırma, modal içindeyken yalnızca belgeyi basar (@media print kuralı).
 */
export default function SozlesmeGosterModal({ kayitId, musteri, onClose, onIlet }: Props) {
    const { can } = useYetki();
    const acik = kayitId !== null;

    const [detay, setDetay] = useState<Detay | null>(null);
    const [yukleniyor, setYukleniyor] = useState(false);
    /** Taslak sözleşmede metni müşteriye özel düzenleme modu. */
    const [duzenleAcik, setDuzenleAcik] = useState(false);
    const [metin, setMetin] = useState('');
    const [kaydediliyor, setKaydediliyor] = useState(false);
    const editorRef = useRef<RichTextEditorRef>(null);

    const imzali = detay?.imzalandi ?? (detay?.durum === 'imzalandi');

    const kapat = useCallback(() => {
        setDetay(null); setDuzenleAcik(false); setMetin('');
        onClose();
    }, [onClose]);

    /** Taslak metni kaydet — imzalı kayıtta buton zaten görünmez. */
    const metniKaydet = async () => {
        if (!detay || kaydediliyor) return;
        setKaydediliyor(true);
        try {
            const csrf = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
            const r = await fetch(`/musteriler/${musteri.id}/sozlesmeler/${detay.id}/`, {
                method: 'PUT',
                credentials: 'same-origin',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': csrf ? decodeURIComponent(csrf[1]) : '',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ icerik: metin }),
            });
            const d = await r.json().catch(() => ({}));
            if (!r.ok || d?.ok === false) {
                Toaster.hata(d?.message || d?.mesaj || 'Metin kaydedilemedi.');
                return;
            }
            Toaster.basari(d?.mesaj || 'Sözleşme metni güncellendi.');
            setDetay((p) => (p ? { ...p, icerik: metin } : p));
            setDuzenleAcik(false);
            router.reload({ only: ['sozlesmeler'] });
        } catch {
            Toaster.hata('Beklenmeyen bir hata oluştu.');
        } finally {
            setKaydediliyor(false);
        }
    };

    useEffect(() => {
        if (kayitId === null) return;
        let iptal = false;
        setYukleniyor(true);
        setDetay(null);

        fetch(`/musteriler/${musteri.id}/sozlesmeler/${kayitId}/detay/`, {
            credentials: 'same-origin',
            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        })
            .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
            .then((d) => { if (!iptal) { setDetay(d.sozlesme); setMetin(d.sozlesme?.icerik ?? ''); setDuzenleAcik(false); } })
            .catch(() => { if (!iptal) Toaster.hata('Sözleşme yüklenemedi.'); })
            .finally(() => { if (!iptal) setYukleniyor(false); });

        return () => { iptal = true; };
    }, [kayitId, musteri.id]);

    const tarih = detay?.onay_tarihi
        ? new Date(detay.onay_tarihi).toLocaleString('tr-TR', {
            day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
        })
        : '—';

    return (
        <Modal show={acik} onClose={kapat} maxWidth="tam">
            {/* Başlık çubuğu yok — tüm aksiyonlar alt çubukta. */}
            <div className="flex h-full flex-col">
                {/* Yazdırırken yalnızca belge basılır */}
                <style>{`
                    @media print {
                        body * { visibility: hidden; }
                        #sozlesme-modal-belge, #sozlesme-modal-belge * { visibility: visible; }
                        #sozlesme-modal-belge {
                            position: absolute; left: 0; top: 0; width: 100%;
                            padding: 0; box-shadow: none; border: 0; border-radius: 0;
                        }
                        .yazdirma-gizle { display: none !important; }
                    }
                `}</style>

                {/* Belge üst şeridi */}
                <div className="yazdirma-gizle 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">
                        {detay?.sozlesme_ad ?? 'Sözleşme'}
                    </span>
                    {detay?.sozlesme_kod && (
                        <span className="hidden rounded bg-slate-100 px-2 py-0.5 font-mono text-[11px] text-slate-600 sm:inline">
                            {detay.sozlesme_kod}
                        </span>
                    )}
                    {detay && (
                        imzali ? (
                            <span className="inline-flex flex-shrink-0 items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-800">
                                <FileSignature className="h-3 w-3" /> İmzalandı
                            </span>
                        ) : (
                            <span className="inline-flex flex-shrink-0 items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800">
                                <Clock className="h-3 w-3" /> İmza Bekliyor
                            </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 — yalnızca imzalanmamış kayıtta.
                      * İmzalandıktan sonra metin donar (backend de 422 döner).
                      */}
                    {detay && !imzali && can('musteri_sozlesme.duzenle') && (
                        <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 flex-shrink-0 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 (yalnızca taslakta) */}
                {duzenleAcik && detay && !imzali ? (
                    <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. Şablon ve diğer
                                müşterilerin sözleşmeleri etkilenmez. Müşteri imzaladığı anda metin donar.
                            </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 */
                <div className="min-h-0 flex-1 overflow-y-auto bg-slate-100 px-4 py-6">
                    {yukleniyor || !detay ? (
                        <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-4 h-6 w-1/2 animate-pulse rounded bg-slate-100" />
                            {Array.from({ length: 10 }).map((_, i) => (
                                <div key={i} className="mb-2.5 h-3.5 w-full animate-pulse rounded bg-slate-100" />
                            ))}
                        </div>
                    ) : (
                        <div id="sozlesme-modal-belge"
                            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">{detay.sozlesme_ad}</h1>
                                <p className="mt-1 text-[11px] text-slate-500">
                                    Sözleşme No: {detay.sozlesme_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(detay.icerik) }}
                            />

                            {/* İmza bloğu */}
                            <div className="mt-10 border-t-2 border-slate-300 pt-6">
                                <div className="flex flex-wrap items-end justify-between gap-6">
                                    <div>
                                        <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                                            İmza
                                        </div>
                                        {detay.imza ? (
                                            <img src={detay.imza} alt="İmza" className="h-24 w-auto max-w-[320px] object-contain" />
                                        ) : (
                                            <div className="text-sm text-slate-400">İmza bulunamadı.</div>
                                        )}
                                        <div className="mt-2 border-t border-slate-300 pt-1 text-sm font-semibold text-slate-900">
                                            {detay.imza_ad_soyad}
                                        </div>
                                    </div>

                                    <div className="text-right text-[11px] text-slate-600">
                                        <div>Onay Tarihi: <span className="font-medium">{tarih}</span></div>
                                        {detay.ip_adresi && <div className="mt-0.5">IP: {detay.ip_adresi}</div>}
                                        {detay.onaylayan && <div className="mt-0.5">İşlemi yapan: {detay.onaylayan}</div>}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                )}

                {/* ALT AKSİYON ÇUBUĞU — solda işlemler, sağda kapat */}
                <div className="yazdirma-gizle flex flex-shrink-0 items-center gap-2 border-t border-slate-200 bg-slate-50 px-5 py-3">
                    <div className="flex flex-1 items-center gap-2">
                        {/* PDF'i tarayıcıda aç (indirmeden) — ?goruntule=1 inline döndürür */}
                        <a
                            href={detay ? `/musteriler/${musteri.id}/sozlesmeler/${detay.id}/pdf?goruntule=1` : undefined}
                            target="_blank"
                            rel="noopener"
                            title="PDF olarak görüntüle"
                            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 transition hover:bg-slate-50 ${
                                detay ? '' : 'pointer-events-none opacity-50'
                            }`}
                        >
                            <FileText className="h-4 w-4" />
                            <span className="hidden md:inline">PDF Görüntüle</span>
                        </a>

                        <a
                            href={detay ? `/musteriler/${musteri.id}/sozlesmeler/${detay.id}/pdf` : undefined}
                            title="PDF olarak indir"
                            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 transition hover:bg-slate-50 ${
                                detay ? '' : 'pointer-events-none opacity-50'
                            }`}
                        >
                            <Download className="h-4 w-4" />
                            <span className="hidden md:inline">PDF İndir</span>
                        </a>

                        <button type="button" onClick={() => window.print()} disabled={!detay}
                            title="Yazdır"
                            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 transition hover:bg-slate-50 disabled:opacity-50">
                            <Printer className="h-4 w-4" />
                            <span className="hidden md:inline">Yazdır</span>
                        </button>

                        {/* Düzenleme modunda kaydetme birincil aksiyondur */}
                        {duzenleAcik && !imzali && (
                            <button type="button" onClick={metniKaydet} disabled={kaydediliyor || !detay}
                                title="Metni bu müşteriye özel kaydet"
                                className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:opacity-50">
                                {kaydediliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                                <span className="hidden md:inline">{kaydediliyor ? 'Kaydediliyor...' : 'Metni Kaydet'}</span>
                            </button>
                        )}

                        {/* İmzalı sözleşme müşteriye PDF olarak iletilir */}
                        {!duzenleAcik && imzali && can('musteri_sozlesme.ekle') && onIlet && (
                            <button type="button" onClick={() => detay && onIlet(detay)} disabled={!detay}
                                title="Müşteriye ilet"
                                className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50">
                                {yukleniyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                                <span className="hidden md:inline">Müşteriye İlet</span>
                            </button>
                        )}
                    </div>

                    <button type="button" onClick={kapat}
                        title="Kapat"
                        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 transition hover:bg-slate-100">
                        <X className="h-4 w-4" />
                        <span className="hidden md:inline">Kapat</span>
                    </button>
                </div>
            </div>
        </Modal>
    );
}