import AsyncSelect from '@/Components/AsyncSelect';
import { useConfirm } from '@/Components/ConfirmDialog';
import DatePicker from '@/Components/DatePicker';
import FileManager from '@/Components/FileManager';
import KayitLogButonu from '@/Components/KayitLogButonu';
import Modal from '@/Components/Modal';
import { useModulModalOptional } from '@/Components/ModulModalProvider';
import MoneyInput from '@/Components/MoneyInput';
import Select from '@/Components/Select';
import { Toaster } from '@/Components/Toaster';
import UserAvatar from '@/Components/UserAvatar';
import { tarihFormat } from '@/lib/format';
import { DragDropContext, Droppable, Draggable, DropResult, DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd';
import {
    ChevronDown, ChevronRight, GripVertical, Loader2, MessageCircle, PackageOpen, Paperclip,
    Plus, RefreshCw, Save, Send, Trash2, X,
} from 'lucide-react';
import { FormEvent, useEffect, useRef, useState } from 'react';

interface Durum { id: number; ad: string; renk: string; tamamlandi_mi?: boolean }
interface Tur { id: number; ad: string; renk: string }
interface KdvOraniOpt { id: number; oran: number; ad: string; varsayilan: boolean }
interface ParaBirimi { kod: string; ad: string; sembol?: string; son_kur?: number; varsayilan?: boolean }
interface MusteriOzet { id: number; unvan: string }
interface Yorum {
    id: number;
    mesaj: string;
    created_at: string;
    user?: { id: number; name: string; avatar_url_full?: string | null } | null;
}
interface Satir {
    id?: number;
    _key: string; // local key for drag
    yenileme_urun_id: number | null;
    urun_adi: string;
    miktar: number | '';
    birim_fiyat: number | '';
    indirimsiz_birim_fiyat: number | '' | null;
    para_birimi: string;
    kur: number | '';
    kdv_orani_id: number | '';
    aciklama: string;
    sira: number;
}

interface KayitDB {
    id: number;
    baslik?: string | null;
    aciklama?: string | null;
    musteri_id: number;
    musteri?: MusteriOzet | null;
    musteri_secim?: { value: number; label: string } | null;
    durum_id: number;
    kayit_tarihi: string;
    yenileme_tarihi: string;
    takip_ay: number;
    aktif: boolean;
    tur_id_list?: number[];
}

interface Payload {
    kayit: KayitDB | null;
    satirlar: any[];
    yorumlar: Yorum[];
    durumlar: Durum[];
    turler: Tur[];
    kdvOranlari: KdvOraniOpt[];
    paraBirimleri: ParaBirimi[];
    /** Teklif formJson ile aynı anahtar adı — satır bileşeni bunu okur */
    para_birimleri?: ParaBirimi[];
}

interface FormData {
    baslik: string;
    aciklama: string;
    musteri_id: number | '';
    durum_id: number | '';
    kayit_tarihi: string;
    yenileme_tarihi: string;
    takip_ay: number | '';
    turler: number[];
}

const BOS_FORM = (): FormData => ({
    baslik: '',
    aciklama: '',
    musteri_id: '',
    durum_id: '',
    kayit_tarihi: new Date().toISOString().slice(0, 10),
    yenileme_tarihi: new Date(Date.now() + 365 * 86400000).toISOString().slice(0, 10),
    takip_ay: 12,
    turler: [],
});

// TL eşdeğeri için sabit yaklaşık kurlar (gerçekte ParaBirimi.kur kullanılabilir)
const KUR: Record<string, number> = { TRY: 1, USD: 34, EUR: 37, GBP: 43 };

function yeniSatir(varsayilanKdv: number | '' = '', varsayilanPB = 'TRY'): Satir {
    return {
        _key: 'yeni-' + Math.random().toString(36).slice(2, 10),
        yenileme_urun_id: null,
        urun_adi: '',
        miktar: 1,
        birim_fiyat: 0,
        indirimsiz_birim_fiyat: null,
        para_birimi: varsayilanPB,
        kur: 1,
        kdv_orani_id: varsayilanKdv,
        aciklama: '',
        sira: 0,
    };
}

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

function aktifKullaniciAl(): { id: number; name: string; avatar_url_full?: string | null } | null {
    if (typeof window === 'undefined') return null;
    try {
        const el = document.getElementById('app');
        const page = JSON.parse(el?.getAttribute('data-page') ?? '{}');
        const u = page?.props?.auth?.user;
        if (!u?.id) return null;
        return { id: u.id, name: u.name ?? '', avatar_url_full: u.avatar_url ? '/storage/' + u.avatar_url : null };
    } catch { return null; }
}

export interface YenilemeFormModalProps {
    mod: number | 'yeni' | null;
    onClose: () => void;
    onSuccess?: () => void;
    /** Yeni kayıt oluştururken seçili gelmesi istenen alanlar (örn: board kolonundan açıldığında durum_id) */
    yeniVarsayilanlar?: { durum_id?: number };
}

export default function YenilemeFormModal({ mod, onClose, onSuccess, yeniVarsayilanlar }: YenilemeFormModalProps) {
    const oturum = aktifKullaniciAl();
    const open = mod !== null;
    const kayitId = mod;
    const [aktifId, setAktifId] = useState<number | 'yeni' | null>(kayitId);
    const [yukleniyor, setYukleniyor] = useState(false);
    const [kaydediliyor, setKaydediliyor] = useState(false);
    const [yeniKaydediliyor, setYeniKaydediliyor] = useState(false);
    const [ekleKaydediliyor, setEkleKaydediliyor] = useState(false);
    const modulModal = useModulModalOptional();
    const nested = !!modulModal?.hizliEkleBekliyor;
    const [payload, setPayload] = useState<Payload | null>(null);
    const [data, setData] = useState<FormData>(BOS_FORM());
    const [errors, setErrors] = useState<Record<string, string>>({});
    const [satirlar, setSatirlar] = useState<Satir[]>([]);
    const [acikSatirlar, setAcikSatirlar] = useState<Set<string>>(new Set());

    const [yorumlar, setYorumlar] = useState<Yorum[]>([]);
    const [yeniYorum, setYeniYorum] = useState('');
    const [yorumGonderiliyor, setYorumGonderiliyor] = useState(false);
    const yorumListRef = useRef<HTMLDivElement>(null);

    const [aktifSekme, setAktifSekme] = useState<'detay' | 'urunler' | 'notlar' | 'dosyalar'>('detay');

    useEffect(() => {
        setAktifId(kayitId);
        if (open) setPayload(null);
    }, [kayitId, open]);

    useEffect(() => {
        if (!open || aktifId === null) return;
        setYukleniyor(true); setPayload(null); setErrors({});
        const url = aktifId === 'yeni' ? '/yenilemeler/form/yeni' : `/yenilemeler/${aktifId}/form`;
        fetch(url, { headers: { Accept: 'application/json' }, credentials: 'same-origin' })
            .then((r) => r.json())
            .then((d: Payload) => {
                setPayload(d);
                if (d.kayit) {
                    setData({
                        baslik: d.kayit.baslik ?? '',
                        aciklama: d.kayit.aciklama ?? '',
                        musteri_id: d.kayit.musteri_id,
                        durum_id: d.kayit.durum_id,
                        kayit_tarihi: (d.kayit.kayit_tarihi ?? '').slice(0, 10),
                        yenileme_tarihi: (d.kayit.yenileme_tarihi ?? '').slice(0, 10),
                        takip_ay: d.kayit.takip_ay ?? 12,
                        turler: d.kayit.tur_id_list ?? [],
                    });
                    const ss = (d.satirlar ?? []).map((s, i) => ({
                        id: s.id,
                        _key: 'db-' + s.id,
                        yenileme_urun_id: s.yenileme_urun_id ?? null,
                        urun_adi: s.urun_adi ?? '',
                        miktar: s.miktar ?? 1,
                        birim_fiyat: s.birim_fiyat ?? 0,
                        indirimsiz_birim_fiyat: s.indirimsiz_birim_fiyat ?? null,
                        para_birimi: s.para_birimi ?? 'TRY',
                        kur: s.kur ?? 1,
                        kdv_orani_id: s.kdv_orani_id ?? '',
                        aciklama: s.aciklama ?? '',
                        sira: s.sira ?? i,
                    }));
                    setSatirlar(ss);
                    setAcikSatirlar(new Set()); // varsayılan hepsi kapalı; sadece yeni eklenenler açık
                    setYorumlar(d.yorumlar ?? []);
                } else {
                    const onerilenDurum = yeniVarsayilanlar?.durum_id;
                    const durumGecerli = !!onerilenDurum && (d.durumlar?.some((x) => x.id === onerilenDurum) ?? false);
                    setData({
                        ...BOS_FORM(),
                        durum_id: durumGecerli ? onerilenDurum! : (d.durumlar?.[0]?.id ?? ''),
                    });
                    setSatirlar([]); setAcikSatirlar(new Set());
                    setYorumlar([]);
                }
            })
            .catch(() => { Toaster.hata('Form yüklenemedi'); onClose(); })
            .finally(() => setYukleniyor(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, aktifId]);

    useEffect(() => {
        if (yorumListRef.current) yorumListRef.current.scrollTop = yorumListRef.current.scrollHeight;
    }, [yorumlar.length]);

    const kapat = () => {
        setPayload(null); setData(BOS_FORM()); setErrors({}); setAktifId(null);
        setSatirlar([]); setAcikSatirlar(new Set());
        setYorumlar([]); setYeniYorum(''); setAktifSekme('detay');
        onClose();
    };
    const setField = <K extends keyof FormData>(k: K, v: FormData[K]) =>
        setData((p) => ({ ...p, [k]: v }));

    // KUR helper'ları — payload.para_birimleri'nden gelen son_kur kullanılır
    const paraBirimleri: any[] = (payload as any)?.para_birimleri ?? payload?.paraBirimleri ?? [];
    const paraSembol = (kod: string): string => {
        if (!kod) return '';
        const pb = paraBirimleri.find((x: any) => x.kod === kod);
        return pb?.sembol || kod;
    };
    // Kayıt seviyesinde para birimi yok — özet, varsayılan para birimine çevrilerek gösterilir.
    const ozetPB: string = paraBirimleri.find((p: any) => p.varsayilan)?.kod ?? paraBirimleri[0]?.kod ?? 'TRY';
    const sonKur = (kod: string): number => {
        const u = (kod || 'TRY').toUpperCase();
        if (u === 'TRY') return 1;
        const pb = paraBirimleri.find((p) => (p.kod || '').toUpperCase() === u);
        const k = Number(pb?.son_kur ?? 0);
        return k > 0 ? k : (KUR[u] ?? 1);
    };
    const cevir = (tutar: number, kaynak: string, hedef: string): number => {
        if (!tutar) return 0;
        const a = (kaynak || 'TRY').toUpperCase();
        const b = (hedef || 'TRY').toUpperCase();
        if (a === b) return tutar;
        const tl = tutar * sonKur(a);
        const hk = sonKur(b);
        return hk > 0 ? tl / hk : tl;
    };

    // SATIR İŞLEMLERİ
    const varsayilanKdvId = payload?.kdvOranlari?.find((k) => k.varsayilan)?.id ?? payload?.kdvOranlari?.[0]?.id ?? '';
    const satirEkle = () => {
        const ys = yeniSatir(varsayilanKdvId, ozetPB);
        ys.kur = sonKur(ozetPB);
        ys.sira = satirlar.length;
        setSatirlar((p) => [...p, ys]);
        setAcikSatirlar((p) => new Set([...p, ys._key]));
    };
    const confirmDialog = useConfirm();
    const satirSil = async (key: string) => {
        const satir = satirlar.find((s) => s._key === key);
        const ad = satir?.urun_adi?.trim() || '(ürün seçilmedi)';
        const onay = await confirmDialog({
            tip: 'tehlike',
            baslik: 'Ürün Satırını Sil',
            mesaj: <>'<strong>{ad}</strong>' satırını silmek istediğinize emin misiniz?</>,
            onayMetni: 'Sil',
        });
        if (!onay) return;
        setSatirlar((p) => p.filter((s) => s._key !== key));
    };
    const satirGuncelle = (key: string, alan: keyof Satir, deger: any) => {
        setSatirlar((p) => p.map((s) => s._key === key ? { ...s, [alan]: deger } : s));
    };
    const acikToggle = (key: string) => {
        setAcikSatirlar((p) => {
            const yeni = new Set(p);
            if (yeni.has(key)) yeni.delete(key); else yeni.add(key);
            return yeni;
        });
    };
    const urunSecildi = (key: string, urun: any) => {
        if (!urun) {
            satirGuncelle(key, 'yenileme_urun_id', null);
            return;
        }
        setSatirlar((p) => p.map((s) => {
            if (s._key !== key) return s;
            const yeniPB = urun.para_birimi ?? s.para_birimi;
            const pbInfo = paraBirimleri.find((x: any) => x.kod === yeniPB);
            const yeniKur = yeniPB === 'TRY' ? 1 : (Number(pbInfo?.son_kur ?? s.kur) || 1);
            return {
                ...s,
                yenileme_urun_id: urun.value,
                urun_adi: urun.ad ?? urun.label ?? s.urun_adi,
                birim_fiyat: typeof urun.birim_fiyat === 'number' ? urun.birim_fiyat : s.birim_fiyat,
                indirimsiz_birim_fiyat: urun.indirimsiz_birim_fiyat ?? null,
                para_birimi: yeniPB,
                kur: yeniKur,
                kdv_orani_id: urun.kdv_orani_id ?? s.kdv_orani_id ?? varsayilanKdvId,
                aciklama: urun.aciklama ?? s.aciklama,
            };
        }));
    };

    // TOPLAMLAR — özet para birimine çevrilerek
    const kdvOranById = (id: number | '' | null | undefined): number => {
        const k = (payload?.kdvOranlari ?? []).find((x) => x.id === Number(id));
        return k ? Number(k.oran) : 0;
    };
    const toplam = satirlar.reduce((sum, s) => {
        const miktar = typeof s.miktar === 'number' ? s.miktar : 0;
        const birim = typeof s.birim_fiyat === 'number' ? s.birim_fiyat : 0;
        return sum + cevir(miktar * birim, s.para_birimi, ozetPB);
    }, 0);
    const indirimsizToplam = satirlar.reduce((sum, s) => {
        const miktar = typeof s.miktar === 'number' ? s.miktar : 0;
        const indirimsiz = s.indirimsiz_birim_fiyat ?? (typeof s.birim_fiyat === 'number' ? s.birim_fiyat : 0);
        return sum + cevir(miktar * (typeof indirimsiz === 'number' ? indirimsiz : 0), s.para_birimi, ozetPB);
    }, 0);
    const kdvToplam = satirlar.reduce((sum, s) => {
        const miktar = typeof s.miktar === 'number' ? s.miktar : 0;
        const birim = typeof s.birim_fiyat === 'number' ? s.birim_fiyat : 0;
        const net = cevir(miktar * birim, s.para_birimi, ozetPB);
        return sum + net * (kdvOranById(s.kdv_orani_id) / 100);
    }, 0);
    const genelToplam = toplam + kdvToplam;

    const onDragEnd = (result: DropResult) => {
        const { source, destination } = result;
        if (!destination || source.index === destination.index) return;
        setSatirlar((p) => {
            const yeni = [...p];
            const [t] = yeni.splice(source.index, 1);
            yeni.splice(destination.index, 0, t);
            return yeni.map((s, i) => ({ ...s, sira: i }));
        });
    };

    const yorumGonder = async () => {
        const text = yeniYorum.trim();
        const kid = payload?.kayit?.id;
        if (!text || yorumGonderiliyor || !kid) return;
        setYorumGonderiliyor(true);
        try {
            const r = await fetch(`/yenilemeler/${kid}/yorum/`, {
                method: 'POST', credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ mesaj: text }),
            });
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const d = await r.json();
            if (d?.yorum) { setYorumlar((p) => [...p, d.yorum]); setYeniYorum(''); }
        } catch (e: any) { Toaster.hata('Yorum eklenemedi'); }
        finally { setYorumGonderiliyor(false); }
    };

    const submit = async (e: FormEvent | null, yeniDevam = false, veAta = false) => {
        if (e) e.preventDefault();
        if (kaydediliyor || yeniKaydediliyor || ekleKaydediliyor) return;
        setErrors({});
        if (veAta) setEkleKaydediliyor(true);
        else if (yeniDevam) setYeniKaydediliyor(true);
        else setKaydediliyor(true);
        const url = payload?.kayit ? `/yenilemeler/${payload.kayit.id}` : '/yenilemeler';
        const method = payload?.kayit ? 'PUT' : 'POST';
        try {
            const r = await fetch(url, {
                method, credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({
                    ...data,
                    turler: data.turler,
                    satirlar: satirlar.map((s, i) => ({
                        id: s.id,
                        yenileme_urun_id: s.yenileme_urun_id,
                        urun_adi: s.urun_adi,
                        miktar: typeof s.miktar === 'number' ? s.miktar : 0,
                        birim_fiyat: typeof s.birim_fiyat === 'number' ? s.birim_fiyat : 0,
                        indirimsiz_birim_fiyat: s.indirimsiz_birim_fiyat,
                        para_birimi: s.para_birimi,
                        kur: typeof s.kur === 'number' && s.kur > 0 ? s.kur : 1,
                        kdv_orani_id: s.kdv_orani_id || null,
                        aciklama: s.aciklama,
                        sira: i,
                    })),
                }),
            });
            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] = 'Bu alan zorunludur.';
                setErrors(flat);
                Toaster.uyari('Zorunlu alanları doldurunuz.');
                return;
            }
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const d = await r.json();
            Toaster.basari(d.mesaj ?? 'Kaydedildi');
            onSuccess?.();
            if (veAta) {
                const yeniId = d?.id ?? d?.data?.id ?? payload?.kayit?.id;
                if (yeniId && modulModal) {
                    const label = data.baslik?.trim() || `Yenileme #${yeniId}`;
                    // ad da gönderilir — Select hizliEkleDeger="ad" ile doğru değeri alır.
                    modulModal.eklendi({ id: yeniId, label, ad: label });
                } else {
                    Toaster.hata('ID alınamadı — modal manuel kapatılmalı.');
                }
                return;
            }
            if (yeniDevam) {
                setAktifId('yeni');
                setPayload(null);
            } else {
                kapat();
            }
        } catch (err: any) {
            Toaster.hata('Kaydedilemedi: ' + (err?.message ?? ''));
        } finally {
            setKaydediliyor(false); setYeniKaydediliyor(false); setEkleKaydediliyor(false);
        }
    };

    const duzenleme = !!payload?.kayit;
    const baslikMetni = duzenleme ? `Yenileme Düzenle: ${payload?.kayit?.baslik ?? ''}` : 'Yeni Yenileme Kaydı';

    return (
        <Modal show={open} maxWidth="full" onClose={kapat} closeable={!kaydediliyor && !yeniKaydediliyor}>
            <form onSubmit={(e) => submit(e, false)} className="flex h-[calc(100dvh-120px)] min-h-[600px] flex-col">
                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5">
                    <div className="flex items-center gap-2">
                        <div className="flex h-9 w-9 items-center justify-center rounded-md bg-blue-50 text-blue-700">
                            <RefreshCw className="h-4 w-4" />
                        </div>
                        <div>
                            <h3 className="text-sm font-semibold text-slate-900">{baslikMetni}</h3>
                        </div>
                    </div>
                    <div className="flex items-center gap-2">
                        
                        <KayitLogButonu modulKod="yenileme" kayitId={payload?.kayit?.id} />
                        
                        <button type="button" onClick={kapat} className="rounded-md p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                            <X className="h-4 w-4" />
                        </button>
                    </div>
                </div>

                {/* MOBİL SEKME */}
                <div className="flex flex-shrink-0 border-b border-slate-200 bg-slate-50 md:hidden">
                    {[
                        { kod: 'detay', label: 'Detay' },
                        { kod: 'urunler', label: 'Ürünler', sayi: satirlar.length, gizli: !duzenleme },
                        { kod: 'notlar', label: 'Notlar', sayi: yorumlar.length, gizli: !duzenleme },
                        { kod: 'dosyalar', label: 'Dosyalar', gizli: !duzenleme },
                    ].filter((t) => !(t as any).gizli).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 min-w-0 flex-1 flex-col md:flex-row">
                    {/* %30 — Detay */}
                    <div className={`flex min-h-0 min-w-0 flex-1 flex-col bg-white ${duzenleme ? 'md:basis-[30%]' : 'md:basis-full'} ${aktifSekme === 'detay' ? 'flex' : 'hidden md:flex'}`}>
                        {yukleniyor && !payload ? (
                            <div className="flex flex-1 items-center justify-center text-slate-500">
                                <Loader2 className="mr-2 h-5 w-5 animate-spin" /> Yükleniyor...
                            </div>
                        ) : (
                            <div className="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
                                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                                    <div className="md:col-span-2">
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Başlık <span className="text-rose-600">*</span></label>
                                        <input type="text" required value={data.baslik} onChange={(e) => setField('baslik', e.target.value)}
                                            placeholder="Kısa açıklama..."
                                            className="block w-full rounded-md border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500" />
                                        {errors.baslik && <p className="mt-1 text-xs text-rose-600">{errors.baslik}</p>}
                                    </div>

                                    <div className="md:col-span-2">
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Müşteri <span className="text-rose-600">*</span></label>
                                        <AsyncSelect
                                            endpoint="/api/ara/musteriler"
                                            value={data.musteri_id}
                                            onChange={(v) => setField('musteri_id', v === '' ? '' : Number(v))}
                                            initialOption={payload?.kayit?.musteri_secim ?? (payload?.kayit?.musteri ? { value: payload.kayit.musteri.id, label: payload.kayit.musteri.unvan } : null)}
                                            cozumleEndpoint="/api/ara/cozumle"
                                            cozumleTip="musteri"
                                            placeholder="Müşteri ara..."
                                            error={!!errors.musteri_id}
                                            required
                                        />
                                        {errors.musteri_id && <p className="mt-1 text-xs text-rose-600">{errors.musteri_id}</p>}
                                    </div>

                                    <div className="md:col-span-2">
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Yenileme Türleri <span className="text-rose-600">*</span></label>
                                        <Select
                                            multiple
                                            value={data.turler}
                                            onChange={(v) => setField('turler', (v as (string|number)[]).map(Number))}
                                            options={(payload?.turler ?? []).map((t) => ({
                                                value: t.id, label: t.ad,
                                                icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: t.renk }} />,
                                            }))}
                                            placeholder="Tür seç..."
                                            searchable
                                            required
                                            error={!!errors.turler}
                                            hizliEkleUrl="/tanimlamalar/tip/yenileme-turu"
                                            hizliEkleBaslik="Yeni Yenileme Türü"
                                        />
                                        {errors.turler && <p className="mt-1 text-xs text-rose-600">{errors.turler}</p>}
                                    </div>

                                    <div>
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Kayıt Tarihi <span className="text-rose-600">*</span></label>
                                        <DatePicker value={data.kayit_tarihi} onChange={(v) => setField('kayit_tarihi', v)} placeholder="gg.aa.yyyy" />
                                        {errors.kayit_tarihi && <p className="mt-1 text-xs text-rose-600">{errors.kayit_tarihi}</p>}
                                    </div>
                                    <div>
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Yenileme Tarihi <span className="text-rose-600">*</span></label>
                                        <DatePicker value={data.yenileme_tarihi} onChange={(v) => setField('yenileme_tarihi', v)} placeholder="gg.aa.yyyy" />
                                        {errors.yenileme_tarihi && <p className="mt-1 text-xs text-rose-600">{errors.yenileme_tarihi}</p>}
                                    </div>

                                    <div>
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Takip Süresi (Ay) <span className="text-rose-600">*</span></label>
                                        <input type="number" min="1" max="120" value={data.takip_ay}
                                            onChange={(e) => setField('takip_ay', e.target.value === '' ? '' : Math.max(1, parseInt(e.target.value) || 1))}
                                            placeholder="12"
                                            className="block w-full rounded-md border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500" />
                                        <p className="mt-1 text-[10px] text-slate-500">Yenileme tarihinden sonra kaç ayda bir hatırlatma yapılacağı.</p>
                                        {errors.takip_ay && <p className="mt-1 text-xs text-rose-600">{errors.takip_ay}</p>}
                                    </div>
                                    <div>
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Durum <span className="text-rose-600">*</span></label>
                                        <Select
                                            value={data.durum_id}
                                            onChange={(v) => setField('durum_id', v ? Number(v) : '')}
                                            options={(payload?.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="Durum seç..."
                                            required
                                            error={!!errors.durum_id}
                                            hizliEkleUrl="/tanimlamalar/tip/yenileme-durumu"
                                            hizliEkleBaslik="Yeni Yenileme Durumu"
                                        />
                                        {errors.durum_id && <p className="mt-1 text-xs text-rose-600">{errors.durum_id}</p>}
                                    </div>

                                    <div className="md:col-span-2">
                                        <label className="mb-1 block text-xs font-medium text-slate-700">Açıklama</label>
                                        <textarea rows={3} value={data.aciklama} onChange={(e) => setField('aciklama', e.target.value)}
                                            placeholder="Detaylar, notlar..."
                                            className="block w-full rounded-md border-slate-300 text-sm focus:border-blue-500 focus:ring-blue-500" />
                                    </div>
                                </div>
                            </div>
                        )}

                    </div>

                    {/* %30 ÜRÜNLER */}
                    {duzenleme && (
                    <div className={`flex min-h-0 min-w-0 flex-1 flex-col border-slate-200 bg-slate-50 md:basis-[30%] md:border-l ${aktifSekme === 'urunler' ? 'flex' : 'hidden md:flex'}`}>
                        <div className="flex flex-shrink-0 items-center justify-between gap-2 border-b border-slate-200 bg-white px-4 py-3">
                            <div className="flex items-center gap-1.5">
                                <PackageOpen className="h-4 w-4 text-blue-600" />
                                <h4 className="text-sm font-semibold text-slate-900">Yenileme Ürünleri</h4>
                            </div>
                            <button type="button" onClick={satirEkle} title="Ürün Ekle"
                                className="text-blue-600 hover:text-blue-700">
                                <Plus className="h-5 w-5" />
                            </button>
                        </div>

                        <div className="min-h-0 min-w-0 flex-1 space-y-2 overflow-y-auto p-3">
                            {satirlar.length === 0 ? (
                                <div className="rounded-lg border border-dashed border-slate-300 p-6 text-center text-xs text-slate-500">
                                    Henüz yenileme ürünü eklenmemiş.
                                </div>
                            ) : (
                                <DragDropContext onDragEnd={onDragEnd}>
                                    <Droppable droppableId="yenileme-satirlar">
                                        {(provided) => (
                                            <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-2">
                                                {satirlar.map((s, idx) => (
                                                    <Draggable key={s._key} draggableId={s._key} index={idx}>
                                                        {(prov, snap) => (
                                                            <SortableSatir satir={s} idx={idx}
                                                                acik={acikSatirlar.has(s._key)}
                                                                toggleAc={() => acikToggle(s._key)}
                                                                guncelle={(alan, deger) => satirGuncelle(s._key, alan, deger)}
                                                                urunSec={(u) => urunSecildi(s._key, u)}
                                                                sil={() => satirSil(s._key)}
                                                                paraSembol={paraSembol}
                                                                kdvOranlari={payload?.kdvOranlari ?? []}
                                                                paraBirimleri={paraBirimleri}
                                                                provided={prov} snapshot={snap} />
                                                        )}
                                                    </Draggable>
                                                ))}
                                                {provided.placeholder}
                                            </div>
                                        )}
                                    </Droppable>
                                </DragDropContext>
                            )}
                        </div>

                        <div className="flex-shrink-0 border-t border-slate-200 bg-white p-3 text-xs">
                            {indirimsizToplam > toplam && (
                                <div className="flex items-center justify-between text-slate-600">
                                    <span>İndirimsiz Toplam:</span>
                                    <span className="font-mono font-semibold text-slate-400 line-through">
                                        {indirimsizToplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(ozetPB)}
                                    </span>
                                </div>
                            )}
                            <div className="mt-1 flex items-center justify-between text-slate-600">
                                <span>Ara Toplam:</span>
                                <span className="font-mono font-semibold text-slate-700">
                                    {toplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(ozetPB)}
                                </span>
                            </div>
                            <div className="mt-1 flex items-center justify-between text-slate-600">
                                <span>KDV:</span>
                                <span className="font-mono font-semibold text-slate-700">
                                    {kdvToplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(ozetPB)}
                                </span>
                            </div>
                            <div className="mt-1 flex items-center justify-between border-t border-slate-100 pt-1">
                                <span className="font-semibold text-slate-700">Genel Toplam:</span>
                                <span className="font-mono text-base font-bold text-emerald-700">
                                    {genelToplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(ozetPB)}
                                </span>
                            </div>
                            <p className="mt-1 text-[10px] text-slate-400">Satırların para birimi, varsayılan para birimine ({paraSembol(ozetPB)}) kur ile çevrildi.</p>
                        </div>
                    </div>
                    )}

                    {/* SAĞ %20 — Notlar / Sohbet paneli (sadece kaydedilmiş kayıtta) */}
                    {duzenleme && (
                        <div className={`flex min-h-0 min-w-0 flex-1 flex-col border-slate-200 bg-slate-50 md:basis-[20%] md:border-l ${aktifSekme === 'notlar' ? 'flex' : 'hidden md:flex'}`}>
                            <div className="flex flex-shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
                                <MessageCircle className="h-4 w-4 text-blue-600" />
                                <h4 className="text-sm font-semibold text-slate-900">Notlar / Sohbet</h4>
                                <span className="ml-auto text-[11px] text-slate-500">{yorumlar.length} kayıt</span>
                            </div>
                            <div ref={yorumListRef} className="min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto px-4 py-3">
                                {yorumlar.length === 0 ? (
                                    <div className="flex flex-col items-center justify-center py-10 text-center">
                                        <MessageCircle className="h-8 w-8 text-slate-300" />
                                        <p className="mt-2 text-xs text-slate-500">Henüz not eklenmemiş.</p>
                                    </div>
                                ) : (
                                    yorumlar.map((y) => (
                                        <div key={y.id} className="flex gap-2">
                                            <UserAvatar name={y.user?.name ?? '?'} url={y.user?.avatar_url_full ?? null} size="sm" />
                                            <div className="min-w-0 flex-1">
                                                <div className="flex items-baseline gap-2">
                                                    <span className="text-xs font-semibold text-slate-900">{y.user?.name ?? 'Bilinmeyen'}</span>
                                                    <span className="text-[10px] text-slate-500">{tarihFormat(y.created_at)}</span>
                                                </div>
                                                <div className="mt-0.5 whitespace-pre-wrap break-words rounded-md bg-white px-2 py-1.5 text-xs text-slate-700 shadow-sm">{y.mesaj}</div>
                                            </div>
                                        </div>
                                    ))
                                )}
                            </div>
                            <div className="flex-shrink-0 border-t border-slate-200 bg-white p-3">
                                <textarea value={yeniYorum}
                                    onChange={(e) => setYeniYorum(e.target.value)}
                                    onKeyDown={(e) => {
                                        if (e.key !== 'Enter') return;
                                        if (e.ctrlKey || e.metaKey) {
                                            e.preventDefault();
                                            const ta = e.currentTarget;
                                            const s = ta.selectionStart, en = ta.selectionEnd;
                                            const yeni = yeniYorum.slice(0, s) + '\n' + yeniYorum.slice(en);
                                            setYeniYorum(yeni);
                                            requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = s + 1; });
                                        } else if (!e.shiftKey) {
                                            e.preventDefault();
                                            yorumGonder();
                                        }
                                    }}
                                    rows={2}
                                    placeholder="Not / sohbet ekle... (Enter: gönder · Ctrl+Enter: yeni satır)"
                                    className="block w-full resize-none rounded-lg border-slate-300 text-xs focus:border-blue-500 focus:ring-blue-500"
                                />
                                <button type="button" onClick={yorumGonder} disabled={yorumGonderiliyor || !yeniYorum.trim()}
                                    className="mt-2 inline-flex w-full items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-50">
                                    {yorumGonderiliyor ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Send className="h-3.5 w-3.5" />}
                                    Gönder
                                </button>
                            </div>
                        </div>
                    )}

                    {/* SAĞ %20 — Dosya yöneticisi (sadece kaydedilmiş kayıtta) */}
                    {duzenleme && payload?.kayit?.id && (
                        <div className={`flex min-h-0 min-w-0 flex-1 flex-col border-slate-200 bg-slate-50 md:basis-[20%] md:border-l ${aktifSekme === 'dosyalar' ? 'flex' : 'hidden md:flex'}`}>
                            <div className="flex flex-shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
                                <Paperclip className="h-4 w-4 text-blue-600" />
                                <h4 className="text-sm font-semibold text-slate-900">Dosyalar</h4>
                            </div>
                            <div className="min-h-0 min-w-0 flex-1 overflow-y-auto">
                                <FileManager tip="yenileme_kayit" id={payload.kayit.id} compact />
                            </div>
                        </div>
                    )}
                </div>

                <div className="flex flex-shrink-0 items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 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"><X className="h-4 w-4 md:hidden" /><span className="hidden md:inline">İptal</span></button>
                    <button type="button" onClick={() => submit(null, true)} disabled={kaydediliyor || yeniKaydediliyor || ekleKaydediliyor || yukleniyor}
                        className="inline-flex items-center gap-2 rounded-lg border border-emerald-300 bg-white px-4 py-2 text-sm font-semibold text-emerald-700 hover:bg-emerald-50 disabled:opacity-50">
                        {yeniKaydediliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
                        <span className="hidden md:inline">{yeniKaydediliyor ? 'Kaydediliyor...' : 'Kaydet ve Yeni'}</span>
                    </button>
                    {nested && (
                        <button type="button" onClick={() => submit(null, false, true)} disabled={kaydediliyor || yeniKaydediliyor || ekleKaydediliyor || yukleniyor}
                            className="inline-flex items-center gap-2 rounded-lg border border-blue-300 bg-white px-4 py-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 disabled:opacity-50">
                            {ekleKaydediliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
                            <span className="hidden md:inline">{ekleKaydediliyor ? 'Kaydediliyor...' : 'Kaydet ve Ekle'}</span>
                        </button>
                    )}
                    <button type="submit" disabled={kaydediliyor || yeniKaydediliyor || ekleKaydediliyor || 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">
                        {kaydediliyor ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                        <span className="hidden md:inline">{kaydediliyor ? 'Kaydediliyor...' : 'Kaydet'}</span>
                    </button>
                </div>
            </form>
        </Modal>
    );
}

// ============================================================
// Sortable Satır — Akordiyon yapı
// ============================================================
function SortableSatir({ satir, idx, acik, toggleAc, guncelle, urunSec, sil, paraSembol, kdvOranlari, paraBirimleri, provided, snapshot }: {
    satir: Satir;
    idx: number;
    acik: boolean;
    toggleAc: () => void;
    guncelle: (alan: keyof Satir, deger: any) => void;
    urunSec: (urun: any) => void;
    sil: () => void;
    paraSembol: (kod: string) => string;
    kdvOranlari: KdvOraniOpt[];
    paraBirimleri: { kod: string; ad?: string; sembol?: string }[];
    provided: DraggableProvided;
    snapshot: DraggableStateSnapshot;
}) {
    const altToplam = (typeof satir.miktar === 'number' ? satir.miktar : 0) * (typeof satir.birim_fiyat === 'number' ? satir.birim_fiyat : 0);

    return (
        <div ref={provided.innerRef} {...provided.draggableProps}
            className={`rounded-lg border border-slate-200 bg-white shadow-sm ${snapshot.isDragging ? 'shadow-2xl ring-2 ring-blue-400' : ''}`}>
            <div className="flex items-center gap-1 border-b border-slate-100 px-2 py-1.5">
                <div {...provided.dragHandleProps} style={{ touchAction: 'none' }}
                    className="cursor-grab p-1 text-slate-400 hover:text-slate-700 active:cursor-grabbing">
                    <GripVertical className="h-3.5 w-3.5" />
                </div>
                <button type="button" onClick={toggleAc} className="flex flex-1 items-center gap-1 text-left">
                    {acik ? <ChevronDown className="h-3.5 w-3.5 text-slate-500" /> : <ChevronRight className="h-3.5 w-3.5 text-slate-500" />}
                    <span className="text-xs font-semibold text-slate-900">
                        #{idx + 1} {satir.urun_adi || '(ürün seçilmedi)'}
                    </span>
                </button>
                <span className="text-[11px] font-mono text-slate-500">
                    {altToplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {paraSembol(satir.para_birimi)}
                </span>
                <button type="button" onClick={sil}
                    className="rounded p-1 text-slate-400 hover:bg-rose-50 hover:text-rose-700" title="Satırı sil">
                    <Trash2 className="h-3.5 w-3.5" />
                </button>
            </div>
            {acik && (
                <div className="space-y-2 p-2">
                    <div>
                        <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Ürün Seçimi</label>
                        <AsyncSelect endpoint="/api/ara/yenileme-urunleri" value={satir.yenileme_urun_id ?? ''}
                            onChange={(v) => guncelle('yenileme_urun_id', v === '' ? null : Number(v))}
                            onSecim={(opt) => urunSec(opt)}
                            cozumleEndpoint="/api/ara/cozumle" cozumleTip="yenileme-urun"
                            placeholder="Ürün seç veya ara..." />
                    </div>
                    <div>
                        <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Ürün Adı</label>
                        <input type="text" value={satir.urun_adi} onChange={(e) => guncelle('urun_adi', e.target.value)}
                            placeholder="Ürün adı giriniz"
                            className="w-full rounded border-slate-300 text-xs" />
                    </div>
                    <div className="grid grid-cols-12 gap-1.5">
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Miktar</label>
                            <MoneyInput value={satir.miktar} onChange={(v) => guncelle('miktar', v)}
                                currency="" decimals={2} placeholder="1,00" />
                        </div>
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Birim Fiyat</label>
                            <MoneyInput value={satir.birim_fiyat} onChange={(v) => guncelle('birim_fiyat', v)}
                                currency={paraSembol(satir.para_birimi)} decimals={2} placeholder="0,00" />
                        </div>
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">İndirimsiz Birim Fiyat</label>
                            <MoneyInput value={satir.indirimsiz_birim_fiyat ?? ''} onChange={(v) => guncelle('indirimsiz_birim_fiyat', v)}
                                currency={paraSembol(satir.para_birimi)} decimals={2} placeholder="-" />
                        </div>
                    </div>
                    <div className="grid grid-cols-12 gap-1.5">
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Para Birimi</label>
                            <Select value={satir.para_birimi}
                                onChange={(v) => {
                                    const kod = String(v);
                                    const pb = paraBirimleri.find((x: any) => x.kod === kod) as any;
                                    guncelle('para_birimi', kod);
                                    guncelle('kur', kod === 'TRY' ? 1 : (Number(pb?.son_kur) || 1));
                                }}
                                options={paraBirimleri.map((p: any) => ({ value: p.kod, label: p.kod + (p.ad ? ' — ' + p.ad : '') }))}
                                placeholder="PB"
                                hizliEkleModul="parabirimi" hizliEkleDeger="kod" />
                        </div>
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Kur</label>
                            <MoneyInput value={satir.kur}
                                onChange={(v) => guncelle('kur', typeof v === 'number' && v > 0 ? v : 1)}
                                currency="" decimals={2}
                                placeholder="1,00"
                                disabled={satir.para_birimi === 'TRY' || Number(satir.kur) === 1} />
                        </div>
                        <div className="col-span-4">
                            <label className="mb-0.5 block text-[10px] font-medium text-slate-600">KDV <span className="text-rose-600">*</span></label>
                            <Select value={satir.kdv_orani_id}
                                onChange={(v) => guncelle('kdv_orani_id', v ? Number(v) : '')}
                                options={kdvOranlari.map((k) => ({ value: k.id, label: k.ad, description: k.varsayilan ? 'Var.' : undefined }))}
                                placeholder="KDV oranı seçiniz..."
                                hizliEkleUrl="/tanimlamalar/tip/kdv-orani"
                                hizliEkleBaslik="Yeni KDV Oranı" />
                        </div>
                    </div>
                    <div>
                        <label className="mb-0.5 block text-[10px] font-medium text-slate-600">Açıklama</label>
                        <textarea rows={2} value={satir.aciklama} onChange={(e) => guncelle('aciklama', e.target.value)}
                            placeholder="Bu ürün için kısa not..."
                            className="block w-full rounded border-slate-300 text-xs" />
                    </div>
                </div>
            )}
        </div>
    );
}