"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Button from "@/components/Button";
import { IconSac } from "@/components/icons";
import { useAuthHydrated } from "@/store/useAuthHydrated";
import { useAuthStore } from "@/store/auth";
import { getCommandes } from "@/lib/api/commandes";
import type { Commande } from "@/types/commande";
import styles from "./page.module.css";

const STATUT_LABELS: Record<string, string> = {
  EN_ATTENTE: "En attente",
  VALIDEE: "Validée",
  EN_PRODUCTION: "En production",
  LIVREE: "Livrée",
  ANNULEE: "Annulée",
};

export default function MesCommandesPage() {
  const hydrate = useAuthHydrated();
  const user = useAuthStore((state) => state.user);
  const [commandes, setCommandes] = useState<Commande[]>([]);
  const [chargement, setChargement] = useState(true);

  useEffect(() => {
    if (!hydrate || !user) return;
    getCommandes()
      .then(setCommandes)
      .finally(() => setChargement(false));
  }, [hydrate, user]);

  if (!hydrate || (user && chargement)) {
    return (
      <main className={styles.page}>
        <p className={styles.chargement}>Chargement...</p>
      </main>
    );
  }

  if (!user) {
    return (
      <main className={styles.page}>
        <div className={styles.centre}>
          <h1>Connectez-vous pour voir vos commandes</h1>
          <Button href="/auth/connexion" size="lg">
            Se connecter
          </Button>
        </div>
      </main>
    );
  }

  return (
    <main className={styles.page}>
      <div className={styles.inner}>
        <div className={styles.enTete}>
          <h1 className={styles.titre}>Mes commandes</h1>
          <Button href="/commandes/nouvelle" icone={<IconSac />}>
            Nouvelle commande
          </Button>
        </div>

        {commandes.length === 0 ? (
          <div className={styles.vide}>
            <p>Vous n&apos;avez pas encore passé de commande.</p>
            <Button href="/commandes/nouvelle" size="lg" icone={<IconSac />}>
              Passer ma première commande
            </Button>
          </div>
        ) : (
          <div className={styles.liste}>
            {commandes.map((commande) => (
              <Link key={commande.uid} href={`/commandes/${commande.uid}`} className={styles.ligne}>
                <div>
                  <span className={styles.reference}>{commande.reference}</span>
                  <span className={styles.produit}>{commande.produit.nom}</span>
                </div>
                <span className={styles.quantite}>{commande.quantite.toLocaleString("fr-FR")} unités</span>
                <span className={styles.montant}>{commande.montantTotal.toLocaleString("fr-FR")} FCFA</span>
                <span className={styles.statut} data-statut={commande.statut}>
                  {STATUT_LABELS[commande.statut] ?? commande.statut}
                </span>
                <span className={styles.date}>{new Date(commande.createdAt).toLocaleDateString("fr-FR")}</span>
              </Link>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}