"use client";
// Carte interactive des concepts : graphe SVG maison (aucune dépendance).
// Colonnes par semaine, nœuds colorés par maîtrise, liens typés en courbes de Bézier,
// pan (glisser) + zoom (molette / boutons), panneau latéral au clic, ?focus=slug.
import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  FileText, Layers, ListChecks, Maximize2, MessageSquareText, Minus, Plus, X,
} from "lucide-react";
import { Badge, Button, Card, EmptyState, Skeleton, cn } from "@/components/ui";
import { ErrorBanner, LEVELS, fetchJson, levelInfo, type MasteryLevel } from "./shared";

type Node = {
  id: number; slug: string; name: string; description: string; week: number | null;
  importance: number; axis: string; mastery: number; level: MasteryLevel;
  observations: number; cards: number; questions: number;
};
type GraphLink = { from_id: number; to_id: number; type: string };

const COL_W = 200;
const ROW_H = 96;
const TOP = 76;

const LINK_STYLES: Record<string, { stroke: string; dash?: string; arrow?: boolean; label: string }> = {
  prerequis: { stroke: "#64748b", arrow: true, label: "Préalable" },
  relation: { stroke: "#94a3b8", dash: "5 5", label: "Notion liée" },
  approfondissement: { stroke: "#c6a300", label: "Approfondissement" },
  application: { stroke: "#4585c9", dash: "2 4", arrow: true, label: "Application" },
};
function linkStyle(type: string) {
  return LINK_STYLES[type] ?? LINK_STYLES.relation;
}

export function ConceptMap({ course }: { course: string }) {
  const searchParams = useSearchParams();
  const focusSlug = searchParams.get("focus");

  const [nodes, setNodes] = useState<Node[] | null>(null);
  const [links, setLinks] = useState<GraphLink[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [selectedId, setSelectedId] = useState<number | null>(null);

  // ----- Chargement -----
  useEffect(() => {
    fetchJson<{ nodes: Node[]; links: GraphLink[] }>(`/api/learning/${course}/concepts`)
      .then((d) => { setNodes(d.nodes); setLinks(d.links); })
      .catch((e) => setError(e instanceof Error ? e.message : "Erreur de chargement."));
  }, [course]);

  // ----- Disposition : colonnes par semaine -----
  const layout = useMemo(() => {
    if (!nodes) return null;
    const weeks = [...new Set(nodes.map((n) => n.week ?? 0))].sort((a, b) => a - b);
    const colOf = new Map(weeks.map((w, i) => [w, i]));
    const rowCount = new Map<number, number>();
    const pos = new Map<number, { x: number; y: number }>();
    for (const n of nodes) {
      const col = colOf.get(n.week ?? 0) ?? 0;
      const row = rowCount.get(col) ?? 0;
      rowCount.set(col, row + 1);
      pos.set(n.id, { x: 60 + col * COL_W + COL_W / 2, y: TOP + row * ROW_H + 30 });
    }
    const maxRows = Math.max(1, ...rowCount.values());
    const width = Math.max(480, 120 + weeks.length * COL_W);
    const height = TOP + maxRows * ROW_H + 60;
    return { weeks, colOf, pos, width, height };
  }, [nodes]);

  // ----- Pan / zoom (viewBox) -----
  const svgRef = useRef<SVGSVGElement>(null);
  const [view, setView] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
  const dragRef = useRef<{ px: number; py: number; vx: number; vy: number; moved: boolean } | null>(null);

  useEffect(() => {
    if (layout && !view) setView({ x: 0, y: 0, w: layout.width, h: layout.height });
  }, [layout, view]);

  const centerOn = useCallback((id: number) => {
    if (!layout) return;
    const p = layout.pos.get(id);
    if (!p) return;
    setView((v) => {
      const w = v ? Math.min(v.w, layout.width * 0.7) : layout.width * 0.7;
      const h = v ? (v.h / v.w) * w : (layout.height / layout.width) * w;
      return { x: p.x - w / 2, y: p.y - h / 2, w, h };
    });
  }, [layout]);

  // ----- ?focus=slug -----
  const focusedRef = useRef(false);
  useEffect(() => {
    if (!nodes || !layout || focusedRef.current || !focusSlug) return;
    const n = nodes.find((x) => x.slug === focusSlug);
    if (n) {
      setSelectedId(n.id);
      centerOn(n.id);
    }
    focusedRef.current = true;
  }, [nodes, layout, focusSlug, centerOn]);

  function zoom(factor: number, cx?: number, cy?: number) {
    if (!layout) return;
    setView((v) => {
      if (!v) return v;
      const w = Math.min(layout.width * 1.6, Math.max(layout.width / 5, v.w * factor));
      const h = (v.h / v.w) * w;
      const fx = cx ?? v.x + v.w / 2;
      const fy = cy ?? v.y + v.h / 2;
      const kx = (fx - v.x) / v.w;
      const ky = (fy - v.y) / v.h;
      return { x: fx - kx * w, y: fy - ky * h, w, h };
    });
  }

  function svgPoint(e: { clientX: number; clientY: number }): { x: number; y: number } {
    const svg = svgRef.current;
    if (!svg || !view) return { x: 0, y: 0 };
    const r = svg.getBoundingClientRect();
    return {
      x: view.x + ((e.clientX - r.left) / r.width) * view.w,
      y: view.y + ((e.clientY - r.top) / r.height) * view.h,
    };
  }

  function onWheel(e: React.WheelEvent<SVGSVGElement>) {
    const p = svgPoint(e);
    zoom(e.deltaY > 0 ? 1.12 : 0.89, p.x, p.y);
  }
  function onPointerDown(e: React.PointerEvent<SVGSVGElement>) {
    if (!view) return;
    dragRef.current = { px: e.clientX, py: e.clientY, vx: view.x, vy: view.y, moved: false };
    (e.currentTarget as SVGSVGElement).setPointerCapture(e.pointerId);
  }
  function onPointerMove(e: React.PointerEvent<SVGSVGElement>) {
    const d = dragRef.current;
    const svg = svgRef.current;
    if (!d || !svg || !view) return;
    const r = svg.getBoundingClientRect();
    const dx = ((e.clientX - d.px) / r.width) * view.w;
    const dy = ((e.clientY - d.py) / r.height) * view.h;
    if (Math.abs(e.clientX - d.px) + Math.abs(e.clientY - d.py) > 4) d.moved = true;
    if (d.moved) setView((v) => (v ? { ...v, x: d.vx - dx, y: d.vy - dy } : v));
  }
  function onPointerUp() {
    const d = dragRef.current;
    dragRef.current = null;
    if (d && !d.moved) setSelectedId(null); // clic sur le fond → désélection
  }

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSelectedId(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const selected = nodes?.find((n) => n.id === selectedId) ?? null;
  const upper = course.toUpperCase();

  if (error) {
    return <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full"><ErrorBanner message={error} /></main>;
  }
  if (!nodes || !layout || !view) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full space-y-4">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-[60vh] w-full" />
      </main>
    );
  }
  if (nodes.length === 0) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full">
        <EmptyState icon={<Layers />} title="Aucun concept" description="La carte des concepts de ce cours n'est pas encore disponible." />
      </main>
    );
  }

  return (
    <main className="px-4 sm:px-6 py-6 max-w-6xl mx-auto w-full">
      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
        <div>
          <h2 className="text-lg font-bold text-fg">Carte des concepts</h2>
          <p className="text-[13px] text-muted">Glissez pour déplacer, molette pour zoomer, cliquez un nœud pour les détails.</p>
        </div>
        <div className="flex items-center gap-1.5" role="group" aria-label="Zoom">
          <Button variant="secondary" size="icon" onClick={() => zoom(0.8)} title="Zoomer" aria-label="Zoomer"><Plus size={15} /></Button>
          <Button variant="secondary" size="icon" onClick={() => zoom(1.25)} title="Dézoomer" aria-label="Dézoomer"><Minus size={15} /></Button>
          <Button
            variant="secondary" size="icon"
            onClick={() => setView({ x: 0, y: 0, w: layout.width, h: layout.height })}
            title="Vue d'ensemble" aria-label="Vue d'ensemble"
          >
            <Maximize2 size={14} />
          </Button>
        </div>
      </div>

      <Card className="relative overflow-hidden">
        <svg
          ref={svgRef}
          viewBox={`${view.x} ${view.y} ${view.w} ${view.h}`}
          className="w-full h-[58vh] sm:h-[62vh] touch-none cursor-grab active:cursor-grabbing select-none"
          onWheel={onWheel}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          role="img"
          aria-label="Graphe des concepts du cours par semaine"
        >
          <defs>
            <marker id="cm-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M 0 1 L 9 5 L 0 9 z" fill="#64748b" />
            </marker>
          </defs>

          {/* Colonnes de semaines */}
          {layout.weeks.map((w, i) => (
            <g key={w}>
              {i > 0 && (
                <line
                  x1={60 + i * COL_W} y1={20} x2={60 + i * COL_W} y2={layout.height - 10}
                  stroke="var(--border)" strokeWidth={1}
                />
              )}
              <text x={60 + i * COL_W + COL_W / 2} y={40} textAnchor="middle" fontSize={13} fontWeight={650} style={{ fill: "var(--muted)" }}>
                {w === 0 ? "Transversal" : `Semaine ${w}`}
              </text>
            </g>
          ))}

          {/* Liens */}
          {links.map((l, i) => {
            const a = layout.pos.get(l.from_id);
            const b = layout.pos.get(l.to_id);
            if (!a || !b) return null;
            const st = linkStyle(l.type);
            const dx = Math.max(40, Math.abs(b.x - a.x) / 2);
            const d = `M ${a.x} ${a.y} C ${a.x + dx} ${a.y}, ${b.x - dx} ${b.y}, ${b.x} ${b.y}`;
            const active = selectedId != null && (l.from_id === selectedId || l.to_id === selectedId);
            return (
              <path
                key={i}
                d={d}
                fill="none"
                stroke={st.stroke}
                strokeWidth={active ? 2.4 : 1.4}
                strokeDasharray={st.dash}
                opacity={selectedId == null ? 0.55 : active ? 0.95 : 0.15}
                markerEnd={st.arrow ? "url(#cm-arrow)" : undefined}
              />
            );
          })}

          {/* Nœuds */}
          {nodes.map((n) => {
            const p = layout.pos.get(n.id)!;
            const r = 9 + Math.min(4, Math.max(1, n.importance)) * 3.5;
            const info = LEVELS[n.level] ?? LEVELS["a-decouvrir"];
            const isSel = selectedId === n.id;
            const dim = selectedId != null && !isSel && !links.some((l) => (l.from_id === selectedId && l.to_id === n.id) || (l.to_id === selectedId && l.from_id === n.id));
            const label = n.name.length > 24 ? n.name.slice(0, 23) + "…" : n.name;
            return (
              <g
                key={n.id}
                opacity={dim ? 0.35 : 1}
                className="cursor-pointer"
                onPointerDown={(e) => e.stopPropagation()}
                onClick={(e) => { e.stopPropagation(); setSelectedId(n.id); centerOn(n.id); }}
                tabIndex={0}
                role="button"
                aria-label={`${n.name} — ${info.label}, maîtrise ${Math.round(n.mastery * 100)} %`}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSelectedId(n.id); centerOn(n.id); } }}
              >
                <title>{`${n.name} — ${info.label} (${Math.round(n.mastery * 100)} %)`}</title>
                {isSel && <circle cx={p.x} cy={p.y} r={r + 6} fill="none" stroke={info.hex} strokeWidth={2} opacity={0.5} />}
                <circle cx={p.x} cy={p.y} r={r} fill={info.hex} stroke="var(--card)" strokeWidth={2} />
                <text x={p.x} y={p.y + r + 15} textAnchor="middle" fontSize={11} style={{ fill: "var(--fg)" }}>
                  {label}
                </text>
              </g>
            );
          })}
        </svg>

        {/* Panneau latéral */}
        {selected && (
          <aside
            className="absolute inset-x-0 bottom-0 max-h-[62%] sm:inset-y-0 sm:left-auto sm:right-0 sm:w-[340px] sm:max-h-none bg-card border-t sm:border-t-0 sm:border-l border-app shadow-2xl overflow-y-auto animate-fade-in"
            aria-label={`Détails du concept ${selected.name}`}
          >
            <div className="sticky top-0 bg-card border-b border-app px-4 py-3 flex items-start justify-between gap-2 z-10">
              <div className="min-w-0">
                <h3 className="font-semibold text-fg text-[15px] leading-snug">{selected.name}</h3>
                <div className="flex flex-wrap gap-1.5 mt-1.5">
                  <Badge tone={levelInfo(selected.level).tone}>
                    {levelInfo(selected.level).label} · {Math.round(selected.mastery * 100)} %
                  </Badge>
                  {selected.week != null && <Badge tone="neutral">Semaine {selected.week}</Badge>}
                  <Badge tone="neutral">Importance {selected.importance}</Badge>
                </div>
              </div>
              <button onClick={() => setSelectedId(null)} aria-label="Fermer" className="p-1.5 rounded-md text-muted hover:text-fg shrink-0">
                <X size={16} />
              </button>
            </div>
            <div className="p-4 space-y-4">
              {selected.description && <p className="text-[13.5px] text-fg leading-relaxed">{selected.description}</p>}
              <div className="flex gap-4 text-[12.5px] text-muted">
                <span className="inline-flex items-center gap-1.5"><Layers size={13} /> {selected.cards} carte{selected.cards > 1 ? "s" : ""}</span>
                <span className="inline-flex items-center gap-1.5"><ListChecks size={13} /> {selected.questions} question{selected.questions > 1 ? "s" : ""}</span>
              </div>
              <div className="grid gap-2">
                <Link href={`/chat?course=${upper}`} className="block">
                  <Button variant="secondary" size="sm" className="w-full justify-start">
                    <MessageSquareText size={14} /> Expliquer dans le chat
                  </Button>
                </Link>
                <Link href={`/apprendre/${course}/quiz?concept=${encodeURIComponent(selected.slug)}`} className="block">
                  <Button variant="secondary" size="sm" className="w-full justify-start">
                    <ListChecks size={14} /> Quiz ciblé
                  </Button>
                </Link>
                <Link href={`/apprendre/${course}/flashcards?concept=${encodeURIComponent(selected.slug)}`} className="block">
                  <Button variant="secondary" size="sm" className="w-full justify-start">
                    <Layers size={14} /> Flashcards
                  </Button>
                </Link>
                <Link href={`/apprendre/${course}/resumes?concept=${encodeURIComponent(selected.slug)}`} className="block">
                  <Button variant="secondary" size="sm" className="w-full justify-start">
                    <FileText size={14} /> Générer un résumé
                  </Button>
                </Link>
              </div>
              {selected.observations === 0 && (
                <p className="text-[12px] text-muted bg-surface-1 dark:bg-brand-950/50 border border-app rounded-lg p-3">
                  Concept jamais pratiqué — un quiz ciblé ou quelques cartes établiront une première estimation de maîtrise.
                </p>
              )}
            </div>
          </aside>
        )}
      </Card>

      {/* Légende */}
      <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-muted">
        {(Object.keys(LEVELS) as MasteryLevel[]).map((k) => (
          <span key={k} className="inline-flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full" style={{ background: LEVELS[k].hex }} /> {LEVELS[k].label}
          </span>
        ))}
        <span className="w-px h-4 bg-app hidden sm:block" />
        {Object.entries(LINK_STYLES).map(([k, s]) => (
          <span key={k} className="inline-flex items-center gap-1.5">
            <svg width="26" height="8" aria-hidden>
              <line x1="1" y1="4" x2="25" y2="4" stroke={s.stroke} strokeWidth="2" strokeDasharray={s.dash} />
            </svg>
            {s.label}
          </span>
        ))}
        <span className="inline-flex items-center gap-1.5">
          <span className="w-3.5 h-3.5 rounded-full border-2 border-current opacity-60" /> Taille = importance
        </span>
      </div>
    </main>
  );
}