const { useState: useStateIntake } = React;

const INTAKE_STEPS = ['Direction', 'Role', 'Evidence', 'Constraints', 'Review'];

function Intake({ onDone, onBack }) {
  const t = useBrand();
  const [step, setStep] = useStateIntake(1);
  const [direction, setDirection] = useStateIntake('EL2 to SES Band 1');
  const [timeframe, setTimeframe] = useStateIntake(['Next 6 months']);
  const [role, setRole] = useStateIntake('Assistant Secretary, Strategy and Performance');
  const [org, setOrg] = useStateIntake('Department of Industry, Science and Resources');
  const [story, setStory] = useStateIntake('Led the twelve-month review of the Industry Growth Program in 2024. Brought 7 agency teams into alignment on a shared evaluation frame by 15 August, ahead of the 30 September board sign-off.');
  const [constraints, setConstraints] = useStateIntake(['Stay in Canberra', 'Keep Fridays']);

  const next = () => step < INTAKE_STEPS.length - 1 ? setStep(step + 1) : onDone();
  const prev = () => step > 0 ? setStep(step - 1) : onBack();

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <div>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 8 }}>New briefing pack</div>
          <h1 style={{ font: "700 30px/1.1 'Space Grotesk', Arial", color: t.ink, margin: 0, letterSpacing: '-.015em' }}>Exec leadership pack</h1>
        </div>
        <Button kind="ghost" onClick={onBack}>← Back to dashboard</Button>
      </div>

      <div style={{ marginBottom: 32 }}>
        <Stepper steps={INTAKE_STEPS} current={step} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 28 }}>
        <Card>
          {step === 0 && <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: 0 }}>Where are you heading?</h3>
            <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: 0 }}>The pack reads better when the direction is named, not hinted at. One sentence is enough.</p>
            <Field label="Direction"><TextInput value={direction} onChange={setDirection} placeholder="e.g. EL2 to SES Band 1" /></Field>
            <Field label="Timeframe"><ChipGroup multi value={timeframe} onChange={setTimeframe} options={['Next 3 months', 'Next 6 months', 'Next 12 months', 'Exploratory']} /></Field>
          </div>}

          {step === 1 && <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: 0 }}>Your current role.</h3>
            <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: 0 }}>Name the role, not the brand. Specifics beat cleverness.</p>
            <Field label="Role title"><TextInput value={role} onChange={setRole} /></Field>
            <Field label="Organisation"><TextInput value={org} onChange={setOrg} /></Field>
          </div>}

          {step === 2 && <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: 0 }}>Evidence.</h3>
            <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: 0 }}>One story. Name the date, the deliverable, and what shifted. We'll draft the STAR response from this.</p>
            <Field label="Story"><Textarea rows={6} value={story} onChange={setStory} /></Field>
          </div>}

          {step === 3 && <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: 0 }}>Constraints.</h3>
            <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: 0 }}>What's off the table? The pack will respect these when suggesting paths.</p>
            <ChipGroup multi value={constraints} onChange={setConstraints} options={['Stay in Canberra', 'Keep Fridays', 'Stay in the APS', 'Stay in policy', 'No people leadership', 'Open to all']} />
          </div>}

          {step === 4 && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <h3 style={{ font: "700 22px/1.2 'Space Grotesk', Arial", color: t.ink, margin: 0 }}>Ready to draft.</h3>
            <p style={{ font: "400 15px/1.5 Inter, Arial", color: t.body, margin: 0 }}>Ten sections, drafted in Australian English, sentence case throughout. Beryl will review before you send.</p>
            <div style={{ background: t.soft, border: `1px solid ${t.rule}`, borderRadius: 8, padding: 16 }}>
              <div style={{ font: "600 12px/1 'Space Grotesk', Arial", color: t.primary, marginBottom: 10 }}>Summary</div>
              <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '8px 16px', font: "400 14px/1.5 Inter, Arial", color: t.body }}>
                <span style={{ color: t.ink, fontWeight: 600 }}>Direction</span><span>{direction}</span>
                <span style={{ color: t.ink, fontWeight: 600 }}>Role</span><span>{role}</span>
                <span style={{ color: t.ink, fontWeight: 600 }}>Organisation</span><span>{org}</span>
                <span style={{ color: t.ink, fontWeight: 600 }}>Constraints</span><span>{constraints.join(', ') || 'None named'}</span>
              </div>
            </div>
          </div>}

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, paddingTop: 20, borderTop: `1px solid ${t.rule}` }}>
            <Button kind="ghost" onClick={prev}>← {step === 0 ? 'Cancel' : 'Previous'}</Button>
            <Button kind={step === INTAKE_STEPS.length - 1 ? 'cta' : 'primary'} onClick={next}>
              {step === INTAKE_STEPS.length - 1 ? 'Generate pack' : 'Next'}
            </Button>
          </div>
        </Card>

        <Card accent={t.secondary}>
          <div style={{ font: "600 13px/1 'Space Grotesk', Arial", color: t.secondary, marginBottom: 10 }}>Why this question</div>
          <h3 style={{ font: "700 18px/1.25 'Space Grotesk', Arial", color: t.ink, margin: '0 0 10px' }}>
            {step === 0 && 'Name the direction.'}
            {step === 1 && 'Ground it in the role.'}
            {step === 2 && 'One real story.'}
            {step === 3 && 'What\u2019s off the table.'}
            {step === 4 && 'Last chance to edit.'}
          </h3>
          <p style={{ font: "400 14px/1.55 Inter, Arial", color: t.body, margin: 0 }}>
            {step === 0 && 'Vague direction produces vague packs. One sentence beats five bullet points here.'}
            {step === 1 && 'We write the pack for where you are, not where your CV says you were five years ago.'}
            {step === 2 && 'The reader believes dated, deliverable-anchored stories. Not adjectives.'}
            {step === 3 && 'Constraints focus the path. Fewer options, better fit.'}
            {step === 4 && 'The draft is a hypothesis. Beryl reviews before you send anywhere.'}
          </p>
        </Card>
      </div>
    </div>
  );
}

window.Intake = Intake;