// Tela: Calendário — semana atual + eventos do dia

const { useState: useStateCal } = React;

function NovoEventoModal({ onClose, onCreate, selectedDay }) {
  const [titulo, setTitulo] = useStateCal('');
  const [hora, setHora] = useStateCal('09:00');
  const [dur, setDur] = useStateCal(60);
  const [cor, setCor] = useStateCal('blue');
  const toast = useToast();

  const CORES = [
    { id: 'blue',   label: 'Azul',    bg: 'var(--acc-blue)'   },
    { id: 'pink',   label: 'Rosa',    bg: 'var(--acc-pink)'   },
    { id: 'yellow', label: 'Amarelo', bg: 'var(--acc-yellow)' },
    { id: 'mint',   label: 'Verde',   bg: 'var(--acc-mint)'   },
    { id: 'lav',    label: 'Lavanda', bg: 'var(--acc-lav)'    },
  ];
  const DURACOES = [30, 45, 60, 90, 120];
  const valid = titulo.trim().length > 0;

  const submit = () => {
    if (!valid) return;
    const novo = { hora, dur, titulo: titulo.trim(), color: cor, pessoas: [0] };
    if (onCreate) onCreate(novo);
    toast(`"${titulo.trim()}" agendado às ${hora} ✓`);
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Novo <em>Evento</em></div>
            <div className="modal-sub muted">{selectedDay} · adicione ao calendário</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>

        <div className="form-grid">
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Título do evento *</label>
            <input className="ezz-input" placeholder="Ex: Reunião com cliente" value={titulo} onChange={e => setTitulo(e.target.value)} autoFocus onKeyDown={e => e.key === 'Enter' && submit()} />
          </div>
          <div className="field">
            <label className="field-lbl">Horário de início</label>
            <input className="ezz-input" type="time" value={hora} onChange={e => setHora(e.target.value)} />
          </div>
          <div className="field">
            <label className="field-lbl">Duração</label>
            <select className="ezz-input" value={dur} onChange={e => setDur(+e.target.value)} style={{appearance:'auto'}}>
              {DURACOES.map(d => <option key={d} value={d}>{d < 60 ? `${d} min` : `${d/60}h`}</option>)}
            </select>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Cor do evento</label>
            <div className="row" style={{gap: 10}}>
              {CORES.map(c => (
                <button key={c.id} title={c.label} onClick={() => setCor(c.id)}
                  style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: c.bg,
                    border: cor === c.id ? '3px solid var(--ink)' : '3px solid transparent',
                    boxShadow: cor === c.id ? '0 0 0 2px white inset' : 'none',
                    transform: cor === c.id ? 'scale(1.15)' : 'scale(1)',
                    transition: 'all .15s', cursor: 'default',
                  }}
                />
              ))}
            </div>
          </div>
        </div>

        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
            {ICN.cal} Agendar evento
          </button>
        </div>
      </div>
    </div>
  );
}

const HOURS = ['08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00'];
const DOWS  = ['DOM','SEG','TER','QUA','QUI','SEX','SÁB'];
const PX_PER_MIN = 1; // 60px/hour

// May 2026 grid: starts on Friday (index 5)
const MAY_2026 = (() => {
  const cells = [];
  for (let i = 0; i < 5; i++) cells.push(null); // padding before May 1 (Fri = index 5, so 5 empty cells Sun-Thu)
  for (let d = 1; d <= 31; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);
  const weeks = [];
  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
  return weeks;
})();

const EVENT_DAYS = { 11: EVENTOS_DIA, 13: EVENTOS_DIA, 15: EVENTOS_DIA.slice(0,3), 16: EVENTOS_DIA.slice(2) };

/* ── Modal de detalhe de evento ──────────────────────────── */
function EventoDetailModal({ evento, onClose, onDelete }) {
  const { useState: useED } = React;
  const [titulo, setTitulo] = useED(evento.titulo);
  const toast = useToast();

  const durLabel = evento.dur >= 60
    ? `${Math.floor(evento.dur/60)}h${evento.dur%60 ? ' ' + (evento.dur%60) + 'min' : ''}`
    : `${evento.dur}min`;

  const save = () => {
    toast(`Evento atualizado ✓`);
    onClose();
  };

  const del = () => {
    if (onDelete) onDelete();
    toast('Evento removido');
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 420}}>
        <div className="modal-head">
          <div>
            <div className="modal-title" style={{fontSize:18}}>Detalhes <em>do evento</em></div>
            <div className="modal-sub muted">{evento.hora} · duração {durLabel}</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="field" style={{marginBottom: 14}}>
          <label className="field-lbl">Título</label>
          <input className="ezz-input" value={titulo} onChange={e => setTitulo(e.target.value)} />
        </div>
        <div className="row" style={{gap: 10, marginBottom: 16}}>
          {evento.pessoas.slice(0,5).map((id, i) => (
            <div key={i} className="row" style={{gap: 6, alignItems:'center'}}>
              <img src={AVATAR_URLS[id]} style={{width: 28, height: 28, borderRadius: '50%'}} alt="" />
              <span style={{fontSize: 12}}>{CONTATOS[id]?.nome?.split(' ')[0] || 'Participante'}</span>
            </div>
          ))}
        </div>
        <div className="modal-actions" style={{justifyContent:'space-between'}}>
          <button className="btn-ghost" style={{color:'var(--acc-pink)'}} onClick={del}>{ICN.trash} Remover</button>
          <div className="row" style={{gap:8}}>
            <button className="btn-ghost" onClick={onClose}>Cancelar</button>
            <button className="btn-primary" onClick={save}>{ICN.check} Salvar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function EventTimeline({ events, compact, onEventClick, nowTop, nowLabel }) {
  const _nowTop  = nowTop  ?? (5*60+42)*PX_PER_MIN;
  const _nowLabel = nowLabel ?? '13:42';
  return (
    <div className="day-grid">
      <div className="hours">
        {HOURS.map(h => <div key={h} className="hour-row"><span>{h}</span></div>)}
        <div className="now-line" style={{top: _nowTop}}>
          <span className="now-dot"/><span className="now-time">{_nowLabel}</span>
        </div>
      </div>
      <div className="events-col">
        {events.map((e,i) => {
          const [h,m] = e.hora.split(':').map(Number);
          const top = ((h-8)*60+m)*PX_PER_MIN;
          const height = e.dur*PX_PER_MIN;
          return (
            <div key={i} className={`event event-${e.color}`} style={{top, height, cursor:'default'}}
              onClick={() => onEventClick && onEventClick(e)}>
              <div className="event-meta">
                <span className="event-time">{e.hora} · {e.dur>=60?`${Math.floor(e.dur/60)}h${e.dur%60?' '+(e.dur%60)+'min':''}`:e.dur+'min'}</span>
                <div className="av-stack">
                  {e.pessoas.slice(0,3).map(id=><img key={id} src={AVATAR_URLS[id]} alt=""/>)}
                  {e.pessoas.length>3&&<span className="av-more" style={{fontSize:9}}>+{e.pessoas.length-3}</span>}
                </div>
              </div>
              {!compact && <div className="event-title">{e.titulo}</div>}
              {compact && height > 40 && <div className="event-title">{e.titulo}</div>}
            </div>
          );
        })}
        <div className="now-line-ev" style={{top: _nowTop}}/>
      </div>
    </div>
  );
}

// ── Helpers de data reais ──────────────────────────────────────────
const MONTHS_PT = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const MONTHS_ABBR = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
const calHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };
const _pad2 = n => String(n).padStart(2,'0');
const dKey = d => `${d.getFullYear()}-${_pad2(d.getMonth()+1)}-${_pad2(d.getDate())}`;
const addDaysCal = (d,n) => { const x = new Date(d); x.setDate(x.getDate()+n); return x; };
const startOfWeekSun = d => addDaysCal(d, -d.getDay());
function transformEvento(e) {
  const ini = new Date(String(e.inicio).replace(' ','T'));
  const fimRaw = e.fim ? new Date(String(e.fim).replace(' ','T')) : null;
  const dur = fimRaw ? Math.max(15, Math.round((fimRaw - ini)/60000)) : 60;
  return { id: e.id, titulo: e.titulo, hora: `${_pad2(ini.getHours())}:${_pad2(ini.getMinutes())}`, dur, color: e.cor || 'blue', pessoas: [], key: dKey(ini), inicio: ini };
}

function WeekStrip({ week, selectedKey, onSelect, byKey }) {
  const todayKey = dKey(new Date());
  return (
    <div className="week-strip">
      {week.map(d => {
        const k = dKey(d); const evs = byKey[k] || [];
        return (
          <div key={k} className={`wday ${selectedKey===k?'wday-sel':''} ${k===todayKey?'wday-today':''}`} onClick={()=>onSelect(d)}>
            <div className="wday-dow">{DOWS[d.getDay()]}</div>
            <div className="wday-num">{d.getDate()}</div>
            <div className="wday-dots">
              {evs.slice(0,3).map((e,i)=><span key={i} className={`wdot wdot-${e.color}`}/>)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function Calendario() {
  const _t0 = new Date(); _t0.setHours(0,0,0,0);
  const [selectedDate, setSelectedDate] = useStateCal(_t0);
  const [weekOffset, setWeekOffset] = useStateCal(0);
  const [monthOffset, setMonthOffset] = useStateCal(0);
  const [viewMode, setViewMode] = useStateCal('Semana');
  const [showNovoEvento, setShowNovoEvento] = useStateCal(false);
  const [eventos, setEventos] = useStateCal([]); // brutos do banco
  const [selectedEvent, setSelectedEvent] = useStateCal(null);
  const [showJumpMenu, setShowJumpMenu] = useStateCal(false);
  const [now, setNow] = useStateCal(new Date());
  const toast = useToast();

  React.useEffect(() => {
    fetch('/api/eventos', { headers: calHeaders() })
      .then(r => r.json()).then(d => { if (d.ok) setEventos(d.eventos); }).catch(() => {});
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);

  const nowH = now.getHours(), nowM = now.getMinutes();
  const nowLabel = `${_pad2(nowH)}:${_pad2(nowM)}`;
  const nowTop = ((nowH - 8) * 60 + nowM) * PX_PER_MIN;

  // Eventos reais agrupados por dia (YYYY-MM-DD)
  const byKey = {};
  eventos.map(transformEvento).forEach(e => { (byKey[e.key] = byKey[e.key] || []).push(e); });
  Object.values(byKey).forEach(arr => arr.sort((a,b) => a.hora.localeCompare(b.hora)));

  const today0 = new Date(); today0.setHours(0,0,0,0);
  const todayKey = dKey(today0);
  const weekStart = addDaysCal(startOfWeekSun(today0), weekOffset*7);
  const week = Array.from({length:7}, (_,i) => addDaysCal(weekStart, i));
  const selKey = dKey(selectedDate);
  const dayEvents = byKey[selKey] || [];
  const monthLabel = `${MONTHS_PT[week[3].getMonth()]} ${week[3].getFullYear()}`;
  const totalSemana = week.reduce((s,d) => s + (byKey[dKey(d)] || []).length, 0);

  // Mês exibido (visão Mês)
  const monthBase = new Date(today0.getFullYear(), today0.getMonth() + monthOffset, 1);
  const mY = monthBase.getFullYear(), mM = monthBase.getMonth();
  const monthLabelM = `${MONTHS_PT[mM]} ${mY}`;

  // Próximos compromissos (de hoje em diante)
  const proximos = eventos.map(transformEvento)
    .filter(e => e.key >= todayKey)
    .sort((a,b) => (a.key + a.hora).localeCompare(b.key + b.hora))
    .slice(0, 3);

  const handleCriarEvento = async (novo) => {
    const inicioStr = `${selKey} ${novo.hora}:00`;
    const fimD = new Date(`${selKey}T${novo.hora}:00`); fimD.setMinutes(fimD.getMinutes() + novo.dur);
    const fimStr = `${dKey(fimD)} ${_pad2(fimD.getHours())}:${_pad2(fimD.getMinutes())}:00`;
    try {
      const r = await fetch('/api/eventos', { method:'POST', headers: calHeaders(),
        body: JSON.stringify({ titulo: novo.titulo, inicio: inicioStr, fim: fimStr, tipo: 'reuniao', cor: novo.color }) });
      const d = await r.json();
      if (d.ok) setEventos(prev => [...prev, d.evento]);
    } catch (e) {}
  };

  const handleDelete = async (ev) => {
    if (ev && ev.id) { try { await fetch(`/api/eventos/${ev.id}`, { method:'DELETE', headers: calHeaders() }); } catch (e) {} }
    setEventos(prev => prev.filter(e => e.id !== (ev && ev.id)));
    setSelectedEvent(null);
  };

  const JUMP_OPTIONS = [
    { label: 'Hoje',            icon: ICN.cal,        action: () => { setWeekOffset(0); setMonthOffset(0); setSelectedDate(today0); } },
    { label: 'Semana anterior', icon: ICN.arrowLeft,  action: () => setWeekOffset(w => w - 1) },
    { label: 'Próxima semana',  icon: ICN.arrowRight, action: () => setWeekOffset(w => w + 1) },
    { label: 'Mês anterior',    icon: ICN.arrowLeft,  action: () => setMonthOffset(m => m - 1) },
    { label: 'Próximo mês',     icon: ICN.arrowRight, action: () => setMonthOffset(m => m + 1) },
  ];

  const JumpMenu = () => {
    const { useEffect: useJE, useRef: useJR } = React;
    const ref = useJR();
    useJE(() => {
      const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setShowJumpMenu(false); };
      document.addEventListener('mousedown', h);
      return () => document.removeEventListener('mousedown', h);
    }, []);
    return (
      <div ref={ref} className="jump-menu" onClick={e => e.stopPropagation()}>
        <div className="jump-menu-title">Navegar para</div>
        {JUMP_OPTIONS.map((o, i) => (
          <div key={i} className="jump-menu-item" onClick={() => { o.action(); setShowJumpMenu(false); toast(o.label); }}>
            <span className="muted" style={{fontSize:14}}>{o.icon}</span>
            <span>{o.label}</span>
          </div>
        ))}
      </div>
    );
  };

  const selDayLabel = `${selectedDate.getDate()} ${MONTHS_ABBR[selectedDate.getMonth()]}`;

  const NavBar = () => {
    const isMonth = viewMode === 'Mês';
    const label = isMonth ? monthLabelM : monthLabel;
    const atToday = isMonth ? monthOffset === 0 : weekOffset === 0;
    return (
      <div className="card-head">
        <div className="row" style={{gap:8}}>
          <ActionBtn icon={ICN.arrowLeft}  title={isMonth?'Mês anterior':'Semana anterior'} onClick={()=> isMonth ? setMonthOffset(m=>m-1) : setWeekOffset(w=>w-1)}/>
          <ActionBtn icon={ICN.arrowRight} title={isMonth?'Próximo mês':'Próxima semana'}   onClick={()=> isMonth ? setMonthOffset(m=>m+1) : setWeekOffset(w=>w+1)}/>
          <div style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:24,marginLeft:8}}>{label}</div>
          {!atToday&&<button className="pill" onClick={()=>{ setWeekOffset(0); setMonthOffset(0); }} style={{cursor:'default'}}>Hoje</button>}
        </div>
        <div className="row" style={{gap:4, position:'relative'}}>
          <CardActions createLabel="Novo evento" onCreate={() => setShowNovoEvento(true)} onPeriod={() => setShowJumpMenu(j => !j)} />
          {showJumpMenu && <JumpMenu />}
        </div>
      </div>
    );
  };

  const ViewTabs = () => (
    <div className="row">
      {['Semana','Dia','Mês'].map(v=>(
        <span key={v} className={`pill ${viewMode===v?'pill-dark':''}`} onClick={()=>setViewMode(v)} style={{cursor:'default'}}>{v}</span>
      ))}
      <ActionBtn icon={ICN.plus} title="Novo evento" size="icon" onClick={() => setShowNovoEvento(true)}/>
    </div>
  );

  const ProximosCard = () => (
    <div className="card">
      <div className="card-head"><div className="card-title">Próximos compromissos</div></div>
      <div className="col" style={{gap:12}}>
        {proximos.map((e)=>(
          <div key={e.id} className="upc" onClick={()=>setSelectedEvent(e)} style={{cursor:'default'}}>
            <div className={`upc-date upc-${e.color}`}><div className="upc-d">{e.inicio.getDate()}</div><div className="upc-m">{MONTHS_ABBR[e.inicio.getMonth()]}</div></div>
            <div className="col" style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:600}}>{e.titulo}</div>
              <div className="muted" style={{fontSize:11.5,marginTop:2}}>{e.hora} · {e.dur>=60?`${Math.floor(e.dur/60)}h${e.dur%60?' '+(e.dur%60)+'min':''}`:e.dur+'min'}</div>
            </div>
            <span className="mini-btn" style={{pointerEvents:'none'}}>{ICN.arrowRight}</span>
          </div>
        ))}
        {proximos.length===0&&<div style={{color:'var(--ink-muted)',fontSize:13,padding:'8px 4px'}}>Nenhum compromisso futuro.</div>}
      </div>
    </div>
  );

  const AgendaList = () => (
    <div className="ev-list">
      {dayEvents.map((e)=>(
        <div key={e.id} className="ev-list-item" onClick={() => setSelectedEvent(e)} style={{cursor:'default'}}>
          <div className={`ev-list-stripe ev-stripe-${e.color}`}/>
          <div className="col" style={{flex:1, minWidth:0}}>
            <span className="ttitle" style={{fontSize:13}}>{e.titulo}</span>
            <span className="twhen muted" style={{fontSize:11.5}}>{e.hora} · {e.dur>=60?`${Math.floor(e.dur/60)}h${e.dur%60?' '+(e.dur%60)+'min':''}`:e.dur+'min'}</span>
          </div>
        </div>
      ))}
      {dayEvents.length===0&&<div style={{color:'var(--ink-muted)',fontSize:13,padding:'8px 4px'}}>Nenhum evento neste dia.</div>}
    </div>
  );

  // ── Visão MÊS ──────────────────────────────────────────────────
  if (viewMode === 'Mês') {
    const first = new Date(mY, mM, 1);
    const startPad = first.getDay();
    const dim = new Date(mY, mM+1, 0).getDate();
    const cells = [];
    for (let i=0;i<startPad;i++) cells.push(null);
    for (let d=1; d<=dim; d++) cells.push(new Date(mY, mM, d));
    while (cells.length % 7 !== 0) cells.push(null);
    const monthWeeks = [];
    for (let i=0;i<cells.length;i+=7) monthWeeks.push(cells.slice(i,i+7));
    return (
      <>
        <PageHead title={<>Calendário <em>mensal</em></>} subtitle={`${monthLabelM} · visão geral`} right={<ViewTabs/>} />
        <div className="card" style={{padding:'22px 22px 18px'}}>
          <NavBar/>
          <div className="month-dow-header">
            {DOWS.map(d=><div key={d} className="month-dow">{d}</div>)}
          </div>
          <div className="month-grid">
            {monthWeeks.map((wk,wi)=>
              wk.map((day,di)=>{
                const k = day ? dKey(day) : null;
                const evs = k ? (byKey[k]||[]) : [];
                return (
                  <div key={`${wi}-${di}`}
                    className={`month-cell ${!day?'month-cell-empty':''} ${k===selKey?'month-cell-sel':''} ${k===todayKey?'month-cell-today':''}`}
                    onClick={()=>day&&setSelectedDate(day)}>
                    {day&&<>
                      <span className="month-day-num">{day.getDate()}</span>
                      {evs.length>0&&(
                        <div className="month-dots">
                          {evs.slice(0,3).map((e,i)=><span key={i} className={`wdot wdot-${e.color}`}/>)}
                        </div>
                      )}
                    </>}
                  </div>
                );
              })
            )}
          </div>
        </div>
        <style>{CAL_STYLES}</style>
        {showNovoEvento && <NovoEventoModal selectedDay={selDayLabel} onClose={() => setShowNovoEvento(false)} onCreate={handleCriarEvento} />}
        {selectedEvent && <EventoDetailModal evento={selectedEvent} onClose={() => setSelectedEvent(null)} onDelete={() => handleDelete(selectedEvent)} />}
      </>
    );
  }

  // ── Visão DIA ───────────────────────────────────────────────────
  if (viewMode === 'Dia') {
    return (
      <>
        <PageHead title={<>Calendário <em>do dia</em></>} subtitle={`${selDayLabel} · ${dayEvents.length} evento${dayEvents.length!==1?'s':''}`} right={<ViewTabs/>} />
        <div className="cal-grid">
          <div className="card">
            <NavBar/>
            <WeekStrip week={week} selectedKey={selKey} onSelect={setSelectedDate} byKey={byKey}/>
            <EventTimeline events={dayEvents} onEventClick={setSelectedEvent} nowTop={nowTop} nowLabel={nowLabel}/>
          </div>
          <div className="col" style={{gap:14}}>
            <div className="card">
              <div className="card-head">
                <div className="card-title">{selDayLabel} — agenda</div>
                <div className="pill pill-yellow">{dayEvents.length} eventos</div>
              </div>
              <AgendaList/>
            </div>
            <ProximosCard/>
          </div>
        </div>
        <style>{CAL_STYLES}</style>
        {showNovoEvento && <NovoEventoModal selectedDay={selDayLabel} onClose={() => setShowNovoEvento(false)} onCreate={handleCriarEvento} />}
        {selectedEvent && <EventoDetailModal evento={selectedEvent} onClose={() => setSelectedEvent(null)} onDelete={() => handleDelete(selectedEvent)} />}
      </>
    );
  }

  // ── Visão SEMANA (padrão) ────────────────────────────────────────
  return (
    <>
      <PageHead title={<>Calendário <em>da semana</em></>} subtitle={`${monthLabel} · ${totalSemana} compromisso${totalSemana!==1?'s':''} esta semana`} right={<ViewTabs/>} />

      <div className="cal-grid">
        <div className="card">
          <NavBar/>
          <WeekStrip week={week} selectedKey={selKey} onSelect={setSelectedDate} byKey={byKey}/>
          <div className="week-multi-grid">
            {week.map(d=>{
              const k = dKey(d); const evs = byKey[k] || [];
              return (
                <div key={k} className={`week-col-ev ${k===selKey?'week-col-sel':''}`}>
                  {evs.slice(0,3).map((e,i)=>(
                    <div key={i} className={`week-ev-pill week-ev-${e.color}`}>{e.titulo}</div>
                  ))}
                  {evs.length===0&&<div className="week-ev-empty"/>}
                </div>
              );
            })}
          </div>
          <div style={{borderTop:'0.5px solid var(--ink-line)',marginTop:12,paddingTop:14}}>
            <div className="card-title" style={{marginBottom:12,fontSize:14}}>{selDayLabel} — detalhes</div>
            <EventTimeline events={dayEvents} onEventClick={setSelectedEvent} nowTop={nowTop} nowLabel={nowLabel}/>
          </div>
        </div>

        <div className="col" style={{gap:14}}>
          <div className="card">
            <div className="card-head">
              <div className="card-title">{selDayLabel}</div>
              <div className="pill pill-yellow">{dayEvents.length} eventos</div>
            </div>
            <AgendaList/>
          </div>
          <ProximosCard/>
        </div>
      </div>

      <style>{CAL_STYLES}</style>
      {showNovoEvento && <NovoEventoModal selectedDay={selDayLabel} onClose={() => setShowNovoEvento(false)} onCreate={handleCriarEvento} />}
      {selectedEvent && <EventoDetailModal evento={selectedEvent} onClose={() => setSelectedEvent(null)} onDelete={() => handleDelete(selectedEvent)} />}
    </>
  );
}

const CAL_STYLES = `
  /* ── Jump menu (navegar para) ── */
  .jump-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: white; border-radius: 16px; padding: 8px;
    box-shadow: 0 8px 32px -8px rgba(20,30,60,.22), 0 0 0 0.5px rgba(20,30,60,.08);
    z-index: 50; min-width: 190px; animation: fadein .15s ease;
  }
  .jump-menu-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--ink-muted); padding: 4px 10px 8px;
  }
  .jump-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; cursor: default;
    font-size: 13px; font-weight: 500; transition: background .1s;
  }
  .jump-menu-item:hover { background: oklch(0.96 0.01 250); }
  html.theme-dark .jump-menu { background: oklch(0.24 0.012 255); }
  html.theme-dark .jump-menu-item:hover { background: oklch(0.30 0.012 255); }

  /* ── Lista de eventos no sidebar ── */
  .ev-list { display: flex; flex-direction: column; gap: 6px; }
  .ev-list-item {
    display: flex; align-items: stretch; gap: 10px;
    background: oklch(0.975 0.008 250); border-radius: 12px;
    padding: 10px 12px; transition: background .12s, transform .1s;
  }
  .ev-list-item:hover { background: oklch(0.96 0.015 250); transform: translateX(2px); }
  .ev-list-stripe {
    width: 3px; border-radius: 99px; flex-shrink: 0; align-self: stretch; min-height: 36px;
  }
  .ev-stripe-blue   { background: var(--acc-blue); }
  .ev-stripe-pink   { background: var(--acc-pink); }
  .ev-stripe-yellow { background: var(--acc-yellow); }
  .ev-stripe-mint   { background: var(--acc-mint); }
  .ev-stripe-lav    { background: var(--acc-lav); }
  html.theme-dark .ev-list-item { background: oklch(0.28 0.012 255); }
  html.theme-dark .ev-list-item:hover { background: oklch(0.31 0.012 255); }

  .cal-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; }
  .week-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 18px; }
  .wday { background: oklch(0.97 0.01 250/0.7); border-radius: 16px; padding: 10px 6px; text-align: center; cursor: default; transition: background .15s; }
  .wday:hover { background: oklch(0.94 0.02 250); }
  .wday-dow { font-size: 10px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.08em; }
  .wday-num { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -0.02em; }
  .wday-dots { display: flex; gap: 3px; justify-content: center; margin-top: 4px; min-height: 6px; }
  .wdot { width: 5px; height: 5px; border-radius: 50%; }
  .wdot-blue { background: var(--acc-blue); }
  .wdot-pink { background: var(--acc-pink); }
  .wdot-yellow { background: var(--acc-yellow); }
  .wdot-mint { background: var(--acc-mint); }
  .wdot-lav  { background: var(--acc-lav); }
  .wday-sel { background: var(--black) !important; color: white; }
  .wday-sel .wday-dow { color: rgba(255,255,255,.65); }

  .day-grid { display: grid; grid-template-columns: 64px 1fr; gap: 8px; position: relative; }
  .hours { display: flex; flex-direction: column; position: relative; }
  .hour-row { height: 60px; border-top: 1px dashed oklch(0.90 0.01 255); color: var(--ink-faint); font-size: 10px; padding-top: 2px; }
  .hour-row:last-child { border-bottom: 1px dashed oklch(0.90 0.01 255); }
  .events-col { position: relative; border-top: 1px dashed oklch(0.90 0.01 255); border-bottom: 1px dashed oklch(0.90 0.01 255); }
  .events-col::before { content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, oklch(0.92 0.01 255) 59px, oklch(0.92 0.01 255) 60px); pointer-events:none; }
  .event { position:absolute; left:4px; right:4px; border-radius:12px; padding:8px 12px; box-shadow:0 6px 14px -10px rgba(20,30,60,.18); display:flex; flex-direction:column; gap:6px; overflow:hidden; z-index:1; cursor:default; transition: transform .15s; }
  .event:hover { transform: scale(1.01); }
  .event-blue   { background:oklch(0.92 0.07 250); color:oklch(0.30 0.16 250); border-left:3px solid oklch(0.55 0.16 250); }
  .event-pink   { background:oklch(0.92 0.07 18);  color:oklch(0.36 0.15 18);  border-left:3px solid oklch(0.62 0.18 25); }
  .event-yellow { background:oklch(0.95 0.10 95);  color:oklch(0.34 0.13 80);  border-left:3px solid oklch(0.74 0.15 75); }
  .event-mint   { background:oklch(0.93 0.07 160); color:oklch(0.32 0.12 160); border-left:3px solid oklch(0.55 0.13 160); }
  .event-lav    { background:oklch(0.93 0.06 295); color:oklch(0.34 0.13 295); border-left:3px solid oklch(0.58 0.15 295); }
  .event-meta { display:flex; justify-content:space-between; align-items:center; }
  .event-time  { font-size:10.5px; font-weight:600; opacity:0.8; }
  .event-title { font-size:12.5px; font-weight:600; line-height:1.25; }
  .now-line { position:absolute; left:0; right:-8px; height:0; z-index:2; pointer-events:none; }
  .now-line .now-dot { position:absolute; right:-6px; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--danger); border:2px solid white; }
  .now-line .now-time { position:absolute; left:0; top:-7px; font-size:9.5px; font-weight:700; color:var(--danger); background:white; padding:1px 4px; border-radius:4px; }
  .now-line-ev { position:absolute; left:0; right:0; height:2px; background:var(--danger); z-index:3; pointer-events:none; border-radius:2px; }
  .upc { display:flex; align-items:center; gap:12px; padding:6px 0; cursor:default; }
  .upc-date { width:48px; height:48px; border-radius:14px; text-align:center; padding:6px 0; flex-shrink:0; }
  .upc-blue   { background:oklch(0.92 0.07 250); color:oklch(0.30 0.16 250); }
  .upc-pink   { background:oklch(0.92 0.07 18);  color:oklch(0.36 0.15 18); }
  .upc-yellow { background:oklch(0.95 0.10 95);  color:oklch(0.34 0.13 80); }
  .upc-d { font-size:16px; font-weight:700; line-height:1; }
  .upc-m { font-size:10px; font-weight:600; margin-top:2px; opacity:0.75; text-transform:uppercase; }

  /* visão semana multi-col */
  .week-multi-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:4px; }
  .week-col-ev { min-height:48px; border-radius:10px; padding:4px; display:flex; flex-direction:column; gap:3px; background:oklch(0.98 0.005 250); }
  .week-col-sel { background:oklch(0.96 0.015 250); }
  .week-ev-pill { font-size:9.5px; font-weight:600; border-radius:6px; padding:3px 6px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .week-ev-blue   { background:oklch(0.92 0.07 250); color:oklch(0.30 0.16 250); }
  .week-ev-pink   { background:oklch(0.92 0.07 18);  color:oklch(0.36 0.15 18); }
  .week-ev-yellow { background:oklch(0.95 0.10 95);  color:oklch(0.34 0.13 80); }
  .week-ev-mint   { background:oklch(0.93 0.07 160); color:oklch(0.32 0.12 160); }
  .week-ev-lav    { background:oklch(0.93 0.06 295); color:oklch(0.34 0.13 295); }
  .week-ev-empty  { height:20px; }

  /* visão mês */
  .month-dow-header { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
  .month-dow { text-align:center; font-size:10px; font-weight:700; color:var(--ink-muted); letter-spacing:0.08em; padding:4px 0; }
  .month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .month-cell { min-height:72px; border-radius:12px; padding:8px; background:oklch(0.98 0.005 250); cursor:default; transition:background .15s; display:flex; flex-direction:column; gap:4px; }
  .month-cell:hover:not(.month-cell-empty) { background:oklch(0.94 0.02 250); }
  .month-cell-empty { background:transparent; }
  .month-cell-today { background:oklch(0.95 0.02 250); border:1.5px solid var(--acc-blue); }
  .month-cell-sel { background:var(--black) !important; color:white; }
  .month-day-num { font-size:13px; font-weight:700; letter-spacing:-0.01em; }
  .month-cell-sel .month-day-num { color:white; }
  .month-dots { display:flex; gap:3px; flex-wrap:wrap; }
`;

window.Calendario = Calendario;