"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { ShoppingBag, FileCheck2, Truck, AlertTriangle } from "lucide-react";
import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
} from "recharts";
import PageHeader from "@/components/admin/ui/PageHeader";
import KpiCard from "@/components/admin/ui/KpiCard";
import Card from "@/components/admin/ui/Card";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import { PageLoader } from "@/components/admin/ui/Loader";
import {
  getCommandesRecentes,
  getDesignsAValider,
  getLivraisons,
  getAlertesStock,
} from "@/lib/api/admin/dashboard";
import type { AdminCommande, AdminDesign, AdminStock } from "@/types/admin";
import styles from "./page.module.css";

const MOIS_FR = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sep", "Oct", "Nov", "Déc"];

function estAujourdhui(dateIso: string): boolean {
  const d = new Date(dateIso);
  const now = new Date();
  return d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();
}

function evolutionParMois(commandes: AdminCommande[]) {
  const aujourdhui = new Date();
  const points: { mois: string; commandes: number; montant: number }[] = [];

  for (let i = 5; i >= 0; i--) {
    const d = new Date(aujourdhui.getFullYear(), aujourdhui.getMonth() - i, 1);
    const commandesDuMois = commandes.filter((c) => {
      const cd = new Date(c.createdAt);
      return cd.getMonth() === d.getMonth() && cd.getFullYear() === d.getFullYear();
    });

    points.push({
      mois: MOIS_FR[d.getMonth()],
      commandes: commandesDuMois.length,
      montant: commandesDuMois.reduce((sum, c) => sum + c.prixTotal, 0),
    });
  }

  return points;
}

export default function AdminDashboardPage() {
  const [commandes, setCommandes] = useState<AdminCommande[]>([]);
  const [designs, setDesigns] = useState<AdminDesign[]>([]);
  const [livraisonsPlanifiees, setLivraisonsPlanifiees] = useState(0);
  const [alertesStock, setAlertesStock] = useState<AdminStock[]>([]);
  const [chargement, setChargement] = useState(true);
  const [erreur, setErreur] = useState<string | null>(null);

  useEffect(() => {
    Promise.all([getCommandesRecentes(100), getDesignsAValider(), getLivraisons(100), getAlertesStock()])
      .then(([commandesRes, designsRes, livraisonsRes, alertesRes]) => {
        setCommandes(commandesRes.items);
        setDesigns(designsRes);
        setLivraisonsPlanifiees(livraisonsRes.items.filter((l) => l.statut === "PLANIFIEE").length);
        setAlertesStock(alertesRes);
      })
      .catch(() => setErreur("Impossible de charger le dashboard."))
      .finally(() => setChargement(false));
  }, []);

  const commandesAujourdhui = useMemo(() => commandes.filter((c) => estAujourdhui(c.createdAt)), [commandes]);
  const evolution = useMemo(() => evolutionParMois(commandes), [commandes]);

  const colonnesCommandes: Column<AdminCommande>[] = [
    { key: "reference", label: "Référence" },
    { key: "userNom", label: "Client", render: (c) => c.userNom ?? "—" },
    { key: "quantite", label: "Quantité", align: "right" },
    { key: "prixTotal", label: "Montant", align: "right", render: (c) => `${c.prixTotal.toLocaleString("fr-FR")} FCFA` },
    { key: "statut", label: "Statut", render: (c) => <StatusBadge status={c.statut} /> },
  ];

  const colonnesDesigns: Column<AdminDesign>[] = [
    { key: "commandeUid", label: "Commande", render: (d) => d.commandeUid ?? "—" },
    {
      key: "createdAt",
      label: "Soumis le",
      render: (d) => new Date(d.createdAt).toLocaleDateString("fr-FR"),
    },
    { key: "statut", label: "Statut", render: (d) => <StatusBadge status={d.statut} /> },
  ];

  if (chargement) return <PageLoader label="Chargement du dashboard..." />;

  return (
    <div>
      <PageHeader title="Dashboard" subtitle="Vue d'ensemble de la production, des livraisons et du stock." />

      {erreur && <p style={{ color: "var(--erreur)", marginBottom: 16 }}>{erreur}</p>}

      <div className={styles.kpis}>
        <KpiCard label="Commandes du jour" value={commandesAujourdhui.length} icon={ShoppingBag} color="var(--vert-fonce)" />
        <KpiCard label="Designs à valider" value={designs.length} icon={FileCheck2} color="var(--info)" />
        <KpiCard label="Livraisons planifiées" value={livraisonsPlanifiees} icon={Truck} color="var(--avertissement)" />
        <KpiCard label="Alertes stock" value={alertesStock.length} icon={AlertTriangle} color="var(--erreur)" />
      </div>

      <div className={styles.chartCard}>
        <Card title="Évolution des commandes (6 derniers mois)">
          <ResponsiveContainer width="100%" height={280}>
            <AreaChart data={evolution}>
              <defs>
                <linearGradient id="couleurCommandes" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#1A6B2A" stopOpacity={0.35} />
                  <stop offset="95%" stopColor="#1A6B2A" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#eeeeee" />
              <XAxis dataKey="mois" tick={{ fontSize: 12, fill: "#555555" }} axisLine={false} tickLine={false} />
              <YAxis allowDecimals={false} tick={{ fontSize: 12, fill: "#555555" }} axisLine={false} tickLine={false} />
              <Tooltip
                formatter={(value) => [value, "Commandes"]}
                contentStyle={{ borderRadius: 8, border: "1px solid #eeeeee", fontSize: 13 }}
              />
              <Area type="monotone" dataKey="commandes" stroke="#1A6B2A" strokeWidth={2} fill="url(#couleurCommandes)" />
            </AreaChart>
          </ResponsiveContainer>
        </Card>
      </div>

      {alertesStock.length > 0 && (
        <div className={styles.section}>
          <Card title="Alertes stock" className={styles.alerteCard}>
            <ul className={styles.alerteListe}>
              {alertesStock.map((s) => (
                <li key={s.id} className={styles.alerteItem}>
                  <span>{s.matiere}</span>
                  <span className={styles.alerteValeur}>
                    {s.quantite} {s.unite || ""} / seuil {s.seuilAlerte}
                  </span>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      )}

      <div className={styles.tables}>
        <Card
          title="Dernières commandes"
          noPad
          actions={
            <Link href="/admin/commandes" className={styles.voirTout}>
              Voir tout
            </Link>
          }
        >
          <DataTable
            columns={colonnesCommandes}
            data={commandes.slice(0, 8)}
            keyExtractor={(c) => c.id}
            emptyTitle="Aucune commande"
            emptyDescription="Les nouvelles commandes apparaîtront ici."
          />
        </Card>

        <Card title="Designs en attente" noPad>
          <DataTable
            columns={colonnesDesigns}
            data={designs.slice(0, 8)}
            keyExtractor={(d) => d.uid}
            emptyTitle="Aucun design en attente"
            emptyDescription="Tous les designs ont été traités."
          />
        </Card>
      </div>
    </div>
  );
}