// fichaje.eu — Screen: Calendario

const ScreenCalendario = () => {
  const [view, setView] = React.useState('month');
  // May 2026: starts on Friday
  const days = [];
  // Prepend Mon–Thu of previous month
  for (let i = 27; i <= 30; i++) days.push({ d: i, prev: true });
  for (let i = 1; i <= 31; i++) days.push({ d: i, m: 5 });
  // Append next month
  for (let i = 1; i <= 7; i++) days.push({ d: i, next: true });

  const eventByDay = {};
  CAL_EVENTS.forEach(e => {
    const d = parseInt(e.date.split('-')[2]);
    if (e.date.startsWith('2026-05')) {
      eventByDay[d] = eventByDay[d] || [];
      eventByDay[d].push(e);
    }
  });

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18 }}>
      <Card padded={false}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 20px', borderBottom: '1px solid var(--slate-150)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <button style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--slate-50)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--slate-600)' }}><IChevronLeft size={16}/></button>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.015em' }}>Mayo 2026</div>
            <button style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--slate-50)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--slate-600)' }}><IChevronRight size={16}/></button>
            <Btn variant="ghost" size="sm">Hoy</Btn>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Tabs tabs={[{value:'month',label:'Mes'},{value:'week',label:'Semana'},{value:'list',label:'Lista'}]} value={view} onChange={setView}/>
            <Btn variant="primary" size="sm" icon={<IPlus size={14}/>}>Nuevo evento</Btn>
          </div>
        </div>

        {/* Weekday headers */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderBottom: '1px solid var(--slate-150)' }}>
          {['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'].map((d, i) => (
            <div key={d} style={{
              padding: '10px 12px',
              fontSize: 11.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em',
              color: i > 4 ? 'var(--slate-400)' : 'var(--slate-500)',
              borderRight: i < 6 ? '1px solid var(--slate-100)' : 'none',
            }}>{d}</div>
          ))}
        </div>

        {/* Day grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gridAutoRows: 'minmax(108px, auto)' }}>
          {days.map((dd, idx) => {
            const isToday = dd.d === 13 && dd.m === 5;
            const isWeekend = (idx % 7) > 4;
            const events = (dd.m === 5 && eventByDay[dd.d]) || [];
            return (
              <div key={idx} style={{
                padding: 8,
                borderRight: idx % 7 < 6 ? '1px solid var(--slate-100)' : 'none',
                borderBottom: '1px solid var(--slate-100)',
                background: isToday ? 'var(--brand-50)' : (isWeekend ? 'var(--slate-50)' : 'var(--white)'),
                opacity: (dd.prev || dd.next) ? 0.45 : 1,
                position: 'relative',
                minHeight: 108,
              }}>
                <div style={{
                  display: 'inline-flex',
                  alignItems: 'center', justifyContent: 'center',
                  minWidth: 22, height: 22, padding: '0 6px',
                  borderRadius: 999,
                  fontSize: 12, fontWeight: 700,
                  background: isToday ? 'var(--brand-600)' : 'transparent',
                  color: isToday ? '#fff' : 'var(--ink)',
                  marginBottom: 6,
                }}>{dd.d}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {events.map((e, i) => {
                    const colors = {
                      holiday:  ['var(--danger-50)', 'var(--danger-600)'],
                      birthday: ['var(--pink-100)', '#BE185D'],
                      event:    ['var(--brand-100)', 'var(--brand-700)'],
                      vacation: ['var(--warning-100)', 'var(--warning-600)'],
                      today:    ['var(--brand-600)', '#fff'],
                    }[e.type];
                    return (
                      <div key={i} style={{
                        padding: '2px 6px',
                        background: colors[0], color: colors[1],
                        borderRadius: 4,
                        fontSize: 11, fontWeight: 600,
                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                      }} title={e.title}>
                        {e.time && <span className="mono" style={{ marginRight: 4 }}>{e.time}</span>}
                        {e.title}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </Card>

      {/* Right column */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Card>
          <SectionHead title="Próximos eventos"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {CAL_EVENTS.filter(e => e.type !== 'today' && parseInt(e.date.split('-')[2]) >= 13).slice(0, 6).map((e, i) => {
              const tone = e.type === 'holiday' ? 'danger' : e.type === 'birthday' ? 'pink' : e.type === 'vacation' ? 'warning' : 'brand';
              const day = parseInt(e.date.split('-')[2]);
              return (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{
                    width: 42, padding: '4px 0',
                    background: 'var(--slate-50)', borderRadius: 'var(--r-sm)',
                    textAlign: 'center', flexShrink: 0,
                    border: '1px solid var(--slate-150)',
                  }}>
                    <div style={{ fontSize: 10, color: 'var(--slate-500)', fontWeight: 600, textTransform: 'uppercase' }}>May</div>
                    <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)', lineHeight: 1 }}>{day}</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{e.title}</div>
                    <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 2 }}>
                      {e.time ? <span className="mono">{e.time}</span> : <Badge tone={tone}>{e.type === 'holiday' ? 'Festivo' : e.type === 'birthday' ? 'Cumple' : e.type === 'vacation' ? 'Ausencia' : 'Evento'}</Badge>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card>
          <SectionHead title="Leyenda"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {[
              { c: 'var(--brand-600)', l: 'Hoy / evento de equipo' },
              { c: 'var(--danger-500)', l: 'Festivo nacional / autonómico' },
              { c: 'var(--warning-500)', l: 'Ausencia / vacaciones aprobadas' },
              { c: 'var(--pink-500)', l: 'Cumpleaños y aniversarios' },
              { c: 'var(--violet-500)', l: 'Ausencias pendientes' },
            ].map((x, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--slate-700)' }}>
                <span style={{ width: 12, height: 12, borderRadius: 3, background: x.c }}/>
                {x.l}
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <SectionHead title="Festivos próximos" subtitle="Calendario laboral España"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { d: '24 jun', n: 'San Juan (CAT)' },
              { d: '15 ago', n: 'Asunción de la Virgen' },
              { d: '12 oct', n: 'Fiesta Nacional' },
              { d: '01 nov', n: 'Todos los Santos' },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderTop: i ? '1px solid var(--slate-100)' : 'none', fontSize: 13 }}>
                <span style={{ color: 'var(--slate-700)' }}>{f.n}</span>
                <span className="mono" style={{ color: 'var(--slate-500)', fontWeight: 600 }}>{f.d}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenCalendario });