// Screen 4 — License configuration
const License = ({ onGoTo }) => {
  const [allowed, setAllowed] = React.useState({
    solo: true, partnered: true, selfInsert: false, custom: true,
  });
  const [ceiling, setCeiling] = React.useState("Topless");
  const [creatorBlocks, setCreatorBlocks] = React.useState([
    "School settings",
    "Specific clothing brands",
    "Roleplay involving family relationships",
    "Religious garments",
  ]);
  const [newBlock, setNewBlock] = React.useState("");
  const [distribution, setDistribution] = React.useState({
    publicGallery: true, subscriberGallery: true,
  });
  const [downloads, setDownloads] = React.useState("Watermarked, paid tier only");
  const [external, setExternal] = React.useState("Blocked");
  const [collab, setCollab] = React.useState("approved");
  const [showRevokeConfirm, setShowRevokeConfirm] = React.useState(false);

  const PLATFORM_BLOCKS = [
    "Minors",
    "Age-ambiguous content",
    "Public figures",
    "Third-party uploads",
    "Nonconsent scenarios",
  ];

  const ALLOWED_ROWS = [
    { k: "solo",       label: "Solo content",                          hint: "Solo portraits, scenes, and self-insert restricted to you." },
    { k: "partnered",  label: "Partnered with verified collaborators", hint: "Two-person scenes only with creators on your approved-collaborators list." },
    { k: "selfInsert", label: "Fan self-insert",                       hint: "Subscribers appear in the scene with you. Off-platform faces are blocked." },
    { k: "custom",     label: "Custom prompt requests",                hint: "Subscribers can write open-ended prompts. Each one comes to your queue before generation." },
  ];

  const SectionBlock = ({ num, title, hint, children, rightHint }) => (
    <div style={{
      borderTop: "1px solid var(--lk-border)", paddingTop: 32, marginTop: 32,
      display: "grid", gridTemplateColumns: "240px 1fr", gap: 40,
    }}>
      <div>
        <span style={{ font: "600 11px/1 var(--font-mono)", color: "var(--lk-terracotta)", letterSpacing: "0.04em" }}>{num}</span>
        <h2 style={{ font: "600 18px/1.3 var(--font-sans)", color: "var(--lk-navy)", margin: "10px 0 8px" }}>{title}</h2>
        <p style={{ font: "400 13px/1.6 var(--font-sans)", color: "var(--lk-muted)", margin: 0 }}>{hint}</p>
        {rightHint && <p style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)", margin: "10px 0 0", fontStyle: "italic" }}>{rightHint}</p>}
      </div>
      <div>{children}</div>
    </div>
  );

  return (
    <div>
      <PageHeader
        eyebrow="License · v18"
        title="License configuration."
        subtitle="The contract between you and your subscribers. Editable any time. Changes apply to new submissions only — outputs already approved keep the rules they were licensed under."
        actions={
          <>
            <Button variant="ghost" icon="eye" onClick={() => onGoTo("fan")}>Preview as subscriber</Button>
            <Button variant="primary" icon="check">Save changes</Button>
          </>
        }
      />

      {/* License status */}
      <div style={{
        border: "1px solid var(--lk-border)", borderRadius: 6, background: "#fff", padding: 24,
        display: "flex", alignItems: "center", gap: 24,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 999, background: "var(--lk-success-bg)",
          display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
        }}>
          <i data-lucide="shield-check" style={{ width: 20, height: 20, color: "var(--lk-success)" }}></i>
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ font: "600 17px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>License is active</span>
            <Chip variant="approved">Active</Chip>
          </div>
          <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
            Created Mar 14, 2026 · Last edited 3 days ago by you · 247 subscribers under this version
          </span>
        </div>
        <Button variant="secondary" icon="pause" style={{ color: "var(--lk-terracotta)", borderColor: "var(--lk-terracotta)" }}>
          Pause license
        </Button>
      </div>

      {/* 1 — Allowed categories */}
      <SectionBlock num="01 — ALLOWED" title="Content categories" hint="Toggle the broad shapes of what your model is licensed to produce. Refine details in blocks 03–04 below.">
        <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff" }}>
          {ALLOWED_ROWS.map((row, i) => (
            <div key={row.k} style={{
              padding: "16px 20px", display: "flex", gap: 20, alignItems: "flex-start",
              borderTop: i ? "1px solid var(--lk-border)" : "none",
            }}>
              <div style={{ flex: 1 }}>
                <span style={{ font: "500 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{row.label}</span>
                <span style={{ display: "block", font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)", marginTop: 2 }}>{row.hint}</span>
              </div>
              <Toggle checked={allowed[row.k]} onChange={v => setAllowed(a => ({ ...a, [row.k]: v }))} label="" />
            </div>
          ))}
        </div>
      </SectionBlock>

      {/* 2 — Explicitness ceiling */}
      <SectionBlock num="02 — CEILING" title="Explicitness ceiling" hint="The maximum allowed across this license. Individual generations may be more conservative based on subscriber tier.">
        <div style={{ display: "inline-flex", border: "1px solid var(--border-strong)", borderRadius: 4, overflow: "hidden", background: "#fff" }}>
          {["Suggestive", "Topless", "Full nudity"].map((t, i) => (
            <button key={t} onClick={() => setCeiling(t)} style={{
              all: "unset", cursor: "pointer", padding: "10px 22px",
              font: "500 13px/1 var(--font-sans)",
              background: ceiling === t ? "var(--lk-navy)" : "#fff",
              color: ceiling === t ? "#fff" : "var(--lk-navy)",
              borderLeft: i ? "1px solid var(--lk-border)" : "none",
            }}>{t}</button>
          ))}
        </div>
        <p style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)", margin: "12px 0 0" }}>
          Currently set to <strong style={{ color: "var(--lk-navy)", fontWeight: 600 }}>{ceiling}</strong>. Outputs above this ceiling are rejected before reaching your queue.
        </p>
      </SectionBlock>

      {/* 3 — Platform blocks */}
      <SectionBlock num="03 — PLATFORM" title="Always blocked" hint="Platform floor. These cannot be enabled by anyone — creator, subscriber, or staff.">
        <div style={{
          border: "1px solid var(--lk-border)", borderRadius: 4, background: "var(--lk-tint)",
          padding: "16px 20px", display: "flex", flexDirection: "column", gap: 10,
        }}>
          {PLATFORM_BLOCKS.map(t => (
            <div key={t} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <i data-lucide="lock" style={{ width: 14, height: 14, color: "var(--lk-error)" }}></i>
              <span style={{ font: "500 13px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{t}</span>
              <span style={{ flex: 1 }}></span>
              <span style={{
                font: "600 10px/1 var(--font-mono)", letterSpacing: "0.06em", textTransform: "uppercase",
                color: "var(--lk-muted)", padding: "4px 8px", border: "1px solid var(--lk-border)", borderRadius: 999,
              }}>Platform · not editable</span>
            </div>
          ))}
        </div>
      </SectionBlock>

      {/* 4 — Creator blocks */}
      <SectionBlock num="04 — YOUR BLOCKS" title="Things you've blocked" hint="Add categories, settings, brands, or scenarios you don't want your model to produce. Removed any time.">
        <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff" }}>
          {creatorBlocks.map((t, i) => (
            <div key={t} style={{
              padding: "12px 16px", display: "flex", alignItems: "center", gap: 12,
              borderTop: i ? "1px solid var(--lk-border)" : "none",
            }}>
              <i data-lucide="x-circle" style={{ width: 14, height: 14, color: "var(--lk-error)" }}></i>
              <span style={{ flex: 1, font: "400 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{t}</span>
              <button onClick={() => setCreatorBlocks(b => b.filter(x => x !== t))} style={{
                all: "unset", cursor: "pointer", color: "var(--lk-muted)",
                width: 24, height: 24, borderRadius: 4,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}
              onMouseOver={e => e.currentTarget.style.background = "rgba(26,31,54,0.04)"}
              onMouseOut={e => e.currentTarget.style.background = "transparent"}>
                <i data-lucide="x" style={{ width: 14, height: 14 }}></i>
              </button>
            </div>
          ))}
          <div style={{
            padding: "12px 16px", display: "flex", gap: 8, borderTop: "1px solid var(--lk-border)",
            background: "var(--lk-tint)",
          }}>
            <input value={newBlock} onChange={e => setNewBlock(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter" && newBlock) { setCreatorBlocks(b => [...b, newBlock]); setNewBlock(""); }}}
              placeholder="Add a category, setting, brand, or scenario…"
              style={{
                flex: 1, height: 32, padding: "0 12px", border: "1px solid var(--lk-border)", borderRadius: 2,
                font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)", background: "#fff", outline: "none",
              }}/>
            <button onClick={() => { if (newBlock) { setCreatorBlocks(b => [...b, newBlock]); setNewBlock(""); }}}
              disabled={!newBlock} style={{
              all: "unset", cursor: newBlock ? "pointer" : "not-allowed",
              height: 32, padding: "0 14px", borderRadius: 4,
              background: newBlock ? "#fff" : "var(--lk-tint)",
              border: "1px solid var(--border-strong)",
              color: newBlock ? "var(--lk-navy)" : "var(--lk-muted)",
              font: "500 13px/1 var(--font-sans)",
            }}>Add category</button>
          </div>
        </div>
      </SectionBlock>

      {/* 5 — Distribution */}
      <SectionBlock num="05 — DISTRIBUTION" title="Where outputs can go" hint="Once approved, where can the image be seen and how. Distribution rules apply per-output and travel with the license.">
        <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff" }}>
          {[
            { type: "toggle", k: "publicGallery",     label: "Public gallery",     hint: "Approved outputs appear on your /marawest profile, watermarked. Approval still required per output." },
            { type: "toggle", k: "subscriberGallery", label: "Subscriber-only gallery", hint: "Outputs visible only to active paid subscribers." },
            { type: "select", state: downloads, set: setDownloads, label: "Downloads", hint: "Whether subscribers can download approved outputs to a local file.", options: ["Off", "Watermarked, paid tier only", "Watermarked, all subscribers"] },
            { type: "select", state: external,  set: setExternal,  label: "External sharing", hint: "Whether outputs can leave Likeness — e.g. to social media, link sharing.", options: ["Blocked", "Watermarked link, expires 24 h", "Subscriber chooses"] },
          ].map((row, i) => (
            <div key={row.label} style={{
              padding: "16px 20px", display: "flex", gap: 20, alignItems: "center",
              borderTop: i ? "1px solid var(--lk-border)" : "none",
            }}>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ font: "500 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{row.label}</span>
                <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>{row.hint}</span>
              </div>
              {row.type === "toggle" ? (
                <Toggle checked={distribution[row.k]} onChange={v => setDistribution(d => ({ ...d, [row.k]: v }))} label="" />
              ) : (
                <select value={row.state} onChange={e => row.set(e.target.value)} style={{
                  height: 36, padding: "0 12px", border: "1px solid var(--border-strong)", borderRadius: 2,
                  font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)", background: "#fff", outline: "none",
                  minWidth: 240,
                }}>
                  {row.options.map(o => <option key={o}>{o}</option>)}
                </select>
              )}
            </div>
          ))}
        </div>
      </SectionBlock>

      {/* 6 — Collaboration */}
      <SectionBlock num="06 — COLLAB" title="Collaboration permissions" hint="Whether your model can appear in scenes with other verified Likeness creators.">
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { v: "closed",   label: "Closed",                 hint: "No collaborations. Your model is solo-only." },
            { v: "approved", label: "Approved creators only", hint: "3 collaborators currently approved · Manage collaborators →" },
            { v: "open",     label: "Open to all verified creators", hint: "Any verified Likeness creator can request a collaboration. You approve each request individually." },
          ].map(opt => (
            <label key={opt.v} style={{
              display: "flex", gap: 14, padding: 16, border: "1px solid " + (collab === opt.v ? "var(--lk-terracotta)" : "var(--lk-border)"),
              borderRadius: 4, background: collab === opt.v ? "rgba(199,111,61,0.04)" : "#fff", cursor: "pointer",
            }}>
              <span style={{
                flexShrink: 0, marginTop: 2, width: 16, height: 16, borderRadius: 999,
                border: "2px solid " + (collab === opt.v ? "var(--lk-terracotta)" : "var(--border-strong)"),
                background: "#fff",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                {collab === opt.v && <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--lk-terracotta)" }}></span>}
              </span>
              <input type="radio" name="collab" checked={collab === opt.v} onChange={() => setCollab(opt.v)} style={{ display: "none" }}/>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ font: "500 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{opt.label}</span>
                <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>{opt.hint}</span>
              </div>
            </label>
          ))}
        </div>
      </SectionBlock>

      {/* 7 — Revocation */}
      <SectionBlock num="07 — REVOCATION" title="Revoking the license" hint="What happens if you decide to stop. Read this in full before revoking.">
        <div style={{
          border: "1px solid var(--lk-border)", borderRadius: 4, padding: 24, background: "#fff",
          display: "flex", flexDirection: "column", gap: 18,
        }}>
          <p style={{ font: "400 14px/1.65 var(--font-sans)", color: "var(--lk-navy)", margin: 0 }}>
            If you revoke this license, all generation will stop immediately. Your public gallery will go offline. Subscribers will lose access to your AI content. We will pursue takedowns of revoked content found off-platform.
          </p>
          <p style={{ font: "400 14px/1.65 var(--font-sans)", color: "var(--lk-navy)", margin: 0 }}>
            Revocation cannot recover content already downloaded. We will help with takedowns, but we cannot delete files from anyone's device.
          </p>
          {!showRevokeConfirm ? (
            <button onClick={() => setShowRevokeConfirm(true)} style={{
              all: "unset", cursor: "pointer", alignSelf: "flex-start",
              height: 36, padding: "0 16px", borderRadius: 4,
              background: "#fff", border: "1px solid var(--lk-border)",
              color: "var(--lk-error)", font: "500 13px/1 var(--font-sans)",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}
            onMouseOver={e => { e.currentTarget.style.background = "var(--lk-error-bg)"; e.currentTarget.style.borderColor = "var(--lk-error)"; }}
            onMouseOut={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.borderColor = "var(--lk-border)"; }}>
              <i data-lucide="x-octagon" style={{ width: 14, height: 14 }}></i>
              Revoke license
            </button>
          ) : (
            <div style={{
              border: "1px solid var(--lk-error)", background: "var(--lk-error-bg)",
              borderRadius: 4, padding: 16, display: "flex", flexDirection: "column", gap: 12,
            }}>
              <span style={{ font: "600 14px/1.3 var(--font-sans)", color: "var(--lk-error)" }}>This is a real revocation.</span>
              <span style={{ font: "400 13px/1.6 var(--font-sans)", color: "var(--lk-navy)" }}>
                247 subscribers will lose access immediately. Earnings stop. To confirm, type <strong style={{ fontFamily: "var(--font-mono)" }}>revoke</strong>.
              </span>
              <div style={{ display: "flex", gap: 8 }}>
                <input placeholder="Type 'revoke' to confirm" style={{
                  flex: 1, height: 36, padding: "0 12px", border: "1px solid var(--border-strong)", borderRadius: 2,
                  font: "400 13px/1 var(--font-mono)", background: "#fff", color: "var(--lk-navy)", outline: "none",
                }}/>
                <button onClick={() => setShowRevokeConfirm(false)} style={{
                  all: "unset", cursor: "pointer", height: 36, padding: "0 14px", borderRadius: 4,
                  background: "#fff", border: "1px solid var(--lk-border)", color: "var(--lk-navy)",
                  font: "500 13px/1 var(--font-sans)",
                }}>Cancel</button>
              </div>
            </div>
          )}
        </div>
      </SectionBlock>

      <div style={{
        marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--lk-border)",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
      }}>
        <span className="lk-small" style={{ fontSize: 13 }}>You have unsaved changes. Subscribers won't see them until you save.</span>
        <div style={{ display: "flex", gap: 8 }}>
          <Button variant="ghost" onClick={() => onGoTo("fan")}>Preview as subscriber</Button>
          <Button variant="primary" icon="check">Save changes</Button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { License });