/* global React, VendusAtoms */
const { I, Chip, Btn, Card, Eyebrow, SectionTitle } = window.VendusAtoms;

/* =========================================================================
   THEME DATA — palettes, font pairs, and curated combo presets.
   Each palette is a 3-stop brand spectrum: [accent, midtone, secondary].
   ========================================================================= */

const VENDUS_PALETTES = [
  { id:"sunset",   name:"Pôr do sol",  mood:"Padrão Vendus",       colors:["#F97316","#EC4899","#8B5CF6"] },
  { id:"ember",    name:"Brasa",       mood:"Quente e intenso",    colors:["#EA580C","#DB2777","#9333EA"] },
  { id:"coral",    name:"Coral",       mood:"Suave e jovem",       colors:["#FB7185","#A855F7","#6366F1"] },
  { id:"citrus",   name:"Citrus",      mood:"Energético",          colors:["#FACC15","#F97316","#E11D48"] },
  { id:"emerald",  name:"Esmeralda",   mood:"Crescimento",         colors:["#22C55E","#06B6D4","#3B82F6"] },
  { id:"aurora",   name:"Aurora",      mood:"Fresco e leve",       colors:["#4ADE80","#38BDF8","#A78BFA"] },
  { id:"geek",     name:"Geek Blue",   mood:"Sister inBrivvo",     colors:["#1D39C4","#2F54EB","#34E0A1"] },
  { id:"marine",   name:"Marinho",     mood:"Sóbrio técnico",      colors:["#0EA5E9","#6366F1","#0F172A"] },
  { id:"ruby",     name:"Rubi",        mood:"Premium",             colors:["#F43F5E","#D946EF","#8B5CF6"] },
  { id:"mint",     name:"Menta",       mood:"Calmo",               colors:["#14B8A6","#06B6D4","#4F46E5"] },
  { id:"night",    name:"Noite",       mood:"Vibrante",            colors:["#6366F1","#EC4899","#F97316"] },
  { id:"graphite", name:"Grafite",     mood:"Minimal corporativo", colors:["#F97316","#475569","#0F172A"] },
];

const VENDUS_FONT_PAIRS = [
  { id:"signal",    name:"Signal",     desc:"Padrão Vendus — geométrico humanista", body:"Barlow",              display:"Space Grotesk" },
  { id:"polido",    name:"Polido",     desc:"SaaS contemporâneo",                    body:"Plus Jakarta Sans",   display:"Space Grotesk" },
  { id:"manrope",   name:"Manrope",    desc:"Limpo e uniforme",                      body:"Manrope",             display:"Manrope" },
  { id:"tech",      name:"Tech",       desc:"Geométrico e futurista",                body:"Sora",                display:"Outfit" },
  { id:"plex",      name:"Plex",       desc:"Corporativo, dados densos",             body:"IBM Plex Sans",       display:"IBM Plex Mono" },
  { id:"geist",     name:"Geist",      desc:"Minimal moderno",                       body:"Geist",               display:"Geist Mono" },
  { id:"editorial", name:"Editorial",  desc:"Expressivo, contraste forte",           body:"Bricolage Grotesque", display:"Bricolage Grotesque" },
  { id:"dm",        name:"DM",         desc:"Neutro e elegante",                     body:"DM Sans",             display:"DM Sans" },
];

// 8 prebuilt combinations — each pairs a palette with a font family that
// complements its mood. Click "Aplicar" on the page to load both at once.
const VENDUS_PRESETS = [
  { id:"signal",    paletteId:"sunset",   fontId:"signal",    name:"Signal Vendus",  note:"Tema oficial — laranja, magenta e roxo" },
  { id:"ember",     paletteId:"ember",    fontId:"tech",      name:"Brasa Tech",     note:"Quente, bold e futurista" },
  { id:"aurora",    paletteId:"aurora",   fontId:"polido",    name:"Aurora Pro",     note:"Fresco e clean" },
  { id:"emerald",   paletteId:"emerald",  fontId:"manrope",   name:"Esmeralda",      note:"Verde — voltado a crescimento" },
  { id:"geek",      paletteId:"geek",     fontId:"plex",      name:"Geek Blue",      note:"Sóbrio, voltado a dados" },
  { id:"ruby",      paletteId:"ruby",     fontId:"editorial", name:"Rubi Editorial", note:"Premium e expressivo" },
  { id:"graphite",  paletteId:"graphite", fontId:"geist",     name:"Grafite",        note:"Minimalismo radical" },
  { id:"night",     paletteId:"night",    fontId:"dm",        name:"Noite",          note:"Vibrante, neutro e elegante" },
];

const fontStack = (fp) => `"${fp.body}", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
const displayStack = (fp) => `"${fp.display}", "${fp.body}", -apple-system, BlinkMacSystemFont, sans-serif`;

/* =========================================================================
   PREVIEW PRIMITIVES — small UI atoms drawn with INLINE styles so each card
   can preview a different palette/font side-by-side without touching the
   global CSS vars.
   ========================================================================= */

// Mini brand tile (the IN logo). Uses the palette's 3 colors as a vertical
// gradient — same recipe as the live --logo-gradient.
const MiniTile = ({ colors, size = 28, label = "IN", font }) => (
  <div style={{
    width: size, height: size, borderRadius: size * 0.28,
    background: `linear-gradient(180deg, ${colors[0]} 0%, ${colors[1]} 55%, ${colors[2]} 100%)`,
    display:"grid", placeItems:"center",
    color: "#fff", fontWeight: 800, fontSize: size * 0.36,
    fontFamily: font || "inherit",
    letterSpacing: ".04em",
    boxShadow: `0 4px 10px ${colors[1]}33`,
    flexShrink: 0,
  }}>{label}</div>
);

// Compact KPI card — used to preview "what a number looks like".
const MiniKPI = ({ label, value, delta, colors, fontDisplay, fontBody, dark = true }) => (
  <div style={{
    padding: "12px 14px", borderRadius: 12,
    background: dark ? "#0F1422" : "#FFFFFF",
    border: `1px solid ${dark ? "rgba(255,255,255,.07)" : "rgba(15,23,42,.08)"}`,
    minWidth: 140, fontFamily: fontBody,
  }}>
    <div style={{
      fontSize: 10, fontWeight: 600, letterSpacing: ".09em", textTransform: "uppercase",
      color: dark ? "#7A859A" : "#6F7A8D", fontFamily: fontDisplay,
    }}>{label}</div>
    <div style={{
      fontSize: 22, fontWeight: 700, lineHeight: 1.1, marginTop: 4,
      color: dark ? "#EAEEF8" : "#15192A", fontFamily: fontDisplay,
      letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums",
    }}>{value}</div>
    {delta && (
      <div style={{ marginTop: 4, fontSize: 11, fontWeight: 600, color: colors[0] }}>
        {delta}
      </div>
    )}
  </div>
);

// Solid CTA button styled to the palette accent.
const MiniBtn = ({ children, colors, font, ghost = false }) => (
  <span style={{
    display:"inline-flex", alignItems:"center", gap: 6,
    padding: "7px 12px", borderRadius: 8,
    background: ghost ? "transparent" : colors[0],
    color: ghost ? colors[1] : "#fff",
    border: ghost ? `1px solid ${colors[1]}55` : "1px solid transparent",
    fontFamily: font, fontWeight: 600, fontSize: 12,
    whiteSpace: "nowrap",
  }}>{children}</span>
);

// Pill chip in the secondary palette color.
const MiniChip = ({ children, color, font }) => (
  <span style={{
    display:"inline-flex", alignItems:"center", gap:4,
    padding: "3px 9px", borderRadius: 999,
    background: `${color}22`, color, border: `1px solid ${color}44`,
    fontSize: 11, fontWeight: 600, fontFamily: font,
  }}>{children}</span>
);

/* =========================================================================
   CARDS — palette, font, combo (preset).
   ========================================================================= */

const PaletteCard = ({ palette, active, onApply }) => {
  const [a, b, c] = palette.colors;
  const gradient = `linear-gradient(135deg, ${a} 0%, ${b} 55%, ${c} 100%)`;
  return (
    <div className="card card-hover" style={{
      padding: 0, overflow:"hidden",
      borderColor: active ? a : "var(--border)",
      boxShadow: active ? `0 0 0 1px ${a}, var(--shadow-2)` : "var(--shadow-1)",
      cursor:"pointer", display:"flex", flexDirection:"column",
    }} onClick={onApply}>
      {/* Gradient hero */}
      <div style={{ height: 92, background: gradient, position:"relative" }}>
        <div style={{
          position:"absolute", left: 14, top: 14,
          display:"flex", gap: 6,
        }}>
          {palette.colors.map((col, i) => (
            <div key={i} style={{
              width: 18, height: 18, borderRadius: 999,
              background: col, border: "2px solid rgba(255,255,255,.5)",
              boxShadow: "0 1px 3px rgba(0,0,0,.25)",
            }}/>
          ))}
        </div>
        {active && (
          <div style={{
            position:"absolute", right: 12, top: 12,
            background: "rgba(255,255,255,.95)", color: "#15192A",
            borderRadius: 999, padding: "3px 10px",
            fontSize: 10, fontWeight: 700, letterSpacing: ".06em",
            fontFamily:"Space Grotesk", textTransform: "uppercase",
          }}>Ativa</div>
        )}
      </div>
      {/* Meta */}
      <div style={{ padding: "12px 14px 14px", flex: 1, display:"flex", flexDirection:"column", gap: 4 }}>
        <div style={{ display:"flex", alignItems:"baseline", justifyContent:"space-between", gap: 8 }}>
          <div className="font-display" style={{ fontWeight: 700, fontSize: 15 }}>{palette.name}</div>
          <div className="text-faint" style={{ fontSize: 10.5, fontFamily:"Space Grotesk", letterSpacing:".04em" }}>{palette.mood}</div>
        </div>
        <div style={{ display:"flex", gap: 4, marginTop: 4 }}>
          {palette.colors.map((c, i) => (
            <div key={i} style={{
              flex: 1, fontSize: 9.5, fontFamily:"Space Grotesk",
              color: "var(--fg-3)", letterSpacing:".04em",
              fontVariantNumeric:"tabular-nums",
            }}>{c.toUpperCase()}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

const FontCard = ({ pair, active, onApply }) => {
  const body = fontStack(pair);
  const display = displayStack(pair);
  return (
    <div className="card card-hover" style={{
      padding: 0, overflow:"hidden",
      borderColor: active ? "var(--primary)" : "var(--border)",
      boxShadow: active ? `0 0 0 1px var(--primary), var(--shadow-2)` : "var(--shadow-1)",
      cursor:"pointer", display:"grid",
      gridTemplateColumns:"180px 1fr auto", alignItems:"center",
      gap: 0,
    }} onClick={onApply}>
      {/* Big Aa */}
      <div style={{
        height: 132, display:"grid", placeItems:"center",
        background: "linear-gradient(135deg, rgba(249,115,22,.10), rgba(139,92,246,.10))",
        borderRight: "1px solid var(--border)",
        fontFamily: display, fontWeight: 700, fontSize: 78,
        color: "var(--fg-1)", lineHeight: 1, letterSpacing: "-0.02em",
      }}>Aa</div>
      {/* Specimen */}
      <div style={{ padding: "16px 20px", display:"flex", flexDirection:"column", gap: 6, minWidth: 0 }}>
        <div style={{ display:"flex", alignItems:"baseline", gap: 10 }}>
          <span style={{ fontFamily: display, fontWeight: 700, fontSize: 19, letterSpacing:"-0.01em" }}>{pair.name}</span>
          <span style={{ fontFamily: body, fontSize: 12, color: "var(--fg-3)" }}>{pair.desc}</span>
        </div>
        <div style={{ fontFamily: display, fontSize: 24, fontWeight: 600, lineHeight: 1.1, color: "var(--fg-1)" }}>
          Sistema multicanal de vendas e estoque.
        </div>
        <div style={{ fontFamily: body, fontSize: 13, color: "var(--fg-2)", lineHeight: 1.45 }}>
          Marketplace, lojas físicas e e-commerce integrados — com fluxo de caixa, custos e margem em um só painel.
        </div>
        <div style={{ display:"flex", alignItems:"center", gap: 12, marginTop: 4 }}>
          <span style={{ fontFamily: body, fontSize: 11, color: "var(--fg-3)" }}>Corpo · {pair.body}</span>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--fg-3)" }}/>
          <span style={{ fontFamily: display, fontSize: 11, color: "var(--fg-3)", letterSpacing: ".04em" }}>Display · {pair.display}</span>
        </div>
      </div>
      {/* Apply */}
      <div style={{ padding: "0 20px" }}>
        {active ? (
          <span style={{
            display:"inline-flex", alignItems:"center", gap: 4,
            padding:"6px 12px", borderRadius: 999,
            background:"rgba(34,197,94,.15)", color:"#4ADE80",
            border:"1px solid rgba(34,197,94,.30)",
            fontSize: 11, fontWeight: 700, letterSpacing:".04em",
            fontFamily:"Space Grotesk", textTransform:"uppercase",
          }}><I name="check" size={12}/> Em uso</span>
        ) : (
          <Btn variant="outline" size="sm">Aplicar</Btn>
        )}
      </div>
    </div>
  );
};

const PresetCard = ({ preset, active, onApply }) => {
  const palette = VENDUS_PALETTES.find(p => p.id === preset.paletteId);
  const fp      = VENDUS_FONT_PAIRS.find(f => f.id === preset.fontId);
  const [a, b, c] = palette.colors;
  const body = fontStack(fp), display = displayStack(fp);

  return (
    <div className="card card-hover" style={{
      padding: 0, overflow:"hidden",
      borderColor: active ? a : "var(--border)",
      boxShadow: active ? `0 0 0 1px ${a}, var(--shadow-2)` : "var(--shadow-2)",
      cursor:"pointer", display:"flex", flexDirection:"column",
    }} onClick={onApply}>
      {/* Hero */}
      <div style={{
        height: 110, position:"relative", overflow:"hidden",
        background: `linear-gradient(135deg, ${a} 0%, ${b} 55%, ${c} 100%)`,
      }}>
        {/* Radial bloom */}
        <div style={{
          position:"absolute", inset:0,
          background:"radial-gradient(circle at 70% 30%, rgba(255,255,255,.30), transparent 55%)",
          mixBlendMode:"overlay",
        }}/>
        <div style={{
          position:"absolute", left: 16, top: 16,
          display:"flex", alignItems:"center", gap: 10,
        }}>
          <MiniTile colors={palette.colors} size={36} label="IN" font={display}/>
          <div>
            <div style={{ fontFamily: display, fontSize: 17, fontWeight: 700, color:"#fff", letterSpacing:"-0.01em", lineHeight: 1 }}>{preset.name}</div>
            <div style={{ fontFamily: body, fontSize: 11.5, color:"rgba(255,255,255,.85)", marginTop: 4 }}>{fp.name} · {palette.name}</div>
          </div>
        </div>
        {active && (
          <div style={{
            position:"absolute", right: 14, top: 14,
            background: "rgba(255,255,255,.96)", color: "#15192A",
            borderRadius: 999, padding: "4px 10px",
            fontSize: 10, fontWeight: 700, letterSpacing: ".06em",
            fontFamily:"Space Grotesk", textTransform: "uppercase",
            display:"flex", alignItems:"center", gap: 4,
          }}><I name="check" size={11}/> Em uso</div>
        )}
      </div>
      {/* Preview UI */}
      <div style={{ padding: "16px 16px 14px", flex: 1, display:"flex", flexDirection:"column", gap: 12, fontFamily: body }}>
        <div style={{ display:"flex", gap: 10 }}>
          <MiniKPI label="Faturamento" value="R$ 84,2k" delta="+12,4%"
            colors={palette.colors} fontDisplay={display} fontBody={body}/>
          <MiniKPI label="Pedidos" value="312"
            colors={palette.colors} fontDisplay={display} fontBody={body}/>
        </div>
        <div style={{ display:"flex", alignItems:"center", gap: 8, flexWrap:"wrap" }}>
          <MiniBtn colors={palette.colors} font={body}>Nova venda</MiniBtn>
          <MiniChip color={b} font={body}>Pro</MiniChip>
          <MiniChip color={c} font={body}>4 lojas</MiniChip>
        </div>
        <div style={{ fontSize: 11.5, color:"var(--fg-2)", lineHeight: 1.5, fontFamily: body }}>{preset.note}</div>
      </div>
    </div>
  );
};

/* =========================================================================
   PAGE
   ========================================================================= */

function ThemesPage({ tweaks, setTweak, embedded = false }) {
  const currentPalette = VENDUS_PALETTES.find(p => JSON.stringify(p.colors) === JSON.stringify(tweaks.palette))
    || VENDUS_PALETTES[0];
  const currentFont = VENDUS_FONT_PAIRS.find(f => f.id === tweaks.fontPair) || VENDUS_FONT_PAIRS[0];

  const applyPalette = (p) => setTweak("palette", p.colors);
  const applyFont    = (f) => setTweak("fontPair", f.id);
  const applyPreset  = (preset) => {
    const p = VENDUS_PALETTES.find(x => x.id === preset.paletteId);
    setTweak({ palette: p.colors, fontPair: preset.fontId });
  };

  const isCurrentPreset = (preset) =>
    preset.paletteId === currentPalette.id && preset.fontId === currentFont.id;

  const body = (
    <>
      {/* Inline header — only when embedded (Settings already shows page title) */}
      {embedded && (
        <div style={{ display:"flex", alignItems:"flex-end", justifyContent:"space-between", marginBottom: 18 }}>
          <div>
            <h2 className="section-title" style={{ fontSize: 18 }}>Aparência</h2>
            <div className="text-muted" style={{ fontSize: 12.5, marginTop: 2 }}>
              Personalize a identidade visual do Vendus. Aplique um combo pronto ou misture livremente.
            </div>
          </div>
          <Btn variant="outline" size="sm" onClick={() => applyPreset(VENDUS_PRESETS[0])}>
            <I name="rotate-ccw" size={13}/> Restaurar padrão
          </Btn>
        </div>
      )}
      {!embedded && (
        <div className="page-header">
          <div>
            <Eyebrow>Aparência</Eyebrow>
            <div className="page-title" style={{ marginTop: 6 }}>Temas, paletas e tipografia</div>
            <div className="page-sub">Personalize a identidade visual do Vendus. Aplique um combo pronto ou misture livremente.</div>
          </div>
          <div style={{ display:"flex", gap: 8 }}>
            <Btn variant="outline" size="sm" onClick={() => applyPreset(VENDUS_PRESETS[0])}>
              <I name="rotate-ccw" size={13}/> Restaurar padrão
            </Btn>
          </div>
        </div>
      )}

      {/* Current theme summary */}
      <div className="card" style={{
        padding: 0, marginBottom: 28, overflow:"hidden",
        display:"grid", gridTemplateColumns:"1fr 1fr",
      }}>
        <div style={{
          padding: "24px 28px",
          background: `linear-gradient(135deg, ${currentPalette.colors[0]}22 0%, ${currentPalette.colors[2]}22 100%)`,
          borderRight: "1px solid var(--border)",
        }}>
          <Eyebrow>Tema atual</Eyebrow>
          <div className="font-display" style={{ fontSize: 28, fontWeight: 700, letterSpacing:"-0.01em", marginTop: 8 }}>
            {currentPalette.name} · {currentFont.name}
          </div>
          <div className="text-muted" style={{ fontSize: 13, marginTop: 4 }}>
            {currentPalette.mood} — {currentFont.desc.toLowerCase()}
          </div>
          <div style={{ display:"flex", gap: 6, marginTop: 18 }}>
            {currentPalette.colors.map((c, i) => (
              <div key={i} style={{
                padding: "6px 10px", borderRadius: 8,
                background: `${c}1f`, color: c, border: `1px solid ${c}44`,
                fontSize: 11, fontWeight: 700, fontFamily:"Space Grotesk",
                letterSpacing:".04em", fontVariantNumeric:"tabular-nums",
              }}>{c.toUpperCase()}</div>
            ))}
          </div>
        </div>
        <div style={{ padding: "24px 28px", display:"flex", flexDirection:"column", gap: 14 }}>
          <Eyebrow>Especimen</Eyebrow>
          <div style={{ fontFamily: displayStack(currentFont), fontSize: 38, fontWeight: 700, letterSpacing:"-0.01em", lineHeight: 1 }}>
            Aa Bb Cc 123
          </div>
          <div style={{ fontFamily: fontStack(currentFont), fontSize: 13.5, color:"var(--fg-2)", lineHeight: 1.55 }}>
            Sistema completo de gestão para vendedores multicanal — vendas, estoque, custos, fluxo de caixa, fornecedores e relatórios.
          </div>
        </div>
      </div>

      {/* PRESETS */}
      <SectionTitle title="Combos prontos"
        sub="Cada combo aplica paleta e tipografia juntas — clique para usar."/>
      <div style={{
        display:"grid",
        gridTemplateColumns:"repeat(auto-fill, minmax(320px, 1fr))",
        gap: 14, marginBottom: 36,
      }}>
        {VENDUS_PRESETS.map(p => (
          <PresetCard key={p.id} preset={p}
            active={isCurrentPreset(p)}
            onApply={() => applyPreset(p)}/>
        ))}
      </div>

      {/* PALETTES */}
      <SectionTitle title="Paletas"
        sub="A primeira cor é o accent primário; as outras compõem o gradiente do logo e os secundários."/>
      <div style={{
        display:"grid",
        gridTemplateColumns:"repeat(auto-fill, minmax(230px, 1fr))",
        gap: 12, marginBottom: 36,
      }}>
        {VENDUS_PALETTES.map(p => (
          <PaletteCard key={p.id} palette={p}
            active={p.id === currentPalette.id}
            onApply={() => applyPalette(p)}/>
        ))}
      </div>

      {/* FONT PAIRS */}
      <SectionTitle title="Tipografia"
        sub="Cada par combina uma fonte de corpo com uma de display. Aplica em todo o app."/>
      <div style={{ display:"flex", flexDirection:"column", gap: 10, marginBottom: 24 }}>
        {VENDUS_FONT_PAIRS.map(f => (
          <FontCard key={f.id} pair={f}
            active={f.id === currentFont.id}
            onApply={() => applyFont(f)}/>
        ))}
      </div>

      {/* Footer hint */}
      <div className="banner" style={{ marginTop: 8 }}>
        <I name="info" size={16} style={{ color:"var(--primary)" }}/>
        <div style={{ fontSize: 12.5, color:"var(--fg-2)", lineHeight: 1.5 }}>
          Você também pode trocar paleta e fonte pelo painel de <b>Tweaks</b> (toolbar superior) — mudanças são salvas automaticamente.
        </div>
      </div>
    </>
  );

  if (embedded) return body;
  return <div className="page fade-in">{body}</div>;
}

window.VendusThemes = {
  VENDUS_PALETTES, VENDUS_FONT_PAIRS, VENDUS_PRESETS,
  fontStack, displayStack,
  ThemesPage,
};