// Agenda/Dates screen — timeline list grouped by proximity
function DatesScreen({ onBell, setTab, openContract }) {
  const today = new Date('2026-04-21');
  const withRel = EVENTS.map(e => {
    const d = new Date(e.date);
    const days = Math.round((d - today) / 86400000);
    return { ...e, d, days };
  });
  const thisWeek = withRel.filter(e => e.days <= 7);
  const thisMonth = withRel.filter(e => e.days > 7 && e.days <= 30);
  const later = withRel.filter(e => e.days > 30);

  return (
    <div style={{ background: FA.bgSoft, minHeight: '100%', paddingBottom: 120, fontFamily: FA.sans }}>
      <AppHeader onBell={onBell} unread={2}/>
      <div style={{ padding: '4px 20px 14px' }}>
        <div style={{ fontSize: 28, fontWeight: 700, color: FA.ink, letterSpacing: -0.8 }}>Agenda</div>
        <div style={{ fontSize: 13, color: FA.muted, marginTop: 3 }}>
          Fechas clave de firma y retiros próximos
        </div>
      </div>

      {/* urgent banner */}
      {thisWeek.filter(e => e.urgent).map(e => (
        <div key={e.id} style={{ padding: '0 16px 12px' }}>
          <div style={{
            background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
            borderRadius: 16, padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12,
            border: '1px solid rgba(146,64,14,0.1)',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 12, background: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="pen" size={18} color="#92400e" strokeWidth={2}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: '#92400e', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.4 }}>
                Acción requerida · mañana
              </div>
              <div style={{ fontSize: 13.5, color: '#451a03', fontWeight: 650, marginTop: 2 }}>
                Firmar contrato con Textiles Norte
              </div>
            </div>
            <button onClick={() => openContract && openContract(CONTRACTS.find(c => c.id === 'FA-0435'))}
                    style={{
              background: '#92400e', color: '#fff', border: 'none',
              padding: '8px 12px', borderRadius: 10, fontSize: 12, fontWeight: 600,
              cursor: 'pointer', fontFamily: FA.sans,
            }}>Firmar</button>
          </div>
        </div>
      ))}

      <AgendaGroup title="Esta semana" events={thisWeek} today={today}/>
      <AgendaGroup title="Este mes" events={thisMonth} today={today}/>
      <AgendaGroup title="Más adelante" events={later} today={today}/>
    </div>
  );
}

function AgendaGroup({ title, events, today }) {
  if (!events.length) return null;
  return (
    <div style={{ padding: '4px 16px 10px' }}>
      <div style={{
        padding: '10px 4px 8px',
        fontSize: 11.5, color: FA.muted, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: 0.6,
      }}>{title}</div>
      <Card pad={0}>
        {events.map((e, i) => (
          <EventRow key={e.id} e={e} last={i === events.length - 1}/>
        ))}
      </Card>
    </div>
  );
}

function EventRow({ e, last }) {
  const typeConfig = {
    sign:     { icon: 'pen',      bg: '#fef3c7', fg: '#92400e', label: 'Firma' },
    withdraw: { icon: 'download', bg: '#dcfce7', fg: '#166534', label: 'Retiro' },
    review:   { icon: 'trend',    bg: FA.skySoft, fg: FA.blue,  label: 'Revisión' },
  }[e.type];
  const relText = e.days === 0 ? 'Hoy' : e.days === 1 ? 'Mañana' : e.days < 7 ? `en ${e.days} días` : fmtDateES(e.d);

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px',
      borderBottom: last ? 'none' : '1px solid ' + FA.hairline,
    }}>
      <div style={{
        width: 44, display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0,
      }}>
        <div style={{ fontSize: 10, color: FA.muted, fontWeight: 600, textTransform: 'uppercase' }}>
          {['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'][e.d.getMonth()]}
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: FA.ink, fontFamily: FA.mono, lineHeight: 1, letterSpacing: -0.5 }}>
          {e.d.getDate()}
        </div>
      </div>
      <div style={{
        width: 1, alignSelf: 'stretch', background: FA.hairline, margin: '2px 2px',
      }}/>
      <div style={{
        width: 30, height: 30, borderRadius: 9, background: typeConfig.bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={typeConfig.icon} size={15} color={typeConfig.fg} strokeWidth={2}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, color: FA.ink, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {e.title}
        </div>
        <div style={{ fontSize: 11.5, color: FA.muted, marginTop: 2 }}>{e.subtitle}</div>
      </div>
      <div style={{
        fontSize: 11, color: e.urgent ? FA.danger : FA.muted, fontWeight: 600, flexShrink: 0,
      }}>{relText}</div>
    </div>
  );
}

Object.assign(window, { DatesScreen });