const { Card, Button, Badge, ListRow, Divider, SectionHeader, Callout, EmptyState, Icon, Tag } = window.BowcareDesignSystem_68307b;

/* --- Today: the app's home. One clear next action. --- */
function TodayScreen({ data, onOpenVisit, onAddVisit }) {
  const next = data.visits.find((v) => v.next);
  const past = data.visits.filter((v) => v.status === 'done');
  return (
    <div style={{ display: 'grid', gap: 'var(--gap-section)', gridTemplateColumns: 'minmax(0,1fr)' }}>
      <section aria-labelledby="next-visit-h">
        <p style={{ font: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-subtle)', margin: '0 0 8px' }}>
          Your next visit
        </p>
        {next ? (
          <Card tone="accent">
            <h2 id="next-visit-h" style={{ font: 'var(--text-title-2)', color: 'var(--text-strong)', margin: 0 }}>
              {next.specialty}
            </h2>
            <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-body)', margin: '4px 0 0' }}>{next.doctor}</p>
            <div style={{ display: 'grid', gap: 10, margin: 'var(--space-4) 0' }}>
              <span style={{ display: 'flex', gap: 10, alignItems: 'center', font: 'var(--text-body-default)' }}>
                <Icon name="calendar-days" size={24} color="var(--ribbon-500)" />
                {next.date + ' at ' + next.time}
              </span>
              <span style={{ display: 'flex', gap: 10, alignItems: 'center', font: 'var(--text-body-default)' }}>
                <Icon name="map-pin" size={24} color="var(--ribbon-500)" />
                {next.place}
              </span>
            </div>
            <Button size="large" fullWidth iconAfter="chevron-right" onClick={() => onOpenVisit(next.id)}>
              Get ready
            </Button>
          </Card>
        ) : (
          <EmptyState icon="calendar-days" title="No visits yet" action={<Button icon="plus" onClick={onAddVisit}>Add a visit</Button>}>
            Add the one coming up so you can prepare for it.
          </EmptyState>
        )}
      </section>

      <section aria-labelledby="prep-h">
        <h2 id="prep-h" style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>
          Questions you saved
        </h2>
        <Card padding="0">
          {next && next.questions.length ? next.questions.map((q, i) => (
            <React.Fragment key={q}>
              {i > 0 ? <Divider spacing="0" /> : null}
              <ListRow icon="list-checks" title={q} chevron={false} />
            </React.Fragment>
          )) : null}
          <Divider spacing="0" />
          <ListRow icon="plus" title="Add a question" meta="It shows up on the day" onClick={() => onOpenVisit(next && next.id)} />
        </Card>
      </section>

      <section aria-labelledby="past-h">
        <SectionHeader title="Earlier visits" action="See all" onAction={() => {}} />
        <h2 id="past-h" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}>Earlier visits</h2>
        <Card padding="0">
          {past.map((v, i) => (
            <React.Fragment key={v.id}>
              {i > 0 ? <Divider spacing="0" /> : null}
              <ListRow
                icon={v.icon}
                title={v.specialty + ' — ' + v.doctor}
                meta={v.date + ' · ' + v.time}
                trailing={v.badge ? <Badge tone={v.badge.tone}>{v.badge.label}</Badge> : null}
                onClick={() => onOpenVisit(v.id)}
              />
            </React.Fragment>
          ))}
        </Card>
      </section>
    </div>
  );
}

/* --- Medicines --- */
function MedicinesScreen({ data }) {
  return (
    <div style={{ display: 'grid', gap: 'var(--gap-section)', gridTemplateColumns: 'minmax(0,1fr)' }}>
      <Callout tone="warn" title="One change this week">
        The blood pressure medicine went from 5 mg to 10 mg on Tuesday.
      </Callout>
      <section>
        <h2 style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>What you take</h2>
        <Card padding="0">
          {data.medicines.map((m, i) => (
            <React.Fragment key={m.id}>
              {i > 0 ? <Divider spacing="0" /> : null}
              <ListRow
                icon="pill"
                title={m.generic ? m.name + ' (' + m.generic + ')' : m.name}
                meta={m.dose + ' · ' + m.when}
                trailing={m.changed ? <Badge tone="warn">Changed</Badge> : null}
                onClick={() => {}}
              />
            </React.Fragment>
          ))}
        </Card>
      </section>
      <section>
        <h2 style={{ font: 'var(--text-title-3)', color: 'var(--text-strong)', margin: '0 0 12px' }}>Bring to your visit</h2>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <Tag selected>Pill bottles</Tag>
          <Tag selected>Insurance card</Tag>
          <Tag>Blood pressure log</Tag>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TodayScreen, MedicinesScreen });