// Screen 3 — Creator dashboard home
const Dashboard = ({ onGoTo, pendingCount }) => {
  const recent = [
    { who: "@quietfan_22",     what: "submitted a generation for review",     time: "12 min ago", icon: "inbox", tone: "warning" },
    { who: "+3 subscribers",   what: "joined this morning",                    time: "2 h ago",    icon: "user-plus", tone: "neutral" },
    { who: "@late_to_the_party", what: "tipped $5 with a submission",          time: "3 h ago",    icon: "coins", tone: "neutral" },
    { who: "@subscribed_reader", what: "approved a generation for the public gallery", time: "4 h ago", icon: "check-circle-2", tone: "success" },
    { who: "You",              what: "revoked LIC-2025-04781",                 time: "yesterday",  icon: "x-circle", tone: "error" },
    { who: "Likeness",         what: "completed monthly model integrity check", time: "2 days ago",icon: "shield-check", tone: "neutral" },
  ];
  const tone = (t) => t === "success" ? "var(--lk-success)" : t === "warning" ? "var(--lk-warning)" : t === "error" ? "var(--lk-error)" : "var(--lk-muted)";

  return (
    <div>
      <PageHeader
        eyebrow="Tuesday · May 8"
        title="Welcome back, Mara."
        subtitle={`${pendingCount} fan submissions are waiting for your review. Oldest is 5 hours old.`}
        actions={
          <>
            <Button variant="secondary" icon="upload">Upload media</Button>
            <Button variant="primary" icon="inbox" onClick={() => onGoTo("approval")}>
              Review submissions
            </Button>
          </>
        }
      />

      {/* KPI tiles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 32 }}>
        <Stat label="Active subscribers" value="247" delta="+8 this week" deltaTone="up" />
        <Stat label="Earnings · May" value="$4,820" delta="+12% vs Apr" deltaTone="up" />
        <Stat label="Pending approvals" value={String(pendingCount)} delta="Oldest 5 h" deltaTone="neutral" />
        <div style={{
          border: "1px solid var(--lk-border)", borderRadius: 4, padding: 20,
          display: "flex", flexDirection: "column", gap: 6, background: "#fff",
        }}>
          <span style={{ font: "600 11px/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--lk-muted)" }}>License status</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 2 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--lk-success)" }}></span>
            <span style={{ font: "600 24px/1.15 var(--font-sans)", color: "var(--lk-navy)", letterSpacing: "-0.02em" }}>Active</span>
          </span>
          <a onClick={() => onGoTo("license")} style={{ font: "500 12px/1 var(--font-sans)", color: "var(--lk-terracotta)", cursor: "pointer" }}>
            v18 · Edit license →
          </a>
        </div>
      </div>

      {/* Two-column main */}
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 28, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <Section title="Needs your attention">
            <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff" }}>
              {[
                { icon: "inbox", iconColor: "var(--lk-warning)", title: `${pendingCount} fan submissions waiting for approval`, body: "Oldest is 5 hours old. Three include a tip.", action: "Review queue", to: "approval" },
                { icon: "message-square-plus", iconColor: "var(--lk-terracotta)", title: "1 subscriber requested a custom prompt category", body: "@quietfan_22 asked to add 'rooftop golden hour' to your allowed categories.", action: "Decide", to: "license" },
                { icon: "eye",   iconColor: "var(--lk-muted)",  title: "Your license was viewed 32 times this week", body: "Subscribers are reading the rules before they generate. That's good.", action: null, to: null },
              ].map((row, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "center", gap: 16, padding: "16px 20px",
                  borderTop: i ? "1px solid var(--lk-border)" : "none",
                }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: 4, background: "var(--lk-tint)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    color: row.iconColor, flexShrink: 0,
                  }}>
                    <i data-lucide={row.icon} style={{ width: 16, height: 16 }}></i>
                  </span>
                  <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.title}</span>
                    <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>{row.body}</span>
                  </div>
                  {row.action && (
                    <button onClick={() => onGoTo(row.to)} style={{
                      all: "unset", cursor: "pointer", font: "500 13px/1 var(--font-sans)", color: "var(--lk-terracotta)",
                      display: "inline-flex", alignItems: "center", gap: 4,
                    }}>{row.action} <i data-lucide="arrow-right" style={{ width: 13, height: 13 }}></i></button>
                  )}
                </div>
              ))}
            </div>
          </Section>

          <Section title="Recent activity">
            <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff" }}>
              {recent.map((r, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "center", gap: 14, padding: "12px 20px",
                  borderTop: i ? "1px solid var(--lk-border)" : "none",
                }}>
                  <i data-lucide={r.icon} style={{ width: 14, height: 14, color: tone(r.tone) }}></i>
                  <span style={{ flex: 1, font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-navy)" }}>
                    <strong style={{ fontWeight: 600 }}>{r.who}</strong> {r.what}
                  </span>
                  <span style={{ font: "400 12px/1 var(--font-sans)", color: "var(--lk-muted)" }}>{r.time}</span>
                </div>
              ))}
            </div>
          </Section>
        </div>

        {/* Right rail — license snapshot */}
        <aside style={{
          border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff",
          padding: 24, display: "flex", flexDirection: "column", gap: 18, position: "sticky", top: 80,
        }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span className="lk-eyebrow">License snapshot</span>
            <Chip variant="approved">Active</Chip>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ font: "500 12px/1 var(--font-mono)", color: "var(--lk-muted)" }}>LIC-MARA-WEST · v18</span>
            <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>Edited 3 days ago. Live for 247 subscribers.</span>
          </div>

          <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
            <span className="lk-eyebrow">Allowed</span>
            {["Solo content", "Partnered (verified)", "Custom prompt requests"].map(t => (
              <span key={t} style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-navy)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <i data-lucide="check" style={{ width: 13, height: 13, color: "var(--lk-success)" }}></i>{t}
              </span>
            ))}
          </div>

          <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
            <span className="lk-eyebrow">You blocked</span>
            {["School settings", "Specific clothing brands", "Family roleplay"].map(t => (
              <span key={t} style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--lk-navy)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <i data-lucide="x" style={{ width: 13, height: 13, color: "var(--lk-error)" }}></i>{t}
              </span>
            ))}
          </div>

          <div style={{ borderTop: "1px solid var(--lk-border)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="lk-eyebrow">Revocation</span>
            <span style={{ font: "400 12px/1.5 var(--font-sans)", color: "var(--lk-muted)" }}>
              You can revoke this license at any time. Subscribers lose access within 60 seconds.
            </span>
          </div>

          <Button variant="secondary" onClick={() => onGoTo("license")} style={{ marginTop: 4, justifyContent: "center" }}>
            Edit license
          </Button>
        </aside>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard });