const { useState: useStateDash } = React;

function Dashboard({ packs, onOpen, onNew }) {
  const t = useBrand();
  const greetingEyebrow = t.key === 'elysium' ? 'Your EPL briefing packs' : 'Your briefing packs';
  const coachCopy = t.key === 'elysium'
    ? 'She\'ll focus on the evidence section, with your EPL peer reviewers cc\'d. Add two stories that name the date, the deliverable, and the outcome before Monday.'
    : 'She\'ll focus on the evidence section. Add two stories that name the date, the deliverable, and the outcome before Monday.';

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28, gap: 20 }}>
        <div>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 10 }}>{greetingEyebrow}</div>
          <h1 style={{ font: "700 36px/1.1 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.015em' }}>Kia ora, Ailsa.</h1>
          <p style={{ font: "400 17px/1.5 Inter, Arial", color: t.body, margin: '10px 0 0', maxWidth: 640 }}>
            Three packs in progress. One ready for your coach review on 22 April.
          </p>
        </div>
        <Button kind="cta" onClick={onNew}>Start a new pack</Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {packs.map(p => (
          <Card key={p.id} accent={p.accent || t.primary} onClick={() => onOpen(p)}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <Badge tone={p.badgeTone}>{p.status}</Badge>
              <span style={{ font: "400 12px/1 Inter, Arial", color: t.muted }}>Updated {p.updated}</span>
            </div>
            <h3 style={{ font: "700 19px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px' }}>{p.title}</h3>
            <p style={{ font: "400 14px/1.5 Inter, Arial", color: t.body, margin: '0 0 18px', minHeight: 42 }}>{p.summary}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ flex: 1, height: 4, background: t.soft, borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: `${p.progress}%`, height: '100%', background: t.primary }} />
              </div>
              <span style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.body, marginLeft: 12 }}>{p.progress}%</span>
            </div>
          </Card>
        ))}
        <Card style={{ border: `1px dashed ${t.rule}`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 200, cursor: 'pointer' }} onClick={onNew}>
          <div style={{ font: "700 28px/1 'Space Grotesk', Arial", color: t.primary }}>+</div>
          <div style={{ font: "600 14px/1 'Space Grotesk', Arial", color: t.ink, marginTop: 10 }}>Start a new pack</div>
          <div style={{ font: "400 13px/1.4 Inter, Arial", color: t.muted, marginTop: 6, textAlign: 'center', maxWidth: 200 }}>Fifteen minutes of intake, then a first draft.</div>
        </Card>
      </div>

      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <Card>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 10 }}>Coach review</div>
          <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px' }}>Beryl reviews your exec leadership pack on 22 April.</h3>
          <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: '0 0 16px', maxWidth: 560 }}>
            {coachCopy}
          </p>
          <Button kind="secondary">Add evidence</Button>
        </Card>
        <Card accent={t.tertiary}>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.tertiaryDark, marginBottom: 10 }}>Reminder</div>
          <h3 style={{ font: "700 18px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px' }}>APS application closes 30 April.</h3>
          <p style={{ font: "400 14px/1.5 Inter, Arial", color: t.body, margin: 0 }}>
            You've drafted the selection criteria responses. Lock them in by 25 April to leave a week for Beryl.
          </p>
        </Card>
      </div>

      {t.key === 'elysium' && (
        <div style={{ marginTop: 40 }}>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.secondaryDark, marginBottom: 12, letterSpacing: '.02em', textTransform: 'uppercase' }}>EPL cohort</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            <Card>
              <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 8 }}>Next session</div>
              <h4 style={{ font: "700 17px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px' }}>Pressure-testing your evidence</h4>
              <p style={{ font: "400 13px/1.5 Inter, Arial", color: t.body, margin: 0 }}>Wednesday 24 April, 7.30am, Commonwealth Club. Eight peers, two hours, one story each.</p>
            </Card>
            <Card>
              <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 8 }}>Peer reviews due</div>
              <h4 style={{ font: "700 17px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px' }}>Two drafts in your queue</h4>
              <p style={{ font: "400 13px/1.5 Inter, Arial", color: t.body, margin: 0 }}>Mira's board pack and James's criteria responses. Turn around by 21 April, 5pm.</p>
            </Card>
            <Card>
              <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 8 }}>Cohort readings</div>
              <h4 style={{ font: "700 17px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 8px' }}>Week three: public value</h4>
              <p style={{ font: "400 13px/1.5 Inter, Arial", color: t.body, margin: 0 }}>Moore's framework, then the 2024 Productivity Commission rework. 40 minutes, annotated.</p>
            </Card>
          </div>
        </div>
      )}
    </div>
  );
}

window.Dashboard = Dashboard;