"use client";

import { toast } from "sonner";
import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";

/**
 * Avisos da loja.
 *
 * Mesmo cartao usado na agenda do admin: titulo curto, explicacao embaixo,
 * botao de fechar e uma barra na base que encolhe ao longo do tempo — a pessoa
 * ve quanto falta em vez de o aviso sumir de surpresa no meio da leitura.
 *
 * A diferenca e a cor: aqui ela vem da loja. Sucesso e informacao usam a cor da
 * marca, para o aviso continuar parecendo daquela loja. Erro fica no vermelho
 * de sempre: um problema precisa ser lido como problema, e nao como parte da
 * identidade visual.
 */

type Tipo = "info" | "sucesso" | "erro" | "alerta";

type Opcoes = {
  descricao?: string;
  duracao?: number;
  corDaLoja?: string;
};

function comAlfa(cor: string, alfa: number) {
  const limpo = String(cor || "").replace("#", "");
  if (limpo.length !== 6) return `rgba(15,23,42,${alfa})`;
  const r = parseInt(limpo.slice(0, 2), 16);
  const g = parseInt(limpo.slice(2, 4), 16);
  const b = parseInt(limpo.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${alfa})`;
}

function estiloDoTipo(tipo: Tipo, corDaLoja?: string) {
  const daLoja = corDaLoja && /^#[0-9a-fA-F]{6}$/.test(corDaLoja) ? corDaLoja : "#4425A7";
  if (tipo === "erro") return { cor: "#E11D48", anel: "rgba(225,29,72,0.14)", Icone: XCircle };
  if (tipo === "alerta") return { cor: "#D97706", anel: "rgba(217,119,6,0.14)", Icone: AlertTriangle };
  if (tipo === "sucesso") return { cor: daLoja, anel: comAlfa(daLoja, 0.14), Icone: CheckCircle2 };
  return { cor: daLoja, anel: comAlfa(daLoja, 0.14), Icone: Info };
}

function Cartao({
  id,
  tipo,
  titulo,
  descricao,
  duracao,
  corDaLoja,
}: Opcoes & { id: string | number; tipo: Tipo; titulo: string; duracao: number }) {
  const { cor, anel, Icone } = estiloDoTipo(tipo, corDaLoja);

  return (
    <div
      className="relative flex w-full items-start gap-3 overflow-hidden rounded-[12px] border border-slate-200 bg-white py-3 pl-3.5 pr-2.5 shadow-[0_10px_28px_rgba(16,24,40,0.14)] sm:w-[380px]"
      role={tipo === "erro" ? "alert" : "status"}
    >
      <span
        aria-hidden
        className="mt-[1px] flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
        style={{ background: anel }}
      >
        <Icone className="h-[15px] w-[15px]" style={{ color: cor }} />
      </span>

      <div className="min-w-0 flex-1">
        <p className="text-[13px] font-semibold leading-tight text-slate-900">{titulo}</p>
        {descricao ? <p className="mt-[3px] text-[12px] leading-snug text-slate-500">{descricao}</p> : null}
      </div>

      <button
        type="button"
        onClick={() => toast.dismiss(id)}
        aria-label="Fechar aviso"
        className="mt-[1px] flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
      >
        <X className="h-3.5 w-3.5" />
      </button>

      {/* Barra do tempo restante. `scaleX` em vez de `width` para a animacao
          rodar no compositor — largura anima no layout e engasga quando ha
          varios avisos na tela. */}
      <span
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-[3px] origin-left"
        style={{ background: cor, animation: `ks-aviso-tempo ${duracao}ms linear forwards` }}
      />
    </div>
  );
}

function mostrar(tipo: Tipo, titulo: string, opcoes: Opcoes = {}) {
  const duracao = opcoes.duracao ?? (tipo === "erro" ? 7000 : 4000);
  return toast.custom((id) => <Cartao id={id} tipo={tipo} titulo={titulo} duracao={duracao} {...opcoes} />, {
    duration: duracao,
  });
}

export const avisoDaLoja = {
  info: (titulo: string, o?: Opcoes) => mostrar("info", titulo, o),
  sucesso: (titulo: string, o?: Opcoes) => mostrar("sucesso", titulo, o),
  erro: (titulo: string, o?: Opcoes) => mostrar("erro", titulo, o),
  alerta: (titulo: string, o?: Opcoes) => mostrar("alerta", titulo, o),
};