"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Monitor, Smartphone, Tablet, Globe, MapPin, Clock, ShieldCheck, ShieldX, LogOut, Wifi,
  ChevronDown, Bot, AlertTriangle, Shield,
} from "lucide-react";
import toast from "react-hot-toast";
import Modal from "../ui/Modal";
import Button from "../ui/Button";
import { EmptyState } from "../ui/PageHeader";

interface DeviceSession {
  id: string;
  sessionToken: string;
  ip: string;
  device: string;
  browser: string;
  os: string;
  country: string;
  city: string;
  status: string;
  aiDecision: string | null;
  aiReason: string | null;
  aiRiskLevel: string | null;
  createdAt: string;
  endedAt: string | null;
  isCurrent: boolean;
}

function DeviceIcon({ device, className = "w-5 h-5" }: { device: string; className?: string }) {
  if (device === "Mobile") return <Smartphone className={className} />;
  if (device === "Tablet") return <Tablet className={className} />;
  return <Monitor className={className} />;
}

function RiskBadge({ level }: { level: string | null }) {
  if (!level || level === "low") return null;
  const cls = level === "high"
    ? "bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-rose-500/20"
    : "bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20";
  return (
    <span className={`inline-flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 rounded-full ring-1 ring-inset uppercase tracking-wide ${cls}`}>
      <AlertTriangle className="w-2.5 h-2.5" />
      {level === "high" ? "Risque élevé" : "Risque moyen"}
    </span>
  );
}

function formatRelative(dateStr: string): string {
  const date = new Date(dateStr);
  const diff = Date.now() - date.getTime();
  const mins = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);
  if (mins < 1) return "à l'instant";
  if (mins < 60) return `il y a ${mins} min`;
  if (hours < 24) return `il y a ${hours} h`;
  if (days === 1) return "hier";
  if (days < 7) return `il y a ${days} jours`;
  return date.toLocaleDateString("fr-CA", { day: "numeric", month: "short", year: "numeric" });
}

function SessionSkeleton() {
  return (
    <div className="space-y-2">
      {[0, 1, 2].map((i) => (
        <div key={i} className="card p-4 flex items-center gap-3 animate-pulse">
          <div className="w-10 h-10 rounded-xl bg-gray-200 dark:bg-white/10" />
          <div className="flex-1 space-y-2">
            <div className="h-3 w-1/3 rounded bg-gray-200 dark:bg-white/10" />
            <div className="h-2.5 w-1/2 rounded bg-gray-200 dark:bg-white/10" />
          </div>
        </div>
      ))}
    </div>
  );
}

export default function DevicesPanel() {
  const [sessions, setSessions] = useState<DeviceSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [revokingId, setRevokingId] = useState<string | null>(null);
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [toRevoke, setToRevoke] = useState<DeviceSession | null>(null);

  const fetchSessions = async () => {
    try {
      const res = await fetch("/api/auth/devices");
      if (res.ok) setSessions(await res.json());
    } catch {}
    setLoading(false);
  };

  useEffect(() => { fetchSessions(); }, []);

  const handleRevoke = async (session: DeviceSession) => {
    if (session.isCurrent) { toast.error("Impossible de révoquer la session active"); return; }
    setRevokingId(session.id);
    setToRevoke(null);
    try {
      const res = await fetch(`/api/auth/devices/${session.id}`, { method: "DELETE" });
      if (res.ok) {
        toast.success("Session révoquée");
        setSessions((prev) => prev.map((s) => (s.id === session.id ? { ...s, endedAt: new Date().toISOString() } : s)));
      } else toast.error("Erreur lors de la révocation");
    } catch { toast.error("Erreur réseau"); }
    setRevokingId(null);
  };

  const refused = sessions.filter((s) => s.status === "refused_by_ai");
  const current = sessions.find((s) => s.isCurrent && s.status === "active" && !s.endedAt);
  const active = sessions.filter((s) => s.status === "active" && !s.endedAt && !s.isCurrent);
  const past = sessions.filter((s) => (s.status === "active" && s.endedAt) || s.status === "ended");

  if (loading) return <SessionSkeleton />;

  if (sessions.length === 0) {
    return <EmptyState icon={Monitor} title="Aucune session enregistrée" description="Les connexions futures apparaîtront ici avec leur appareil, leur emplacement et l'analyse de sécurité." />;
  }

  const SessionCard = ({ s, i }: { s: DeviceSession; i: number }) => {
    const isRefused = s.status === "refused_by_ai";
    const isActive = s.status === "active" && !s.endedAt;
    const isExpanded = expandedId === s.id;

    return (
      <motion.div
        key={s.id}
        initial={{ opacity: 0, y: 6 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: Math.min(i, 8) * 0.04 }}
        className={`card overflow-hidden ${isRefused ? "!border-rose-500/30 bg-rose-500/[0.03]" : !isActive ? "opacity-70" : ""}`}
      >
        <div className="flex flex-col sm:flex-row sm:items-center gap-3 p-4">
          <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
            isRefused ? "bg-rose-500/10 text-rose-500" : isActive ? "bg-blue-500/10 text-blue-600 dark:text-blue-300" : "bg-gray-100 dark:bg-white/[0.06] text-gray-400"
          }`}>
            {isRefused ? <ShieldX className="w-5 h-5" /> : <DeviceIcon device={s.device} />}
          </div>

          <div className="flex-1 min-w-0 space-y-1">
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-[14px] font-medium text-gray-900 dark:text-white">{s.browser} · {s.os}</span>
              {isRefused && (
                <span className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-1 ring-inset ring-rose-500/20 rounded-full uppercase tracking-wide">
                  <Bot className="w-2.5 h-2.5" /> Refusé par IA
                </span>
              )}
              {!isRefused && <RiskBadge level={s.aiRiskLevel} />}
            </div>
            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-gray-500 dark:text-gray-400">
              <span className="flex items-center gap-1 font-mono"><Globe className="w-3 h-3" />{s.ip}</span>
              {(s.country || s.city) && (
                <span className="flex items-center gap-1"><MapPin className="w-3 h-3" />{[s.city, s.country].filter(Boolean).join(", ")}</span>
              )}
              <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{formatRelative(s.createdAt)}</span>
              {s.endedAt && <span className="flex items-center gap-1 text-gray-400"><LogOut className="w-3 h-3" />déconnecté {formatRelative(s.endedAt)}</span>}
            </div>
          </div>

          <div className="flex items-center gap-1 shrink-0">
            {s.aiReason && (
              <button
                onClick={() => setExpandedId(isExpanded ? null : s.id)}
                className="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded-xl hover:bg-gray-100 dark:hover:bg-white/[0.06] transition-colors"
                title="Voir l'analyse IA"
                aria-expanded={isExpanded}
              >
                <ChevronDown className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-180" : ""}`} />
              </button>
            )}
            {isActive && !s.isCurrent && (
              <Button variant="danger" size="sm" onClick={() => setToRevoke(s)} loading={revokingId === s.id}>
                <LogOut className="w-3.5 h-3.5" /> Révoquer
              </Button>
            )}
          </div>
        </div>

        <AnimatePresence>
          {isExpanded && s.aiReason && (
            <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.2 }} className="overflow-hidden">
              <div className={`mx-4 mb-4 p-3 rounded-xl flex items-start gap-2.5 text-[12.5px] ${
                isRefused ? "bg-rose-500/10 text-rose-700 dark:text-rose-300" : "bg-blue-500/10 text-blue-800 dark:text-blue-200"
              }`}>
                <Bot className="w-4 h-4 mt-0.5 shrink-0" />
                <div>
                  <span className="font-semibold block mb-0.5">
                    Analyse IA — {isRefused ? "connexion refusée" : `risque ${s.aiRiskLevel || "faible"}`}
                  </span>
                  <span>{s.aiReason}</span>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    );
  };

  return (
    <div className="space-y-6">
      {/* Appareil courant */}
      {current && (
        <div className="relative overflow-hidden rounded-3xl border border-emerald-500/25 bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent p-4 sm:p-5">
          <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-emerald-500/15 blur-3xl pointer-events-none" />
          <div className="relative flex flex-col sm:flex-row sm:items-center gap-4">
            <div className="w-12 h-12 rounded-2xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
              <DeviceIcon device={current.device} className="w-6 h-6" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <span className="text-[15px] font-semibold text-gray-900 dark:text-white">{current.browser} · {current.os}</span>
                <span className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 rounded-full uppercase tracking-wide">
                  <Wifi className="w-2.5 h-2.5" /> Cet appareil
                </span>
              </div>
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-gray-600 dark:text-gray-400 mt-1">
                <span className="flex items-center gap-1 font-mono"><Globe className="w-3 h-3" />{current.ip}</span>
                {(current.country || current.city) && <span className="flex items-center gap-1"><MapPin className="w-3 h-3" />{[current.city, current.country].filter(Boolean).join(", ")}</span>}
                <span className="flex items-center gap-1"><Clock className="w-3 h-3" />connecté {formatRelative(current.createdAt)}</span>
              </div>
            </div>
            <ShieldCheck className="w-6 h-6 text-emerald-500 shrink-0 hidden sm:block" />
          </div>
        </div>
      )}

      <div className="flex items-start gap-2.5 p-3 rounded-2xl bg-blue-500/[0.07] text-[13px] text-blue-800 dark:text-blue-200">
        <Shield className="w-4 h-4 mt-0.5 shrink-0" />
        <span>Chaque connexion est analysée en temps réel par l&apos;IA (appareil, emplacement, historique) pour détecter toute activité suspecte.</span>
      </div>

      {refused.length > 0 && (
        <section className="space-y-2">
          <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-rose-500 px-1 flex items-center gap-1.5">
            <ShieldX className="w-3.5 h-3.5" /> Connexions refusées ({refused.length})
          </h3>
          {refused.map((s, i) => <SessionCard key={s.id} s={s} i={i} />)}
        </section>
      )}

      {active.length > 0 && (
        <section className="space-y-2">
          <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-400 px-1">Autres sessions actives ({active.length})</h3>
          {active.map((s, i) => <SessionCard key={s.id} s={s} i={i} />)}
        </section>
      )}

      {past.length > 0 && (
        <section className="space-y-2">
          <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-400 px-1">Historique ({past.length})</h3>
          {past.map((s, i) => <SessionCard key={s.id} s={s} i={i} />)}
        </section>
      )}

      <Modal
        isOpen={!!toRevoke}
        onClose={() => setToRevoke(null)}
        title="Révoquer cette session ?"
        description={toRevoke ? `${toRevoke.browser} · ${toRevoke.os} — ${toRevoke.ip}` : undefined}
        footer={
          <>
            <Button variant="ghost" onClick={() => setToRevoke(null)}>Annuler</Button>
            <Button variant="danger" onClick={() => toRevoke && handleRevoke(toRevoke)}><LogOut className="w-4 h-4" /> Révoquer</Button>
          </>
        }
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">L&apos;appareil sera déconnecté immédiatement et devra se reconnecter.</p>
      </Modal>
    </div>
  );
}