"use client";

import { Check, Palette } from "lucide-react";

/* Dezesseis cores escolhidas a dedo para conviver bem lado a lado num mes
   cheio: nenhuma tao clara que some no fundo, nenhuma tao escura que pareça
   alarme. A pessoa ainda pode fugir da paleta com a cor livre. */
export const PALETA_AGENDA = [
  "#7C3AED",
  "#8B5CF6",
  "#4F46E5",
  "#2563EB",
  "#0891B2",
  "#0D9488",
  "#059669",
  "#65A30D",
  "#D97706",
  "#EA580C",
  "#DC2626",
  "#DB2777",
  "#C026D3",
  "#F472B6",
  "#1E3A8A",
  "#475569",
];

export default function SeletorCor({
  valor,
  aoMudar,
  tamanho = "md",
}: {
  valor: string;
  aoMudar: (cor: string) => void;
  tamanho?: "sm" | "md";
}) {
  const px = tamanho === "sm" ? "h-7 w-7" : "h-9 w-9";
  const naPaleta = PALETA_AGENDA.some((c) => c.toLowerCase() === valor.toLowerCase());

  return (
    <div className="flex flex-wrap gap-2">
      {PALETA_AGENDA.map((cor) => {
        const ativo = cor.toLowerCase() === valor.toLowerCase();
        return (
          <button
            key={cor}
            type="button"
            onClick={() => aoMudar(cor)}
            aria-label={`Cor ${cor}`}
            aria-pressed={ativo}
            className={`flex ${px} shrink-0 items-center justify-center rounded-full transition-transform hover:scale-110 ${
              ativo ? "ring-2 ring-offset-2 ring-offset-[var(--ks-color-bg-elevated)]" : ""
            }`}
            style={{ background: cor, ...(ativo ? ({ ["--tw-ring-color" as string]: cor } as React.CSSProperties) : {}) }}
          >
            {ativo && <Check className="h-4 w-4 text-white drop-shadow" />}
          </button>
        );
      })}

      {/* Escotilha para qualquer cor: input nativo, disfarçado de swatch. */}
      <label
        className={`relative flex ${px} shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-[var(--ks-color-border-strong)] text-[var(--ks-color-text-muted)] transition-transform hover:scale-110 ${
          !naPaleta ? "ring-2 ring-offset-2 ring-offset-[var(--ks-color-bg-elevated)]" : ""
        }`}
        style={!naPaleta ? ({ background: valor, ["--tw-ring-color" as string]: valor } as React.CSSProperties) : undefined}
        title="Outra cor"
      >
        {naPaleta ? <Palette className="h-3.5 w-3.5" /> : <Check className="h-4 w-4 text-white drop-shadow" />}
        <input
          type="color"
          value={valor}
          onChange={(e) => aoMudar(e.target.value)}
          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
        />
      </label>
    </div>
  );
}