// screen-nurturing.jsx — the most important feature.
// Auto-sorted list. Resurfaces customers on their ready-date.

function NurturingScreen({ theme, customers, openCustomer, setTab }) {
  const nurturing = customers.filter(c => c.nurturing);

  // group by readiness
  const today = '2026-05-24';
  const groups = [
    {
      key: 'ready', label: 'Ready now', tone: 'green', kicker: 'RESURFACED',
      items: nurturing.filter(c => c.readyDate <= today)
        .sort((a, b) => a.readyDate.localeCompare(b.readyDate)),
    },
    {
      key: 'soon', label: 'This month', tone: 'blue', kicker: 'COMING UP',
      items: nurturing.filter(c => c.readyDate > today && c.readyDate <= '2026-06-30')
        .sort((a, b) => a.readyDate.localeCompare(b.readyDate)),
    },
    {
      key: 'later', label: 'Later', tone: 'neutral', kicker: 'PARKED',
      items: nurturing.filter(c => c.readyDate > '2026-06-30')
        .sort((a, b) => a.readyDate.localeCompare(b.readyDate)),
    },
  ];

  return (
    <React.Fragment>
      <TopBar theme={theme} large
        kicker="Auto-resurfaces on ready-date"
        title="Nurturing"
        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="plus" size={18}/>
          </button>
        }
      />

      <ScrollBody>
        {/* Hero ready-now banner */}
        {groups[0].items.length > 0 && (
          <div style={{
            background: `linear-gradient(135deg, ${theme.greenSoft}, ${theme.surface})`,
            borderRadius: 18, padding: '14px 16px', marginBottom: 14,
            border: `0.5px solid ${theme.border}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 42, height: 42, borderRadius: 12,
              background: theme.green, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="sprout" size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: theme.text, letterSpacing: -0.2 }}>
                {groups[0].items.length} customer{groups[0].items.length > 1 ? 's' : ''} ready now
              </div>
              <div style={{ fontSize: 12.5, color: theme.textMute, marginTop: 2, letterSpacing: -0.05 }}>
                Their wait-date hit — time to reach out.
              </div>
            </div>
          </div>
        )}

        {groups.map(g => g.items.length === 0 ? null : (
          <div key={g.key} style={{ marginTop: 10 }}>
            <SectionHeader theme={theme} title={g.label} count={g.items.length}
              kicker={g.kicker} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {g.items.map(c => (
                <NurturingCard key={c.id} c={c} theme={theme} tone={g.tone}
                  onClick={() => openCustomer(c.id)} />
              ))}
            </div>
          </div>
        ))}

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

function NurturingCard({ c, theme, tone, onClick }) {
  const isReady = tone === 'green';
  return (
    <Card theme={theme} onClick={onClick} status={c.status}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <Avatar name={c.name} theme={theme} size={42}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8,
          }}>
            <span style={{ fontSize: 16, fontWeight: 600, color: theme.text, letterSpacing: -0.2 }}>
              {c.name}
            </span>
            <Chip theme={theme} tone={tone}>
              {isReady ? 'Ready' : humanDate(c.readyDate)}
            </Chip>
          </div>
          <div style={{
            fontSize: 13, color: theme.textMute, marginTop: 2, letterSpacing: -0.1,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            Wants {c.car.toLowerCase()}
          </div>
          <div style={{ fontSize: 12, color: theme.textDim, marginTop: 3 }}>
            {(Array.isArray(c.finance) ? c.finance.join(' · ') : c.finance)} · {c.location}
          </div>
        </div>
      </div>
    </Card>
  );
}

window.NurturingScreen = NurturingScreen;