"use client";

import { Gift, Loader2, Printer, Signpost, Sparkles, Wand2, X } from "lucide-react";
import { MODELOS_PRONTOS, type ChaveDoModelo } from "@/lib/modelos-da-pagina-inicial";

/*
  A janela dos modelos prontos da página inicial. Tocou num modelo, o editor
  pede confirmação e troca o RASCUNHO (nunca publica sozinho).
*/

const DESENHO: Record<ChaveDoModelo, { Icone: typeof Printer; fundo: string }> = {
  grafica_rapida: { Icone: Printer, fundo: "linear-gradient(135deg,#7346e8,#4c1fc2)" },
  brindes_corporativos: { Icone: Gift, fundo: "linear-gradient(135deg,#f97316,#db2777)" },
  comunicacao_visual: { Icone: Signpost, fundo: "linear-gradient(135deg,#0ea5e9,#2563eb)" },
  personalizados: { Icone: Sparkles, fundo: "linear-gradient(135deg,#10b981,#0f766e)" },
};

export function JanelaDosModelos({ carregando, aoEscolher, aoFechar }: { carregando: ChaveDoModelo | null; aoEscolher: (chave: ChaveDoModelo) => void; aoFechar: () => void }) {
  return (
    <div className="fixed inset-0 z-[95] flex items-end justify-center sm:items-center" role="dialog" aria-modal="true" aria-label="Modelos prontos" data-editor="modelos">
      <button type="button" aria-label="Fechar" className="absolute inset-0 bg-[rgba(12,8,24,0.5)]" onClick={aoFechar} />
      <div className="relative w-full max-w-[640px] overflow-hidden rounded-t-[26px] bg-[var(--ks-color-bg-elevated)] shadow-[var(--ks-shadow-overlay)] sm:rounded-[24px]">
        <div className="flex items-start gap-3 px-6 pb-2 pt-5">
          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white" style={{ background: "linear-gradient(135deg,#7346e8,#5228bd)" }}>
            <Wand2 size={19} />
          </span>
          <div className="min-w-0 flex-1">
            <p className="text-[16px] font-extrabold text-[var(--ks-color-text-primary)]">Modelos prontos</p>
            <p className="mt-0.5 text-[12.5px] leading-5 text-[var(--ks-color-text-soft)]">
              Um toque monta a página com as categorias, os produtos, os banners e o cupom da sua loja. Vira o rascunho: você mexe e publica quando quiser.
            </p>
          </div>
          <button type="button" aria-label="Fechar" onClick={aoFechar} className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]">
            <X size={17} />
          </button>
        </div>
        <div className="grid gap-2.5 px-6 pb-6 pt-3 sm:grid-cols-2">
          {MODELOS_PRONTOS.map((modelo) => {
            const { Icone, fundo } = DESENHO[modelo.chave];
            const este = carregando === modelo.chave;
            return (
              <button
                key={modelo.chave}
                type="button"
                disabled={Boolean(carregando)}
                onClick={() => aoEscolher(modelo.chave)}
                className="group flex items-start gap-3 rounded-2xl border border-[var(--ks-color-border-subtle)] p-3.5 text-left transition hover:-translate-y-0.5 hover:border-[var(--ks-color-primary)] hover:shadow-[0_14px_30px_-18px_rgba(91,47,214,0.55)] disabled:opacity-60"
              >
                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] text-white shadow-md" style={{ background: fundo }}>
                  {este ? <Loader2 size={19} className="animate-spin" /> : <Icone size={20} />}
                </span>
                <span className="min-w-0">
                  <span className="block text-[13.5px] font-extrabold text-[var(--ks-color-text-primary)] group-hover:text-[var(--ks-color-primary)]">{modelo.nome}</span>
                  <span className="mt-0.5 block text-[11.5px] leading-[1.45] text-[var(--ks-color-text-soft)]">{modelo.resumo}</span>
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}