// Simplified top-level pages: My Work, Decisions, Inbox, Clients, Settings.
// These are still lightweight in this phase — the focus is on wayfinding, not
// building out every workspace.

// -----------------------------------------------------------------
// Shared: a compact page header used by every top-level page.
// -----------------------------------------------------------------
function PageHeader({ title, count, subtitle, actions }) {
  return (
    <div className="page-header-row">
      <div>
        <h1 className="greeting" style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          {title}
          {count != null && <span style={{ fontSize: 20, color: 'var(--text-tertiary)', fontWeight: 500, letterSpacing: '-0.01em' }}>{count}</span>}
        </h1>
        {subtitle && <div className="date-line">{subtitle}</div>}
      </div>
      {actions && <div style={{ display: 'flex', gap: 10 }}>{actions}</div>}
    </div>
  );
}

// -----------------------------------------------------------------
// Inbox — attention destination.
// Aggregates: needs-review items, expiring contracts, blocked projects.
// -----------------------------------------------------------------
function InboxPage({ data }) {
  const needsReview = data.needsReview || [];
  const expiring    = data.contracts.filter(c => c.reminder === 'expiring');
  const blocked     = data.projects.filter(p => p.blocked);
  const totalCount  = needsReview.length + expiring.length + blocked.length;

  return (
    <main className="main" data-screen-label="Inbox">
      <PageHeader
        title="Inbox"
        count={totalCount}
        subtitle={
          <span>
            <b>{needsReview.length} to review</b> · {expiring.length} contract renewal · {blocked.length} blocker
          </span>
        }
        actions={
          <>
            <button className="btn btn-white btn-sm">
              <Icon name="check" size={14} strokeWidth={2} />
              <span>Mark all seen</span>
            </button>
            <button className="btn btn-white btn-sm">
              <Icon name="filter" size={14} strokeWidth={1.75} />
              <span>Filter</span>
            </button>
          </>
        }
      />

      <div className="grid g-cols-3-1" style={{ marginTop: 4, alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Needs Review */}
          <Card>
            <CardHead
              title="Waiting on you"
              count={needsReview.length}
              icon={<Icon name="inbox" size={16} strokeWidth={1.75} style={{ color: 'var(--primary-01)' }} />}
              right={<a className="link" href="#/decisions">Open decisions</a>}
            />
            <div style={{ padding: '0 4px 8px' }}>
              {needsReview.map((it, i) => {
                const kindMap = {
                  feature:  { tone: 'kind-lav',   icon: 'features' },
                  decision: { tone: 'kind-peach', icon: 'decisions' },
                  research: { tone: 'kind-mint',  icon: 'book' },
                  approval: { tone: 'kind-cream', icon: 'check' },
                };
                const km = kindMap[it.kind] || kindMap.feature;
                return (
                  <div className="review-item" key={i}>
                    <div className={`kind-square ${km.tone}`}>
                      <Icon name={km.icon} size={16} strokeWidth={1.75} />
                    </div>
                    <div className="review-middle">
                      <div className="t1 truncate">{it.title}</div>
                      <div className="t2 truncate">{it.meta}</div>
                    </div>
                    <div className="review-right">
                      <button className="review-btn">Review</button>
                      <span className="rt">{it.time} ago</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>

          {/* Contracts */}
          {expiring.length > 0 && (
            <Card>
              <CardHead
                title="Contract renewals"
                count={expiring.length}
                icon={<Icon name="contracts" size={16} strokeWidth={1.75} style={{ color: 'var(--label-yellow)' }} />}
              />
              <div style={{ padding: '0 4px 8px' }}>
                {expiring.map((c) => (
                  <div className="review-item" key={c.id}>
                    <div className="kind-square" style={{ background: 'rgba(239,157,14,0.14)', color: 'var(--label-yellow)' }}>
                      <Icon name="contracts" size={16} strokeWidth={1.75} />
                    </div>
                    <div className="review-middle">
                      <div className="t1 truncate">{c.title}</div>
                      <div className="t2 truncate">{data.clients[c.client]?.name} · {c.value}</div>
                    </div>
                    <div className="review-right">
                      <span className="reminder-chip expiring">
                        <Icon name="clock" size={11} strokeWidth={2} />
                        {c.expiresIn.replace('Expires in ', '')}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          )}

          {/* Blockers */}
          {blocked.length > 0 && (
            <Card>
              <CardHead
                title="Blockers"
                count={blocked.length}
                icon={<Icon name="block" size={16} strokeWidth={1.75} style={{ color: 'var(--danger-solid)' }} />}
              />
              <div style={{ padding: '0 4px 8px' }}>
                {blocked.map((p) => (
                  <div className="review-item" key={p.id}>
                    <div className="kind-square" style={{ background: 'rgba(255,56,28,0.10)', color: 'var(--danger-solid)' }}>
                      <Icon name="block" size={16} strokeWidth={1.75} />
                    </div>
                    <div className="review-middle">
                      <div className="t1 truncate">{p.name}</div>
                      <div className="t2 truncate">{p.risk} · {p.owner}</div>
                    </div>
                    <div className="review-right">
                      <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>{p.updated}</span>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          )}
        </div>

        {/* Right rail — quick facts */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Card>
            <div style={{ padding: '14px 18px' }}>
              <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, color: 'var(--text-tertiary)' }}>
                What Inbox is for
              </div>
              <p style={{ margin: '8px 0 0', fontSize: 13.5, letterSpacing: '-0.015em', color: 'var(--text-secondary)', lineHeight: 1.55 }}>
                Only things that need your attention. Reviews, decisions to approve,
                renewals to send, blockers to unblock. Not a notifications feed.
              </p>
            </div>
          </Card>
          <Card>
            <CardHead title="Zero-inbox tips" icon={<Icon name="spark" size={16} strokeWidth={1.75} style={{ color: 'var(--accent)' }} />} />
            <div style={{ padding: '4px 18px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Set aside 15 minutes each morning to clear this list.',
                'Every review click is a decision — approve, ask, or defer.',
                'Contracts renewing in less than 15 days always sit here.',
              ].map((t, i) => (
                <div key={i} style={{ fontSize: 12.5, color: 'var(--text-secondary)', letterSpacing: '-0.015em', lineHeight: 1.5, display: 'flex', gap: 8 }}>
                  <span style={{ color: 'var(--text-tertiary)', marginTop: 2 }}><Icon name="check" size={12} strokeWidth={2}/></span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </main>
  );
}

// -----------------------------------------------------------------
// My Work — cross-project view of things assigned to me.
// -----------------------------------------------------------------
function MyWorkPage({ data }) {
  // Reuse activeWork rows as a stand-in for "work assigned to me".
  const overdue = (data.activeWork || []).filter(w => w.dueLate);
  const mine    = (data.activeWork || []).slice(0, 5);

  return (
    <main className="main" data-screen-label="My Work">
      <PageHeader
        title="My Work"
        subtitle={
          <span>
            <b style={{ color: 'var(--danger-solid)' }}>{overdue.length} overdue</b> · {mine.length} in progress · across {new Set(mine.map(w => w.sub.split(' · ')[0])).size} projects
          </span>
        }
        actions={
          <>
            <button className="btn btn-white btn-sm">
              <Icon name="filter" size={14} strokeWidth={1.75} />
              <span>Filter</span>
            </button>
            <button className="btn btn-primary btn-sm">
              <Icon name="plus" size={14} strokeWidth={2} />
              <span>New task</span>
            </button>
          </>
        }
      />

      <Card>
        <CardHead
          title="Assigned to you"
          count={mine.length}
          right={<a className="link">Group by project</a>}
        />
        <div style={{ padding: 4 }}>
          {mine.map((it, i) => (
            <div className="work-row" key={i}>
              <div className="lead">
                <div className="kind-square kind-sky">
                  <Icon name={it.kind === 'feature' ? 'features' : 'projects'} size={15} strokeWidth={1.75}/>
                </div>
                <div className="name">
                  <div className="n1 truncate">{it.name}</div>
                  <div className="n2 truncate">{it.sub}</div>
                </div>
              </div>
              <div className="col-avatars"><AvatarStack names={it.owners} max={3} size="sm" /></div>
              <div className="col-status">
                <Label tone={it.tone === 'red' ? 'red' : it.tone === 'yellow' ? 'yellow' : it.tone === 'green' ? 'green' : it.tone === 'brand' ? 'blue' : 'purple'} dot size="sm">{it.status}</Label>
              </div>
              <div className="col-progress progress-wrap">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="p-num">{it.progress}%</span>
                  <span className={`due${it.dueLate ? ' late' : ''}`}>{it.due}</span>
                </div>
                <ProgressBar
                  value={it.progress}
                  tone={it.tone === 'red' ? 'red' : it.tone === 'green' ? 'green' : it.tone === 'yellow' ? 'warn' : 'blue'}
                />
              </div>
              <Icon name="chevronRight" size={14} className="col-chev" strokeWidth={2} />
            </div>
          ))}
        </div>
      </Card>

      <div style={{ marginTop: 12, textAlign: 'center', color: 'var(--text-tertiary)', fontSize: 12, letterSpacing: '-0.02em' }}>
        Full task workspace is coming next. For now this shows the same items as Home's Active Work.
      </div>
    </main>
  );
}

// -----------------------------------------------------------------
// Decisions — global destination for the decisions object.
// -----------------------------------------------------------------
function DecisionsPage({ data }) {
  const all = data.decisions || [];
  return (
    <main className="main" data-screen-label="Decisions">
      <PageHeader
        title="Decisions"
        count={all.length}
        subtitle={
          <span>
            <b>4 finalized this quarter</b> · 1 pending review · aggregated across all your projects
          </span>
        }
        actions={
          <>
            <button className="btn btn-white btn-sm">
              <Icon name="filter" size={14} strokeWidth={1.75} />
              <span>Filter</span>
            </button>
            <button className="btn btn-primary btn-sm">
              <Icon name="plus" size={14} strokeWidth={2} />
              <span>New decision</span>
            </button>
          </>
        }
      />

      <Card>
        <div style={{ padding: 8 }}>
          {all.map((d, i) => (
            <div className="dec-item" key={i}>
              <div className="dec-head">
                <Label tone={d.tone === 'green' ? 'green' : d.tone === 'yellow' ? 'yellow' : 'red'} dot size="sm">{d.status}</Label>
                <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>My Geni — Product Operating System, v2</span>
                <span className="when">{d.when}</span>
              </div>
              <div className="dec-title">{d.title}</div>
              <div className="dec-ctx">{d.ctx}</div>
              <div className="dec-meta">
                <AvatarStack names={d.participants} max={3} size="sm" />
                <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{d.owner}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </main>
  );
}

// -----------------------------------------------------------------
// Clients — global directory of client organizations.
// -----------------------------------------------------------------
function ClientsPage({ data }) {
  const clients = Object.entries(data.clients)
    .filter(([k, c]) => c.short !== '·')
    .map(([k, c]) => {
      const projectCount = data.projects.filter(p => p.client === k).length;
      const contractCount = data.contracts.filter(x => x.client === k).length;
      return { ...c, key: k, projectCount, contractCount };
    });

  return (
    <main className="main" data-screen-label="Clients">
      <PageHeader
        title="Clients"
        count={clients.length}
        subtitle={
          <span>
            External organizations you\u2019re building for. Team management for internal roles lives in <b>Settings</b>.
          </span>
        }
        actions={
          <>
            <button className="btn btn-white btn-sm">
              <Icon name="search" size={14} strokeWidth={1.75} />
              <span>Search</span>
            </button>
            <button className="btn btn-primary btn-sm">
              <Icon name="plus" size={14} strokeWidth={2} />
              <span>New client</span>
            </button>
          </>
        }
      />

      <Card>
        <div style={{ padding: 8 }}>
          {clients.map((c) => (
            <div className="review-item" key={c.key} style={{ padding: '14px 14px' }}>
              <div className="kind-square" style={{ width: 44, height: 44, background: c.color, color: 'var(--shade-02)', borderRadius: 12, fontSize: 13, fontWeight: 700 }}>
                {c.short}
              </div>
              <div className="review-middle">
                <div className="t1 truncate">{c.name}</div>
                <div className="t2 truncate">{c.industry} · {c.projectCount} project{c.projectCount === 1 ? '' : 's'} · {c.contractCount} contract{c.contractCount === 1 ? '' : 's'}</div>
              </div>
              <div className="review-right">
                <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
              </div>
            </div>
          ))}
        </div>
      </Card>
    </main>
  );
}

// -----------------------------------------------------------------
// Settings — bottom utility. Mentions team management + internal DS.
// -----------------------------------------------------------------
function SettingsPage() {
  return (
    <main className="main" data-screen-label="Settings">
      <PageHeader
        title="Settings"
        subtitle="Workspace preferences, integrations, billing, and team roles."
      />

      <div className="grid g-cols-1-1">
        <Card>
          <CardHead
            title="Workspace"
            icon={<Icon name="settings" size={16} strokeWidth={1.75} />}
          />
          <div style={{ padding: '4px 18px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { label: 'General',        desc: 'Name, logo, default project template' },
              { label: 'Team roles',     desc: 'Members, invitations, and internal roles — moved from the sidebar' },
              { label: 'Integrations',   desc: 'Slack, GitHub, Figma, Drive' },
              { label: 'Billing & plan', desc: 'Subscription, seats, invoices' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px', borderTop: i > 0 ? '1px solid var(--stroke-subtle)' : 'none' }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.015em' }}>{s.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', marginTop: 2 }}>{s.desc}</div>
                </div>
                <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <CardHead
            title="Advanced"
            icon={<Icon name="terminal" size={16} strokeWidth={1.75} />}
          />
          <div style={{ padding: '4px 18px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { label: 'API & tokens',   desc: 'Programmatic access to your workspace' },
              { label: 'Data export',    desc: 'Download briefs, decisions, and history' },
              { label: 'Audit log',      desc: 'Every workspace change is recorded' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px', borderTop: i > 0 ? '1px solid var(--stroke-subtle)' : 'none' }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.015em' }}>{s.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', marginTop: 2 }}>{s.desc}</div>
                </div>
                <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
              </div>
            ))}
            <div style={{ marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--stroke-subtle)' }}>
              <a href="#/design-system" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>
                <Icon name="layers" size={12} strokeWidth={1.75} />
                Internal · design system reference
              </a>
            </div>
          </div>
        </Card>
      </div>
    </main>
  );
}

Object.assign(window, {
  InboxPage, MyWorkPage, DecisionsPage, ClientsPage, SettingsPage, PageHeader,
});