import { useState, type FormEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAddStockMovement, useCreatePart, usePartners, useParts } from '@/api/gestion';
import { usePermissions } from '@/auth/use-permissions';
import { Button } from '@/components/ui/button';
import { Modale } from '@/components/ui/modale';

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

/** Écran 1 des maquettes R3 : le stock DÉRIVÉ des mouvements — jamais de
 *  quantité saisie. Sous le seuil : strie ambre + « Préparer le BC »,
 *  et les pièces en alerte remontent en tête de liste (maquette). */
export default function PageStock() {
  const navigate = useNavigate();
  const { data: parts } = useParts();
  const { can } = usePermissions();
  const [modale, setModale] = useState<'piece' | 'entree' | null>(null);
  const [alerte, setAlerte] = useState(false);
  const [fournisseur, setFournisseur] = useState('');

  const toutes = parts ?? [];
  const sousSeuil = toutes.filter((p) => p.belowThreshold && p.isActive);
  const fournisseurs = [...new Set(toutes.map((p) => p.supplierName).filter(Boolean))] as string[];
  const visibles = (alerte ? sousSeuil : toutes)
    .filter((p) => !fournisseur || p.supplierName === fournisseur)
    .sort(
      (a, b) =>
        Number(b.belowThreshold && b.isActive) - Number(a.belowThreshold && a.isActive) ||
        a.reference.localeCompare(b.reference),
    );

  return (
    <>
      <div className="entete-page">
        <h1>Stock de pièces</h1>
        <span className="filajout">
          {toutes.length} références
          {sousSeuil.length ? (
            <>
              {' · '}
              <span className="stock-bas">{sousSeuil.length} sous le seuil</span>
            </>
          ) : null}
        </span>
        <div className="actions">
          {can('PURCHASE_ORDERS', 'view') ? (
            <Link to="/achats"><Button>Bons de commande</Button></Link>
          ) : null}
          {can('PARTS', 'edit') ? (
            <Button onClick={() => setModale('entree')}>Entrée de stock</Button>
          ) : null}
          {can('PARTS', 'create') ? (
            <Button variant="prim" onClick={() => setModale('piece')}>
              + Nouvelle pièce
            </Button>
          ) : null}
        </div>
      </div>
      <div className="filtres">
        <select
          aria-label="Filtrer par alerte"
          value={alerte ? 'seuil' : ''}
          onChange={(e) => setAlerte(e.target.value === 'seuil')}
        >
          <option value="">Alerte : toutes</option>
          <option value="seuil">Sous le seuil</option>
        </select>
        <select
          aria-label="Filtrer par fournisseur"
          value={fournisseur}
          onChange={(e) => setFournisseur(e.target.value)}
        >
          <option value="">Fournisseur : tous</option>
          {fournisseurs.map((f) => (
            <option key={f} value={f}>{f}</option>
          ))}
        </select>
      </div>
      <div className="carte" style={{ padding: 0 }}>
        <div className="table">
          <table>
            <thead>
              <tr>
                <th>Réf.</th>
                <th>Désignation</th>
                <th>Stock</th>
                <th>Seuil</th>
                <th>Dernier PU</th>
                <th>Fournisseur</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {visibles.map((p) => (
                <tr
                  key={p.id}
                  className={p.belowThreshold ? 'ligne-seuil' : undefined}
                  onClick={() => navigate(`/stock/${p.id}`)}
                  style={{ cursor: 'pointer', color: !p.isActive ? 'var(--encre-3)' : undefined }}
                >
                  <td className="ref num">{p.reference}</td>
                  <td>{p.designation}{!p.isActive ? ' (désactivée)' : ''}</td>
                  <td className="num">{p.belowThreshold ? <b>{p.stock}</b> : p.stock}</td>
                  <td className="num">{p.threshold}</td>
                  <td className="num">{p.lastUnitPrice != null ? `${fmt.format(p.lastUnitPrice)} MAD` : '—'}</td>
                  <td>{p.supplierName ?? '—'}</td>
                  <td onClick={(e) => e.stopPropagation()}>
                    {p.belowThreshold && can('PURCHASE_ORDERS', 'create') ? (
                      <>
                        <span className="stock-bas">Sous le seuil</span>{' '}
                        <Link
                          to={`/achats/nouveau?part=${p.id}`}
                          style={{ color: 'var(--primaire)', fontWeight: 600 }}
                        >
                          Préparer le BC
                        </Link>
                      </>
                    ) : null}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div className="carte" style={{ borderStyle: 'dashed', color: 'var(--encre-2)', fontSize: 13 }}>
        Le stock affiché = somme des mouvements (réceptions de BC, entrées manuelles,
        consommations d'OT, ajustements motivés). <b>Aucune saisie directe de quantité.</b>
      </div>
      {can('PARTS', 'create') ? (
        <NouvellePiece ouverte={modale === 'piece'} surFermeture={() => setModale(null)} />
      ) : null}
      {can('PARTS', 'edit') && modale === 'entree' ? (
        <EntreeDeStock surFermeture={() => setModale(null)} />
      ) : null}
    </>
  );
}

/** Entrée de stock depuis la liste (maquette) : on choisit la pièce ici —
 *  même mouvement tracé que depuis la fiche. */
function EntreeDeStock({ surFermeture }: { surFermeture: () => void }) {
  const { data: parts } = useParts();
  const [pieceId, setPieceId] = useState('');
  const mouvement = useAddStockMovement(pieceId);
  const actives = (parts ?? []).filter((p) => p.isActive);

  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!pieceId) return;
    const donnees = new FormData(e.currentTarget);
    mouvement.mutate(
      {
        kind: 'ENTRY',
        quantity: Number(donnees.get('quantity')),
        reason: String(donnees.get('reason') ?? '').trim() || undefined,
      },
      { onSuccess: surFermeture },
    );
  };

  return (
    <Modale titre="Entrée de stock" ouverte surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="es-piece">Pièce *</label>
          <select id="es-piece" required value={pieceId} onChange={(e) => setPieceId(e.target.value)}>
            <option value="">Sélectionner…</option>
            {actives.map((p) => (
              <option key={p.id} value={p.id}>
                {p.reference} — {p.designation} (stock : {p.stock})
              </option>
            ))}
          </select>
        </div>
        <div className="champ">
          <label htmlFor="es-qte">Quantité *</label>
          <input id="es-qte" name="quantity" type="number" required min={1} placeholder="5" />
        </div>
        <div className="champ">
          <label htmlFor="es-motif">Motif (optionnel)</label>
          <input id="es-motif" name="reason" placeholder="Ex. : reprise de stock atelier" />
        </div>
        {mouvement.isError ? <p className="erreur-form">{mouvement.error.message}</p> : null}
        <div className="pied">
          <Button onClick={surFermeture}>Annuler</Button>
          <Button type="submit" variant="prim" disabled={!pieceId || mouvement.isPending}>
            Tracer le mouvement
          </Button>
        </div>
      </form>
    </Modale>
  );
}

function NouvellePiece({
  ouverte,
  surFermeture,
}: {
  ouverte: boolean;
  surFermeture: (o: boolean) => void;
}) {
  const navigate = useNavigate();
  const { data: partners } = usePartners();
  const creation = useCreatePart();
  const fournisseurs = (partners ?? []).filter((p) => p.kind === 'SUPPLIER' && p.isActive);

  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const donnees = new FormData(e.currentTarget);
    const champ = (n: string) => String(donnees.get(n) ?? '').trim();
    creation.mutate(
      {
        designation: champ('designation'),
        threshold: champ('threshold') ? Number(champ('threshold')) : undefined,
        supplierId: champ('supplierId') || undefined,
        compatible: champ('compatible') || undefined,
        initialPrice: champ('initialPrice') ? Number(champ('initialPrice')) : undefined,
      },
      { onSuccess: (piece) => navigate(`/stock/${piece.id}`) },
    );
  };

  return (
    <Modale titre="Nouvelle pièce" ouverte={ouverte} surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="np-designation">Désignation *</label>
          <input id="np-designation" name="designation" required placeholder="Ex. : Contact de porte NC-31" />
        </div>
        <div className="form-grille">
          <div className="champ">
            <label htmlFor="np-seuil">Seuil d'alerte</label>
            <input id="np-seuil" name="threshold" type="number" min="0" placeholder="0" />
          </div>
          <div className="champ">
            <label htmlFor="np-prix">Prix initial (MAD)</label>
            <input id="np-prix" name="initialPrice" type="number" min="0" step="0.01" />
          </div>
          <div className="champ">
            <label htmlFor="np-fournisseur">Fournisseur</label>
            <select id="np-fournisseur" name="supplierId" defaultValue="">
              <option value="">—</option>
              {fournisseurs.map((f) => (
                <option key={f.id} value={f.id}>{f.name}</option>
              ))}
            </select>
          </div>
          <div className="champ">
            <label htmlFor="np-compatible">Compatible avec</label>
            <input id="np-compatible" name="compatible" placeholder="Ex. : Otis Gen2" />
          </div>
        </div>
        <p className="note-douce">
          La référence P-#### est générée. Le stock initial s'ajoute ensuite par
          une <b>entrée</b> — jamais par un champ de quantité.
        </p>
        {creation.isError ? <p className="erreur-form">{creation.error.message}</p> : null}
        <div className="pied">
          <Button onClick={() => surFermeture(false)}>Annuler</Button>
          <Button type="submit" variant="prim" disabled={creation.isPending}>Créer la pièce</Button>
        </div>
      </form>
    </Modale>
  );
}
