const { useState: useStatePack } = React;

const PACK_SECTIONS = [
  { id: 'summary', title: 'Executive summary', badge: 'Draft' },
  { id: 'direction', title: 'Direction and fit', badge: 'Draft' },
  { id: 'evidence', title: 'Evidence', badge: 'Needs work' },
  { id: 'criteria', title: 'Selection criteria', badge: 'Draft' },
  { id: 'pitch', title: 'Two-minute pitch', badge: 'Draft' },
  { id: 'letter', title: 'Cover letter', badge: 'Draft' },
  { id: 'review', title: 'Coach review notes', badge: 'Pending' },
];

function PackPreview({ pack, onBack }) {
  const t = useBrand();
  const [section, setSection] = useStatePack('summary');

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
        <div>
          <Button kind="ghost" onClick={onBack} style={{ marginBottom: 10, paddingLeft: 0 }}>← Back to dashboard</Button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <Badge tone="primary">In review</Badge>
            <span style={{ font: "400 13px/1 Inter, Arial", color: t.muted }}>Updated 18 April &nbsp;·&nbsp; Coach review: Beryl, 22 April</span>
          </div>
          <h1 style={{ font: "700 32px/1.1 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.015em' }}>{pack.title}</h1>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <Button kind="secondary">Export PDF</Button>
          <Button kind="primary">Send to Beryl</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr 280px', gap: 28 }}>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {PACK_SECTIONS.map(s => (
            <button key={s.id} onClick={() => setSection(s.id)} style={{
              textAlign: 'left', border: 'none', cursor: 'pointer',
              padding: '10px 14px', borderRadius: 6,
              background: section === s.id ? t.primaryLight : 'transparent',
              borderLeft: `3px solid ${section === s.id ? t.primary : 'transparent'}`,
              font: "500 14px/1.3 Inter, Arial",
              color: section === s.id ? t.ink : t.body,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
            }}>
              <span style={{ fontWeight: section === s.id ? 600 : 500 }}>{s.title}</span>
              {s.badge === 'Needs work' && <span style={{ width: 6, height: 6, borderRadius: 999, background: t.secondary }} />}
            </button>
          ))}
        </nav>

        <Card style={{ padding: 40 }}>
          <div style={{ maxWidth: 640 }}>
            {section === 'summary' && <Document
              eyebrow="Executive summary"
              title="A six-month move from EL2 to SES Band 1, anchored in evidence."
              body={[
                'You have led cross-agency evaluation work for two years. The next step is signing off the strategy, not reviewing it. This pack positions you for SES Band 1 Strategy roles in ISR, Finance, and PM&C.',
                'Three sprints: portfolio lock 30 April, two target applications in May, executive coaching with Beryl through June.',
              ]}
            />}
            {section === 'direction' && <Document
              eyebrow="Direction and fit"
              title="Why SES Band 1 Strategy, now."
              body={[
                'Your last two EL2 roles have held Band 1 scope in practice. Industry Growth Program review (2024) and Critical Minerals evaluation design (2025) both required you to convene agency executives and sign off the direction.',
                'The move formalises the work you are already doing. It is not a pivot. It is a title catching up to the scope.',
              ]}
            />}
            {section === 'evidence' && <Document
              eyebrow="Evidence"
              title="One story, named and dated."
              body={[
                'Industry Growth Program review, 2024. You brought seven agency teams into alignment on a shared evaluation frame by 15 August, ahead of the 30 September board sign-off. Three of the seven had previously declined to participate in joint frames.',
                'Draft STAR response below. Beryl flagged that the R (result) needs a second measurable outcome beyond the date shift.',
              ]}
              callout={{ tone: t.secondary, label: 'Beryl', text: 'Add one specific outcome: headcount, budget reallocated, or a policy decision this unblocked.' }}
            />}
            {section === 'criteria' && <Document
              eyebrow="Selection criteria"
              title="Four responses, drafted to the 2026 SES capability framework."
              body={[
                'Shapes strategic thinking; achieves results; cultivates productive working relationships; exemplifies personal drive and integrity.',
                'Each response follows the STAR pattern. Each opens with the situation in one sentence, not a warm-up.',
              ]}
            />}
            {section === 'pitch' && <Document
              eyebrow="Two-minute pitch"
              title="Delivered sitting down, not performed."
              body={[
                'Opens with the direction: "I want to sign off the strategy I am currently reviewing." Follows with the scope already held. Closes with what the next six months look like, named and dated.',
              ]}
            />}
            {section === 'letter' && <Document
              eyebrow="Cover letter"
              title="One page. Australian English. Sentence case."
              body={['Draft below. Lead with the role you want, not your background. The panel already has the CV.']}
            />}
            {section === 'review' && <Document
              eyebrow="Coach review notes"
              title="Beryl reviews on 22 April."
              body={['Evidence section needs one more dated outcome. Pitch is strong. Cover letter opens with "I\u2019d like to share" — rewrite to open with substance.']}
            />}
          </div>
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card>
            <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 10 }}>Pack health</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[['Sentence case', true], ['No em-dashes', true], ['Australian English', true], ['Banned phrases', true], ['Dated evidence', false]].map(([l, ok]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', font: "500 13px/1 Inter, Arial", color: t.body }}>
                  <span>{l}</span>
                  <span style={{ color: ok ? t.primary : t.secondary, fontWeight: 600 }}>{ok ? '✓' : '×'}</span>
                </div>
              ))}
            </div>
          </Card>
          <Card accent={t.primary}>
            <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 10 }}>Voice check</div>
            <p style={{ font: "400 13px/1.5 Inter, Arial", color: t.body, margin: 0 }}>
              Reads warm, direct, competent. No hollow phrases detected. One instance of "leverage" on page 3 — rewrite to "use" or "apply".
            </p>
          </Card>
        </div>
      </div>
    </div>
  );
}

function Document({ eyebrow, title, body, callout }) {
  const t = useBrand();
  return (
    <React.Fragment>
      <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.primary, letterSpacing: '.02em', marginBottom: 10 }}>{eyebrow}</div>
      <h2 style={{ font: "700 28px/1.15 'Space Grotesk', Arial", color: t.ink, margin: '0 0 20px', letterSpacing: '-.01em' }}>{title}</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {body.map((p, i) => (
          <p key={i} style={{ font: "400 16px/1.65 Inter, Arial", color: t.body, margin: 0 }}>{p}</p>
        ))}
      </div>
      {callout && (
        <div style={{ marginTop: 20, borderLeft: `3px solid ${callout.tone}`, padding: '8px 20px', font: "400 italic 15px/1.55 Inter, Arial", color: t.ink }}>
          <div style={{ font: "600 11px/1 'Space Grotesk', Arial", color: callout.tone, fontStyle: 'normal', marginBottom: 6, letterSpacing: '.04em' }}>{callout.label}</div>
          {callout.text}
        </div>
      )}
    </React.Fragment>
  );
}

window.PackPreview = PackPreview;