const { Card, Button, Badge, ListRow, Divider, Callout, Icon, Input, Textarea, Select, Radio, Checkbox, Switch, Stepper, Dialog, IconButton } = window.BowcareDesignSystem_68307b;

/* --- One visit, everything about it --- */
function VisitDetailScreen({ visit, onAddNote, onDelete }) {
  const [confirm, setConfirm] = React.useState(false);
  return (
    <div style={{ display: 'grid', gap: 'var(--gap-section)', gridTemplateColumns: 'minmax(0,1fr)' }}>
      <section>
        <h2 style={{ font: 'var(--text-title-2)', color: 'var(--text-strong)', margin: 0 }}>{visit.specialty}</h2>
        <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-body)', margin: '4px 0 var(--space-4)' }}>{visit.doctor}</p>
        <div style={{ display: 'grid', gap: 10 }}>
          <span style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon name="calendar-days" size={24} color="var(--sage-600)" />{visit.date + ' at ' + visit.time}
          </span>
          <span style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon name="map-pin" size={24} color="var(--sage-600)" />{visit.place}
          </span>
        </div>
      </section>

      {visit.takeaway ? (
        <section aria-labelledby="takeaway-h">
          <h3 id="takeaway-h" style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>Takeaway</h3>
          <Callout tone="note">{visit.takeaway}</Callout>
        </section>
      ) : null}

      <section aria-labelledby="notes-h">
        <h3 id="notes-h" style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>Notes</h3>
        <Card padding="0">
          {visit.notes.length ? visit.notes.map((n, i) => (
            <React.Fragment key={n.id}>
              {i > 0 ? <Divider spacing="0" /> : null}
              <ListRow icon="notebook-pen" title={n.text} meta={n.time} chevron={false} />
            </React.Fragment>
          )) : (
            <div style={{ padding: 'var(--space-5)', font: 'var(--text-body-default)', color: 'var(--text-muted)' }}>
              Nothing written down yet.
            </div>
          )}
        </Card>
        <div style={{ display: 'grid', gap: 12, marginTop: 'var(--space-4)' }}>
          <Button size="large" fullWidth icon="mic" onClick={onAddNote}>Record a note</Button>
          <Button tone="secondary" fullWidth icon="pencil" onClick={onAddNote}>Write a note</Button>
        </div>
      </section>

      <section>
        <Card padding="0">
          <ListRow icon="share-2" title="Share with Diane" meta="She can read, not change" onClick={() => {}} />
          <Divider spacing="0" />
          <ListRow icon="printer" title="Print a summary" meta="One page, large print" onClick={() => {}} />
          <Divider spacing="0" />
          <ListRow icon="x" iconTone="var(--stop-500)" title="Delete this visit" onClick={() => setConfirm(true)} />
        </Card>
      </section>

      <Dialog
        open={confirm}
        title="Delete this visit?"
        onClose={() => setConfirm(false)}
        actions={<>
          <Button tone="danger" fullWidth onClick={() => { setConfirm(false); onDelete(); }}>Delete it</Button>
          <Button tone="secondary" fullWidth onClick={() => setConfirm(false)}>Keep it</Button>
        </>}
      >
        The notes and the recording go with it.
      </Dialog>
    </div>
  );
}

/* --- Add a visit: the one form in the app --- */
function AddVisitScreen({ onSave }) {
  const [doctor, setDoctor] = React.useState('');
  const [date, setDate] = React.useState('');
  const [how, setHow] = React.useState('In person');
  const [remind, setRemind] = React.useState(true);
  const [bring, setBring] = React.useState(true);
  const [error, setError] = React.useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!doctor.trim()) { setError('Add the doctor’s name so you can find this visit later.'); return; }
    setError('');
    onSave();
  };

  return (
    <form onSubmit={submit} style={{ display: 'grid', gap: 'var(--space-6)', gridTemplateColumns: 'minmax(0,1fr)' }} noValidate>
      <Input
        label="Doctor’s name"
        hint="First and last is fine"
        value={doctor}
        onChange={(e) => setDoctor(e.target.value)}
        error={error || undefined}
      />
      <Select label="Kind of visit" options={['Check-up', 'Specialist', 'Follow-up', 'Test or scan']} onChange={() => {}} />
      <Input label="Date" hint="Day, month, year" mono value={date} placeholder="14 03 2026" onChange={(e) => setDate(e.target.value)} />
      <fieldset style={{ border: 0, padding: 0, margin: 0, display: 'grid', gap: 12 }}>
        <legend style={{ font: 'var(--text-label)', color: 'var(--text-strong)', padding: 0 }}>How will you see the doctor?</legend>
        <Radio name="how" options={['In person', 'Video call', 'Phone call']} value={how} onChange={setHow} />
      </fieldset>
      <Textarea label="Anything to remember?" rows={3} placeholder="Parking is behind the building" onChange={() => {}} />
      <div style={{ display: 'grid', gap: 4 }}>
        <Switch label="Remind me the day before" description="A text message at 6 pm" checked={remind} onChange={setRemind} />
        <Checkbox label="Bring the pill bottles" description="Every bottle, even the vitamins" checked={bring} onChange={setBring} />
      </div>
      <Button size="large" fullWidth type="submit">Save this visit</Button>
    </form>
  );
}

/* --- Settings: the accessibility controls seniors actually change --- */
function SettingsScreen() {
  const [text, setText] = React.useState(20);
  const [big, setBig] = React.useState(true);
  const [motion, setMotion] = React.useState(false);
  return (
    <div style={{ display: 'grid', gap: 'var(--gap-section)', gridTemplateColumns: 'minmax(0,1fr)' }}>
      <section aria-labelledby="reading-h">
        <h2 id="reading-h" style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>Reading</h2>
        <Card>
          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <Stepper label="Text size" value={text} min={16} max={32} step={2} unit="px" onChange={setText} />
            <Divider spacing="0" />
            <Switch label="Extra large buttons" description="Taller and easier to hit" checked={big} onChange={setBig} />
            <Divider spacing="0" />
            <Switch label="Reduce movement" description="Turns off fades and slides" checked={motion} onChange={setMotion} />
          </div>
        </Card>
      </section>
      <section aria-labelledby="people-h">
        <h2 id="people-h" style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>People who can see your visits</h2>
        <Card padding="0">
          <ListRow icon="users-round" title="Diane Halloran" meta="Daughter · can read" trailing={<Badge tone="go">Sharing</Badge>} onClick={() => {}} />
          <Divider spacing="0" />
          <ListRow icon="plus" title="Add someone" meta="They get a code by text" onClick={() => {}} />
        </Card>
      </section>
      <section>
        <Card padding="0">
          <ListRow icon="file-text" title="Accessibility statement" meta="WCAG 2.1 AA · AODA" onClick={() => {}} />
          <Divider spacing="0" />
          <ListRow icon="info" title="How Bowcare keeps notes private" onClick={() => {}} />
        </Card>
      </section>
    </div>
  );
}

Object.assign(window, { VisitDetailScreen, AddVisitScreen, SettingsScreen });