import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { AlertCircle, BellRing, ExternalLink, RefreshCcw, Settings, X } from 'lucide-react';
import { Fragment, useMemo } from 'react';

interface Props {
    open: boolean;
    onClose: () => void;
    /** Tekrar dene tıklandığında çağrılır */
    onTekrar: () => void;
}

/** Browser tipi tespit — Chrome/Edge/Firefox/Safari/diğer */
function browserTespit(): 'chrome' | 'edge' | 'firefox' | 'safari' | 'diger' {
    if (typeof navigator === 'undefined') return 'diger';
    const ua = navigator.userAgent;
    if (/Edg\//.test(ua)) return 'edge';
    if (/Firefox\//.test(ua)) return 'firefox';
    if (/Chrome\//.test(ua)) return 'chrome';
    if (/Safari\//.test(ua) && !/Chrome/.test(ua)) return 'safari';
    return 'diger';
}

const ICIN_BASLIK = 'Tarayıcı izin penceresi gösterilmedi';
const ACIKLAMA = 'Tarayıcı, bu site için bildirim izin penceresini sessizce engelliyor. Aşağıdaki adımları izleyerek izni manuel olarak verebilirsin — sadece 10 saniye sürer.';

export default function BildirimIzinModal({ open, onClose, onTekrar }: Props) {
    const browser = useMemo(browserTespit, []);

    const ayarLinki: Record<typeof browser, string | null> = {
        chrome: 'chrome://settings/content/notifications',
        edge: 'edge://settings/content/notifications',
        firefox: 'about:preferences#privacy',
        safari: null,
        diger: null,
    };

    const browserAdi: Record<typeof browser, string> = {
        chrome: 'Chrome',
        edge: 'Edge',
        firefox: 'Firefox',
        safari: 'Safari',
        diger: 'Tarayıcı',
    };

    const ayarUrl = ayarLinki[browser];

    const adresCubuguYardim = (() => {
        switch (browser) {
            case 'edge':
                return [
                    'Sayfayı yenile (Ctrl+F5).',
                    'Adres çubuğunun SOLUNDA kilit / "Bağlantı güvenli" ikonuna tıkla.',
                    'Açılan menüde "Bu site için izinler" yaz. Üzerine tıkla.',
                    '"Bildirimler" seçeneğini bul → açılır menüden "İzin Ver" seç.',
                    'Sayfayı tekrar yenile (Ctrl+F5).',
                ];
            case 'chrome':
                return [
                    'Sayfayı yenile (Ctrl+F5).',
                    'Adres çubuğunun SOLUNDA kilit ikonuna tıkla.',
                    '"Site ayarları" tıkla.',
                    '"Bildirimler" satırını bul → "İzin Ver" seç.',
                    'Sayfayı kapat-aç.',
                ];
            case 'firefox':
                return [
                    'Adres çubuğunun solunda kilit ikonuna tıkla.',
                    '"Bağlantı güvenli" satırı → ">" oka tıkla → "Daha fazla bilgi".',
                    'Açılan pencerede "İzinler" sekmesi → "Bildirim Gönder" → "İzin Ver" seç.',
                    'Sayfayı yenile.',
                ];
            case 'safari':
                return [
                    'Safari menüsü → "Tercihler" / "Ayarlar".',
                    '"Web Siteleri" sekmesi → sol menüden "Bildirimler".',
                    'Listeden bu sitenin adını bul → "İzin Ver" seç.',
                    'Sayfayı yenile.',
                ];
            default:
                return [
                    'Adres çubuğundaki güvenlik ikonuna tıkla.',
                    'Site izinlerinde "Bildirimler" → "İzin Ver" seç.',
                    'Sayfayı yenile.',
                ];
        }
    })();

    return (
        <Transition show={open} appear as={Fragment}>
            <Dialog onClose={onClose} className="relative z-[100]">
                <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/60 backdrop-blur-sm" />
                </TransitionChild>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center p-4">
                        <TransitionChild as={Fragment}
                            enter="ease-out duration-200"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-150"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95">
                            <DialogPanel className="w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl">
                                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-2">
                                    <DialogTitle className="flex items-center gap-1.5 text-xs font-semibold text-slate-900 sm:text-sm">
                                        <AlertCircle className="h-4 w-4 text-amber-600" /> {ICIN_BASLIK}
                                    </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="space-y-4 p-5">
                                    <p className="text-xs text-slate-600">{ACIKLAMA}</p>
                                    <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 text-xs text-blue-900">
                                        <div className="flex items-center gap-1.5 font-semibold">
                                            <BellRing className="h-3.5 w-3.5" /> {browserAdi[browser]} için adım adım talimat
                                        </div>
                                    </div>

                                    <ol className="ml-5 list-decimal space-y-2 text-sm text-slate-700">
                                        {adresCubuguYardim.map((adim, i) => (
                                            <li key={i}>{adim}</li>
                                        ))}
                                    </ol>

                                    <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
                                        <div className="text-xs font-semibold text-slate-700 mb-1">Veya doğrudan ayarlar sayfasına git</div>
                                        {ayarUrl ? (
                                            <div className="space-y-2">
                                                <div className="flex items-center gap-2">
                                                    <code className="select-all rounded bg-white px-2 py-1 text-xs text-slate-800 ring-1 ring-slate-200 flex-1">{ayarUrl}</code>
                                                    <button type="button"
                                                        onClick={() => {
                                                            // Bazı browser'larda window.open() chrome:// edge:// linkleri için izin vermez,
                                                            // o yüzden clipboard'a da kopyalıyoruz.
                                                            try { navigator.clipboard.writeText(ayarUrl); } catch {}
                                                            try { window.open(ayarUrl, '_blank'); } catch {}
                                                            alert('Bağlantı panoya kopyalandı. Yeni sekmeye yapıştır.');
                                                        }}
                                                        title="Adresi kopyala / aç"
                                                        className="inline-flex items-center gap-1 rounded-md bg-blue-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-blue-700">
                                                        <ExternalLink className="h-3 w-3" /> Kopyala
                                                    </button>
                                                </div>
                                                <p className="text-[11px] text-slate-500">
                                                    Yeni sekmeye yapıştır → "İzin ver" listesine bu siteyi ekle veya "Engelle" listesinden kaldır.
                                                </p>
                                            </div>
                                        ) : (
                                            <p className="text-xs text-slate-500">{browserAdi[browser]} için manuel ayar gerekir. Yukarıdaki adımları izle.</p>
                                        )}
                                    </div>
                                </div>

                                <div className="flex items-center justify-between 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">
                                        Şimdi Değil
                                    </button>
                                    <button type="button" onClick={() => { onClose(); setTimeout(onTekrar, 100); }}
                                        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">
                                        <RefreshCcw className="h-4 w-4" /> Tekrar Dene
                                    </button>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
}