"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { Bell, Check, CheckCheck, Upload, Share2, MessageCircle, Sparkles, Database, X, BellOff, type LucideIcon } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface NotificationData {
  id: string;
  type: string;
  title: string;
  message: string;
  read: boolean;
  data: string | null;
  createdAt: string;
}

const typeIcons: Record<string, LucideIcon> = {
  upload_complete: Upload,
  share: Share2,
  comment: MessageCircle,
  ai_complete: Sparkles,
  backup_complete: Database,
};

const typeTones: Record<string, string> = {
  upload_complete: "text-emerald-600 bg-emerald-500/10 dark:text-emerald-300",
  share: "text-purple-600 bg-purple-500/10 dark:text-purple-300",
  comment: "text-blue-600 bg-blue-500/10 dark:text-blue-300",
  ai_complete: "text-blue-600 bg-blue-500/10 dark:text-blue-300",
  backup_complete: "text-cyan-600 bg-cyan-500/10 dark:text-cyan-300",
};

function timeAgo(date: string): string {
  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
  if (seconds < 60) return "à l'instant";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `il y a ${minutes} min`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `il y a ${hours} h`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `il y a ${days} j`;
  const months = Math.floor(days / 30);
  return `il y a ${months} mois`;
}

export default function NotificationBell() {
  const [notifications, setNotifications] = useState<NotificationData[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [open, setOpen] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  const fetchCount = useCallback(async () => {
    try {
      const res = await fetch("/api/notifications?count=true");
      if (res.ok) {
        const data = await res.json();
        setUnreadCount(data.count);
      }
    } catch {
      // silencieux
    }
  }, []);

  const fetchNotifications = useCallback(async () => {
    try {
      const res = await fetch("/api/notifications");
      if (res.ok) {
        const data = await res.json();
        if (Array.isArray(data)) {
          setNotifications(data);
          setUnreadCount(data.filter((n: NotificationData) => !n.read).length);
        }
      }
    } catch {
      // silencieux
    } finally {
      setLoaded(true);
    }
  }, []);

  // Sondage toutes les 15 s
  useEffect(() => {
    fetchCount();
    const interval = setInterval(fetchCount, 15000);
    return () => clearInterval(interval);
  }, [fetchCount]);

  useEffect(() => {
    if (!open) return;
    fetchNotifications();
    const interval = setInterval(fetchNotifications, 15000);
    return () => clearInterval(interval);
  }, [open, fetchNotifications]);

  // Fermer au clic extérieur / Échap
  useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onClick);
    window.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const markAllRead = async () => {
    await fetch("/api/notifications", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "mark_all_read" }),
    });
    setUnreadCount(0);
    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
  };

  const markRead = async (id: string) => {
    await fetch(`/api/notifications/${id}`, { method: "PATCH" });
    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)));
    setUnreadCount((prev) => Math.max(0, prev - 1));
  };

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen(!open)}
        className={`relative w-10 h-10 flex items-center justify-center rounded-xl transition-colors ${open ? "text-gray-900 bg-gray-100 dark:text-white dark:bg-white/10" : "text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10"}`}
        aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} non lue${unreadCount > 1 ? "s" : ""}` : "Notifications"}
        aria-expanded={open}
        aria-haspopup="dialog"
      >
        <Bell className="w-[18px] h-[18px]" />
        <AnimatePresence>
          {unreadCount > 0 && (
            <motion.span
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0 }}
              transition={{ type: "spring", stiffness: 500, damping: 28 }}
              className="absolute top-1 right-1 min-w-[17px] h-[17px] px-1 rounded-full bg-accent-gradient text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-surface dark:ring-canvas tabular-nums"
            >
              {unreadCount > 99 ? "99+" : unreadCount}
            </motion.span>
          )}
        </AnimatePresence>
      </button>

      <AnimatePresence>
        {open && (
          <>
            {/* Voile mobile */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="sm:hidden fixed inset-0 z-[55] bg-gray-950/40 backdrop-blur-sm"
              onClick={() => setOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, y: 8, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 8, scale: 0.98 }}
              transition={{ type: "spring", stiffness: 420, damping: 34 }}
              role="dialog"
              aria-label="Notifications"
              className="fixed inset-x-0 bottom-0 sm:bottom-auto sm:absolute sm:inset-x-auto sm:top-full sm:right-0 sm:mt-2 sm:w-[360px] glass rounded-t-3xl sm:rounded-2xl shadow-pop z-[60] overflow-hidden pb-safe sm:pb-0"
            >
              {/* Poignée mobile */}
              <div className="sm:hidden flex justify-center pt-2.5 pb-0.5">
                <span className="w-10 h-1 rounded-full bg-gray-300 dark:bg-white/20" />
              </div>

              {/* En-tête */}
              <div className="flex items-center justify-between pl-4 pr-2 h-12 border-b border-line dark:border-white/10">
                <div className="flex items-center gap-2">
                  <h3 className="text-[14px] font-semibold text-gray-900 dark:text-white">Notifications</h3>
                  {unreadCount > 0 && (
                    <span className="px-1.5 h-5 min-w-[20px] rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-300 text-[11px] font-semibold flex items-center justify-center tabular-nums">{unreadCount}</span>
                  )}
                </div>
                <div className="flex items-center gap-0.5">
                  {unreadCount > 0 && (
                    <button
                      onClick={markAllRead}
                      className="h-9 px-2.5 rounded-lg text-[12px] font-medium text-blue-600 dark:text-blue-300 hover:bg-blue-500/10 flex items-center gap-1.5 transition-colors"
                    >
                      <CheckCheck className="w-3.5 h-3.5" />
                      Tout lire
                    </button>
                  )}
                  <button
                    onClick={() => setOpen(false)}
                    className="sm:hidden w-9 h-9 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
                    aria-label="Fermer"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Liste */}
              <div className="max-h-[65dvh] sm:max-h-[420px] overflow-y-auto scrollbar-thin">
                {!loaded ? (
                  <div className="p-3 space-y-2" aria-busy="true">
                    {[...Array(3)].map((_, i) => (
                      <div key={i} className="flex items-start gap-3 p-2">
                        <span className="w-9 h-9 rounded-xl bg-gray-200/80 dark:bg-white/[0.07] animate-pulse shrink-0" />
                        <span className="flex-1 space-y-2 pt-1">
                          <span className="block h-3 w-2/3 rounded bg-gray-200/80 dark:bg-white/[0.07] animate-pulse" />
                          <span className="block h-2.5 w-1/2 rounded bg-gray-200/80 dark:bg-white/[0.07] animate-pulse" />
                        </span>
                      </div>
                    ))}
                  </div>
                ) : notifications.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
                    <div className="relative mb-4">
                      <div className="absolute inset-0 rounded-full bg-blue-500/10 blur-2xl scale-150" />
                      <div className="relative w-14 h-14 rounded-3xl bg-gray-100 dark:bg-white/5 border border-line dark:border-white/10 flex items-center justify-center">
                        <BellOff className="w-6 h-6 text-gray-400" />
                      </div>
                    </div>
                    <p className="text-[14px] font-medium text-gray-800 dark:text-gray-100">Tout est calme</p>
                    <p className="text-[12.5px] text-gray-500 dark:text-gray-400 mt-1">Les téléversements, partages et analyses IA terminés apparaîtront ici.</p>
                  </div>
                ) : (
                  <ul className="p-1.5" role="list">
                    {notifications.map((n, i) => {
                      const Icon = typeIcons[n.type] || Bell;
                      const tone = typeTones[n.type] || "text-gray-500 bg-gray-500/10 dark:text-gray-300";
                      return (
                        <motion.li
                          key={n.id}
                          initial={{ opacity: 0, x: -8 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ delay: Math.min(i, 10) * 0.025 }}
                        >
                          <div
                            role="button"
                            tabIndex={0}
                            onClick={() => { if (!n.read) markRead(n.id); }}
                            onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && !n.read) { e.preventDefault(); markRead(n.id); } }}
                            className={`relative flex items-start gap-3 p-2.5 rounded-xl transition-colors cursor-pointer ${n.read ? "hover:bg-gray-100/70 dark:hover:bg-white/[0.04]" : "bg-blue-500/[0.06] hover:bg-blue-500/10"}`}
                          >
                            <span className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${tone}`}>
                              <Icon className="w-4 h-4" />
                            </span>
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2">
                                <p className={`text-[13px] font-medium truncate ${n.read ? "text-gray-600 dark:text-gray-300" : "text-gray-900 dark:text-white"}`}>{n.title}</p>
                                {!n.read && <span className="w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" aria-label="Non lue" />}
                              </div>
                              <p className="text-[12px] text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2 leading-snug">{n.message}</p>
                              <p className="text-[11px] text-gray-400 dark:text-gray-500 mt-1 tabular-nums">{timeAgo(n.createdAt)}</p>
                            </div>
                            {!n.read && (
                              <button
                                onClick={(e) => { e.stopPropagation(); markRead(n.id); }}
                                className="w-8 h-8 -mr-1 flex items-center justify-center rounded-lg text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-300 hover:bg-emerald-500/10 transition-colors shrink-0"
                                title="Marquer comme lue"
                                aria-label="Marquer comme lue"
                              >
                                <Check className="w-3.5 h-3.5" />
                              </button>
                            )}
                          </div>
                        </motion.li>
                      );
                    })}
                  </ul>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}