import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';

import { cx } from '@/lib/cx';

// Graphiques de l'écran Statistiques — SVG à la main (aucune bibliothèque de
// graphiques dans le projet). Règles suivies : marques fines (barres ≤ 24 px,
// bout arrondi de 4 px côté valeur, carré côté ligne de base ; courbes de
// 2 px), séparation par un vide de 2 px couleur de fond (jamais de bordure),
// quadrillage en filet plein discret, un seul axe par graphique, texte
// toujours à l'encre (jamais dans la couleur de la série), infobulle au
// survol et au focus — qui ne fait que compléter : chaque graphique a sa vue
// en tableau (`TableToggle`). Palette catégorielle vérifiée (daltonisme,
// séparation, contraste) sur le fond `paper` : l'aqua est sous 3:1, d'où
// libellés directs + tableau.

export const SERIES = {
  blue: '#2a78d6',
  orange: '#eb6834',
  aqua: '#1baf7a',
  /** « Rien / aucun » : gris de mise en retrait, jamais une série à part entière. */
  muted: '#c9c3b3',
} as const;

const GRID = '#E0D8C4'; // sand-line : un cran au-dessus du fond paper
const SURFACE = '#FFFDF7'; // paper
const BAR_MAX_PX = 24;

const fr = (n: number, digits = 0) =>
  n.toLocaleString('fr-FR', { maximumFractionDigits: digits, minimumFractionDigits: 0 });

/** Graduations « propres » (0, 5, 10… / 0, 20, 40…) couvrant `max`. */
function niceTicks(max: number, target = 4): number[] {
  if (max <= 0) return [0, 1];
  const raw = max / target;
  const pow = 10 ** Math.floor(Math.log10(raw));
  const step = [1, 2, 2.5, 5, 10].map((m) => m * pow).find((s) => s >= raw) ?? raw;
  const ticks: number[] = [];
  for (let v = 0; v <= max + step * 0.999; v += step) ticks.push(Math.round(v * 100) / 100);
  return ticks;
}

/** Largeur réelle du conteneur (le SVG se dessine en pixels, pas en %). */
function useWidth<T extends HTMLElement>(fallback = 640) {
  const ref = useRef<T>(null);
  const [width, setWidth] = useState(fallback);
  useLayoutEffect(() => {
    const el = ref.current;
    if (!el || typeof ResizeObserver === 'undefined') return;
    const ro = new ResizeObserver(([entry]) => setWidth(Math.max(240, entry.contentRect.width)));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return { ref, width };
}

// --------------------------------------------------------------------------- //
// Infobulle (position: fixed, bornée à l'écran — même raison que              //
// lib/useTooltipPosition.ts : jamais coincée par un conteneur défilant)        //
// --------------------------------------------------------------------------- //
interface TipState {
  x: number;
  y: number;
  content: ReactNode;
}

function useTip() {
  const [tip, setTip] = useState<TipState | null>(null);
  const show = (e: { clientX: number; clientY: number }, content: ReactNode) =>
    setTip({ x: e.clientX, y: e.clientY, content });
  const showAt = (el: Element, content: ReactNode) => {
    const r = el.getBoundingClientRect();
    setTip({ x: r.left + r.width / 2, y: r.top, content });
  };
  return { tip, show, showAt, hide: () => setTip(null) };
}

function Tooltip({ tip }: { tip: TipState | null }) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ left: -9999, top: -9999 });
  useLayoutEffect(() => {
    if (!tip || !ref.current) return;
    const { width, height } = ref.current.getBoundingClientRect();
    const left = Math.min(Math.max(tip.x + 12, 8), window.innerWidth - width - 8);
    const top = tip.y - height - 12 < 8 ? tip.y + 16 : tip.y - height - 12;
    setPos({ left, top });
  }, [tip]);
  if (!tip) return null;
  return (
    <div
      ref={ref}
      role="tooltip"
      style={{ position: 'fixed', left: pos.left, top: pos.top, zIndex: 50 }}
      className="pointer-events-none border-2 border-ink bg-paper px-[9px] py-[6px] font-mono text-[11px] shadow-brutal-sm"
    >
      {tip.content}
    </div>
  );
}

/** Ligne d'infobulle : la valeur d'abord (forte), puis la série (avec un
 * court trait de sa couleur, pas une pastille pleine). */
function TipRow({ color, label, value }: { color?: string; label: string; value: string }) {
  return (
    <div className="flex items-center gap-[6px] whitespace-nowrap">
      {color ? <span className="inline-block h-[2px] w-[10px]" style={{ background: color }} /> : null}
      <b>{value}</b>
      <span className="opacity-70">{label}</span>
    </div>
  );
}

// --------------------------------------------------------------------------- //
// Légende, vue tableau                                                        //
// --------------------------------------------------------------------------- //
export function Legend({ items }: { items: Array<{ label: string; color: string; value?: string }> }) {
  return (
    <div className="flex flex-wrap gap-x-[14px] gap-y-[4px] font-mono text-[10.5px]">
      {items.map((item) => (
        <span key={item.label} className="flex items-center gap-[6px]">
          <span className="inline-block h-[10px] w-[10px] rounded-[2px]" style={{ background: item.color }} />
          {item.label}
          {item.value ? <b>{item.value}</b> : null}
        </span>
      ))}
    </div>
  );
}

/** Équivalent tableau d'un graphique — toujours disponible, replié. */
export function TableToggle({ label, children }: { label: string; children: ReactNode }) {
  return (
    <details className="mt-2">
      <summary className="cursor-pointer font-display text-[9.5px] font-extrabold uppercase tracking-wide opacity-70 hover:opacity-100">
        {label}
      </summary>
      <div className="mt-2 overflow-x-auto">{children}</div>
    </details>
  );
}

export function DataTable({
  head,
  rows,
}: {
  head: string[];
  rows: Array<Array<ReactNode>>;
}) {
  return (
    <table className="w-full border-collapse font-mono text-[11px]">
      <thead>
        <tr>
          {head.map((h, i) => (
            <th
              key={h}
              className={cx(
                'border-b-2 border-ink px-[6px] py-[4px] font-display text-[9.5px] font-extrabold uppercase tracking-wide',
                i === 0 ? 'text-left' : 'text-right',
              )}
            >
              {h}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, r) => (
          <tr key={r} className="border-b border-sand-line">
            {row.map((cell, c) => (
              <td
                key={c}
                className={cx('px-[6px] py-[4px]', c === 0 ? 'text-left' : 'text-right tabular-nums')}
              >
                {cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// --------------------------------------------------------------------------- //
// Courbe cumulée (une série : pas de légende, le titre la nomme)              //
// --------------------------------------------------------------------------- //
export function CumulativeLineChart({
  points,
  dateLabel,
  valueLabel,
  dailyLabel,
}: {
  points: Array<{ date: string; count: number; cumulative: number }>;
  dateLabel: (date: string) => string;
  valueLabel: string;
  dailyLabel: string;
}) {
  const { ref, width } = useWidth<HTMLDivElement>();
  const { tip, show, hide } = useTip();
  const [hover, setHover] = useState<number | null>(null);
  const height = 220;
  const pad = { top: 16, right: 48, bottom: 28, left: 40 };
  const innerW = width - pad.left - pad.right;
  const innerH = height - pad.top - pad.bottom;
  const ticks = niceTicks(Math.max(...points.map((p) => p.cumulative), 1));
  const yMax = ticks[ticks.length - 1];
  const x = (i: number) => pad.left + (points.length <= 1 ? innerW / 2 : (i / (points.length - 1)) * innerW);
  const y = (v: number) => pad.top + innerH - (v / yMax) * innerH;
  const line = points.map((p, i) => `${i ? 'L' : 'M'}${x(i)},${y(p.cumulative)}`).join(' ');
  const area = `${line} L${x(points.length - 1)},${y(0)} L${x(0)},${y(0)} Z`;
  const last = points[points.length - 1];
  // Quelques dates seulement sous l'axe, réparties du début à la fin — leur
  // nombre suit la largeur (≈ une tous les 80 px), sinon elles se
  // chevauchent sur un téléphone.
  const slots = Math.max(2, Math.min(points.length, Math.floor(innerW / 80) + 1));
  const labelled = new Set(
    Array.from({ length: slots }, (_, k) =>
      Math.round((k * (points.length - 1)) / Math.max(1, slots - 1)),
    ),
  );

  const pick = (clientX: number, rect: DOMRect) => {
    const rel = clientX - rect.left - pad.left;
    return Math.min(points.length - 1, Math.max(0, Math.round((rel / innerW) * (points.length - 1))));
  };
  const tipContent = (i: number) => (
    <>
      <div className="mb-[2px] font-display text-[10px] font-extrabold">{dateLabel(points[i].date)}</div>
      <TipRow color={SERIES.blue} label={valueLabel} value={fr(points[i].cumulative)} />
      <TipRow label={dailyLabel} value={`+${fr(points[i].count)}`} />
    </>
  );

  return (
    <div ref={ref} className="w-full min-w-0 overflow-hidden">
      <svg
        width={width}
        height={height}
        role="img"
        tabIndex={0}
        aria-label={`${valueLabel} : ${last ? fr(last.cumulative) : 0}`}
        onPointerMove={(e) => {
          const i = pick(e.clientX, e.currentTarget.getBoundingClientRect());
          setHover(i);
          show(e, tipContent(i));
        }}
        onPointerLeave={() => {
          setHover(null);
          hide();
        }}
        onBlur={() => {
          setHover(null);
          hide();
        }}
        onKeyDown={(e) => {
          if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
          const i = Math.min(points.length - 1, Math.max(0, (hover ?? points.length - 1) + (e.key === 'ArrowLeft' ? -1 : 1)));
          setHover(i);
          const rect = e.currentTarget.getBoundingClientRect();
          show({ clientX: rect.left + x(i), clientY: rect.top + y(points[i].cumulative) }, tipContent(i));
        }}
        className="block outline-none focus-visible:outline-2 focus-visible:outline-ink"
      >
        {ticks.map((tk) => (
          <g key={tk}>
            <line x1={pad.left} x2={width - pad.right} y1={y(tk)} y2={y(tk)} stroke={GRID} strokeWidth={1} />
            <text x={pad.left - 6} y={y(tk) + 3} textAnchor="end" className="fill-ink font-mono text-[10px] opacity-60">
              {fr(tk)}
            </text>
          </g>
        ))}
        {points.map((p, i) =>
          labelled.has(i) ? (
            <text
              key={p.date}
              x={x(i)}
              y={height - 8}
              textAnchor={i === 0 ? 'start' : i === points.length - 1 ? 'end' : 'middle'}
              className="fill-ink font-mono text-[10px] opacity-60"
            >
              {dateLabel(p.date)}
            </text>
          ) : null,
        )}
        <path d={area} fill={SERIES.blue} fillOpacity={0.1} />
        <path d={line} fill="none" stroke={SERIES.blue} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
        {hover !== null ? (
          <>
            <line x1={x(hover)} x2={x(hover)} y1={pad.top} y2={pad.top + innerH} stroke="#14110E" strokeOpacity={0.35} strokeWidth={1} />
            <circle cx={x(hover)} cy={y(points[hover].cumulative)} r={4} fill={SERIES.blue} stroke={SURFACE} strokeWidth={2} />
          </>
        ) : null}
        {last ? (
          <>
            <circle cx={x(points.length - 1)} cy={y(last.cumulative)} r={4} fill={SERIES.blue} stroke={SURFACE} strokeWidth={2} />
            <text x={x(points.length - 1) + 8} y={y(last.cumulative) + 4} className="fill-ink font-mono text-[11px] font-bold">
              {fr(last.cumulative)}
            </text>
          </>
        ) : null}
      </svg>
      <Tooltip tip={tip} />
    </div>
  );
}

// --------------------------------------------------------------------------- //
// Barres horizontales (une série, une couleur pour toutes les barres)         //
// --------------------------------------------------------------------------- //
export function BarList({
  rows,
  max,
  color = SERIES.blue,
}: {
  rows: Array<{ key: string; label: string; value: number; valueLabel: string; tip?: string }>;
  /** Échelle commune (ex. 100 pour des pourcentages) — défaut : la plus grande valeur. */
  max?: number;
  color?: string;
}) {
  const { tip, show, showAt, hide } = useTip();
  const scale = max ?? Math.max(...rows.map((r) => r.value), 1);
  return (
    <div className="flex flex-col gap-[6px]">
      {rows.map((r) => (
        <div
          key={r.key}
          tabIndex={0}
          onPointerMove={(e) => show(e, <TipRow color={color} label={r.label} value={r.tip ?? r.valueLabel} />)}
          onPointerLeave={hide}
          onFocus={(e) => showAt(e.currentTarget, <TipRow color={color} label={r.label} value={r.tip ?? r.valueLabel} />)}
          onBlur={hide}
          className="grid items-center gap-[8px] outline-none hover:bg-cream focus-visible:bg-cream"
          style={{ gridTemplateColumns: 'minmax(90px, 34%) 1fr' }}
        >
          <span className="truncate font-mono text-[11px]" title={r.label}>
            {r.label}
          </span>
          <span className="flex items-center gap-[6px]">
            <span
              className="block h-[14px] rounded-r-[4px]"
              style={{
                width: `${Math.max(r.value > 0 ? 1.5 : 0, (r.value / scale) * 82)}%`,
                background: color,
              }}
            />
            <span className="whitespace-nowrap font-mono text-[10.5px] font-bold">{r.valueLabel}</span>
          </span>
        </div>
      ))}
      <Tooltip tip={tip} />
    </div>
  );
}

// --------------------------------------------------------------------------- //
// Colonnes groupées (plusieurs séries, même unité, un seul axe)               //
// --------------------------------------------------------------------------- //
export function GroupedColumns({
  groups,
  series,
  unit,
}: {
  groups: Array<{ key: string; label: string; values: number[] }>;
  series: Array<{ label: string; color: string }>;
  unit: string;
}) {
  const { ref, width } = useWidth<HTMLDivElement>();
  const { tip, show, hide, showAt } = useTip();
  const [hover, setHover] = useState<number | null>(null);
  const height = 240;
  const pad = { top: 18, right: 8, bottom: 30, left: 44 };
  const innerW = width - pad.left - pad.right;
  const innerH = height - pad.top - pad.bottom;
  const ticks = niceTicks(Math.max(...groups.flatMap((g) => g.values), 1));
  const yMax = ticks[ticks.length - 1];
  const band = innerW / Math.max(groups.length, 1);
  const barW = Math.min(BAR_MAX_PX, (band * 0.7 - 2 * (series.length - 1)) / series.length);
  const groupW = barW * series.length + 2 * (series.length - 1);
  const y = (v: number) => pad.top + innerH - (v / yMax) * innerH;
  const content = (g: (typeof groups)[number]) => (
    <>
      <div className="mb-[2px] font-display text-[10px] font-extrabold">{g.label}</div>
      {series.map((s, i) => (
        <TipRow key={s.label} color={s.color} label={s.label} value={`${fr(g.values[i], 1)} ${unit}`} />
      ))}
    </>
  );
  // Barre au bout arrondi côté valeur (haut), carré côté ligne de base.
  const bar = (x0: number, v: number) => {
    const top = y(v);
    const h = y(0) - top;
    if (h <= 0) return '';
    const r = Math.min(4, h, barW / 2);
    return `M${x0},${y(0)} V${top + r} Q${x0},${top} ${x0 + r},${top} H${x0 + barW - r} Q${x0 + barW},${top} ${x0 + barW},${top + r} V${y(0)} Z`;
  };

  return (
    <div ref={ref} className="w-full min-w-0 overflow-hidden">
      <svg width={width} height={height} role="img" aria-label={series.map((s) => s.label).join(', ')} className="block">
        {ticks.map((tk) => (
          <g key={tk}>
            <line x1={pad.left} x2={width - pad.right} y1={y(tk)} y2={y(tk)} stroke={GRID} strokeWidth={1} />
            <text x={pad.left - 6} y={y(tk) + 3} textAnchor="end" className="fill-ink font-mono text-[10px] opacity-60">
              {fr(tk)}
            </text>
          </g>
        ))}
        {groups.map((g, gi) => {
          const x0 = pad.left + gi * band + (band - groupW) / 2;
          return (
            <g
              key={g.key}
              tabIndex={0}
              onPointerMove={(e) => {
                setHover(gi);
                show(e, content(g));
              }}
              onPointerLeave={() => {
                setHover(null);
                hide();
              }}
              onFocus={(e) => {
                setHover(gi);
                showAt(e.currentTarget, content(g));
              }}
              onBlur={() => {
                setHover(null);
                hide();
              }}
              className="outline-none"
            >
              {/* Zone de survol : toute la bande du jour, pas seulement les barres. */}
              <rect
                x={pad.left + gi * band}
                y={pad.top}
                width={band}
                height={innerH}
                fill={hover === gi ? '#14110E' : 'transparent'}
                fillOpacity={hover === gi ? 0.04 : 0}
              />
              {series.map((s, si) => (
                <path key={s.label} d={bar(x0 + si * (barW + 2), g.values[si])} fill={s.color} />
              ))}
              <text x={pad.left + gi * band + band / 2} y={height - 10} textAnchor="middle" className="fill-ink font-mono text-[10.5px]">
                {g.label}
              </text>
            </g>
          );
        })}
        <line x1={pad.left} x2={width - pad.right} y1={y(0)} y2={y(0)} stroke="#14110E" strokeOpacity={0.4} strokeWidth={1} />
      </svg>
      <Tooltip tip={tip} />
    </div>
  );
}

// --------------------------------------------------------------------------- //
// Répartition (partie d'un tout) — une barre, segments séparés par 2 px       //
// --------------------------------------------------------------------------- //
export function ShareBar({
  segments,
}: {
  segments: Array<{ label: string; value: number; color: string }>;
}) {
  const { tip, show, showAt, hide } = useTip();
  const total = segments.reduce((t, s) => t + s.value, 0);
  const visible = segments.filter((s) => s.value > 0);
  const pct = (v: number) => (total ? Math.round((v / total) * 100) : 0);
  return (
    <div>
      <div className="flex h-[22px] w-full gap-[2px]">
        {visible.map((s, i) => (
          <div
            key={s.label}
            tabIndex={0}
            onPointerMove={(e) => show(e, <TipRow color={s.color} label={s.label} value={`${fr(s.value)} (${pct(s.value)} %)`} />)}
            onPointerLeave={hide}
            onFocus={(e) => showAt(e.currentTarget, <TipRow color={s.color} label={s.label} value={`${fr(s.value)} (${pct(s.value)} %)`} />)}
            onBlur={hide}
            className={cx(
              'h-full outline-none hover:brightness-110 focus-visible:brightness-110',
              i === 0 && 'rounded-l-[4px]',
              i === visible.length - 1 && 'rounded-r-[4px]',
            )}
            style={{ flexGrow: s.value, flexBasis: 0, background: s.color }}
          />
        ))}
      </div>
      <div className="mt-2">
        <Legend items={segments.map((s) => ({ label: s.label, color: s.color, value: `${fr(s.value)} · ${pct(s.value)} %` }))} />
      </div>
      <Tooltip tip={tip} />
    </div>
  );
}

// --------------------------------------------------------------------------- //
// Jauge : une valeur rapportée à un maximum (piste = même teinte, plus claire) //
// --------------------------------------------------------------------------- //
export function Meter({
  value,
  max,
  label,
  extra,
  title,
}: {
  value: number;
  max: number;
  label: string;
  /** Complément court après le libellé (ex. « +2 »), dans une colonne fixe
   * pour que les jauges restent alignées d'une ligne à l'autre. */
  extra?: string;
  title?: string;
}) {
  const ratio = max > 0 ? Math.min(1, value / max) : 0;
  return (
    <span className="flex items-center gap-[6px]" title={title ?? label}>
      <span className="relative block h-[8px] w-[72px] rounded-[4px]" style={{ background: '#cde2fb' }}>
        <span
          className="absolute inset-y-0 left-0 rounded-[4px]"
          style={{ width: `${ratio * 100}%`, background: SERIES.blue }}
        />
      </span>
      <span className="w-[64px] text-left font-mono text-[10.5px] font-bold">{label}</span>
      <span className="w-[26px] text-left font-mono text-[10px] opacity-60">{extra ?? ''}</span>
    </span>
  );
}