import Toggle from '@/Components/Toggle';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { FileText, Image as ImageIcon, Loader2, Mail, Paperclip, Send, X } from 'lucide-react';
import { Fragment, useEffect, useState } from 'react';

export interface ProjeOzet {
    id: number;
    baslik: string;
    statu?: { id: number; ad: string; renk?: string } | null;
    musteri?: { id: number; unvan: string } | null;
    yetkililer?: Array<{ id: number; name: string }> | null;
    atayan?:    { id: number; name: string } | null;
}

export interface BildirimModalProps {
    proje: ProjeOzet;
    onClose: () => void;
    /** Bildirimi tetikleyen olay: olusturma | guncelleme | durum | tarih */
    tetikleyici?: 'olusturma' | 'guncelleme' | 'durum' | 'tarih';
    /**
     * Sürükle-bırak akışı için: önce kaydetme/taşıma yapılır, sonra (varsa) bildirim.
     * Verilirse butonlar "İptal · Kaydet · Kaydet ve Bildir" şeklinde gösterilir.
     * Verilmezse eski davranış (zaten kayıtlı, sadece bildirim için modal).
     */
    onTasi?: () => Promise<void> | void;
}

interface BelgeItem {
    id: number; orijinal_ad: string; uzanti: string;
    resim_mi: boolean; pdf_mi: boolean; boyut: number;
}

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

const boyutBicim = (b: number) => {
    if (b < 1024) return `${b} B`;
    if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`;
    return `${(b / 1024 / 1024).toFixed(1)} MB`;
};

export default function BildirimModal({ proje, onClose, tetikleyici = 'guncelleme', onTasi }: BildirimModalProps) {
    const [mailMusteri, setMailMusteri]   = useState(false);
    const [mailYetkili, setMailYetkili]   = useState(false);
    const [mailAtayan, setMailAtayan]     = useState(false);
    const [sistemBildirim, setSistemBildirim] = useState(false);
    const [ekstraMailler, setEkstraMailler]   = useState('');
    const [aktifIslem, setAktifIslem] = useState<null | 'kaydet' | 'bildir'>(null);
    const yukleniyor = aktifIslem !== null;

    const [belgeler, setBelgeler] = useState<BelgeItem[]>([]);
    const [belgelerYukleniyor, setBelgelerYukleniyor] = useState(true);
    const [secilenBelgeIds, setSecilenBelgeIds] = useState<number[]>([]);

    useEffect(() => {
        let iptal = false;
        setBelgelerYukleniyor(true);
        fetch(`/belgeler/proje/${proje.id}/`, {
            credentials: 'same-origin',
            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        })
            .then((r) => (r.ok ? r.json() : { belgeler: [] }))
            .then((j) => { if (!iptal) setBelgeler(Array.isArray(j.belgeler) ? j.belgeler : []); })
            .catch(() => { if (!iptal) setBelgeler([]); })
            .finally(() => { if (!iptal) setBelgelerYukleniyor(false); });
        return () => { iptal = true; };
    }, [proje.id]);

    const belgeyiSec = (id: number) => {
        setSecilenBelgeIds((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
    };

    const yetkiliSayisi = proje.yetkililer?.length ?? 0;
    const bildirimVarMi = mailMusteri || mailYetkili || mailAtayan || sistemBildirim || ekstraMailler.trim().length > 0;
    const mailVarMi = mailMusteri || mailYetkili || mailAtayan || ekstraMailler.trim().length > 0;

    const belgeIkon = (b: BelgeItem) => {
        if (b.resim_mi) return <ImageIcon className="h-3.5 w-3.5 text-blue-500" />;
        if (b.pdf_mi)   return <FileText  className="h-3.5 w-3.5 text-red-500" />;
        return <Paperclip className="h-3.5 w-3.5 text-slate-500" />;
    };

    const baslik = {
        olusturma:  'Proje Oluşturuldu — Bildirim Gönder',
        durum:      'Durum Değişti — Bildirim Gönder',
        tarih:      'Tarih Değişti — Bildirim Gönder',
        guncelleme: 'Proje Güncellendi — Bildirim Gönder',
    }[tetikleyici];

    const bildirimGonder = async () => {
        await fetch(`/projeler/${proje.id}/bildirim/`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                'X-XSRF-TOKEN': csrfToken(),
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                mail_musteri:    mailMusteri,
                mail_yetkili:    mailYetkili,
                mail_atayan:     mailAtayan,
                sistem_bildirim: sistemBildirim,
                ekstra_mailler:  ekstraMailler.trim() || undefined,
                ek_belge_ids:    secilenBelgeIds.length ? secilenBelgeIds : undefined,
                tetikleyici,
            }),
        });
    };

    // Eski "sadece bildirim" akışı (kayıt sonrası modal)
    const gonder = async () => {
        setAktifIslem('bildir');
        try { await bildirimGonder(); } catch { /* sessizce ignore */ }
        setAktifIslem(null);
        onClose();
    };

    // Yeni "taşıma + (opsiyonel) bildirim" akışı (sürükle-bırak)
    const kaydet = async (bildir: boolean) => {
        setAktifIslem(bildir ? 'bildir' : 'kaydet');
        try {
            if (onTasi) await onTasi();
            if (bildir) await bildirimGonder();
        } catch (e) {
        }
        setAktifIslem(null);
        onClose();
    };

    return (
        <Transition show appear as={Fragment}>
            <Dialog onClose={onClose} className="relative z-[95]">
                <TransitionChild as={Fragment}
                    enter="ease-out duration-200" enterFrom="opacity-0" enterTo="opacity-100"
                    leave="ease-in duration-150" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" />
                </TransitionChild>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-start justify-center p-4">
                        <TransitionChild as={Fragment}
                            enter="ease-out duration-200"
                            enterFrom="opacity-0 scale-95 translate-y-4"
                            enterTo="opacity-100 scale-100 translate-y-0"
                            leave="ease-in duration-150"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95">
                            <DialogPanel className="my-8 w-full max-w-3xl overflow-hidden bg-white shadow-2xl">
                                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2">
                                    <DialogTitle className="flex min-w-0 items-center gap-1.5 text-xs font-semibold text-slate-900 sm:text-sm">
                                        <Mail className="h-4 w-4 flex-shrink-0 text-blue-600" />
                                        <span className="truncate">{baslik}<span className="font-normal text-slate-500"> · {proje.baslik}</span></span>
                                    </DialogTitle>
                                    <button type="button" onClick={onClose}
                                        className="rounded-md p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-700">
                                        <X className="h-4 w-4" />
                                    </button>
                                </div>

                                <div className="grid grid-cols-1 gap-4 p-5 md:grid-cols-2">
                                    <div className="space-y-3">
                                        <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Bildirim Hedefleri</h4>
                                        <div className="space-y-2 rounded-lg border border-slate-200 bg-slate-50/50 p-3">
                                            <Toggle
                                                checked={mailMusteri}
                                                onChange={setMailMusteri}
                                                disabled={!proje.musteri}
                                                label={
                                                    <>Müşteriye mail gönder
                                                        <span className="ml-1 text-slate-400">
                                                            ({proje.musteri ? proje.musteri.unvan + ' — ana yetkili e-postası' : 'müşteri yok'})
                                                        </span>
                                                    </>
                                                }
                                            />
                                            <Toggle
                                                checked={mailYetkili}
                                                onChange={setMailYetkili}
                                                disabled={yetkiliSayisi === 0}
                                                label={
                                                    <>Proje yetkililerine mail gönder
                                                        <span className="ml-1 text-slate-400">
                                                            ({yetkiliSayisi > 0 ? `${yetkiliSayisi} kişi` : 'yetkili yok'})
                                                        </span>
                                                    </>
                                                }
                                            />
                                            <Toggle
                                                checked={mailAtayan}
                                                onChange={setMailAtayan}
                                                disabled={!proje.atayan}
                                                label={
                                                    <>Oluşturan kullanıcıya mail gönder
                                                        <span className="ml-1 text-slate-400">
                                                            ({proje.atayan ? proje.atayan.name : '-'})
                                                        </span>
                                                    </>
                                                }
                                            />
                                            <Toggle
                                                checked={sistemBildirim}
                                                onChange={setSistemBildirim}
                                                label="Atayan & yetkililere sistem bildirimi (çan)"
                                            />
                                        </div>
                                        <div>
                                            <label className="mb-1 block text-xs font-medium text-slate-700">Ekstra e-posta(lar)</label>
                                            <input type="text"
                                                value={ekstraMailler}
                                                onChange={(e) => setEkstraMailler(e.target.value)}
                                                placeholder="ornek@firma.com, ikinci@firma.com"
                                                className="w-full rounded-lg border-slate-300 text-xs focus:border-blue-500 focus:ring-blue-500" />
                                        </div>
                                        <p className="text-[11px] text-slate-500">
                                            Mail içeriği <strong>Tanımlamalar → Proje Statüleri</strong> ekranında her statü için ayrı şablonlanabilir.
                                        </p>
                                    </div>

                                    <div className="space-y-2">
                                        <div className="flex items-center justify-between">
                                            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                                                Mail Eki <span className="ml-1 text-[10px] font-normal text-slate-400">(yüklü dosyalar)</span>
                                            </h4>
                                            {belgeler.length > 0 && (
                                                <span className="text-[10px] text-slate-500">{secilenBelgeIds.length} / {belgeler.length} seçili</span>
                                            )}
                                        </div>
                                        <div className="max-h-56 overflow-y-auto rounded-lg border border-slate-200 bg-slate-50/50 p-2">
                                            {belgelerYukleniyor ? (
                                                <div className="flex items-center gap-2 p-2 text-xs text-slate-500">
                                                    <Loader2 className="h-3.5 w-3.5 animate-spin" /> Yükleniyor...
                                                </div>
                                            ) : belgeler.length === 0 ? (
                                                <div className="p-3 text-center text-[11px] text-slate-400">
                                                    Bu projeye henüz dosya eklenmemiş.
                                                </div>
                                            ) : (
                                                <ul className="space-y-1">
                                                    {belgeler.map((b) => {
                                                        const secili = secilenBelgeIds.includes(b.id);
                                                        return (
                                                            <li key={b.id}>
                                                                <label className={`flex cursor-pointer items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition ${
                                                                    secili ? 'border-blue-400 bg-blue-50 ring-1 ring-blue-200' : 'border-transparent bg-white hover:border-slate-300 hover:bg-slate-50'
                                                                }`}>
                                                                    <input type="checkbox" checked={secili}
                                                                        onChange={() => belgeyiSec(b.id)}
                                                                        className="h-3.5 w-3.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500" />
                                                                    {belgeIkon(b)}
                                                                    <span className="min-w-0 flex-1 truncate font-medium text-slate-700" title={b.orijinal_ad}>{b.orijinal_ad}</span>
                                                                    <span className="flex-shrink-0 text-[10px] text-slate-400">{boyutBicim(b.boyut)}</span>
                                                                </label>
                                                            </li>
                                                        );
                                                    })}
                                                </ul>
                                            )}
                                        </div>
                                        {!mailVarMi && secilenBelgeIds.length > 0 && (
                                            <p className="text-[10px] text-amber-600">⚠ Mail hedefi seçili değil — ekler gönderilmeyecek.</p>
                                        )}
                                    </div>
                                </div>

                                <div className="flex flex-wrap items-center justify-end gap-2 border-t border-slate-200 bg-slate-50/60 px-5 py-3">
                                    <button type="button" onClick={onClose}
                                        className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"><X className="h-4 w-4 md:hidden" /><span className="hidden md:inline">{onTasi ? 'İptal' : 'Kapat'}</span></button>
                                    {onTasi ? (
                                        <>
                                            {/* Sürükle-bırak akışı — taşıma + opsiyonel bildirim */}
                                            <button type="button" onClick={() => kaydet(false)} disabled={yukleniyor}
                                                className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
                                                {aktifIslem === 'kaydet' ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                                                <span className="hidden md:inline">Kaydet</span></button>
                                            {bildirimVarMi && (
                                                <button type="button" onClick={() => kaydet(true)} disabled={yukleniyor}
                                                    className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50">
                                                    {aktifIslem === 'bildir' ? <Loader2 className="h-4 w-4 animate-spin" /> : <Mail className="h-4 w-4" />}
                                                <span className="hidden md:inline">Kaydet ve Bildir</span>
                                                </button>
                                            )}
                                        </>
                                    ) : (
                                        bildirimVarMi && (
                                            <button type="button" onClick={gonder} disabled={yukleniyor}
                                                className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50">
                                                {aktifIslem === 'bildir' ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                                                <span className="hidden md:inline">Bildir</span></button>
                                        )
                                    )}
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
}