/* ===========================================================================
   screen-brand-kit.jsx — Brand Kit: fonts, colors, packaging direction, voice.
   Visible to the user, and (eventually) injected into AI generation prompts.
   =========================================================================== */
const BK = window.STUDIO;

function FutureNotice({ status }) {
  if (!status) return null;
  return (
    <div style={{
      background: "var(--gold-soft)",
      border: "var(--bd) solid #ecd292",
      borderRadius: "var(--r-md)",
      padding: "16px 22px",
      marginBottom: 28,
      display: "flex",
      gap: 14,
      alignItems: "flex-start",
    }}>
      <div style={{ flex: "0 0 36px", width: 36, height: 36, borderRadius: 10, background: "var(--gold)", color: "#fff", display: "grid", placeItems: "center" }}>
        <Icon name="clock" size={18}/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 15, color: "var(--gold)", marginBottom: 4 }}>
          New direction · train the AI · do NOT use in production yet
        </div>
        <div style={{ fontSize: 13.5, color: "var(--ink)", lineHeight: 1.55 }}>
          {status.notice} Ships to retail <strong>{status.new_direction_until}</strong>.
        </div>
      </div>
    </div>
  );
}

function FontCard({ role, font }) {
  if (!font) return null;
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "32px 28px", background: "var(--paper-2)", borderBottom: "var(--bd) solid var(--line)" }}>
        <div style={{ fontFamily: font.fallback_stack || "system-ui", fontWeight: font.weight || 700, fontSize: role === "display" ? 64 : 32, lineHeight: 1, letterSpacing: role === "display" ? "-0.02em" : "-0.01em", color: "var(--ink)" }}>
          {role === "display" ? "SuperMush" : "Daily Creatine Gummies"}
        </div>
      </div>
      <div style={{ padding: "16px 22px" }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-faint)", fontWeight: 700, marginBottom: 4 }}>{role === "display" ? "Display / logo" : "Body / supporting"}</div>
        <div style={{ fontFamily: "var(--display)", fontSize: 17, fontWeight: 700, color: "var(--ink)" }}>{font.name}</div>
        <div style={{ fontSize: 12.5, color: "var(--ink-soft)", marginTop: 2 }}>{font.foundry}</div>
        <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 10, lineHeight: 1.5 }}>{font.use}</div>
        {font.notes && <div style={{ fontSize: 12, color: "var(--ink-faint)", marginTop: 8, fontStyle: "italic" }}>{font.notes}</div>}
      </div>
    </div>
  );
}

function ColorSwatch({ hex, label, sub, mood, large }) {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ height: large ? 180 : 120, background: hex }}/>
      <div style={{ padding: "14px 16px" }}>
        <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 2 }}>{sub}</div>}
        <div style={{ fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--ink-faint)", marginTop: 6, letterSpacing: "0.04em" }}>{hex.toUpperCase()}</div>
        {mood && <div style={{ fontSize: 11.5, color: "var(--accent)", marginTop: 6, fontFamily: "var(--mono)", letterSpacing: "0.03em" }}>{mood}</div>}
      </div>
    </div>
  );
}

function PackagingCard({ image, sku, brandSlug }) {
  if (!image) return null;
  const url = "brand/" + (brandSlug || "supermush") + "/brand-kit/" + image.file.replace("raw/", "raw/");
  const skuLabel = sku ? (sku.use_for || "").split(" — ")[0] : image.sku || "Product";
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ aspectRatio: "4/3", background: "#fff", display: "grid", placeItems: "center", overflow: "hidden" }}>
        <img src={url} alt="" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}/>
      </div>
      <div style={{ padding: "12px 16px", borderTop: "var(--bd) solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
        {sku && <div style={{ width: 16, height: 16, borderRadius: 4, background: sku.hex, flex: "0 0 16px" }}/>}
        <div>
          <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 13.5 }}>{skuLabel}</div>
          {sku && <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-faint)" }}>{sku.hex && sku.hex.toUpperCase()}</div>}
        </div>
        <span style={{ marginLeft: "auto", padding: "3px 9px", background: "var(--gold-soft)", color: "var(--gold)", fontSize: 10, fontFamily: "var(--mono)", fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase", borderRadius: 999 }}>Future</span>
      </div>
    </div>
  );
}

function VoiceCard({ kit }) {
  if (!kit || !kit.voice_and_tone) return null;
  const v = kit.voice_and_tone;
  return (
    <div className="card card-pad">
      <div className="section-label">Positioning</div>
      <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink)", margin: "6px 0 18px" }}>{v.positioning}</div>
      <div className="section-label" style={{ marginTop: 16 }}>Differentiators</div>
      <ul style={{ margin: "8px 0 0", paddingLeft: 18, fontSize: 13.5, color: "var(--ink)", lineHeight: 1.6 }}>
        {(v.differentiators || []).map((d, i) => <li key={i} style={{ marginBottom: 4 }}>{d}</li>)}
      </ul>
    </div>
  );
}

function PersonasCard({ kit }) {
  if (!kit || !kit.voice_and_tone || !kit.voice_and_tone.sub_personas) return null;
  const p = kit.voice_and_tone.sub_personas;
  return (
    <div className="card card-pad">
      <div className="section-label">Sub-persona ownership</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 12 }}>
        <div>
          <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 14, color: "var(--ink)", marginBottom: 8 }}>Alli</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {(p.alli_owned || []).map((x, i) => <Chip key={i} tone="ghost">{x}</Chip>)}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 14, color: "var(--ink)", marginBottom: 8 }}>Owner</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {(p.owner_owned || []).map((x, i) => <Chip key={i} tone="ghost">{x}</Chip>)}
          </div>
        </div>
      </div>
    </div>
  );
}

function BrandKitPage({ store }) {
  const kit = BK.brand_kit;
  if (!kit) {
    return (
      <div className="content">
        <Empty icon="sparkle" title="No brand kit yet" desc="Upload brand guidelines, fonts, and packaging direction and they'll show up here."/>
      </div>
    );
  }
  const slug = (BK.brand && BK.brand.slug) || "supermush";
  const skus = (kit.palette && kit.palette.skus) || {};
  const skuKeys = Object.keys(skus);

  return (
    <div className="content">
      <div className="page-head">
        <div className="eyebrow"><Icon name="sparkle" size={13}/> Brand kit</div>
        <h1 className="page-title sm">Visual & voice guidelines</h1>
        <p className="page-desc">The source of truth for SuperMush — colors, fonts, packaging direction, positioning. Everything the studio generates pulls from here.</p>
      </div>

      <FutureNotice status={kit.status}/>

      {kit.fonts && (
        <div style={{ marginBottom: 36 }}>
          <div className="section-label" style={{ marginBottom: 14 }}>Typography</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            <FontCard role="display" font={kit.fonts.display}/>
            <FontCard role="body" font={kit.fonts.body}/>
          </div>
        </div>
      )}

      {kit.palette && (
        <div style={{ marginBottom: 36 }}>
          <div className="section-label" style={{ marginBottom: 14 }}>Color palette</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 14, marginBottom: 14 }}>
            <ColorSwatch hex={kit.palette.cream} label="Cream / Yellow" sub="Universal type + callouts on every SKU" large/>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 14 }}>
            {skuKeys.map((k) => {
              const s = skus[k];
              return <ColorSwatch key={k} hex={s.hex} label={s.use_for ? s.use_for.split(" — ")[0] : k} sub={s.name} mood={s.mood}/>;
            })}
          </div>
        </div>
      )}

      {kit.assets && kit.assets.packaging_images && kit.assets.packaging_images.length > 0 && (
        <div style={{ marginBottom: 36 }}>
          <div className="section-label" style={{ marginBottom: 14 }}>Packaging direction · {kit.assets.packaging_images.length} SKUs</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
            {kit.assets.packaging_images.map((img, i) => (
              <PackagingCard key={i} image={img} sku={skus[img.sku]} brandSlug={slug}/>
            ))}
          </div>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 36 }}>
        <VoiceCard kit={kit}/>
        <PersonasCard kit={kit}/>
      </div>

      {kit.content_principles && kit.content_principles.length > 0 && (
        <div className="card card-pad" style={{ marginBottom: 36 }}>
          <div className="section-label">Content principles · the AI follows these</div>
          <ul style={{ margin: "10px 0 0", paddingLeft: 20, fontSize: 13.5, color: "var(--ink)", lineHeight: 1.65 }}>
            {kit.content_principles.map((p, i) => <li key={i} style={{ marginBottom: 8 }}>{p}</li>)}
          </ul>
        </div>
      )}

      {kit.guideline_urls && (
        <div className="card card-pad" style={{ marginBottom: 24 }}>
          <div className="section-label">Source guideline docs</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10 }}>
            {Object.entries(kit.guideline_urls).map(([k, url]) => (
              <a key={k} href={url} target="_blank" rel="noopener" className="btn ghost sm" style={{ textDecoration: "none", justifyContent: "flex-start" }}>
                <Icon name="arrow" size={12}/> {k.replace(/_/g, " ")} →
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BrandKitPage, FontCard, ColorSwatch, PackagingCard });