"use client";

import { useCallback } from "react";
import { Building2, Pencil, UserPlus, UserRound, X } from "lucide-react";

import { documentoFormatado, pedirFiscal } from "@/components/fiscal/comum";
import { Switch } from "@/components/ui/switch";
import { applyDocumentMask } from "@/lib/document-utils";

import { CaixaDeBusca } from "./caixa-de-busca";
import type { ClienteDaEmissao, Modelo } from "./tipos";

function Avatar({ cliente, tamanho = "md" }: { cliente: Pick<ClienteDaEmissao, "tipo">; tamanho?: "sm" | "md" }) {
  const Icone = cliente.tipo === "pj" ? Building2 : UserRound;
  const classe = tamanho === "sm" ? "h-9 w-9 rounded-xl" : "h-12 w-12 rounded-2xl";
  const cor =
    cliente.tipo === "pj"
      ? "from-sky-500 to-indigo-600 shadow-[0_8px_18px_rgba(14,116,244,0.25)]"
      : "from-violet-500 to-purple-600 shadow-[0_8px_18px_rgba(124,58,237,0.25)]";
  return (
    <span className={`flex shrink-0 items-center justify-center bg-gradient-to-br text-white ${classe} ${cor}`}>
      <Icone size={tamanho === "sm" ? 16 : 20} />
    </span>
  );
}

function detalhesDoCliente(cliente: ClienteDaEmissao) {
  return [
    cliente.outroNome,
    cliente.documento ? documentoFormatado(cliente.documento) : "sem CPF/CNPJ",
    [cliente.cidade, cliente.uf].filter(Boolean).join("/") || null,
    cliente.email,
  ]
    .filter(Boolean)
    .join(" · ");
}

export function BlocoCliente({
  modelo,
  cliente,
  semCliente,
  documento,
  aoEscolher,
  aoTirar,
  aoMudarSemCliente,
  aoMudarDocumento,
  aoEditar,
  aoCadastrar,
  abrindoCadastro,
  destaque,
  travado,
}: {
  modelo: Modelo;
  cliente: ClienteDaEmissao | null;
  semCliente: boolean;
  documento: string;
  aoEscolher: (cliente: ClienteDaEmissao) => void;
  aoTirar: () => void;
  aoMudarSemCliente: (valor: boolean) => void;
  aoMudarDocumento: (valor: string) => void;
  aoEditar: () => void;
  aoCadastrar: () => void;
  abrindoCadastro: boolean;
  /** Há algo a resolver no cliente: a caixa ganha contorno. */
  destaque: boolean;
  travado: boolean;
}) {
  const cupom = modelo === "nfce";
  const buscarClientes = useCallback(
    async (termo: string) =>
      (await pedirFiscal<{ clientes: ClienteDaEmissao[] }>(`/api/fiscal/avulsa/buscas?tipo=clientes&q=${encodeURIComponent(termo)}`)).clientes,
    []
  );

  return (
    <div className="space-y-4">
      {cupom ? (
        <label className="flex cursor-pointer items-center justify-between gap-4 rounded-2xl bg-[var(--ks-color-bg-inset)] px-4 py-3">
          <span className="min-w-0">
            <span className="block text-sm font-semibold text-[var(--ks-color-text-primary)]">Consumidor sem cadastro</span>
            <span className="block text-xs leading-5 text-[var(--ks-color-text-muted)]">
              O cupom pode sair sem cliente. Se a pessoa pedir, coloque o CPF ou CNPJ dela.
            </span>
          </span>
          <Switch checked={semCliente} onCheckedChange={aoMudarSemCliente} disabled={travado} aria-label="Consumidor sem cadastro" />
        </label>
      ) : null}

      {cupom && semCliente ? (
        <label className="block max-w-sm space-y-2">
          <span className="flex items-baseline gap-2 text-sm font-semibold text-[var(--ks-color-text-primary)]">
            CPF ou CNPJ na nota
            <span className="text-xs font-normal text-[var(--ks-color-text-soft)]">opcional</span>
          </span>
          <input
            value={applyDocumentMask(documento)}
            onChange={(e) => aoMudarDocumento(e.target.value.replace(/\D/g, "").slice(0, 14))}
            disabled={travado}
            inputMode="numeric"
            placeholder="000.000.000-00"
            className="ks-field ks-num"
          />
          <span className="block text-xs leading-5 text-[var(--ks-color-text-muted)]">Passa a ser obrigatório em compras a partir de R$ 10.000,00.</span>
        </label>
      ) : cliente ? (
        <div
          className={`flex flex-wrap items-center gap-4 rounded-2xl bg-[var(--ks-color-bg-inset)] px-4 py-3.5 ${destaque ? "ring-2 ring-rose-400/60" : ""}`}
        >
          <Avatar cliente={cliente} />
          <div className="min-w-[200px] flex-1">
            <p className="truncate text-base font-bold text-[var(--ks-color-text-primary)]">{cliente.nome}</p>
            <p className="truncate text-[13px] text-[var(--ks-color-text-muted)]">{detalhesDoCliente(cliente)}</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <button type="button" onClick={aoEditar} disabled={travado || abrindoCadastro} className="ks-button ks-button-soft ks-button-sm">
              <Pencil size={14} />
              Editar cadastro
            </button>
            <button type="button" onClick={aoTirar} disabled={travado} className="ks-button ks-button-ghost ks-button-sm">
              <X size={14} />
              Trocar
            </button>
          </div>
        </div>
      ) : (
        <div className={`space-y-3 ${destaque ? "rounded-2xl ring-2 ring-rose-400/60 ring-offset-4 ring-offset-[var(--ks-color-bg-elevated)]" : ""}`}>
          <CaixaDeBusca<ClienteDaEmissao>
            inputId="busca-do-cliente"
            placeholder="Buscar cliente pelo nome, CPF/CNPJ, telefone ou e-mail"
            buscar={buscarClientes}
            desabilitado={travado}
            titulo={(termo) => (termo ? null : "Clientes recentes")}
            aoEscolher={aoEscolher}
            renderizar={(item) => (
              <>
                <Avatar cliente={item} tamanho="sm" />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{item.nome}</span>
                  <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">{detalhesDoCliente(item)}</span>
                </span>
              </>
            )}
            vazio={(termo) => (termo ? <>Nenhum cliente com &ldquo;{termo}&rdquo;.</> : "Nenhum cliente cadastrado ainda.")}
            rodape={(fechar) => (
              <button
                type="button"
                onClick={() => {
                  fechar();
                  aoCadastrar();
                }}
                className="flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold text-[var(--ks-color-primary)] transition hover:bg-[var(--ks-color-bg-hover)]"
              >
                <UserPlus size={16} />
                Cadastrar cliente novo
              </button>
            )}
          />
          <button
            type="button"
            onClick={aoCadastrar}
            disabled={travado}
            className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--ks-color-primary)] hover:opacity-80 disabled:opacity-40"
          >
            <UserPlus size={16} />
            Cadastrar cliente novo
          </button>
        </div>
      )}
    </div>
  );
}