"use client";

import { useCallback, useEffect, useState } from "react";
import { Check, Loader2, Layers } from "lucide-react";

/**
 * Rendimento por folha a confirmar: a migração assistida dos cadastros
 * antigos (decisão do Natan, 02/09/2026).
 *
 * Quem gravou "0,17 por peça" quis dizer "6 por folha". O sistema deduz o N
 * e mostra aqui; a pessoa confirma com um clique, ou corrige o número antes.
 * Cada confirmação grava "peças por folha" na ficha do produto, e a ordem de
 * produção para de avisar "rendimento estimado".
 */

type Linha = {
  id: string;
  product_id: string;
  produto: string;
  insumo: string;
  unidade: string;
  consumo: number;
  sugerido: number | null;
};

const formatar = (n: number) =>
  new Intl.NumberFormat("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 4 }).format(n);

export function RendimentosAConfirmar({ podeConfirmar }: { podeConfirmar: boolean }) {
  const [linhas, setLinhas] = useState<Linha[] | null>(null);
  const [valores, setValores] = useState<Record<string, string>>({});
  const [salvando, setSalvando] = useState<string | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [aberto, setAberto] = useState(false);

  const carregar = useCallback(async () => {
    try {
      const res = await fetch("/api/precificacao/rendimento-a-confirmar", { cache: "no-store" });
      const json = (await res.json().catch(() => null)) as { linhas?: Linha[]; error?: string } | null;
      if (!res.ok || !json || json.error) {
        setLinhas([]);
        return;
      }
      const lista = json.linhas ?? [];
      setLinhas(lista);
      setValores((v) => {
        const proximo = { ...v };
        for (const l of lista) if (proximo[l.id] === undefined && l.sugerido) proximo[l.id] = String(l.sugerido);
        return proximo;
      });
    } catch {
      setLinhas([]);
    }
  }, []);

  useEffect(() => {
    void carregar();
  }, [carregar]);

  if (!linhas || linhas.length === 0) return null;

  const confirmar = async (linha: Linha) => {
    const n = Number((valores[linha.id] ?? "").replace(",", "."));
    if (!Number.isFinite(n) || n < 1) {
      setErro(`Informe quantas peças saem de uma ${linha.unidade} de ${linha.insumo}.`);
      return;
    }
    setSalvando(linha.id);
    setErro(null);
    try {
      const res = await fetch("/api/precificacao/rendimento-a-confirmar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: linha.id, rendimento: n }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok || json?.error) throw new Error(json?.error || "Não foi possível confirmar.");
      setLinhas((atual) => (atual ?? []).filter((l) => l.id !== linha.id));
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Não foi possível confirmar.");
    } finally {
      setSalvando(null);
    }
  };

  return (
    <div className="mb-4 rounded-xl border border-amber-200 bg-amber-50 overflow-hidden">
      <button
        type="button"
        onClick={() => setAberto((a) => !a)}
        className="w-full flex items-center justify-between gap-3 px-4 py-3 text-left"
      >
        <span className="flex items-center gap-2 text-sm text-amber-900">
          <Layers size={16} />
          <span className="font-semibold">
            {linhas.length} {linhas.length === 1 ? "insumo com rendimento por folha a confirmar" : "insumos com rendimento por folha a confirmar"}
          </span>
          <span className="hidden sm:inline text-amber-800/80">
            · cadastros antigos gravaram a fração (0,17 por peça) em vez de &quot;6 por folha&quot;
          </span>
        </span>
        <span className="text-xs font-semibold text-amber-900">{aberto ? "Fechar" : "Revisar"}</span>
      </button>
      {aberto ? (
        <div className="border-t border-amber-200 bg-white">
          <p className="px-4 pt-3 pb-1 text-xs text-[var(--ks-color-text-muted)]">
            Confirme quantas peças saem de uma folha. Se a linha for um serviço (corte, impressão de fora), não confirme:
            marque &quot;É um serviço&quot; no cadastro do insumo, e ela some daqui.
          </p>
          <table className="w-full text-sm">
            <thead className="text-[11px] uppercase tracking-wide text-[var(--ks-color-text-muted)]">
              <tr>
                <th className="text-left px-4 py-2 font-semibold">Produto</th>
                <th className="text-left px-4 py-2 font-semibold">Insumo</th>
                <th className="text-right px-4 py-2 font-semibold">Gravado</th>
                <th className="text-right px-4 py-2 font-semibold">Peças por {"folha"}</th>
                <th className="px-4 py-2" />
              </tr>
            </thead>
            <tbody>
              {linhas.map((linha) => (
                <tr key={linha.id} className="border-t border-[var(--ks-color-border-subtle)]">
                  <td className="px-4 py-2 font-medium text-[var(--ks-color-text-primary)]">{linha.produto}</td>
                  <td className="px-4 py-2 text-[var(--ks-color-text-primary)]">{linha.insumo}</td>
                  <td className="px-4 py-2 text-right text-[var(--ks-color-text-muted)] whitespace-nowrap">
                    {formatar(linha.consumo)} {linha.unidade} por peça
                  </td>
                  <td className="px-4 py-2 text-right">
                    <input
                      type="number"
                      min={1}
                      step={1}
                      value={valores[linha.id] ?? ""}
                      placeholder={linha.sugerido ? String(linha.sugerido) : "?"}
                      disabled={!podeConfirmar}
                      onChange={(e) => setValores((v) => ({ ...v, [linha.id]: e.target.value }))}
                      className="ks-field w-20 text-right text-sm"
                    />
                    {linha.sugerido ? (
                      <div className="text-[10px] text-[var(--ks-color-text-soft)]">sugerido {linha.sugerido}</div>
                    ) : (
                      <div className="text-[10px] text-[var(--ks-color-text-soft)]">não dá inteiro: confira a unidade</div>
                    )}
                  </td>
                  <td className="px-4 py-2 text-right">
                    {podeConfirmar ? (
                      <button
                        type="button"
                        onClick={() => confirmar(linha)}
                        disabled={salvando === linha.id}
                        className="ks-btn ks-btn-primary text-xs px-3 py-1 inline-flex items-center gap-1 disabled:opacity-50"
                      >
                        {salvando === linha.id ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
                        Confirmar
                      </button>
                    ) : null}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {erro ? <div className="px-4 py-2 text-xs text-[var(--ks-color-status-danger)]">{erro}</div> : null}
        </div>
      ) : null}
    </div>
  );
}