import React, { useEffect, useState } from 'react';
import Layout from '../components/Layout';
import { toast } from 'sonner';
import { Bell, BellOff, Smartphone } from 'lucide-react';
import { isPushSupported, getPushStatus, subscribePush, unsubscribePush } from '../lib/push';

export default function Preferences() {
    const [pushStatus, setPushStatus] = useState({ supported: false, permission: 'default', subscribed: false });
    const [pushBusy, setPushBusy] = useState(false);

    useEffect(() => {
        let cancelled = false;
        (async () => {
            const s = await getPushStatus();
            if (!cancelled) setPushStatus(s);
        })();
        return () => { cancelled = true; };
    }, []);

    const togglePush = async () => {
        if (!isPushSupported()) {
            toast.error('Ton navigateur ne supporte pas les notifications push.');
            return;
        }
        setPushBusy(true);
        try {
            if (pushStatus.subscribed) {
                await unsubscribePush();
                toast.success('Notifications push désactivées sur cet appareil.');
            } else {
                await subscribePush();
                toast.success("Notifications push activées — tu seras notifié(e) même si l'app est fermée.");
            }
            const s = await getPushStatus();
            setPushStatus(s);
        } catch (e) {
            toast.error(e?.message || "Impossible d'activer les notifications push");
        } finally {
            setPushBusy(false);
        }
    };

    return (
        <Layout>
            <div className="mb-6 sm:mb-8">
                <p className="text-xs font-bold uppercase tracking-[0.2em] text-stef">Mon compte</p>
                <h1 className="mt-2 font-heading text-2xl sm:text-3xl lg:text-4xl font-black tracking-tight text-slate-900">Mes notifications</h1>
                <p className="mt-1.5 text-sm sm:text-base text-slate-600">Active ou désactive les notifications de l&apos;équipe sur cet appareil.</p>
            </div>

            <div className="max-w-2xl space-y-5">
                <div className="rounded-lg border border-slate-200 bg-white p-5 sm:p-6" data-testid="push-card">
                    <div className="flex items-start gap-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-stef/10 text-stef">
                            <Smartphone className="h-5 w-5" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <h2 className="font-heading text-lg font-bold text-slate-900">Notifications</h2>
                            <p className="text-sm text-slate-500 mt-1">
                                Reçois une vraie notification système sur cet appareil dès qu&apos;un dossier est créé ou mis à jour, <strong>même quand l&apos;onglet est fermé</strong> (mobile et bureau).
                            </p>
                        </div>
                    </div>

                    <div className="mt-5 rounded-md border border-slate-200 bg-slate-50/60 p-4">
                        <div className="flex items-center gap-3">
                            <div className="flex-1 min-w-0">
                                <p className="text-sm font-bold text-slate-900" data-testid="push-status-label">
                                    {!pushStatus.supported ? 'Non supporté sur ce navigateur' :
                                     pushStatus.permission === 'denied' ? 'Bloqué dans les réglages du navigateur' :
                                     pushStatus.subscribed ? 'Activé sur cet appareil' : 'Désactivé sur cet appareil'}
                                </p>
                                <p className="mt-0.5 text-xs text-slate-500">
                                    {!pushStatus.supported ? 'Edge, Chrome, Firefox, Safari iOS 16.4+ et Android sont supportés.' :
                                     pushStatus.permission === 'denied' ? 'Pour réactiver : icône cadenas → Notifications → Autoriser.' :
                                     'Chaque appareil (PC, téléphone) doit être activé séparément.'}
                                </p>
                            </div>
                            {pushStatus.supported && pushStatus.permission !== 'denied' && (
                                <button
                                    type="button"
                                    data-testid="push-toggle-btn"
                                    onClick={togglePush}
                                    disabled={pushBusy}
                                    className={`inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-heading font-bold transition-all disabled:opacity-60 active:scale-[0.99] ${
                                        pushStatus.subscribed
                                            ? 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50'
                                            : 'bg-stef text-white hover:bg-stef-hover'
                                    }`}
                                >
                                    {pushBusy ? '…' :
                                     pushStatus.subscribed ? (<><BellOff className="h-4 w-4" /> Désactiver</>) :
                                                              (<><Bell className="h-4 w-4" /> Activer</>)}
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}
