const { TaskGrid, TaskCard, Field, Input, Textarea, Select, Checkbox, Radio, Fieldset,
  FormActions, Button, InlineHint } = window.EquestrianismDesignSystem_6b57f9;

function NewTask({ go }) {
  const [picked, setPicked] = React.useState(null);
  const [cron, setCron] = React.useState('0 7 * * 1');
  const cronErr = cron.trim().split(/\s+/).length !== 5
    ? `That cron expression has ${cron.trim().split(/\s+/).length} fields; five are expected.` : null;
  return (
    <div className="stack">
      <window.PageHead title="New task" sub="Start from a template, or describe the task yourself." />
      <TaskGrid>
        <TaskCard letter="S" title="Weekly shop" onClick={() => setPicked('Weekly shop')}
          description="Restore the basket, propose substitutions, gate at checkout." />
        <TaskCard letter="R" title="Research" onClick={() => setPicked('Research')}
          description="A cited report on any question, delivered as an artifact." />
        <TaskCard letter="A" title="Admin" onClick={() => setPicked('Admin')}
          description="Forms, renewals, appointments — approval on anything sent." />
        <TaskCard letter="C" title="Correspondence" onClick={() => setPicked('Correspondence')}
          description="Draft and send email on your behalf. Always gated." />
      </TaskGrid>
      <form className="panel" onSubmit={(e) => { e.preventDefault(); go('board'); }}>
        <p className="panel-lbl">{picked ? `From template — ${picked}` : 'From scratch'}</p>
        <div className="stack" style={{ gap: 14 }}>
          <Field label="Task name" required hint="Shown on the board and in the transcript.">
            <Input placeholder="Weekly shop" defaultValue={picked || ''} key={picked} />
          </Field>
          <Field label="Prompt" required>
            <Textarea mono rows={3} placeholder="What should the agent do, and where should it stop and ask?" />
          </Field>
          <div className="two-col">
            <Field label="Model">
              <Select defaultValue="sonnet">
                <option value="sonnet">claude-sonnet-4-5</option>
                <option value="haiku">claude-haiku-4-5</option>
              </Select>
            </Field>
            <Field label="Budget cap (USD)" hint="The run pauses at the cap; it never overruns it.">
              <Input type="number" step="0.50" defaultValue="2.00" />
            </Field>
          </div>
          <Fieldset legend="Schedule" hint="Leave unscheduled to run once, now.">
            <Field label="Cron expression" error={cronErr}>
              <Input mono value={cron} onChange={(e) => setCron(e.target.value)} style={{ maxWidth: 240 }} />
            </Field>
            <InlineHint>Minute hour day month weekday, in UTC.</InlineHint>
          </Fieldset>
          <Fieldset legend="Permissions" hint="What this task may do without asking.">
            <Radio name="perm" label="Read only" hint="Browse and summarise; no side effects." />
            <Radio name="perm" label="Act with approval" defaultChecked
              hint="Consequential tool calls wait in the approvals inbox." />
            <Radio name="perm" label="Act freely" hint="For low-stakes tasks only." />
          </Fieldset>
          <Checkbox label="Email me the result" hint="One message per run, to the account address." defaultChecked />
          <FormActions>
            <Button type="submit" disabled={!!cronErr}>Start task</Button>
            <Button variant="ghost" type="button" onClick={() => go('board')}>Cancel</Button>
          </FormActions>
        </div>
      </form>
    </div>
  );
}
window.NewTask = NewTask;