"use client";
// Primitives partagées du tableau de bord d'administration : aides de format,
// récupération JSON, tuiles de stats, interrupteur accessible, graphiques en barres maison.
import { useCallback, useEffect, useState, type ReactNode } from "react";
import { AlertTriangle } from "lucide-react";
import { Button, Card, cn } from "@/components/ui";

// ---------- Formats (fr-CA) ----------
export function fmtInt(n: number | null | undefined): string {
  return (n ?? 0).toLocaleString("fr-CA");
}

export function fmtUSD(n: number | null | undefined, digits = 2): string {
  const v = n ?? 0;
  return `${v.toLocaleString("fr-CA", { minimumFractionDigits: digits, maximumFractionDigits: digits })} $`;
}

/** SQLite stocke datetime('now') en UTC sans fuseau — on normalise avant d'afficher. */
export function fmtDate(s: string | null | undefined, withTime = true): string {
  if (!s) return "—";
  const iso = s.includes("T") ? s : s.replace(" ", "T") + "Z";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return s;
  return d.toLocaleString("fr-CA", withTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" });
}

// ---------- Récupération JSON ----------
export async function postJson<T = { ok: boolean }>(url: string, body?: unknown, method = "POST"): Promise<T> {
  const res = await fetch(url, {
    method,
    headers: body !== undefined ? { "Content-Type": "application/json" } : undefined,
    body: body !== undefined ? JSON.stringify(body) : undefined,
  });
  const j = (await res.json().catch(() => null)) as { error?: string } | null;
  if (!res.ok) throw new Error(j?.error || `Erreur ${res.status}`);
  return j as T;
}

export function useFetchJson<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const reload = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(url);
      const j = (await res.json().catch(() => null)) as (T & { error?: string }) | null;
      if (!res.ok || !j) throw new Error(j?.error || `Erreur ${res.status}`);
      setData(j);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur inattendue.");
    } finally {
      setLoading(false);
    }
  }, [url]);
  useEffect(() => {
    reload();
  }, [reload]);
  return { data, error, loading, reload, setData };
}

// ---------- Bannière d'erreur ----------
export function ErrorBanner({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <div className="flex items-center gap-3 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-400" role="alert">
      <AlertTriangle size={16} className="shrink-0" />
      <span className="flex-1">{message}</span>
      {onRetry && (
        <Button size="sm" variant="secondary" onClick={onRetry}>
          Réessayer
        </Button>
      )}
    </div>
  );
}

// ---------- Message de succès transitoire ----------
export function SuccessFlash({ message }: { message: string | null }) {
  if (!message) return null;
  return (
    <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-2.5 text-sm text-emerald-700 dark:text-emerald-400 animate-fade-in" role="status">
      {message}
    </div>
  );
}

// ---------- Tuile de statistique ----------
export function StatTile({
  label,
  value,
  sub,
  tone = "default",
}: {
  label: string;
  value: ReactNode;
  sub?: ReactNode;
  tone?: "default" | "red" | "amber" | "green";
}) {
  const tones = {
    default: "text-fg",
    red: "text-red-600 dark:text-red-400",
    amber: "text-amber-600 dark:text-amber-400",
    green: "text-emerald-600 dark:text-emerald-400",
  };
  return (
    <Card className="p-4">
      <p className="text-[12px] font-medium text-muted">{label}</p>
      <p className={cn("mt-1 text-xl font-bold tabular-nums leading-tight", tones[tone])}>{value}</p>
      {sub && <p className="mt-0.5 text-[12px] text-muted">{sub}</p>}
    </Card>
  );
}

// ---------- Interrupteur accessible ----------
export function Toggle({
  checked,
  onChange,
  disabled,
  label,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  disabled?: boolean;
  label?: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
        "relative inline-flex h-5.5 w-10 shrink-0 items-center rounded-full transition-colors duration-150",
        checked ? "bg-brand-600" : "bg-surface-3 dark:bg-brand-900",
        disabled && "opacity-50 cursor-not-allowed"
      )}
    >
      <span
        className={cn(
          "inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-150",
          checked ? "translate-x-[1.25rem]" : "translate-x-[0.2rem]"
        )}
      />
    </button>
  );
}

// ---------- Graphique en barres vertical (CSS, sans dépendance) ----------
export type BarDatum = { label: string; value: number; hint?: string };

export function BarChart({
  data,
  height = 150,
  barClass = "bg-brand-500",
  formatValue = (v: number) => fmtInt(v),
  emptyLabel = "Aucune donnée sur la période.",
}: {
  data: BarDatum[];
  height?: number;
  barClass?: string;
  formatValue?: (v: number) => string;
  emptyLabel?: string;
}) {
  const max = Math.max(...data.map((d) => d.value), 0);
  if (data.length === 0 || max <= 0) {
    return <p className="py-8 text-center text-sm text-muted">{emptyLabel}</p>;
  }
  return (
    <div>
      <div className="flex items-end gap-[3px]" style={{ height }} role="img" aria-label="Graphique en barres">
        {data.map((d, i) => (
          <div key={i} className="group relative flex h-full min-w-0 flex-1 flex-col justify-end">
            <div
              className={cn("w-full rounded-t-[4px] transition-opacity group-hover:opacity-75", d.value > 0 ? barClass : "bg-surface-3 dark:bg-brand-900/60")}
              style={{ height: d.value > 0 ? `${Math.max(3, (d.value / max) * 100)}%` : "2px" }}
            />
            <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded-lg border border-app bg-card px-2.5 py-1.5 text-[12px] shadow-lg group-hover:block">
              <span className="text-muted">{d.label}</span>{" "}
              <span className="font-semibold tabular-nums text-fg">{formatValue(d.value)}</span>
              {d.hint && <span className="text-muted"> · {d.hint}</span>}
            </div>
          </div>
        ))}
      </div>
      <div className="mt-1.5 flex justify-between text-[11px] text-muted">
        <span>{data[0]?.label}</span>
        <span>{data[data.length - 1]?.label}</span>
      </div>
    </div>
  );
}

// ---------- Barre horizontale (maîtrise, erreurs récurrentes) ----------
export function HBarRow({
  label,
  meta,
  value,
  display,
  barClass = "bg-brand-500",
  muted = false,
}: {
  label: ReactNode;
  meta?: ReactNode;
  value: number; // 0..1
  display: ReactNode;
  barClass?: string;
  muted?: boolean;
}) {
  return (
    <div className="py-1.5">
      <div className="mb-1 flex items-baseline justify-between gap-3 text-[13px]">
        <span className={cn("min-w-0 truncate font-medium", muted ? "text-muted" : "text-fg")}>{label}</span>
        <span className="shrink-0 tabular-nums text-muted">{display}</span>
      </div>
      <div className="flex items-center gap-2">
        <div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-2 dark:bg-brand-900/60">
          <div
            className={cn("h-full rounded-full transition-all duration-500", muted ? "bg-surface-3 dark:bg-brand-900" : barClass)}
            style={{ width: `${Math.min(100, Math.max(0, value * 100))}%` }}
          />
        </div>
        {meta}
      </div>
    </div>
  );
}

// ---------- En-tête de section ----------
export function SectionTitle({ children, sub }: { children: ReactNode; sub?: ReactNode }) {
  return (
    <div className="mb-3">
      <h2 className="text-[15px] font-semibold text-fg">{children}</h2>
      {sub && <p className="mt-0.5 text-[12.5px] text-muted">{sub}</p>}
    </div>
  );
}

// ---------- Squelette de tableau ----------
export function TableSkeleton({ rows = 6 }: { rows?: number }) {
  return (
    <div className="space-y-2.5" aria-hidden>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="skeleton h-9 w-full" />
      ))}
    </div>
  );
}