"use client";

/*
 * Escolher a combinação como o cliente escolhe na loja: um botão por opção,
 * atributo por atributo. Atributo de várias escolhas liga e desliga cada uma.
 * A saída é o `selected_options` que o pedido grava — a prévia pergunta ao
 * banco exatamente o que uma venda de verdade perguntaria.
 */

import type { AtributoDoProduto } from "@/lib/estoque/tipos";

export type Escolhas = Record<string, string[]>;

export function selecaoDasEscolhas(atributos: AtributoDoProduto[], escolhas: Escolhas) {
  const options: Array<{ attribute_name: string; label: string; option_id?: string }> = [];
  for (const a of atributos) {
    for (const label of escolhas[a.name] ?? []) {
      const o = a.options.find((x) => x.label === label);
      options.push(o?.id ? { attribute_name: a.name, label, option_id: o.id } : { attribute_name: a.name, label });
    }
  }
  return { options };
}

export function textoDasEscolhas(escolhas: Escolhas): string {
  const v = Object.values(escolhas).flat().filter(Boolean);
  return v.length ? v.join(" / ") : "sem escolha";
}

/** A primeira opção de cada atributo de escolha única (ponto de partida da prévia). */
export function escolhasIniciais(atributos: AtributoDoProduto[]): Escolhas {
  const e: Escolhas = {};
  for (const a of atributos) if (!a.allow_multiple && a.options[0]) e[a.name] = [a.options[0].label];
  return e;
}

export function EscolhaDeCombinacao({
  atributos,
  valor,
  aoMudar,
  compacta = false,
}: {
  atributos: AtributoDoProduto[];
  valor: Escolhas;
  aoMudar: (e: Escolhas) => void;
  compacta?: boolean;
}) {
  if (!atributos.length) {
    return <p className="text-xs text-[var(--ks-color-text-muted)]">O produto não tem variações: vale para qualquer venda.</p>;
  }
  return (
    <div className={compacta ? "space-y-2" : "space-y-3"}>
      {atributos.map((a) => {
        const escolhidas = valor[a.name] ?? [];
        return (
          <div key={a.id ?? a.name}>
            <p className="mb-1 text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">
              {a.name}
              {a.allow_multiple ? <span className="ml-1 font-medium normal-case tracking-normal">(várias)</span> : null}
            </p>
            <div className="flex flex-wrap gap-1.5">
              {!a.allow_multiple ? (
                <button
                  type="button"
                  onClick={() => aoMudar({ ...valor, [a.name]: [] })}
                  className={`rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors ${
                    escolhidas.length === 0
                      ? "border-[var(--ks-color-text-secondary)] bg-[var(--ks-color-text-secondary)] text-white"
                      : "border-dashed border-[var(--ks-color-border-strong)] text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]"
                  }`}
                >
                  nenhuma
                </button>
              ) : null}
              {a.options.map((o) => {
                const ligada = escolhidas.includes(o.label);
                return (
                  <button
                    key={o.id ?? o.label}
                    type="button"
                    aria-pressed={ligada}
                    onClick={() =>
                      aoMudar({
                        ...valor,
                        [a.name]: a.allow_multiple ? (ligada ? escolhidas.filter((x) => x !== o.label) : [...escolhidas, o.label]) : ligada ? [] : [o.label],
                      })
                    }
                    className={`rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors ${
                      ligada
                        ? "border-[var(--ks-brand-600)] bg-[var(--ks-brand-600)] text-white shadow-[0_4px_12px_-4px_rgba(95,49,214,0.5)]"
                        : "border-[var(--ks-color-border-subtle)] bg-white text-[var(--ks-color-text-secondary)] hover:border-[var(--ks-brand-300)]"
                    }`}
                  >
                    {o.label}
                  </button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}