"use client";

import { Check } from "lucide-react";
import type { CSSProperties } from "react";

import {
  CORES_SUGERIDAS,
  enderecoDasFontes,
  FONTES_DOS_TITULOS,
  FUNDOS_DA_AREA,
  textoSobre,
  variaveisDaArea,
  type AparenciaGuardada,
  type FormatoDasCapas,
  type IdDaFonte,
  type IdDoFundo,
} from "@/lib/digitais/aparencia";

/*
 * As peças da seção Aparência (prévia 17): a prévia ao vivo da área de
 * membros, a letra dos títulos, a cor, o fundo e o formato das capas. A
 * prévia usa as mesmas variáveis --m-* da área de verdade (aparencia.ts).
 */

/* Todas as letras de uma vez, só nesta tela, para os cartões mostrarem cada uma. */
export function FontesDaAparencia() {
  return <link rel="stylesheet" href={enderecoDasFontes(FONTES_DOS_TITULOS.map((f) => f.id))} precedence="default" />;
}

const tituloDaArea: CSSProperties = {
  fontFamily: "var(--m-titulo-familia)",
  fontWeight: "var(--m-titulo-peso)" as unknown as number,
  fontVariationSettings: '"wdth" var(--m-titulo-largura)',
  fontStyle: "var(--m-titulo-estilo)" as CSSProperties["fontStyle"],
  textTransform: "var(--m-titulo-caixa)" as CSSProperties["textTransform"],
  letterSpacing: "var(--m-titulo-espaco)",
  lineHeight: "var(--m-titulo-altura)" as unknown as number,
};

const POSTERES = ["Boas-vindas", "Primeiros passos", "Na prática"];

/* A área de membros em miniatura, com a aparência escolhida. */
export function PreviaDaArea({ aparencia, cor, foto, nomeDaArea }: { aparencia: AparenciaGuardada; cor: string; foto: string | null; nomeDaArea: string }) {
  const vars = variaveisDaArea({ aparencia, cor }) as CSSProperties;
  const emPe = aparencia.capas === "em_pe";
  return (
    <div
      className="relative overflow-hidden rounded-2xl shadow-[0_24px_50px_-30px_rgba(20,10,60,.55)] ring-1 ring-[var(--ks-color-border-subtle)]"
      style={{ ...vars, background: "var(--m-fundo)", color: "var(--m-texto)", fontFamily: '"Archivo", sans-serif' }}
    >
      <div className="relative h-[210px] overflow-hidden">
        {foto ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img src={foto} alt="" className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: "70% 25%" }} />
        ) : null}
        <div
          className="absolute inset-0"
          style={{
            background:
              "linear-gradient(90deg, var(--m-fundo) 0%, color-mix(in srgb, var(--m-fundo) 82%, transparent) 34%, transparent 70%), linear-gradient(0deg, var(--m-fundo) 0%, transparent 50%), radial-gradient(60% 70% at 14% 100%, color-mix(in srgb, var(--m-acento) 34%, transparent), transparent 70%)",
          }}
        />
        <div className="absolute left-4 top-3 flex items-center gap-2 text-[11px] font-extrabold">
          <span className="h-5 w-5 rounded-md" style={{ background: "var(--m-acento)" }} />
          {nomeDaArea}
        </div>
        <div className="absolute bottom-4 left-4 right-[40%]">
          <div className="text-[8px] font-bold uppercase tracking-[0.16em]" style={{ color: "var(--m-acento)" }}>
            Continue de onde parou
          </div>
          <div className="mt-1.5" style={{ ...tituloDaArea, fontSize: `calc(var(--m-escala) * 40px)` }}>
            Seu conteúdo aqui
          </div>
          <span
            className="mt-3 inline-flex h-7 items-center rounded-md px-3 text-[10px] font-extrabold"
            style={{ background: "var(--m-acento)", color: "var(--m-acento-texto)", boxShadow: "0 8px 20px -8px var(--m-acento)" }}
          >
            ▶ Continuar
          </span>
        </div>
      </div>
      <div className="flex items-start gap-2.5 px-4 pb-4 pt-1">
        {POSTERES.map((nome, i) => (
          <div
            key={nome}
            className="relative shrink-0 overflow-hidden"
            style={{
              width: emPe ? 92 : 150,
              aspectRatio: emPe ? "2 / 3" : "16 / 10",
              borderRadius: "var(--m-raio)",
              background: `radial-gradient(130% 80% at 10% 0%, var(--m-acento), color-mix(in srgb, var(--m-acento) 40%, #12070a) 55%, #08080c)`,
            }}
          >
            <span className="absolute left-1.5 top-1.5 rounded px-1 text-[8px] font-extrabold" style={{ background: "var(--m-acento)", color: "var(--m-acento-texto)" }}>
              0{i + 1}
            </span>
            <span className="absolute bottom-2 left-2 right-2 text-white" style={{ ...tituloDaArea, fontSize: `calc(var(--m-escala) * ${emPe ? 17 : 19}px)` }}>
              {nome}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* Os cartões das letras: cada um mostra o nome do curso na letra dele. */
export function EscolhaDaFonte({ valor, aoEscolher, desligado }: { valor: IdDaFonte; aoEscolher: (id: IdDaFonte) => void; desligado: boolean }) {
  return (
    <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
      {FONTES_DOS_TITULOS.map((fonte) => {
        const marcada = fonte.id === valor;
        return (
          <button
            key={fonte.id}
            type="button"
            disabled={desligado}
            onClick={() => aoEscolher(fonte.id)}
            aria-pressed={marcada}
            className={`relative overflow-hidden rounded-xl bg-[#0B0B10] p-3 text-left text-white transition disabled:opacity-60 ${
              marcada ? "ring-[2.5px] ring-[var(--ks-brand-600)]" : "ring-1 ring-[var(--ks-color-border-subtle)] hover:ring-[var(--ks-brand-300)]"
            }`}
          >
            {marcada ? (
              <span className="absolute right-2.5 top-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ks-brand-600)]">
                <Check size={12} strokeWidth={3} />
              </span>
            ) : null}
            <span
              className="block truncate pr-6"
              style={{
                fontFamily: `"${fonte.familia}", sans-serif`,
                fontWeight: fonte.peso,
                fontVariationSettings: `"wdth" ${fonte.largura}`,
                fontStyle: fonte.italico ? "italic" : "normal",
                textTransform: fonte.caixaAlta ? "uppercase" : "none",
                letterSpacing: fonte.espaco,
                fontSize: Math.round(26 * fonte.escala),
                lineHeight: 1.1,
              }}
            >
              Sublimação
            </span>
            <span className="mt-2 block text-[12.5px] font-extrabold">{fonte.nome}</span>
            <span className="block text-[11px] leading-4 text-white/55">{fonte.descricao}</span>
          </button>
        );
      })}
    </div>
  );
}

/* As cores vivas sugeridas, com a da loja primeiro. */
export function EscolhaDaCor({ valor, corDaLoja, aoEscolher, desligado }: { valor: string | null; corDaLoja: string; aoEscolher: (cor: string | null) => void; desligado: boolean }) {
  const atual = (valor || corDaLoja).toUpperCase();
  const cores = Array.from(new Set([corDaLoja.toUpperCase(), ...CORES_SUGERIDAS]));
  return (
    <div className="flex flex-wrap items-center gap-2">
      {cores.map((cor, i) => (
        <button
          key={cor}
          type="button"
          disabled={desligado}
          onClick={() => aoEscolher(i === 0 ? null : cor)}
          title={i === 0 ? "A cor da loja" : cor}
          aria-pressed={atual === cor}
          className="relative h-9 w-9 rounded-[11px] transition hover:scale-105 disabled:opacity-60"
          style={{ background: cor, boxShadow: atual === cor ? `0 0 0 2.5px #fff, 0 0 0 4.5px ${cor}` : "inset 0 0 0 1px rgba(0,0,0,.08)" }}
        >
          {atual === cor ? <Check size={15} strokeWidth={3} className="absolute inset-0 m-auto" style={{ color: textoSobre(cor) }} /> : null}
        </button>
      ))}
    </div>
  );
}

export function EscolhaDoFundo({ valor, aoEscolher, desligado }: { valor: IdDoFundo; aoEscolher: (id: IdDoFundo) => void; desligado: boolean }) {
  return (
    <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4">
      {FUNDOS_DA_AREA.map((fundo) => (
        <button
          key={fundo.id}
          type="button"
          disabled={desligado}
          onClick={() => aoEscolher(fundo.id)}
          aria-pressed={valor === fundo.id}
          className={`rounded-xl p-2 text-left text-xs font-bold text-[var(--ks-color-text-primary)] transition disabled:opacity-60 ${
            valor === fundo.id ? "ring-[2.5px] ring-[var(--ks-brand-600)]" : "ring-1 ring-[var(--ks-color-border-subtle)] hover:ring-[var(--ks-brand-300)]"
          }`}
        >
          <span className="relative mb-2 block h-12 overflow-hidden rounded-lg" style={{ background: fundo.cores[0], boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)" }}>
            <span className="absolute bottom-2 left-2 h-1.5 w-9 rounded" style={{ background: "var(--ks-brand-500)" }} />
            <span className="absolute right-2 top-2 h-5 w-4 rounded" style={{ background: fundo.cores[2] }} />
          </span>
          {fundo.nome}
        </button>
      ))}
    </div>
  );
}

export function EscolhaDasCapas({ valor, aoEscolher, desligado }: { valor: FormatoDasCapas; aoEscolher: (v: FormatoDasCapas) => void; desligado: boolean }) {
  const opcoes: Array<{ id: FormatoDasCapas; nome: string; texto: string; largura: number; proporcao: string }> = [
    { id: "em_pe", nome: "Em pé", texto: "Pôster, como no Netflix", largura: 64, proporcao: "2 / 3" },
    { id: "deitada", nome: "Deitada", texto: "Como capa de vídeo", largura: 132, proporcao: "16 / 10" },
  ];
  return (
    <div className="flex flex-wrap items-end gap-3">
      {opcoes.map((opcao) => (
        <button
          key={opcao.id}
          type="button"
          disabled={desligado}
          onClick={() => aoEscolher(opcao.id)}
          aria-pressed={valor === opcao.id}
          className={`rounded-xl p-2.5 text-left transition disabled:opacity-60 ${
            valor === opcao.id ? "ring-[2.5px] ring-[var(--ks-brand-600)]" : "ring-1 ring-[var(--ks-color-border-subtle)] hover:ring-[var(--ks-brand-300)]"
          }`}
        >
          <span
            className="block rounded-lg"
            style={{ width: opcao.largura, aspectRatio: opcao.proporcao, background: "linear-gradient(160deg, var(--ks-brand-400), var(--ks-brand-700) 70%, #120a2a)" }}
          />
          <span className="mt-2 block text-xs font-bold text-[var(--ks-color-text-primary)]">{opcao.nome}</span>
          <span className="block text-[11px] text-[var(--ks-color-text-muted)]">{opcao.texto}</span>
        </button>
      ))}
    </div>
  );
}