"use client";

import { useEffect, useMemo, useState } from "react";
import PageHeader from "@/components/admin/ui/PageHeader";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import Button from "@/components/admin/ui/Button";
import Drawer from "@/components/admin/ui/Drawer";
import Input from "@/components/admin/ui/Input";
import { toast } from "sonner";
import { getStock, updateStock } from "@/lib/api/admin/stock";
import type { AdminStock } from "@/types/admin";
import { Boxes, AlertTriangle, Pencil } from "lucide-react";

export default function AdminStockPage() {
  const [stocks, setStocks] = useState<AdminStock[]>([]);
  const [chargement, setChargement] = useState(true);
  const [stockSelectionne, setStockSelectionne] = useState<AdminStock | null>(null);
  const [quantite, setQuantite] = useState(0);
  const [seuilAlerte, setSeuilAlerte] = useState(0);
  const [sauvegardeEnCours, setSauvegardeEnCours] = useState(false);

  const chargerStock = () => {
    setChargement(true);
    getStock()
      .then((res) => setStocks(Array.isArray(res) ? res : []))
      .catch(() => toast.error("Impossible de charger les données de stock."))
      .finally(() => setChargement(false));
  };

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

  const ouvrirDrawer = (s: AdminStock) => {
    setStockSelectionne(s);
    setQuantite(s.quantite ?? 0);
    setSeuilAlerte(s.seuilAlerte ?? 0);
  };

  const sauvegarder = async () => {
    if (!stockSelectionne) return;
    setSauvegardeEnCours(true);
    try {
      await updateStock(stockSelectionne.id, {
        quantite: Number(quantite),
        seuil_alerte: Number(seuilAlerte),
      });
      setStockSelectionne(null);
      toast.success(`Niveaux de stock pour "${stockSelectionne.matiere}" mis à jour !`);
      chargerStock();
    } catch {
      toast.error("Erreur lors de la mise à jour du stock.");
    } finally {
      setSauvegardeEnCours(false);
    }
  };

  const colonnes: Column<AdminStock>[] = useMemo(
    () => [
      {
        key: "matiere",
        label: "Matière première",
        sortable: true,
        render: (s) => (
          <div style={{ display: "flex", alignItems: "center", gap: "8px", fontWeight: 600 }}>
            <Boxes size={16} color="var(--vert-fonce)" />
            <span>{s.matiere}</span>
          </div>
        ),
      },
      {
        key: "quantite",
        label: "Quantité en stock",
        sortable: true,
        render: (s) => {
          const qte = s.quantite ?? 0;
          const seuil = s.seuilAlerte ?? 0;
          return (
            <span style={{ fontWeight: 700, color: qte <= seuil ? "var(--rouge)" : "inherit" }}>
              {qte.toLocaleString("fr-FR")} {s.unite || "unités"}
            </span>
          );
        },
      },
      {
        key: "seuilAlerte",
        label: "Seuil d'alerte",
        render: (s) => `${(s.seuilAlerte ?? 0).toLocaleString("fr-FR")} ${s.unite || "unités"}`,
      },
      {
        key: "etat" as any,
        label: "État du stock",
        render: (s) => {
          const qte = s.quantite ?? 0;
          const seuil = s.seuilAlerte ?? 0;
          const sousSeuil = qte <= seuil;
          return (
            <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
              <StatusBadge status={sousSeuil ? "ALERTE" : "OK"} />
              {sousSeuil && <AlertTriangle size={14} color="var(--rouge)" />}
            </div>
          );
        },
      },
      {
        key: "updatedAt",
        label: "Dernière mise à jour",
        render: (s) => s.updatedAt ? new Date(s.updatedAt).toLocaleDateString("fr-FR") : "—",
      },
      {
        key: "actions" as any,
        label: "Action",
        align: "right",
        render: (s) => (
          <Button size="sm" variant="secondaire" onClick={() => ouvrirDrawer(s)} title="Modifier la quantité">
            <Pencil size={14} />
          </Button>
        ),
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader
        title="Gestion du Stock"
        subtitle="Suivi des matières premières kraft, poignées et niveaux d'alerte de réapprovisionnement."
      />

      <DataTable<AdminStock>
        columns={colonnes}
        data={stocks}
        isLoading={chargement}
        keyExtractor={(s) => s.id}
        emptyTitle="Aucune matière enregistrée en stock"
      />

      <Drawer
        open={stockSelectionne !== null}
        onClose={() => setStockSelectionne(null)}
        title="Mettre à jour le stock"
        subtitle={`Matière : ${stockSelectionne?.matiere}`}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: "20px", marginTop: "16px" }}>
          <div>
            <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "8px" }}>
              Quantité disponible ({stockSelectionne?.unite || "unités"})
            </label>
            <Input
              type="number"
              value={quantite}
              onChange={(e) => setQuantite(Number(e.target.value))}
            />
          </div>

          <div>
            <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "8px" }}>
              Seuil d'alerte minimum
            </label>
            <Input
              type="number"
              value={seuilAlerte}
              onChange={(e) => setSeuilAlerte(Number(e.target.value))}
            />
          </div>

          <Button onClick={sauvegarder} loading={sauvegardeEnCours}>
            Enregistrer les niveaux de stock
          </Button>
        </div>
      </Drawer>
    </div>
  );
}