"use client";

/*
 * Peças pequenas que as telas do estoque novo repetem: o rosto do item, a
 * situação do saldo, o número grande com unidade, a etiqueta "baixa / só
 * custo" e o campo de número da casa.
 */

import { useEffect, useRef, type ComponentType, type ReactNode } from "react";
import { iconeDoInsumo, iconeDoProduto } from "@/lib/icone-do-item";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import { qtd, unidade } from "@/lib/estoque/regras";

const VIVOS = [
  "from-violet-500 to-purple-600",
  "from-sky-500 to-blue-600",
  "from-emerald-500 to-teal-600",
  "from-amber-400 to-orange-500",
  "from-rose-500 to-pink-600",
  "from-indigo-500 to-violet-600",
];

function corDoNome(nome: string) {
  let soma = 0;
  for (let i = 0; i < nome.length; i++) soma += nome.charCodeAt(i);
  return VIVOS[soma % VIVOS.length];
}

/** Foto → ícone da casa → inicial num gradiente vivo (a ordem da casa). */
export function RostoDoItem({ nome, papel, foto, tamanho = 40 }: { nome: string; papel: "insumo" | "pronto"; foto?: string | null; tamanho?: number }) {
  if (foto) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={foto} alt="" style={{ width: tamanho, height: tamanho }} className="shrink-0 rounded-xl border border-slate-100 object-cover" />;
  }
  const icone = papel === "pronto" ? iconeDoProduto(nome) : iconeDoInsumo(nome);
  if (icone) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={icone} alt="" style={{ width: tamanho, height: tamanho }} className="shrink-0 object-contain" />;
  }
  return (
    <span
      style={{ width: tamanho - 4, height: tamanho - 4 }}
      className={`flex shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-sm font-bold text-white shadow-sm ${corDoNome(nome)}`}
    >
      {nome.trim().charAt(0).toUpperCase() || "?"}
    </span>
  );
}

export type Situacao = "negativo" | "zerado" | "minimo" | "ok" | "sem_controle";

export function situacaoDoSaldo(saldo: number, minimo: number | null, controla = true): Situacao {
  if (!controla) return "sem_controle";
  if (saldo < 0) return "negativo";
  if (saldo === 0) return "zerado";
  if (minimo !== null && minimo !== undefined && saldo <= minimo) return "minimo";
  return "ok";
}

const SITUACOES: Record<Situacao, { texto: string; classe: string; bolinha: string }> = {
  negativo: { texto: "Negativo", classe: "bg-red-50 text-red-600", bolinha: "bg-rose-500" },
  zerado: { texto: "Sem estoque", classe: "bg-red-50 text-red-600", bolinha: "bg-rose-500" },
  minimo: { texto: "Abaixo do mínimo", classe: "bg-violet-50 text-violet-700", bolinha: "bg-violet-500" },
  ok: { texto: "Em estoque", classe: "bg-emerald-50 text-emerald-700", bolinha: "bg-emerald-500" },
  sem_controle: { texto: "Só custo", classe: "bg-slate-100 text-slate-500", bolinha: "bg-slate-400" },
};

export function SeloDaSituacao({ situacao, texto }: { situacao: Situacao; texto?: string }) {
  const s = SITUACOES[situacao];
  return (
    <span className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium ${s.classe}`}>
      <span className={`h-1.5 w-1.5 rounded-full ${s.bolinha}`} />
      {texto ?? s.texto}
    </span>
  );
}

/** Saldo grande tabular + unidade pequena. */
export function Saldo({ valor, un, grande = false }: { valor: number; un?: string | null; grande?: boolean }) {
  return (
    <span className="whitespace-nowrap">
      <span className={`${grande ? "text-2xl" : "text-base"} ks-num font-bold tabular-nums ${valor < 0 ? "text-rose-600" : "text-[var(--ks-color-text-primary)]"}`}>
        {qtd(valor)}
      </span>
      <span className="ml-1 text-xs text-slate-400">{unidade(un)}</span>
    </span>
  );
}

/** "baixa do estoque" × "só custo" — a etiqueta da linha da composição. */
export function EtiquetaDaBaixa({ baixa, titulo }: { baixa: boolean; titulo?: string }) {
  return baixa ? (
    <span title={titulo} className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-[var(--ks-color-primary)]/10 px-2 py-0.5 text-[11px] font-semibold text-[var(--ks-color-primary)]">
      <span className="h-1.5 w-1.5 rounded-full bg-[var(--ks-color-primary)]" />
      baixa do estoque
    </span>
  ) : (
    <span title={titulo} className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500">
      <span className="h-1.5 w-1.5 rounded-full bg-slate-400" />
      só custo
    </span>
  );
}

/** Contador de relance da barra: bolinha + número + rótulo. */
export function Contador({ cor, numero, rotulo }: { cor: string; numero: number; rotulo: string }) {
  return (
    <span className="flex items-center gap-1.5 whitespace-nowrap">
      <span className={`h-1.5 w-1.5 rounded-full ${cor}`} />
      <span className="ks-num font-semibold text-slate-700">{numero}</span> {rotulo}
    </span>
  );
}

/** O campo de número da casa (vírgula, sem type="number"). */
export function CampoNumero({
  valor,
  aoMudar,
  rotulo,
  sufixo,
  permiteNegativo,
  zeroVazio = true,
  placeholder = "0",
  className = "",
  autoFocus,
  destaque,
}: {
  valor: number | null | undefined;
  aoMudar: (n: number) => void;
  rotulo: string;
  sufixo?: ReactNode;
  permiteNegativo?: boolean;
  zeroVazio?: boolean;
  placeholder?: string;
  className?: string;
  autoFocus?: boolean;
  destaque?: boolean;
}) {
  return (
    <span className={`relative block ${className}`}>
      <CampoDecimal
        valor={valor}
        aoMudar={aoMudar}
        zeroVazio={zeroVazio}
        permiteNegativo={permiteNegativo}
        placeholder={placeholder}
        aria-label={rotulo}
        autoFocus={autoFocus}
        className="ks-field ks-num tabular-nums"
        style={{
          paddingRight: sufixo ? 40 : undefined,
          textAlign: "right",
          ...(destaque ? { borderColor: "var(--ks-color-primary)", background: "var(--ks-brand-50)" } : {}),
        }}
      />
      {sufixo ? (
        <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">{sufixo}</span>
      ) : null}
    </span>
  );
}

/** Abas no sublinhado da casa, com ícone e contagem em pílula. */
export function Abas<T extends string>({
  abas,
  atual,
  aoEscolher,
}: {
  abas: Array<{ id: T; rotulo: string; Icone: ComponentType<{ className?: string }>; contagem?: number | null; alerta?: boolean }>;
  atual: T;
  aoEscolher: (id: T) => void;
}) {
  /* No celular as abas rolam de lado: a escolhida aparece sempre. */
  const faixa = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const ativa = faixa.current?.querySelector<HTMLElement>('[aria-current="page"]');
    if (ativa && faixa.current) faixa.current.scrollTo({ left: Math.max(0, ativa.offsetLeft - 16), behavior: "smooth" });
  }, [atual]);
  return (
    <div ref={faixa} className="relative -mx-4 flex items-center gap-x-6 overflow-x-auto border-b border-[var(--ks-color-border-subtle)] px-4 [scrollbar-width:none] sm:mx-0 sm:px-0 [&::-webkit-scrollbar]:hidden">
      {abas.map(({ id, rotulo, Icone, contagem, alerta }) => (
        <button
          key={id}
          type="button"
          onClick={() => aoEscolher(id)}
          aria-current={atual === id ? "page" : undefined}
          className={`-mb-px flex shrink-0 items-center gap-2 whitespace-nowrap border-b-2 pb-3 text-sm font-semibold transition-colors ${
            atual === id
              ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]"
              : "border-transparent text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)]"
          }`}
        >
          <Icone className="h-4 w-4" />
          {rotulo}
          {contagem !== undefined && contagem !== null ? (
            <span
              className={`ks-num rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                alerta ? "bg-rose-500 text-white" : atual === id ? "bg-[var(--ks-color-primary)]/10" : "bg-slate-100 text-slate-500"
              }`}
            >
              {contagem}
            </span>
          ) : null}
        </button>
      ))}
    </div>
  );
}