"use client";

import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Image from "next/image";
import { isAxiosError } from "axios";
import PageHeader from "@/components/PageHeader";
import Button from "@/components/Button";
import Input from "@/components/Input";
import Textarea from "@/components/Textarea";
import { IconSac, IconFleche } from "@/components/icons";
import { useAuthStore } from "@/store/auth";
import { useAuthHydrated } from "@/store/useAuthHydrated";
import { getProduits } from "@/lib/api/produits";
import { creerCommande } from "@/lib/api/commandes";
import { urlAsset } from "@/lib/utils/assets";
import type { Produit } from "@/types/produit";
import styles from "./page.module.css";

const CLE_BROUILLON = "pubago_commande_brouillon";

interface Brouillon {
  produitId: number;
  quantite: number;
  noteClient: string;
}

export default function NouvelleCommandePage() {
  return (
    <main className={styles.page}>
      <PageHeader
        titre="Nouvelle commande"
        sousTitre="Choisissez votre format, votre quantité, et finalisez votre commande."
        fil={[{ label: "Commandes", href: "/commandes" }, { label: "Nouvelle commande" }]}
      />
      <div className={styles.inner}>
        <Suspense fallback={<p className={styles.chargement}>Chargement...</p>}>
          <FormulaireCommande />
        </Suspense>
      </div>
    </main>
  );
}

function FormulaireCommande() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const hydrate = useAuthHydrated();
  const user = useAuthStore((state) => state.user);

  const [etape, setEtape] = useState<1 | 2>(1);
  const [produits, setProduits] = useState<Produit[]>([]);
  const [chargement, setChargement] = useState(true);
  const [produitId, setProduitId] = useState<number | null>(null);
  const [quantite, setQuantite] = useState(50);
  const [noteClient, setNoteClient] = useState("");
  const [envoiEnCours, setEnvoiEnCours] = useState(false);
  const [erreur, setErreur] = useState<string | null>(null);
  const [reprisePossible, setReprisePossible] = useState(false);

  useEffect(() => {
    getProduits()
      .then((liste) => {
        setProduits(liste);

        // Si un brouillon existe (retour après connexion), on le restaure
        // et on saute directement au récapitulatif.
        const brut = localStorage.getItem(CLE_BROUILLON);
        if (brut) {
          try {
            const brouillon: Brouillon = JSON.parse(brut);
            setProduitId(brouillon.produitId);
            setQuantite(brouillon.quantite);
            setNoteClient(brouillon.noteClient);
            setEtape(2);
            setReprisePossible(true);
            return;
          } catch {
            localStorage.removeItem(CLE_BROUILLON);
          }
        }

        const preselection = searchParams.get("produit");
        if (preselection) {
          setProduitId(Number(preselection));
        } else if (liste.length > 0) {
          setProduitId(liste[0].id);
        }
      })
      .finally(() => setChargement(false));
  }, [searchParams]);

  // Dès que l'utilisateur est connecté et qu'un brouillon vient d'être
  // restauré, on finalise automatiquement la commande.
  useEffect(() => {
    if (reprisePossible && hydrate && user && produitId) {
      localStorage.removeItem(CLE_BROUILLON);
      setReprisePossible(false);
      confirmerCommande();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [reprisePossible, hydrate, user, produitId]);

  const produit = produits.find((p) => p.id === produitId) ?? null;
  const montantTotal = produit ? produit.prixUnitaire * quantite : 0;

  const validerEtape1 = () => {
    if (!produit || quantite < 1) return;
    setEtape(2);
  };

  const allerConnexion = (destination: "/auth/connexion" | "/auth/inscription") => {
    if (!produitId) return;
    const brouillon: Brouillon = { produitId, quantite, noteClient };
    localStorage.setItem(CLE_BROUILLON, JSON.stringify(brouillon));
    router.push(destination);
  };

  const confirmerCommande = async () => {
    if (!produit) return;
    setEnvoiEnCours(true);
    setErreur(null);
    try {
      const commande = await creerCommande({
        produit_id: produit.id,
        quantite,
        note_client: noteClient || undefined,
      });
      router.push(`/commandes/${commande.uid}`);
    } catch (err) {
      const message = isAxiosError(err) ? err.response?.data?.message : null;
      setErreur(message || "Impossible de créer la commande. Réessayez.");
    } finally {
      setEnvoiEnCours(false);
    }
  };

  if (chargement) {
    return <p className={styles.chargement}>Chargement...</p>;
  }

  return (
    <>
      <div className={styles.etapes}>
        <span className={etape === 1 ? styles.etapeActive : styles.etapeFaite}>1. Produit</span>
        <span className={etape === 2 ? styles.etapeActive : ""}>2. Récapitulatif</span>
      </div>

      {etape === 1 && (
        <section>
          <div className={styles.grilleProduits}>
            {produits.map((p) => (
              <button
                key={p.id}
                type="button"
                className={`${styles.carteProduit} ${produitId === p.id ? styles.carteProduitActive : ""}`}
                onClick={() => setProduitId(p.id)}
              >
                <div className={styles.imageProduit}>
                  {p.imageUrl ? (
                    <Image src={urlAsset(p.imageUrl)} alt={p.nom} fill sizes="200px" className={styles.image} />
                  ) : (
                    <div className={styles.imagePlaceholder} />
                  )}
                </div>
                <span className={styles.nomProduit}>{p.nom}</span>
                <span className={styles.dimensionsProduit}>{p.dimensions}</span>
                <span className={styles.prixProduit}>{p.prixUnitaire.toLocaleString("fr-FR")} FCFA / unité</span>
              </button>
            ))}
          </div>

          <div className={styles.champQuantite}>
            <Input
              type="number"
              label="Quantité"
              min={1}
              value={quantite}
              onChange={(e) => setQuantite(Math.max(1, Number(e.target.value)))}
            />
          </div>

          <Button size="lg" icone={<IconSac />} onClick={validerEtape1} disabled={!produit}>
            Continuer
          </Button>
        </section>
      )}

      {etape === 2 && produit && (
        <section>
          <div className={styles.recap}>
            <div className={styles.recapLigne}>
              <span>Produit</span>
              <strong>{produit.nom}</strong>
            </div>
            <div className={styles.recapLigne}>
              <span>Quantité</span>
              <strong>{quantite.toLocaleString("fr-FR")}</strong>
            </div>
            <div className={styles.recapLigne}>
              <span>Prix unitaire</span>
              <strong>{produit.prixUnitaire.toLocaleString("fr-FR")} FCFA</strong>
            </div>
            <div className={`${styles.recapLigne} ${styles.recapTotal}`}>
              <span>Montant total</span>
              <strong>{montantTotal.toLocaleString("fr-FR")} FCFA</strong>
            </div>
          </div>

          <div className={styles.champNote}>
            <Textarea
              label="Note ou précisions (optionnel)"
              rows={4}
              value={noteClient}
              onChange={(e) => setNoteClient(e.target.value)}
              placeholder="Précisions sur votre commande, délai souhaité..."
            />
          </div>

          {erreur && <p className={styles.erreur}>{erreur}</p>}

          {hydrate && !user ? (
            <div className={styles.connexionRequise}>
              <p>Connectez-vous ou créez un compte pour finaliser votre commande.</p>
              <div className={styles.actionsRecap}>
                <Button variant="secondaire" onClick={() => allerConnexion("/auth/inscription")}>
                  Créer un compte
                </Button>
                <Button size="lg" onClick={() => allerConnexion("/auth/connexion")}>
                  Se connecter
                </Button>
              </div>
            </div>
          ) : (
            <div className={styles.actionsRecap}>
              <Button variant="secondaire" onClick={() => setEtape(1)} disabled={envoiEnCours}>
                Retour
              </Button>
              <Button size="lg" iconeDroite={<IconFleche />} onClick={confirmerCommande} disabled={envoiEnCours || !hydrate}>
                {envoiEnCours ? "Envoi..." : "Valider la commande"}
              </Button>
            </div>
          )}
        </section>
      )}
    </>
  );
}