/* Views hub — dedicated page for the 8 personal views (My Day, Important, etc.) */

function ViewsHub({ allTasks, onView, currentUserId = 1 }) {
  const c = React.useMemo(() => ({
    myDay:    allTasks.filter(t => t.myDay && t.statusId !== 6).length,
    important:allTasks.filter(t => t.important && t.statusId !== 6).length,
    myTasks:  allTasks.filter(t => t.assignees.includes(currentUserId) && t.statusId !== 6).length,
    mentions: 3,
    planned:  allTasks.filter(t => t.dueDate && t.statusId !== 6).length,
    all:      allTasks.filter(t => t.statusId !== 6 && !t.snoozedUntil).length,
    snoozed:  allTasks.filter(t => t.snoozedUntil).length,
    archived: allTasks.filter(t => t.statusId === 6).length,
  }), [allTasks, currentUserId]);

  const cards = [
    { key: 'my-day',    title: 'My Day',     desc: "Today's focused queue",          glyph: '☀', tint: '#F59E0B', n: c.myDay },
    { key: 'important', title: 'Important',  desc: 'Starred tasks across spaces',    glyph: '★', tint: '#EC4899', n: c.important },
    { key: 'my-tasks',  title: 'My Tasks',   desc: 'Everything assigned to you',     glyph: '◉', tint: '#6366F1', n: c.myTasks },
    { key: 'mentions',  title: 'Mentions',   desc: 'Where you’ve been called in',    glyph: '@', tint: '#8B5CF6', n: c.mentions },
    { key: 'planned',   title: 'Planned',    desc: 'Tasks with a due date',           glyph: '◳', tint: '#10B981', n: c.planned },
    { key: 'all',       title: 'All Tasks',  desc: 'Across every visible space',     glyph: '⊞', tint: '#3B82F6', n: c.all },
    { key: 'snoozed',   title: 'Snoozed',    desc: 'Hidden until their wake date',    glyph: '◴', tint: '#64748B', n: c.snoozed },
    { key: 'archived',  title: 'Archived',   desc: 'Closed work · read-only',         glyph: '◰', tint: '#94A3B8', n: c.archived },
  ];

  return (
    <div style={{ flex: 1, overflowY: 'auto', background: 'rgb(var(--bg))' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '28px 32px 60px' }}>
        <header style={{ marginBottom: 22 }}>
          <p style={{ margin: 0, fontSize: 12, fontWeight: 600, color: 'rgb(var(--accent))', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Views</p>
          <h1 style={{ margin: '4px 0 0', fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em' }}>Pick a lens</h1>
          <p style={{ margin: '6px 0 0', fontSize: 13.5, color: 'rgb(var(--muted))', maxWidth: 560 }}>
            Different slices of the same workspace. Pick the one that matches how you want to work right now.
          </p>
        </header>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {cards.map(v => (
            <button key={v.key} onClick={() => onView(v.key)} style={{
              textAlign: 'left', padding: 18,
              background: 'rgb(var(--surface))',
              border: '1px solid rgb(var(--rule))',
              borderRadius: 14, boxShadow: 'var(--sh-sm)',
              position: 'relative', overflow: 'hidden',
              transition: 'box-shadow .14s, border-color .14s, transform .06s',
            }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--sh-md)'; e.currentTarget.style.borderColor = v.tint + '60'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--sh-sm)'; e.currentTarget.style.borderColor = 'rgb(var(--rule))'; }}>
              <span style={{ position: 'absolute', top: 0, left: 0, width: 30, height: 3, background: v.tint }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: v.tint + '14', color: v.tint,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16, fontWeight: 700,
                }}>{v.glyph}</div>
                <span style={{ flex: 1 }} />
                <span className="num" style={{ fontSize: 22, fontWeight: 700, color: v.tint, letterSpacing: '-0.02em', lineHeight: 1 }}>{v.n}</span>
              </div>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, letterSpacing: '-0.015em', color: 'rgb(var(--ink))' }}>{v.title}</h3>
              <p style={{ margin: '3px 0 0', fontSize: 12, color: 'rgb(var(--muted))' }}>{v.desc}</p>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ViewsHub = ViewsHub;