// screen-reminders.jsx — push-notification-style list grouped by trigger type.

function RemindersScreen({ theme, customers, schedule, openCustomer }) {
  const today = new Date().toISOString().slice(0, 10);
  // Real reminders we can surface today: nurturing customers whose ready-date has arrived.
  const reminders = customers
    .filter(c => c.nurturing && c.readyDate && c.readyDate <= today)
    .map(c => ({
      id: c.id, t: 'Today', kind: 'nurturing', icon: 'sprout', tone: 'green',
      title: (c.name || 'Customer') + ' is ready',
      sub: c.car ? ('Wants ' + String(c.car).toLowerCase()) : 'Nurturing customer',
      cid: c.id, when: 'auto-resurfaced',
    }));

  return (
    <React.Fragment>
      <TopBar theme={theme} large
        kicker={reminders.length ? ('Push notifications · ' + reminders.length + ' ahead') : 'Push notifications'}
        title="Reminders"
        trailing={
          <button style={{
            border: 'none', background: theme.surface, width: 36, height: 36,
            borderRadius: 99, color: theme.text, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `0.5px solid ${theme.border}`,
          }}>
            <Icon name="bell" size={16}/>
          </button>
        }
      />

      <ScrollBody>
        <SectionHeader theme={theme} title="Upcoming" count={reminders.length} kicker="TODAY"/>
        {reminders.length === 0 ? (
          <Card theme={theme}>
            <div style={{ padding: '8px 2px', textAlign: 'center' }}>
              <div style={{ color: theme.text, fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>Nothing due yet</div>
              <div style={{ color: theme.textMute, fontSize: 13, marginTop: 4, lineHeight: 1.45 }}>
                Callbacks, appointments and nurturing ready-dates will show up here.
              </div>
            </div>
          </Card>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {reminders.map(r => (
              <ReminderCard key={r.id} r={r} theme={theme}
                onClick={() => openCustomer(r.cid)} />
            ))}
          </div>
        )}

        <div style={{ marginTop: 22 }}>
          <SectionHeader theme={theme} title="Notification settings" kicker="QUIET HOURS"/>
          <Card theme={theme}>
            <SettingRow theme={theme} label="Lead-in window" value="15 min before" />
            <Divider2 theme={theme}/>
            <SettingRow theme={theme} label="Quiet hours" value="7:00 PM – 7:00 AM" />
            <Divider2 theme={theme}/>
            <SettingRow theme={theme} label="Nurturing resurfacing" value="On ready-date · 9:00 AM" />
          </Card>
        </div>

        <div style={{ height: 100 }} />
      </ScrollBody>
    </React.Fragment>
  );
}

function ReminderCard({ r, theme, onClick, past }) {
  const toneMap = {
    blue: { bg: theme.blueSoft, ink: theme.blueInk },
    green: { bg: theme.greenSoft, ink: theme.greenInk },
    red: { bg: theme.redSoft, ink: theme.redInk },
    neutral: { bg: theme.chip, ink: theme.chipInk },
  };
  const t = toneMap[r.tone];
  return (
    <Card theme={theme} onClick={onClick} style={{ opacity: past ? 0.6 : 1 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{
          width: 42, height: 42, borderRadius: 12,
          background: t.bg, color: t.ink, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={r.icon} size={20} stroke={1.9}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8,
          }}>
            <span style={{ fontSize: 15, fontWeight: 600, color: theme.text, letterSpacing: -0.2 }}>
              {r.title}
            </span>
            <span style={{ fontSize: 12, color: t.ink, fontWeight: 600, letterSpacing: -0.05, whiteSpace: 'nowrap' }}>
              {r.t}
            </span>
          </div>
          <div style={{ fontSize: 12.5, color: theme.textMute, marginTop: 2, letterSpacing: -0.05 }}>
            {r.sub}
          </div>
          <div style={{ fontSize: 11.5, color: theme.textDim, marginTop: 4 }}>
            {r.when}
          </div>
        </div>
      </div>
    </Card>
  );
}

function SettingRow({ theme, label, value }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 0',
    }}>
      <span style={{ fontSize: 14.5, color: theme.text, letterSpacing: -0.15 }}>{label}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <span style={{ fontSize: 13, color: theme.textMute, letterSpacing: -0.1 }}>{value}</span>
        <Icon name="chevron" size={14} style={{ color: theme.textDim }}/>
      </div>
    </div>
  );
}

function Divider2({ theme }) {
  return <div style={{ height: 0.5, background: theme.border }} />;
}

window.RemindersScreen = RemindersScreen;