"use client";

import type { ReactNode } from "react";
import { AlertCircle, CheckCircle2, Info, XCircle } from "lucide-react";

/**
 * O aviso da casa.
 *
 * Existia um bloco amarelo pastel repetido em cada tela que precisava chamar
 * atenção. O Natan cortou: pastel deixa o sistema com "cara de IA", e amarelo
 * não é cor da marca. Aqui a atenção vem do mesmo lugar que o resto do
 * sistema: superfície branca elevada, raio e sombra separando em vez de borda,
 * e um selo com gradiente saturado no tom certo.
 *
 * Quatro tons e só. "atencao" é o selo **vermelho vivo**: é o que a pessoa vê
 * antes de ler, e a função dele é fazer parar. O violeta da marca chegou a ser
 * usado aqui e o Natan pediu vermelho, porque um aviso violeta some no meio de
 * uma tela que já é violeta inteira.
 *
 * "ruim" também é vermelho, mas mais fechado e com outro ícone: atenção é
 * "olha isto", erro é "não deu". Verde só para o que deu certo, cinza para
 * informação que não pede nada. Se tudo pudesse gritar, nada gritaria.
 */

export type TomDoAviso = "atencao" | "bom" | "ruim" | "neutro";

const SELO: Record<TomDoAviso, { fundo: string; sombra: string; Icone: typeof AlertCircle }> = {
  atencao: {
    fundo: "linear-gradient(135deg, #ff4d4f 0%, #e01329 100%)",
    sombra: "0 6px 18px rgba(224, 19, 41, 0.35)",
    Icone: AlertCircle,
  },
  bom: {
    fundo: "linear-gradient(135deg, var(--ks-emerald) 0%, #0e9e70 100%)",
    sombra: "0 6px 16px rgba(14, 158, 112, 0.26)",
    Icone: CheckCircle2,
  },
  ruim: {
    /* Mais fechado que o de atenção, para os dois não virarem a mesma mancha. */
    fundo: "linear-gradient(135deg, #d6304c 0%, #8f1130 100%)",
    sombra: "0 6px 16px rgba(143, 17, 48, 0.28)",
    Icone: XCircle,
  },
  neutro: {
    fundo: "linear-gradient(135deg, var(--ks-n-400) 0%, var(--ks-n-600) 100%)",
    sombra: "0 6px 16px rgba(63, 63, 88, 0.18)",
    Icone: Info,
  },
};

export function Aviso({
  tom = "atencao",
  titulo,
  children,
  acao,
  aoFechar,
  className = "",
}: {
  tom?: TomDoAviso;
  /* Opcional: sem título, o aviso é uma linha só e o texto carrega o peso. */
  titulo?: ReactNode;
  children: ReactNode;
  /* Botão à direita. Já vem alinhado; passe um `ks-button`. */
  acao?: ReactNode;
  aoFechar?: () => void;
  className?: string;
}) {
  const { fundo, sombra, Icone } = SELO[tom];

  return (
    <div
      className={`flex flex-col gap-3 rounded-2xl bg-[var(--ks-color-bg-elevated)] px-4 py-3.5 shadow-[0_10px_30px_rgba(26,26,43,0.07)] sm:flex-row sm:items-center sm:gap-4 sm:px-5 ${className}`}
    >
      <span
        aria-hidden
        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white"
        style={{ background: fundo, boxShadow: sombra }}
      >
        <Icone size={17} strokeWidth={2.4} />
      </span>

      <div className="min-w-0 flex-1 text-sm leading-6">
        {titulo ? (
          <div className="font-semibold tracking-[-0.01em] text-[var(--ks-color-text-primary)]">{titulo}</div>
        ) : null}
        <div className={titulo ? "text-[var(--ks-color-text-muted)]" : "text-[var(--ks-color-text-secondary)]"}>
          {children}
        </div>
      </div>

      {acao ? <div className="shrink-0 sm:ml-2">{acao}</div> : null}

      {aoFechar ? (
        <button
          type="button"
          onClick={aoFechar}
          aria-label="Fechar aviso"
          className="shrink-0 rounded-lg p-1.5 text-[var(--ks-color-text-soft)] transition hover:bg-[var(--ks-color-bg-soft)] hover:text-[var(--ks-color-text-secondary)]"
        >
          <XCircle size={16} />
        </button>
      ) : null}
    </div>
  );
}

export default Aviso;