import { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useCreatePurchaseOrder, usePartners, useParts } from '@/api/gestion';
import { Button } from '@/components/ui/button';

const fmt = new Intl.NumberFormat('fr-FR');

type Ligne = { partId: string; quantity: number; unitPrice: number };

/** Création de BC — préremplie depuis « Préparer le BC » (?part=…) :
 *  fournisseur de la pièce, quantité proposée pour repasser le seuil,
 *  dernier PU connu. Tout reste modifiable avant l'envoi. */
export default function PageNouvelAchat() {
  const navigate = useNavigate();
  const [params] = useSearchParams();
  const partPrerempli = params.get('part');
  const { data: parts, isFetching } = useParts();
  const { data: partners } = usePartners();
  const creation = useCreatePurchaseOrder();

  const [supplierId, setSupplierId] = useState('');
  const [lignes, setLignes] = useState<Ligne[]>([]);
  const [initialise, setInitialise] = useState(false);

  const fournisseurs = (partners ?? []).filter((p) => p.kind === 'SUPPLIER' && p.isActive);
  const pieces = (parts ?? []).filter((p) => p.isActive);

  useEffect(() => {
    // attendre la fin du refetch : le cache peut porter un stock périmé
    if (initialise || !parts || isFetching) return;
    setInitialise(true);
    const piece = parts.find((p) => p.id === partPrerempli);
    if (!piece) return;
    setSupplierId(piece.supplierId ?? '');
    setLignes([
      {
        partId: piece.id,
        // proposition : revenir 5 unités au-dessus du seuil
        quantity: Math.max(piece.threshold - piece.stock + 5, 1),
        unitPrice: piece.lastUnitPrice ?? 0,
      },
    ]);
  }, [initialise, parts, isFetching, partPrerempli]);

  const majLigne = (index: number, patch: Partial<Ligne>) =>
    setLignes((l) => l.map((ligne, i) => (i === index ? { ...ligne, ...patch } : ligne)));

  const total = lignes.reduce((somme, l) => somme + l.quantity * l.unitPrice, 0);
  const valide =
    supplierId && lignes.length > 0 && lignes.every((l) => l.partId && l.quantity > 0 && l.unitPrice > 0);

  return (
    <>
      <div className="filajout">
        <Link to="/achats">Bons de commande</Link> / nouveau
      </div>
      <div className="entete-page">
        <h1>Nouveau bon de commande</h1>
      </div>
      <div className="carte" style={{ maxWidth: 760 }}>
        <div className="champ" style={{ marginBottom: 14 }}>
          <label htmlFor="bc-fournisseur">Fournisseur *</label>
          <select
            id="bc-fournisseur"
            value={supplierId}
            onChange={(e) => setSupplierId(e.target.value)}
          >
            <option value="">Sélectionner…</option>
            {fournisseurs.map((f) => (
              <option key={f.id} value={f.id}>{f.name}</option>
            ))}
          </select>
        </div>
        <div className="table">
          <table>
            <thead>
              <tr><th>Pièce</th><th style={{ width: 90 }}>Qté</th><th style={{ width: 120 }}>PU (MAD)</th><th style={{ width: 100 }}>Total</th><th></th></tr>
            </thead>
            <tbody>
              {lignes.map((ligne, i) => (
                <tr key={i}>
                  <td>
                    <select
                      aria-label={`Pièce de la ligne ${i + 1}`}
                      value={ligne.partId}
                      onChange={(e) => {
                        const piece = pieces.find((p) => p.id === e.target.value);
                        majLigne(i, {
                          partId: e.target.value,
                          unitPrice: piece?.lastUnitPrice ?? ligne.unitPrice,
                        });
                      }}
                    >
                      <option value="">Sélectionner…</option>
                      {pieces.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.reference} — {p.designation} (stock : {p.stock})
                        </option>
                      ))}
                    </select>
                  </td>
                  <td>
                    <input
                      aria-label={`Quantité de la ligne ${i + 1}`}
                      type="number"
                      min={1}
                      className="num"
                      value={ligne.quantity || ''}
                      onChange={(e) => majLigne(i, { quantity: Number(e.target.value) })}
                    />
                  </td>
                  <td>
                    <input
                      aria-label={`Prix unitaire de la ligne ${i + 1}`}
                      type="number"
                      min={0.01}
                      step="0.01"
                      className="num"
                      value={ligne.unitPrice || ''}
                      onChange={(e) => majLigne(i, { unitPrice: Number(e.target.value) })}
                    />
                  </td>
                  <td className="num">{fmt.format(ligne.quantity * ligne.unitPrice)}</td>
                  <td>
                    <Button
                      variant="ghost"
                      className="px-2 py-1 text-[12px]"
                      onClick={() => setLignes((l) => l.filter((_, j) => j !== i))}
                    >
                      Retirer
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ marginTop: 10 }}>
          <Button onClick={() => setLignes((l) => [...l, { partId: '', quantity: 1, unitPrice: 0 }])}>
            + Ajouter une ligne
          </Button>
        </div>
        <div className="total">
          <span>Total</span>
          <span className="num">{fmt.format(total)} MAD</span>
        </div>
        {creation.isError ? <p className="erreur-form">{creation.error.message}</p> : null}
        <div className="pied">
          <Link to="/achats"><Button>Annuler</Button></Link>
          <Button
            variant="prim"
            disabled={!valide || creation.isPending}
            onClick={() =>
              creation.mutate(
                { supplierId, lines: lignes },
                { onSuccess: () => navigate('/achats') },
              )
            }
          >
            Créer le BC (brouillon)
          </Button>
        </div>
      </div>
    </>
  );
}
