magricambi/src/components/ArticoliMacchinaModal.tsx

"use client";

import { useState, useEffect } from "react";
import type { ArticoloAssegnatoMacchina } from "@/src/types/artMacchineParti";
import type { Magazzino } from "@/src/types/stabilimento";

interface ArticoliMacchinaModalProps {
  macchinaId: number;
  macchinaNome: string;
  macchinaStabilimentoId: number | null;
  articoli: ArticoloAssegnatoMacchina[];
  onClose: () => void;
  onArticoloRimosso: () => void;
}

interface RimuoviModalState {
  articolo: ArticoloAssegnatoMacchina;
  quantita: number;
  opzione: "carico" | "elimina";
  idMagazzino: number | null;
  articoloEsiste: boolean;
}

export default function ArticoliMacchinaModal({
  macchinaId,
  macchinaNome,
  macchinaStabilimentoId,
  articoli,
  onClose,
  onArticoloRimosso,
}: ArticoliMacchinaModalProps) {
  const [rimuoviModal, setRimuoviModal] = useState<RimuoviModalState | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [magazzini, setMagazzini] = useState<Magazzino[]>([]);

  useEffect(() => {
    async function fetchMagazzini() {
      if (!macchinaStabilimentoId) return;
      
      try {
        const res = await fetch("/api/magazzini");
        if (res.ok) {
          const data = await res.json();
          // Filtra solo i magazzini dello stabilimento della macchina
          const filtered = data.magazzini.filter(
            (m: Magazzino) => m.id_stabilimento === macchinaStabilimentoId
          );
          setMagazzini(filtered);
        }
      } catch (err) {
        console.error("Errore caricamento magazzini:", err);
      }
    }
    fetchMagazzini();
  }, [macchinaStabilimentoId]);

  const handleRimuoviClick = async (articolo: ArticoloAssegnatoMacchina) => {
    setError(null);
    
    // Verifica se l'articolo esiste ancora nel catalogo
    let articoloEsiste = true;
    try {
      const res = await fetch(`/api/articoli/${articolo.id_articolo}`);
      // Solo 404 indica che l'articolo non esiste
      // Altri errori (401, 500, etc.) non significano che l'articolo non esiste
      articoloEsiste = res.status !== 404;
    } catch {
      // In caso di errore di rete, assumiamo che l'articolo esista
      articoloEsiste = true;
    }

    // Ricarica i dati freschi per questo articolo dalla macchina
    let quantitaReale = articolo.quantita;
    try {
      const res = await fetch("/api/art-macchine-parti");
      if (res.ok) {
        const data = await res.json();
        const articoliMacchina = data.articoliPerMacchina?.[macchinaId] || [];
        const articoloFresco = articoliMacchina.find(
          (a: ArticoloAssegnatoMacchina) => a.id_articolo === articolo.id_articolo
        );
        if (articoloFresco) {
          quantitaReale = articoloFresco.quantita;
        } else {
          // L'articolo non è più assegnato a questa macchina
          quantitaReale = 0;
        }
      }
    } catch {
      // In caso di errore, usa la quantità originale
    }

    if (quantitaReale <= 0) {
      setError("Questo articolo non ha più quantità disponibile su questa macchina");
      return;
    }

    setRimuoviModal({
      articolo: { ...articolo, quantita: quantitaReale },
      quantita: 1,
      opzione: articoloEsiste ? "carico" : "elimina",
      idMagazzino: null,
      articoloEsiste,
    });
  };

  const handleConfermaRimozione = async () => {
    if (!rimuoviModal) return;

    if (rimuoviModal.opzione === "carico" && !rimuoviModal.idMagazzino) {
      setError("Seleziona un magazzino per il rientro");
      return;
    }

    setSaving(true);
    setError(null);

    try {
      const res = await fetch(
        `/api/art-macchine-parti/${macchinaId}/${rimuoviModal.articolo.id_articolo}`,
        {
          method: "DELETE",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            quantita: rimuoviModal.quantita,
            opzione: rimuoviModal.opzione,
            idMagazzino: rimuoviModal.idMagazzino,
          }),
        }
      );

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Errore nella rimozione");
      }

      setRimuoviModal(null);
      onArticoloRimosso();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Errore sconosciuto");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-lg max-h-[80vh] bg-zinc-900 rounded-xl border border-zinc-800 shadow-2xl flex flex-col">
        <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-800 bg-teal-900/20">
          <div>
            <h3 className="text-lg font-semibold text-white">Articoli Assegnati</h3>
            <p className="text-xs text-zinc-500">{macchinaNome}</p>
          </div>
          <button
            onClick={onClose}
            className="p-1 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-4">
          {articoli.length === 0 ? (
            <div className="text-center py-8 text-zinc-500">
              Nessun articolo assegnato
            </div>
          ) : (
            <div className="space-y-2">
              {articoli.map((art) => (
                <div
                  key={`${art.id_articolo}-${art.id}`}
                  className="flex items-center justify-between p-3 rounded-lg bg-zinc-800/50 border border-zinc-700 group"
                >
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-white truncate">{art.descrizione}</p>
                    <p className="text-xs text-zinc-500 font-mono">{art.codice}</p>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="text-right">
                      <div className="text-lg font-bold text-teal-400">{art.quantita}</div>
                      <div className="text-[10px] text-zinc-600">assegnati</div>
                    </div>
                    <button
                      onClick={() => handleRimuoviClick(art)}
                      className="p-2 rounded-lg text-zinc-500 hover:text-red-400 hover:bg-red-900/20 opacity-0 group-hover:opacity-100 transition-opacity"
                      title="Rimuovi articolo"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="px-5 py-3 border-t border-zinc-800 bg-zinc-900/50 flex justify-between items-center">
          <span className="text-xs text-zinc-500">
            Totale: {articoli.reduce((sum, a) => sum + a.quantita, 0)} pezzi in {articoli.length} articoli
          </span>
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white rounded-lg hover:bg-zinc-800"
          >
            Chiudi
          </button>
        </div>
      </div>

      {/* Modal conferma rimozione */}
      {rimuoviModal && (
        <div className="fixed inset-0 z-60 flex items-center justify-center">
          <div className="absolute inset-0 bg-black/60" onClick={() => !saving && setRimuoviModal(null)} />
          <div className="relative w-full max-w-md bg-zinc-900 rounded-xl border border-zinc-800 shadow-2xl">
            <div className="px-5 py-4 border-b border-zinc-800 bg-red-900/20">
              <h3 className="text-lg font-semibold text-white">Rimuovi Articolo</h3>
              <p className="text-xs text-zinc-500">{rimuoviModal.articolo.descrizione}</p>
            </div>

            <div className="p-5 space-y-4">
              {error && (
                <div className="p-3 rounded-lg bg-red-900/30 border border-red-800 text-red-400 text-sm">
                  {error}
                </div>
              )}

              <div>
                <label className="block text-sm font-medium text-zinc-300 mb-2">
                  Quantità da rimuovere (max: {rimuoviModal.articolo.quantita})
                </label>
                <input
                  type="number"
                  min={1}
                  max={rimuoviModal.articolo.quantita}
                  value={rimuoviModal.quantita}
                  onChange={(e) =>
                    setRimuoviModal({
                      ...rimuoviModal,
                      quantita: Math.min(
                        Math.max(1, parseInt(e.target.value) || 1),
                        rimuoviModal.articolo.quantita
                      ),
                    })
                  }
                  className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-teal-500"
                />
              </div>

              {!rimuoviModal.articoloEsiste && (
                <div className="p-3 rounded-lg bg-yellow-900/30 border border-yellow-700 text-yellow-400 text-sm">
                  Questo articolo non esiste più nel catalogo. Verrà eliminato senza possibilità di rientro in magazzino.
                </div>
              )}

              <div>
                <label className="block text-sm font-medium text-zinc-300 mb-2">
                  Cosa fare con gli articoli rimossi?
                </label>
                <div className="space-y-2">
                  {rimuoviModal.articoloEsiste && (
                    <label className="flex items-center gap-3 p-3 rounded-lg bg-zinc-800 border border-zinc-700 cursor-pointer hover:border-teal-600">
                      <input
                        type="radio"
                        name="opzione"
                        value="carico"
                        checked={rimuoviModal.opzione === "carico"}
                        onChange={() => setRimuoviModal({ ...rimuoviModal, opzione: "carico" })}
                        className="w-4 h-4 text-teal-500"
                      />
                      <div>
                        <p className="text-sm font-medium text-white">Rientra in magazzino</p>
                        <p className="text-xs text-zinc-500">Gli articoli torneranno disponibili nel magazzino</p>
                      </div>
                    </label>
                  )}
                  <label className={`flex items-center gap-3 p-3 rounded-lg bg-zinc-800 border cursor-pointer hover:border-red-600 ${!rimuoviModal.articoloEsiste ? 'border-red-600' : 'border-zinc-700'}`}>
                    <input
                      type="radio"
                      name="opzione"
                      value="elimina"
                      checked={rimuoviModal.opzione === "elimina"}
                      onChange={() => setRimuoviModal({ ...rimuoviModal, opzione: "elimina", idMagazzino: null })}
                      className="w-4 h-4 text-red-500"
                    />
                    <div>
                      <p className="text-sm font-medium text-white">Elimina definitivamente</p>
                      <p className="text-xs text-zinc-500">Gli articoli saranno rimossi senza rientro</p>
                    </div>
                  </label>
                </div>
              </div>

              {rimuoviModal.opzione === "carico" && (
                <div className="space-y-3 p-4 rounded-lg bg-teal-900/20 border border-teal-700/30">
                  <p className="text-sm font-medium text-teal-300">Seleziona il magazzino di destinazione</p>
                  
                  {magazzini.length === 0 ? (
                    <p className="text-xs text-yellow-400">
                      Nessun magazzino disponibile per lo stabilimento di questa macchina
                    </p>
                  ) : (
                    <>
                      <div>
                        <label className="block text-xs text-zinc-400 mb-1">Magazzino</label>
                        <select
                          value={rimuoviModal.idMagazzino || ""}
                          onChange={(e) =>
                            setRimuoviModal({
                              ...rimuoviModal,
                              idMagazzino: e.target.value ? parseInt(e.target.value) : null,
                            })
                          }
                          className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                        >
                          <option value="">Seleziona magazzino...</option>
                          {magazzini.map((mag) => (
                            <option key={mag.id} value={mag.id}>
                              {mag.descrizione}
                            </option>
                          ))}
                        </select>
                      </div>

                      {!rimuoviModal.idMagazzino && (
                        <p className="text-xs text-yellow-400">
                          Devi selezionare un magazzino per confermare il rientro
                        </p>
                      )}
                    </>
                  )}
                </div>
              )}
            </div>

            <div className="px-5 py-4 border-t border-zinc-800 flex justify-end gap-3">
              <button
                onClick={() => setRimuoviModal(null)}
                disabled={saving}
                className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white rounded-lg hover:bg-zinc-800 disabled:opacity-50"
              >
                Annulla
              </button>
              <button
                onClick={handleConfermaRimozione}
                disabled={saving || (rimuoviModal.opzione === "carico" && !rimuoviModal.idMagazzino)}
                className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg disabled:opacity-50 flex items-center gap-2"
              >
                {saving ? (
                  <>
                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                    Rimozione...
                  </>
                ) : (
                  "Conferma rimozione"
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}