// Authenticated screens: Editor, Onboarding, Settings, Dashboard
// Feed and Notifications removed — this platform is for folios and blogs, not a social feed.

// =========================================================================
// EDITOR (profile editor + writing editor)
// =========================================================================
function Editor({ go }) {
  const me = window.byHandle("marin");
  const [pane, setPane] = React.useState("identity");
  const [name, setName] = React.useState(me.name);
  const [handle, setHandle] = React.useState(me.handle);
  const [bio, setBio] = React.useState(me.bio);
  const [available, setAvailable] = React.useState(me.available);
  const [accent, setAccent] = React.useState(me.accent);
  const [skills, setSkills] = React.useState(me.skills);
  const [work, setWork] = React.useState(me.work);
  const [savedAt, setSavedAt] = React.useState("just now");
  const [showSlash, setShowSlash] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setSavedAt("just now"), 600);
    return () => clearTimeout(t);
  }, [name, handle, bio, available, accent, skills, work]);

  return (
    <div className="editor-page">
      <header className="editor-bar">
        <div className="editor-bar-l">
          <button className="back-btn" onClick={() => go(`/u/${handle}`)}>{I.back} Back to folio</button>
        </div>
        <div className="editor-bar-c">
          <div className="kicker mono">Editing</div>
          <div>folio.index/{handle}</div>
        </div>
        <div className="editor-bar-r">
          <span className="muted-l save-state">
            <span className="dot dot-green" /> Saved · {savedAt}
          </span>
          <Button variant="ghost" size="sm" onClick={() => go(`/u/${handle}`)}>Preview</Button>
          <Button variant="primary" size="sm" onClick={() => go(`/u/${handle}`)}>Publish</Button>
        </div>
      </header>

      <div className="editor-shell">
        <aside className="editor-nav">
          {[
            ["identity", "Identity"],
            ["work", "Work history"],
            ["education", "Education"],
            ["skills", "Skills"],
            ["projects", "Projects"],
            ["writing", "Writing"],
            ["theme", "Theme"],
            ["visibility", "Visibility"],
          ].map(([k, v]) => (
            <button key={k} className={`editor-nav-item${pane === k ? " on" : ""}`} onClick={() => setPane(k)}>
              <span>{v}</span>
              <span className="muted-l">{k === pane ? "·" : ""}</span>
            </button>
          ))}
        </aside>

        <div className="editor-main">
          {pane === "identity" && (
            <div className="editor-pane">
              <h2>Identity</h2>
              <p className="muted">This is what people see at the top of your folio.</p>

              <div className="editor-grid-2">
                <Field label="Display name">
                  <input value={name} onChange={(e) => setName(e.target.value)} />
                </Field>
                <Field label="Handle" suffix={<span className="mono muted-l">folio.index/{handle}</span>}>
                  <input value={handle} onChange={(e) => setHandle(e.target.value.replace(/[^a-z0-9-]/gi, "").toLowerCase())} />
                </Field>
              </div>

              <Field label="Bio" hint="A line or two. Plain language is best.">
                <textarea rows={4} value={bio} onChange={(e) => setBio(e.target.value)} />
              </Field>

              <div className="editor-grid-2">
                <Field label="Pronouns">
                  <input defaultValue="she/her" />
                </Field>
                <Field label="Location">
                  <input defaultValue="Oslo, NO" />
                </Field>
              </div>

              <Field label="Availability">
                <div className="seg">
                  {["Not looking", "Open to projects · Aug", "Hiring", "Booking Q4"].map((opt) => (
                    <button key={opt} className={`seg-btn${available === opt ? " seg-on" : ""}`} onClick={() => setAvailable(opt)}>
                      {opt === available && <span className="dot dot-green" />}
                      {opt}
                    </button>
                  ))}
                </div>
              </Field>

              <Field label="Website">
                <input placeholder="https://yoursite.com" />
              </Field>
            </div>
          )}

          {pane === "work" && (
            <div className="editor-pane">
              <h2>Work history</h2>
              <p className="muted">Drag to reorder. Newest at the top.</p>
              <ul className="editor-rows">
                {work.map((w, i) => (
                  <li key={i} className="editor-row">
                    <span className="editor-drag">{I.drag}</span>
                    <div className="editor-row-grid">
                      <input className="mono editor-yrs" value={`${w.start} — ${w.end}`} readOnly />
                      <input className="editor-role" defaultValue={w.role} />
                      <input className="editor-org" defaultValue={w.company} />
                    </div>
                    <button className="icon-btn">{I.more}</button>
                  </li>
                ))}
              </ul>
              <Button variant="ghost" icon={I.plus}>Add a position</Button>
            </div>
          )}

          {pane === "education" && (
            <div className="editor-pane">
              <h2>Education</h2>
              <ul className="editor-rows">
                {me.education?.map((e, i) => (
                  <li key={i} className="editor-row">
                    <span className="editor-drag">{I.drag}</span>
                    <div className="editor-row-grid">
                      <input className="mono editor-yrs" defaultValue={`${e.start} — ${e.end}`} />
                      <input className="editor-role" defaultValue={e.program} />
                      <input className="editor-org" defaultValue={e.school} />
                    </div>
                    <button className="icon-btn">{I.more}</button>
                  </li>
                ))}
              </ul>
              <Button variant="ghost" icon={I.plus}>Add education</Button>
            </div>
          )}

          {pane === "skills" && (
            <div className="editor-pane">
              <h2>Skills</h2>
              <p className="muted">Up to 12. Type to add, click to remove.</p>
              <div className="chip-row chip-row-edit">
                {skills.map((s, i) => (
                  <button key={i} className="chip chip-removable" onClick={() => setSkills(skills.filter((x) => x !== s))}>
                    {s} <span>×</span>
                  </button>
                ))}
                <input className="chip-input" placeholder="Add a skill…" onKeyDown={(e) => {
                  if (e.key === "Enter" && e.target.value) {
                    setSkills([...skills, e.target.value]);
                    e.target.value = "";
                  }
                }} />
              </div>
            </div>
          )}

          {pane === "writing" && (
            <div className="editor-pane">
              <h2>New entry</h2>
              <p className="muted">Write a blog post, essay, or note. Slash commands are enabled — type <kbd className="mono">/</kbd> to insert a block.</p>
              <div className="rich-editor">
                <input className="rich-title" placeholder="Title your entry…" defaultValue="On briefs that breathe" />
                <div className="rich-meta mono">Draft · Auto-saving · Words 412</div>
                <div className="rich-body">
                  <p>The best brief I ever got was four sentences long. The worst was a 40-page document. There is a relationship between how much a client tells you and how much they actually want — and it is rarely the one you'd expect.</p>
                  <p>A brief that breathes has room for the project to surprise you. Here are the questions I now insist on…</p>
                  <div className="slash-trigger" onClick={() => setShowSlash((s) => !s)}>
                    <span className="mono">/</span> Insert block
                  </div>
                  {showSlash && (
                    <div className="slash-menu">
                      {[
                        { k: "H", l: "Heading" },
                        { k: "T", l: "Text" },
                        { k: "🜔", l: "Image grid" },
                        { k: "▶", l: "Video embed" },
                        { k: "—", l: "Divider" },
                        { k: "❝", l: "Pull quote" },
                        { k: "≡", l: "Bullet list" },
                        { k: "{", l: "Code block" },
                      ].map((b) => (
                        <button key={b.l} className="slash-item">
                          <span className="slash-glyph mono">{b.k}</span>
                          <span>{b.l}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
                <div className="rich-tools">
                  <button>B</button><button><em>I</em></button><button>S</button>
                  <span className="rich-sep" />
                  <button>H1</button><button>H2</button>
                  <span className="rich-sep" />
                  <button>" "</button><button>—</button>
                  <span className="rich-sep" />
                  <button>{I.plus} Embed</button>
                </div>
              </div>
            </div>
          )}

          {pane === "projects" && (
            <div className="editor-pane">
              <h2>Projects</h2>
              <p className="muted">Each project gets its own page.</p>
              <div className="editor-proj-grid">
                {me.projects?.map((pr) => (
                  <div key={pr.id} className="editor-proj-card">
                    <Cover background={pr.cover} ratio="4/3" />
                    <div className="editor-proj-meta">
                      <div>{pr.title}</div>
                      <span className="mono muted-l">{pr.tag} · {pr.year}</span>
                    </div>
                    <div className="editor-proj-actions">
                      <button>Edit</button>
                      <button>Hide</button>
                    </div>
                  </div>
                ))}
                <button className="editor-proj-add">{I.plus} New project</button>
              </div>
            </div>
          )}

          {pane === "theme" && (
            <div className="editor-pane">
              <h2>Theme</h2>
              <p className="muted">An accent color follows you across your folio.</p>
              <div className="swatches">
                {["#D85A3A", "#2B6CB0", "#7C3AED", "#1F8A5B", "#B45309", "#0F766E", "#DC2626", "#1B1B1B"].map((c) => (
                  <button key={c} className={`swatch${accent === c ? " swatch-on" : ""}`} style={{ background: c }} onClick={() => setAccent(c)} aria-label={c} />
                ))}
              </div>
              <Field label="Layout">
                <div className="seg">
                  <button className="seg-btn seg-on">Editorial</button>
                  <button className="seg-btn">Compact</button>
                  <button className="seg-btn">Gallery</button>
                </div>
              </Field>
              <Field label="Header style">
                <div className="seg">
                  <button className="seg-btn seg-on">Banner</button>
                  <button className="seg-btn">Plain</button>
                  <button className="seg-btn">Full bleed</button>
                </div>
              </Field>
            </div>
          )}

          {pane === "visibility" && (
            <div className="editor-pane">
              <h2>Visibility</h2>
              <Field label="Profile visibility">
                <div className="seg">
                  <button className="seg-btn seg-on">Public</button>
                  <button className="seg-btn">Unlisted</button>
                  <button className="seg-btn">Private</button>
                </div>
              </Field>
              <Field label="Search engines">
                <div className="seg">
                  <button className="seg-btn seg-on">Index my folio</button>
                  <button className="seg-btn">Do not index</button>
                </div>
              </Field>
            </div>
          )}
        </div>

        <aside className="editor-preview">
          <div className="kicker mono">Preview</div>
          <div className="preview-card">
            <div className="preview-banner" style={{ background: `linear-gradient(135deg, ${accent}33, ${accent}10)` }} />
            <div className="preview-body">
              <Avatar person={{ ...me, accent }} size={56} ring />
              <h3>{name}</h3>
              <div className="mono muted-l">folio.index/{handle}</div>
              <p className="preview-bio">{bio}</p>
              <div className="preview-avail">
                <span className="dot dot-green" /> {available}
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// =========================================================================
// ONBOARDING / SIGN UP
// =========================================================================
function Onboarding({ go }) {
  const [step, setStep] = React.useState(0);
  const [email, setEmail] = React.useState("");
  const [handle, setHandle] = React.useState("");
  const [name, setName] = React.useState("");
  const [role, setRole] = React.useState("");
  const [accent, setAccent] = React.useState("#D85A3A");

  const steps = ["Account", "Handle", "You", "Look"];

  return (
    <div className="onb-page">
      <button className="onb-back" onClick={() => go("/")}>{I.back} Back home</button>

      <div className="onb-card">
        <div className="onb-progress">
          {steps.map((s, i) => (
            <div key={s} className={`onb-step${i === step ? " on" : ""}${i < step ? " done" : ""}`}>
              <span className="mono onb-step-n">{String(i + 1).padStart(2, "0")}</span>
              <span>{s}</span>
            </div>
          ))}
        </div>

        {step === 0 && (
          <div className="onb-pane">
            <div className="kicker">01 · Account</div>
            <h1>Create your folio.</h1>
            <p className="muted">It takes about two minutes. You can keep editing later.</p>
            <Field label="Email">
              <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@studio.com" />
            </Field>
            <Field label="Password">
              <input type="password" placeholder="Eight characters minimum" />
            </Field>
            <div className="onb-actions">
              <Button variant="primary" onClick={() => setStep(1)} icon={I.arrow}>Continue</Button>
              <button className="link-quiet">Already have an account? Sign in</button>
            </div>
            <div className="onb-sso">
              <button className="sso-btn">Continue with Google</button>
              <button className="sso-btn">Continue with Apple</button>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="onb-pane">
            <div className="kicker">02 · Handle</div>
            <h1>Pick your URL.</h1>
            <p className="muted">This is the address of your folio. You can change it once a year.</p>
            <Field label="Handle" suffix={<span className="mono muted-l">folio.index/{handle || "your-name"}</span>}>
              <input value={handle} onChange={(e) => setHandle(e.target.value.replace(/[^a-z0-9-]/gi, "").toLowerCase())} placeholder="marin" />
            </Field>
            <div className="suggestion-row">
              <span className="muted-l">Suggestions:</span>
              {["marin", "marin-s", "msolberg", "studio-marin"].map((s) => (
                <button key={s} className="chip chip-suggest" onClick={() => setHandle(s)}>{s}</button>
              ))}
            </div>
            <div className="onb-actions">
              <Button variant="ghost" onClick={() => setStep(0)}>Back</Button>
              <Button variant="primary" onClick={() => setStep(2)} icon={I.arrow}>Continue</Button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="onb-pane">
            <div className="kicker">03 · You</div>
            <h1>Who are you, in two lines?</h1>
            <Field label="Display name">
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Marin Solberg" />
            </Field>
            <Field label="What do you do?">
              <input value={role} onChange={(e) => setRole(e.target.value)} placeholder="Independent Designer" />
            </Field>
            <Field label="Where are you based?">
              <input placeholder="Oslo, NO" />
            </Field>
            <div className="onb-actions">
              <Button variant="ghost" onClick={() => setStep(1)}>Back</Button>
              <Button variant="primary" onClick={() => setStep(3)} icon={I.arrow}>Continue</Button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="onb-pane">
            <div className="kicker">04 · Look</div>
            <h1>Pick an accent.</h1>
            <p className="muted">Sets the tone of your folio. You can change it any time.</p>
            <div className="swatches swatches-lg">
              {["#D85A3A", "#2B6CB0", "#7C3AED", "#1F8A5B", "#B45309", "#0F766E", "#DC2626", "#1B1B1B"].map((c) => (
                <button key={c} className={`swatch${accent === c ? " swatch-on" : ""}`} style={{ background: c }} onClick={() => setAccent(c)} />
              ))}
            </div>
            <div className="onb-preview" style={{ background: `linear-gradient(135deg, ${accent}33, ${accent}10)` }}>
              <Avatar person={{ name: name || "Your name", accent }} size={64} ring />
              <div>
                <h3>{name || "Your name"}</h3>
                <p className="mono">folio.index/{handle || "your-name"}</p>
                <p>{role || "What you do"}</p>
              </div>
            </div>
            <div className="onb-actions">
              <Button variant="ghost" onClick={() => setStep(2)}>Back</Button>
              <Button variant="primary" onClick={() => go(`/u/marin`)} icon={I.arrow}>Open my folio</Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// =========================================================================
// SETTINGS
// =========================================================================
function Settings({ go }) {
  const [pane, setPane] = React.useState("account");
  return (
    <div className="settings-page">
      <header className="page-head">
        <h1>Settings</h1>
      </header>
      <div className="settings-shell">
        <aside className="settings-nav">
          {[
            ["account", "Account"],
            ["privacy", "Privacy"],
            ["notif", "Notifications"],
            ["connections", "Connections"],
            ["security", "Security"],
            ["blocked", "Blocked"],
            ["billing", "Billing"],
            ["danger", "Danger zone"],
          ].map(([k, v]) => (
            <button key={k} className={`editor-nav-item${pane === k ? " on" : ""}`} onClick={() => setPane(k)}>{v}</button>
          ))}
        </aside>
        <div className="settings-main">
          {pane === "account" && (
            <div className="editor-pane">
              <h2>Account</h2>
              <Field label="Email"><input defaultValue="marin@studio.com" /></Field>
              <Field label="Username"><input defaultValue="marin" /></Field>
              <Field label="Language">
                <div className="seg">
                  <button className="seg-btn seg-on">English</button>
                  <button className="seg-btn">Norsk</button>
                  <button className="seg-btn">日本語</button>
                </div>
              </Field>
            </div>
          )}
          {pane === "notif" && (
            <div className="editor-pane">
              <h2>Notifications</h2>
              {[
                "New follower", "Appreciations on your projects", "Comments and mentions",
                "Weekly digest", "Job opportunities", "Product updates",
              ].map((row) => (
                <div key={row} className="toggle-row">
                  <div>{row}</div>
                  <div className="toggle-group">
                    <label className="check"><input type="checkbox" defaultChecked /> Email</label>
                    <label className="check"><input type="checkbox" defaultChecked /> Push</label>
                  </div>
                </div>
              ))}
            </div>
          )}
          {pane === "privacy" && (
            <div className="editor-pane">
              <h2>Privacy</h2>
              <Field label="Who can see my folio">
                <div className="seg">
                  <button className="seg-btn seg-on">Everyone</button>
                  <button className="seg-btn">Logged-in users</button>
                  <button className="seg-btn">Followers only</button>
                </div>
              </Field>
              <Field label="Who can message me">
                <div className="seg">
                  <button className="seg-btn">Everyone</button>
                  <button className="seg-btn seg-on">People I follow back</button>
                  <button className="seg-btn">No one</button>
                </div>
              </Field>
              <Field label="Discoverability">
                <div className="toggle-row simple">
                  <div>Appear in search and recommendations</div>
                  <label className="check"><input type="checkbox" defaultChecked /></label>
                </div>
              </Field>
            </div>
          )}
          {pane === "connections" && (
            <div className="editor-pane">
              <h2>Connected accounts</h2>
              {[
                ["Google", "marin@studio.com"], ["Apple", "Connected"], ["GitHub", "@marinsolberg"], ["Are.na", "Not connected"],
              ].map(([k, v]) => (
                <div key={k} className="conn-row">
                  <div className="conn-name">{k}</div>
                  <div className="muted-l">{v}</div>
                  <button className="link-quiet">{v.startsWith("Not") ? "Connect" : "Disconnect"}</button>
                </div>
              ))}
            </div>
          )}
          {pane === "security" && (
            <div className="editor-pane">
              <h2>Security</h2>
              <Field label="Change password"><input type="password" placeholder="New password" /></Field>
              <div className="toggle-row simple">
                <div>Two-factor authentication</div>
                <label className="check"><input type="checkbox" defaultChecked /></label>
              </div>
              <div className="toggle-row simple">
                <div>Sign-in notifications</div>
                <label className="check"><input type="checkbox" defaultChecked /></label>
              </div>
            </div>
          )}
          {pane === "blocked" && (
            <div className="editor-pane">
              <h2>Blocked</h2>
              <p className="muted">You have not blocked anyone.</p>
            </div>
          )}
          {pane === "billing" && (
            <div className="editor-pane">
              <h2>Billing</h2>
              <p className="muted">You are on the <strong>Free</strong> plan. One folio, unlimited projects and writing.</p>
              <div className="plan-card">
                <div className="kicker mono">Plan · Pro</div>
                <h3>Folio Pro · $6 / month</h3>
                <ul>
                  <li>Multiple folios</li>
                  <li>Custom domain</li>
                  <li>Profile analytics</li>
                  <li>Hide Folio Index branding</li>
                  <li>Priority support</li>
                </ul>
                <Button variant="primary">Upgrade</Button>
              </div>
            </div>
          )}
          {pane === "danger" && (
            <div className="editor-pane">
              <h2>Danger zone</h2>
              <div className="danger-row">
                <div>
                  <strong>Pause folio</strong>
                  <p className="muted">Hides your folio while keeping your data.</p>
                </div>
                <Button variant="ghost">Pause</Button>
              </div>
              <div className="danger-row">
                <div>
                  <strong>Delete account</strong>
                  <p className="muted">Permanent. Cannot be undone.</p>
                </div>
                <Button variant="danger">Delete</Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// =========================================================================
// DASHBOARD — content hub for managing folio, writing & collections
// =========================================================================
const DASH_PROJECT_META = {
  onsa:     { status: "published", views: 1842, appreciations: 312, updated: "2h" },
  klassisk: { status: "published", views: 2104, appreciations: 287, updated: "1d" },
  margin:   { status: "draft",     views:  140, appreciations:  18, updated: "3d" },
  biblio:   { status: "published", views: 3220, appreciations: 412, updated: "Mar 14" },
  slowtype: { status: "published", views: 1610, appreciations: 178, updated: "Feb 02" },
  havn:     { status: "hidden",    views:  642, appreciations:  84, updated: "Oct 2023" },
};

function StatusPill({ status }) {
  const map = {
    published: { label: "Published", dot: "var(--green)" },
    draft:     { label: "Draft",     dot: "var(--accent)" },
    hidden:    { label: "Hidden",    dot: "var(--muted-l)" },
    unlisted:  { label: "Unlisted",  dot: "var(--muted)" },
    archived:  { label: "Archived",  dot: "var(--muted-l)" },
    public:    { label: "Public",    dot: "var(--green)" },
  };
  const v = map[status] || map.draft;
  return (
    <span className="status-pill mono">
      <span className="dot" style={{ background: v.dot, marginRight: 6 }} />
      {v.label}
    </span>
  );
}

function Toolbar({ q, setQ, filter, setFilter, view, setView, filters, newLabel, onNew }) {
  return (
    <div className="cms-toolbar">
      <div className="cms-toolbar-l">
        <div className="cms-search">
          {I.search}
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search…" />
        </div>
        <div className="cms-filters">
          {filters.map(([k, label, count]) => (
            <button key={k} className={`cms-filter${filter === k ? " on" : ""}`} onClick={() => setFilter(k)}>
              {label}<span className="mono muted-l" style={{ marginLeft: 6 }}>{count}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="cms-toolbar-r">
        {view != null && (
          <div className="view-toggle">
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")} aria-label="List">{I.list}</button>
            <button className={view === "grid" ? "on" : ""} onClick={() => setView("grid")} aria-label="Grid">{I.grid}</button>
          </div>
        )}
        <Button variant="primary" size="sm" icon={I.plus} onClick={onNew}>{newLabel}</Button>
      </div>
    </div>
  );
}

function Dashboard({ go }) {
  const me = window.byHandle("marin");
  const W = window.DATA.WRITINGS;
  const C = window.DATA.COLLECTIONS;
  const [tab, setTab] = React.useState("overview");
  const [q, setQ] = React.useState("");
  const [filter, setFilter] = React.useState("all");
  const [view, setView] = React.useState("list");

  const myCollections = C.filter((c) => c.curator === "marin");
  const drafts = W.filter((w) => w.status === "draft");
  const published = W.filter((w) => w.status === "published");

  // ===== Overview ========================================================
  const Overview = () => (
    <div className="dash-overview">
      <div className="dash-stats">
        {[
          { k: "Profile views", v: "2,418", change: "+14%", spark: "0,40 20,38 40,32 60,30 80,24 100,28 120,20 140,18 160,12 180,16 200,8" },
          { k: "New followers", v: "312",   change: "+22%", spark: "0,46 20,40 40,42 60,34 80,30 100,32 120,26 140,22 160,18 180,14 200,10" },
          { k: "Appreciations", v: "1,890", change: "+6%",  spark: "0,28 20,32 40,26 60,30 80,24 100,22 120,28 140,18 160,22 180,14 200,18" },
          { k: "Writing reads", v: "9,652", change: "+11%", spark: "0,52 20,44 40,46 60,38 80,40 100,30 120,32 140,24 160,22 180,18 200,12" },
        ].map((s) => (
          <article key={s.k} className="dash-stat-card">
            <div className="kicker mono">Last 30 days</div>
            <div className="dash-stat">{s.v}</div>
            <div className="dash-stat-label">{s.k} <span className="up mono">↑ {s.change}</span></div>
            <svg className="spark-sm" viewBox="0 0 200 60" preserveAspectRatio="none">
              <polyline points={s.spark} fill="none" stroke="var(--fg)" strokeWidth="1.5" />
            </svg>
          </article>
        ))}
      </div>

      <div className="dash-two">
        <article className="dash-card">
          <SectionH action={<button className="link-arrow" onClick={() => { setTab("writing"); }}>All drafts {I.arrow}</button>}>Drafts</SectionH>
          <ul className="draft-list">
            {drafts.slice(0, 4).map((d) => (
              <li key={d.id} onClick={() => go("/edit")} style={{ cursor: "pointer" }}>
                <div>
                  <div>{d.title}</div>
                  <div className="muted-l" style={{ fontSize: 12, marginTop: 2 }}>{d.excerpt.slice(0, 78)}…</div>
                </div>
                <span className="mono muted-l">{d.words} w · {d.updated}</span>
              </li>
            ))}
          </ul>
          <button className="dash-quick-add" onClick={() => { setTab("writing"); }}>{I.plus} New entry</button>
        </article>

        <article className="dash-card">
          <SectionH>Top referrers</SectionH>
          <table className="dash-table">
            <tbody>
              <tr><td>are.na</td><td className="mono num">812</td></tr>
              <tr><td>twitter.com</td><td className="mono num">418</td></tr>
              <tr><td>folio.index/explore</td><td className="mono num">364</td></tr>
              <tr><td>fonts.google.com</td><td className="mono num">191</td></tr>
              <tr><td>direct</td><td className="mono num">633</td></tr>
            </tbody>
          </table>
        </article>
      </div>

      <article className="dash-card">
        <SectionH>Recent activity</SectionH>
        <ul className="activity-list">
          {window.DATA.NOTIFICATIONS.slice(0, 5).map((n, i) => {
            const who = window.byHandle(n.who);
            return (
              <li key={i}>
                <Avatar person={who} size={28} />
                <div>
                  <span className="feed-name">{who.name}</span> <span className="muted">{n.text}</span>
                </div>
                <span className="mono muted-l">{n.time}</span>
              </li>
            );
          })}
        </ul>
      </article>
    </div>
  );

  // ===== Projects ========================================================
  const Projects = () => {
    const rows = me.projects
      .map((p) => ({ ...p, ...(DASH_PROJECT_META[p.id] || { status: "draft", views: 0, appreciations: 0, updated: "—" }) }))
      .filter((p) => filter === "all" ? true : p.status === filter)
      .filter((p) => q ? (p.title + p.tag).toLowerCase().includes(q.toLowerCase()) : true);

    return (
      <div>
        <Toolbar
          q={q} setQ={setQ}
          filter={filter} setFilter={setFilter}
          view={view} setView={setView}
          filters={[
            ["all", "All", me.projects.length],
            ["published", "Published", me.projects.filter((p) => DASH_PROJECT_META[p.id]?.status === "published").length],
            ["draft", "Drafts", me.projects.filter((p) => DASH_PROJECT_META[p.id]?.status === "draft").length],
            ["hidden", "Hidden", me.projects.filter((p) => DASH_PROJECT_META[p.id]?.status === "hidden").length],
          ]}
          newLabel="New project"
          onNew={() => go("/edit")}
        />

        {view === "list" ? (
          <div className="cms-table">
            <div className="cms-row cms-head mono">
              <span></span>
              <span>Title</span>
              <span>Status</span>
              <span className="num">Views</span>
              <span className="num">Apprs.</span>
              <span>Updated</span>
              <span></span>
            </div>
            {rows.map((p) => (
              <div key={p.id} className="cms-row" onClick={() => go(`/p/marin/${p.id}`)}>
                <div className="cms-thumb" style={{ background: p.cover }} />
                <div>
                  <div className="cms-title">{p.title}</div>
                  <div className="mono muted-l">{p.tag} · {p.year}</div>
                </div>
                <StatusPill status={p.status} />
                <span className="num mono">{p.views.toLocaleString()}</span>
                <span className="num mono">{p.appreciations}</span>
                <span className="mono muted-l">{p.updated}</span>
                <div className="cms-actions" onClick={(e) => e.stopPropagation()}>
                  <button className="link-quiet" onClick={() => go("/edit")}>Edit</button>
                  <button className="icon-btn" aria-label="More">{I.more}</button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="cms-grid">
            {rows.map((p) => (
              <article key={p.id} className="cms-card" onClick={() => go(`/p/marin/${p.id}`)}>
                <div className="cms-card-cover" style={{ background: p.cover }}>
                  <StatusPill status={p.status} />
                </div>
                <div className="cms-card-body">
                  <div className="cms-title">{p.title}</div>
                  <div className="mono muted-l">{p.tag} · {p.year} · {p.views.toLocaleString()} views</div>
                </div>
                <div className="cms-card-foot" onClick={(e) => e.stopPropagation()}>
                  <button className="link-quiet" onClick={() => go("/edit")}>Edit</button>
                  <button className="link-quiet">Duplicate</button>
                  <button className="link-quiet">{p.status === "hidden" ? "Show" : "Hide"}</button>
                </div>
              </article>
            ))}
            <button className="cms-card cms-card-add" onClick={() => go("/edit")}>
              <span className="cms-add-glyph">{I.plus}</span>
              <span>New project</span>
              <span className="muted-l">Case study, gallery, or single image.</span>
            </button>
          </div>
        )}
      </div>
    );
  };

  // ===== Writing =========================================================
  const Writing = () => {
    const rows = W
      .filter((w) => filter === "all" ? true : w.status === filter)
      .filter((w) => q ? (w.title + w.excerpt).toLowerCase().includes(q.toLowerCase()) : true);

    return (
      <div>
        <div className="dash-compose" onClick={() => go("/edit")}>
          <div><Avatar person={me} size={36} /></div>
          <div className="dash-compose-input">
            <span className="serif">Start writing…</span>
            <span className="muted-l mono">Press <kbd>/</kbd> for blocks</span>
          </div>
          <Button variant="primary" size="sm" icon={I.plus}>New entry</Button>
        </div>

        <Toolbar
          q={q} setQ={setQ}
          filter={filter} setFilter={setFilter}
          view={null}
          filters={[
            ["all", "All", W.length],
            ["draft", "Drafts", drafts.length],
            ["published", "Published", published.length],
            ["archived", "Archived", W.filter((w) => w.status === "archived").length],
          ]}
          newLabel="New entry"
          onNew={() => go("/edit")}
        />

        <div className="cms-table">
          <div className="cms-row cms-row-writing cms-head mono">
            <span>Title</span>
            <span>Status</span>
            <span className="num">Words</span>
            <span className="num">Views</span>
            <span>Updated</span>
            <span></span>
          </div>
          {rows.map((w) => (
            <div key={w.id} className="cms-row cms-row-writing" onClick={() => go("/edit")}>
              <div>
                <div className="cms-title serif">{w.title}</div>
                <div className="muted-l" style={{ fontSize: 12.5, marginTop: 3, maxWidth: 540 }}>{w.excerpt.slice(0, 110)}{w.excerpt.length > 110 ? "…" : ""}</div>
              </div>
              <StatusPill status={w.status} />
              <span className="num mono">{w.words}</span>
              <span className="num mono">{w.views ? w.views.toLocaleString() : "—"}</span>
              <span className="mono muted-l">{w.updated}</span>
              <div className="cms-actions" onClick={(e) => e.stopPropagation()}>
                <button className="link-quiet" onClick={() => go("/edit")}>Edit</button>
                <button className="icon-btn" aria-label="More">{I.more}</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  // ===== Collections =====================================================
  const Collections = () => (
    <div>
      <Toolbar
        q={q} setQ={setQ}
        filter={filter} setFilter={setFilter}
        view={null}
        filters={[
          ["all", "All", myCollections.length],
          ["public", "Public", myCollections.filter((c) => c.visibility === "public").length],
          ["unlisted", "Unlisted", myCollections.filter((c) => c.visibility === "unlisted").length],
        ]}
        newLabel="New collection"
        onNew={() => {}}
      />

      <div className="coll-grid">
        {myCollections
          .filter((c) => filter === "all" ? true : c.visibility === filter)
          .filter((c) => q ? c.title.toLowerCase().includes(q.toLowerCase()) : true)
          .map((c) => (
          <article key={c.id} className="coll-card">
            <div className="coll-cover" style={{ background: c.cover }}>
              <div className="coll-cover-count mono">{c.count} pieces</div>
            </div>
            <div className="coll-body">
              <div className="coll-title serif">{c.title}</div>
              {c.note && <p className="coll-note muted">{c.note}</p>}
              <div className="coll-meta">
                <StatusPill status={c.visibility} />
                <span className="mono muted-l">Updated {c.updated}</span>
              </div>
            </div>
            <div className="coll-foot">
              <button className="link-quiet">Edit</button>
              <button className="link-quiet">Add piece</button>
              <button className="link-quiet">Share</button>
            </div>
          </article>
        ))}

        <button className="coll-card coll-card-add">
          <div className="coll-add-cover">
            <span className="cms-add-glyph">{I.plus}</span>
          </div>
          <div className="coll-body">
            <div className="coll-title serif">New collection</div>
            <p className="coll-note muted">A reading list, a moodboard, or projects you admire.</p>
          </div>
        </button>
      </div>
    </div>
  );

  return (
    <div className="dash-page">
      <header className="dash-head">
        <div>
          <div className="kicker">Dashboard</div>
          <h1>Good afternoon, Marin.</h1>
          <p className="muted dash-sub">Manage your folio, drafts and collections — quietly.</p>
        </div>
        <div className="dash-head-actions">
          <Button variant="ghost" onClick={() => go("/u/marin")}>View folio</Button>
          <Button variant="primary" icon={I.edit} onClick={() => go("/edit")}>Edit folio</Button>
        </div>
      </header>

      <nav className="dash-tabs">
        {[
          ["overview", "Overview", null],
          ["projects", "Projects", me.projects.length],
          ["writing", "Writing", W.length],
          ["collections", "Collections", myCollections.length],
        ].map(([k, v, n]) => (
          <button key={k} className={`tab${tab === k ? " tab-active" : ""}`} onClick={() => { setTab(k); setQ(""); setFilter("all"); }}>
            {v}{n != null && <span className="mono muted-l" style={{ marginLeft: 8 }}>{n}</span>}
          </button>
        ))}
      </nav>

      <div className="dash-body">
        {tab === "overview" && <Overview />}
        {tab === "projects" && <Projects />}
        {tab === "writing" && <Writing />}
        {tab === "collections" && <Collections />}
      </div>
    </div>
  );
}

Object.assign(window, { Editor, Onboarding, Settings, Dashboard });