// Calendar / Agenda screen — week view + day timeline

// Helper: formata Date pra ISO YYYY-MM-DD (sem timezone confusion)
function fmtDateISO(d) {
  const yy = d.getFullYear();
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${yy}-${mm}-${dd}`;
}

const CalendarScreen = ({ state, setState, navigate, showToast }) => {
  const [view, setView] = React.useState('dia');
  // Âncora da semana visível (Date) — começa em hoje
  const [anchor, setAnchor] = React.useState(() => { const t = new Date(); t.setHours(0,0,0,0); return t; });
  // Dia selecionado dentro da semana (Date)
  const [selectedDate, setSelectedDate] = React.useState(() => { const t = new Date(); t.setHours(0,0,0,0); return t; });
  const [showNew, setShowNew] = React.useState(false);
  const [editingEvent, setEditingEvent] = React.useState(null);
  const events = (state && state.events) || [];

  const addEvent = (ev) => {
    setState && setState(s => ({ ...s, events: [...(s.events || []), { ...ev, id: 'ev' + Date.now() }] }));
    setShowNew(false);
    showToast && showToast('Evento criado');
  };

  const updateEvent = (id, patch) => {
    setState && setState(s => ({
      ...s,
      events: (s.events || []).map(e => e.id === id ? { ...e, ...patch } : e),
    }));
    setEditingEvent(null);
    showToast && showToast('Evento atualizado');
  };

  const deleteEvent = (id) => {
    if (window.confirm && !window.confirm('Excluir este evento?')) return;
    setState && setState(s => ({ ...s, events: (s.events || []).filter(e => e.id !== id) }));
    setEditingEvent(null);
    showToast && showToast('Evento excluído');
  };

  // Calcula a semana (Dom..Sáb) a partir do âncora
  const today = React.useMemo(() => { const t = new Date(); t.setHours(0,0,0,0); return t; }, []);
  const weekStart = (() => {
    const w = new Date(anchor); w.setDate(anchor.getDate() - anchor.getDay()); return w;
  })();
  const WEEKDAY_LABEL = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
  const weekDays = Array.from({ length: 7 }, (_, i) => {
    const date = new Date(weekStart); date.setDate(weekStart.getDate() + i);
    return {
      date,
      d: WEEKDAY_LABEL[i],
      n: date.getDate(),
      today: date.getTime() === today.getTime(),
      selected: date.getTime() === selectedDate.getTime(),
    };
  });

  const shiftWeek = (dir) => {
    const next = new Date(anchor); next.setDate(anchor.getDate() + 7 * dir);
    setAnchor(next);
  };
  const monthLabel = anchor.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' }).toUpperCase();

  // Eventos do dia selecionado
  const selectedISO = fmtDateISO(selectedDate);
  const eventsOfDay = events.filter(e => !e.date || e.date === selectedISO);

  return (
    <div style={{ paddingBottom: 110 }}>
      <Header title="Agenda" subtitle={monthLabel} onBack={() => navigate('dashboard')} right={
        <button onClick={() => setShowNew(true)} style={{
          background: CDV.brandGrad, border: 'none', width: 38, height: 38, borderRadius: 99,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
        }}><Icon name="plus" size={18} /></button>
      } />

      {/* View switcher + week nav */}
      <div style={{ padding: '0 22px 14px' }}>
        <div style={{ display: 'flex', gap: 4, background: CDV.surface, border: `1px solid ${CDV.stroke}`, padding: 4, borderRadius: 12 }}>
          {[{ id: 'dia', label: 'Dia' }, { id: 'semana', label: 'Semana' }, { id: 'mes', label: 'Mês' }].map(v => (
            <button key={v.id} onClick={() => setView(v.id)} style={{
              flex: 1, height: 32, borderRadius: 8,
              background: view === v.id ? CDV.surfaceHi2 : 'transparent',
              color: view === v.id ? CDV.text : CDV.textDim,
              border: 'none', fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
            }}>{v.label}</button>
          ))}
        </div>
      </div>

      {/* Week nav arrows */}
      <div style={{ padding: '0 22px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={() => shiftWeek(-1)} style={{
          width: 34, height: 34, borderRadius: 10, background: CDV.surface, border: `1px solid ${CDV.stroke}`,
          color: CDV.textDim, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name="chevronLeft" size={14} /></button>
        <button onClick={() => { const t = new Date(); t.setHours(0,0,0,0); setAnchor(t); setSelectedDate(t); }} style={{
          background: 'transparent', border: 'none', color: CDV.brand, fontSize: 12, fontWeight: 700, fontFamily: 'inherit',
        }}>Hoje</button>
        <button onClick={() => shiftWeek(1)} style={{
          width: 34, height: 34, borderRadius: 10, background: CDV.surface, border: `1px solid ${CDV.stroke}`,
          color: CDV.textDim, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name="chevronRight" size={14} /></button>
      </div>

      {/* Week strip */}
      <div style={{ padding: '0 22px 18px' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {weekDays.map((d, i) => {
            const active = d.selected;
            return (
              <button key={i} onClick={() => setSelectedDate(d.date)} style={{
                flex: 1, height: 72, borderRadius: 16,
                background: active ? CDV.brandGrad : d.today ? CDV.brandSoft : CDV.surface,
                border: `1px solid ${active ? 'transparent' : d.today ? CDV.brand + '40' : CDV.stroke}`,
                color: active ? '#fff' : CDV.text,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                gap: 4, fontFamily: 'inherit',
                boxShadow: active ? '0 8px 20px -6px rgba(177,151,252,0.4)' : 'none',
              }}>
                <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.75 }}>{d.d}</div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.3 }}>{d.n}</div>
                {d.today && !active && <div style={{ width: 4, height: 4, borderRadius: 99, background: CDV.brand }} />}
                {active && <div style={{ width: 4, height: 4, borderRadius: 99, background: '#fff' }} />}
              </button>
            );
          })}
        </div>
      </div>

      {view === 'dia' && <DayView events={eventsOfDay} onEventClick={setEditingEvent} />}
      {view === 'semana' && <WeekView events={events} />}
      {view === 'mes' && <MonthView />}

      <Sheet open={showNew} onClose={() => setShowNew(false)} title="Novo evento">
        <NewEventForm defaultDate={selectedDate} onSubmit={addEvent} />
      </Sheet>

      <Sheet open={!!editingEvent} onClose={() => setEditingEvent(null)} title="Editar evento">
        {editingEvent && (
          <EditEventForm
            event={editingEvent}
            onSubmit={(patch) => updateEvent(editingEvent.id, patch)}
            onDelete={() => deleteEvent(editingEvent.id)}
          />
        )}
      </Sheet>
    </div>
  );
};

const NewEventForm = ({ onSubmit, defaultDate }) => {
  const [title, setTitle] = React.useState('');
  const defaultISO = defaultDate ? fmtDateISO(defaultDate) : fmtDateISO(new Date());
  const [dateStr, setDateStr] = React.useState(defaultISO);
  const [start, setStart] = React.useState('14');
  const [end, setEnd] = React.useState('15');
  const [location, setLocation] = React.useState('');
  const [notes, setNotes] = React.useState('');
  const colors = [CDV.brand, CDV.mint, CDV.coral, CDV.amber, CDV.sky];
  const [color, setColor] = React.useState(colors[0]);

  const canSave = title.trim() && dateStr && Number(start) < Number(end);

  return (
    <div style={{ padding: '12px 20px 28px' }}>
      <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Título do evento" autoFocus
        style={{
          width: '100%', height: 54, borderRadius: 16, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 16px', fontSize: 15,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12,
        }} />

      <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 6 }}>Data</div>
      <input type="date" value={dateStr} onChange={e => setDateStr(e.target.value)}
        style={{
          width: '100%', height: 50, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 14px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12, colorScheme: 'dark',
        }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
        <div style={{ background: CDV.surfaceHi, border: `1px solid ${CDV.stroke}`, borderRadius: 14, padding: 12 }}>
          <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>Início (h)</div>
          <input type="number" min="0" max="23" value={start} onChange={e => setStart(e.target.value)}
            style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: CDV.text, fontSize: 16, fontWeight: 600, marginTop: 4, fontFamily: 'inherit' }} />
        </div>
        <div style={{ background: CDV.surfaceHi, border: `1px solid ${CDV.stroke}`, borderRadius: 14, padding: 12 }}>
          <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>Fim (h)</div>
          <input type="number" min="0" max="23" value={end} onChange={e => setEnd(e.target.value)}
            style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: CDV.text, fontSize: 16, fontWeight: 600, marginTop: 4, fontFamily: 'inherit' }} />
        </div>
      </div>

      <input value={location} onChange={e => setLocation(e.target.value)} placeholder="Local (opcional)"
        style={{
          width: '100%', height: 50, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 16px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12,
        }} />

      <textarea value={notes} onChange={e => setNotes(e.target.value)} placeholder="Anotação (opcional)" rows={2}
        style={{
          width: '100%', minHeight: 70, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '12px 16px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12, resize: 'vertical',
        }} />

      <div style={{ fontSize: 12, color: CDV.textDim, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>Cor</div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
        {colors.map(c => (
          <button key={c} onClick={() => setColor(c)} style={{
            width: 34, height: 34, borderRadius: 99, background: c,
            border: color === c ? `2.5px solid ${CDV.text}` : '2.5px solid transparent',
            cursor: 'pointer',
          }} />
        ))}
      </div>

      <button onClick={() => canSave && onSubmit({
        title: title.trim(), date: dateStr,
        start: Number(start), end: Number(end),
        location: location || '—', notes: notes || '', color,
      })} style={{
        width: '100%', height: 54, borderRadius: 16,
        background: CDV.brandGrad, border: 'none', color: '#fff', fontWeight: 600, fontSize: 15,
        opacity: canSave ? 1 : 0.4,
      }}>Criar evento</button>
    </div>
  );
};

const DayView = ({ events, onEventClick }) => {
  const hours = Array.from({ length: 14 }, (_, i) => i + 7); // 7 to 20
  const HOUR_HEIGHT = 56;
  const nowHour = 10.4;

  if (events.length === 0) {
    return (
      <div style={{ padding: '0 22px 24px' }}>
        <div style={{
          padding: 40, borderRadius: 22, textAlign: 'center',
          background: CDV.surface, border: `1px dashed ${CDV.stroke}`,
        }}>
          <Icon name="calendar" size={32} color={CDV.textMuted} />
          <div style={{ fontSize: 14, color: CDV.textDim, marginTop: 10 }}>Sem eventos neste dia</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '0 22px 24px' }}>
      <div style={{
        background: CDV.surface, border: `1px solid ${CDV.stroke}`, borderRadius: 22,
        padding: '14px 8px', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'relative' }}>
          {hours.map(h => (
            <div key={h} style={{
              display: 'flex', height: HOUR_HEIGHT, alignItems: 'flex-start',
              borderTop: h === hours[0] ? 'none' : `1px solid ${CDV.divider}`,
            }}>
              <div style={{
                width: 52, paddingLeft: 8, paddingTop: 6, fontSize: 11, color: CDV.textMuted, fontWeight: 600,
              }}>{String(h).padStart(2, '0')}:00</div>
              <div style={{ flex: 1 }} />
            </div>
          ))}

          {/* Events */}
          {events.map(ev => {
            const top = (ev.start - hours[0]) * HOUR_HEIGHT + 14;
            const height = (ev.end - ev.start) * HOUR_HEIGHT - 4;
            return (
              <div key={ev.id} onClick={() => onEventClick && onEventClick(ev)} style={{
                position: 'absolute', top, left: 60, right: 8,
                height, padding: '8px 12px', borderRadius: 12,
                background: `linear-gradient(135deg, ${ev.color}28, ${ev.color}12)`,
                borderLeft: `3px solid ${ev.color}`,
                cursor: 'pointer',
              }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: CDV.text, lineHeight: 1.2 }}>{ev.title}</div>
                <div style={{ fontSize: 10, color: CDV.textDim, marginTop: 3 }}>
                  {fmtHour(ev.start)} – {fmtHour(ev.end)} · {ev.location}
                </div>
              </div>
            );
          })}

          {/* Now indicator */}
          <div style={{ position: 'absolute', top: (nowHour - hours[0]) * HOUR_HEIGHT + 14, left: 50, right: 0, height: 0, pointerEvents: 'none' }}>
            <div style={{ position: 'relative', height: 0 }}>
              <div style={{ position: 'absolute', left: 0, top: -4, width: 8, height: 8, borderRadius: 99, background: CDV.coral }} />
              <div style={{ position: 'absolute', left: 10, right: 8, top: -1, height: 2, background: CDV.coral, borderRadius: 1 }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const fmtHour = (h) => {
  const hh = Math.floor(h);
  const mm = Math.round((h - hh) * 60);
  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
};

const WeekView = ({ events }) => (
  <div style={{ padding: '0 22px 24px' }}>
    <Card padding={18}>
      <div style={{ fontSize: 13, color: CDV.textDim, marginBottom: 12 }}>Semana de 16-22 Jun</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
        {[...Array(7)].map((_, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'center' }}>
            <div style={{ fontSize: 10, color: CDV.textDim, marginBottom: 4 }}>{['S','T','Q','Q','S','S','D'][i]}</div>
            <div style={{
              width: 28, height: 28, borderRadius: 8,
              background: i === 3 ? CDV.brand : 'transparent',
              color: i === 3 ? '#fff' : CDV.text,
              fontSize: 12, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{16 + i}</div>
            {Array.from({ length: Math.floor(Math.random() * 4) + 1 }, (_, k) => (
              <div key={k} style={{ width: 6, height: 6, borderRadius: 99, background: [CDV.brand, CDV.mint, CDV.coral, CDV.amber][k % 4] }} />
            ))}
          </div>
        ))}
      </div>
    </Card>

    <SectionHeader title="Eventos da semana" />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {events.slice(0, 4).map(ev => (
        <div key={ev.id} style={{
          padding: 12, borderRadius: 14, background: CDV.surface, border: `1px solid ${CDV.stroke}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 3, height: 38, borderRadius: 2, background: ev.color }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{ev.title}</div>
            <div style={{ fontSize: 11, color: CDV.textDim, marginTop: 2 }}>{fmtHour(ev.start)} - {fmtHour(ev.end)} · {ev.location}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const MonthView = () => {
  const dots = { 3: 4, 7: 2, 10: 3, 14: 1, 16: 2, 19: 5, 22: 2, 25: 3, 28: 1 };
  return (
    <div style={{ padding: '0 22px 24px' }}>
      <Card padding={18}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 8 }}>
          {['D','S','T','Q','Q','S','S'].map(d => (
            <div key={d} style={{ fontSize: 10, color: CDV.textDim, textAlign: 'center', fontWeight: 600 }}>{d}</div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
          {[...Array(35)].map((_, i) => {
            const day = i - 2;
            if (day < 1 || day > 30) return <div key={i} style={{ height: 44 }} />;
            const today = day === 19;
            return (
              <div key={i} style={{
                height: 44, borderRadius: 8, padding: 4,
                background: today ? CDV.brandGrad : 'transparent',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: today ? '#fff' : CDV.text }}>{day}</div>
                <div style={{ display: 'flex', gap: 2 }}>
                  {Array.from({ length: dots[day] || 0 }, (_, k) => (
                    <div key={k} style={{ width: 4, height: 4, borderRadius: 99, background: today ? '#fff' : [CDV.brand, CDV.mint, CDV.coral][k % 3] }} />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
};

// Formulário de edição de evento existente (com botão Excluir)
const EditEventForm = ({ event, onSubmit, onDelete }) => {
  const [title, setTitle] = React.useState(event.title || '');
  const [dateStr, setDateStr] = React.useState(event.date || fmtDateISO(new Date()));
  const [start, setStart] = React.useState(String(Math.floor(event.start || 14)));
  const [end, setEnd] = React.useState(String(Math.floor(event.end || 15)));
  const [location, setLocation] = React.useState(event.location && event.location !== '—' ? event.location : '');
  const [notes, setNotes] = React.useState(event.notes || '');
  const colors = [CDV.brand, CDV.mint, CDV.coral, CDV.amber, CDV.sky];
  const [color, setColor] = React.useState(event.color || colors[0]);

  const canSave = title.trim() && dateStr && Number(start) < Number(end);

  return (
    <div style={{ padding: '12px 20px 28px' }}>
      <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Título do evento" autoFocus
        style={{
          width: '100%', height: 54, borderRadius: 16, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 16px', fontSize: 15,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12,
        }} />

      <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 6 }}>Data</div>
      <input type="date" value={dateStr} onChange={e => setDateStr(e.target.value)}
        style={{
          width: '100%', height: 50, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 14px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12, colorScheme: 'dark',
        }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
        <div style={{ background: CDV.surfaceHi, border: `1px solid ${CDV.stroke}`, borderRadius: 14, padding: 12 }}>
          <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>Início (h)</div>
          <input type="number" min="0" max="23" value={start} onChange={e => setStart(e.target.value)}
            style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: CDV.text, fontSize: 16, fontWeight: 600, marginTop: 4, fontFamily: 'inherit' }} />
        </div>
        <div style={{ background: CDV.surfaceHi, border: `1px solid ${CDV.stroke}`, borderRadius: 14, padding: 12 }}>
          <div style={{ fontSize: 10, color: CDV.textMuted, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>Fim (h)</div>
          <input type="number" min="0" max="23" value={end} onChange={e => setEnd(e.target.value)}
            style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none', color: CDV.text, fontSize: 16, fontWeight: 600, marginTop: 4, fontFamily: 'inherit' }} />
        </div>
      </div>

      <input value={location} onChange={e => setLocation(e.target.value)} placeholder="Local (opcional)"
        style={{
          width: '100%', height: 50, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '0 16px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12,
        }} />

      <textarea value={notes} onChange={e => setNotes(e.target.value)} placeholder="Anotação (opcional)" rows={2}
        style={{
          width: '100%', minHeight: 70, borderRadius: 14, border: `1px solid ${CDV.stroke}`,
          background: CDV.surfaceHi, color: CDV.text, padding: '12px 16px', fontSize: 14,
          outline: 'none', fontFamily: 'inherit', marginBottom: 12, resize: 'vertical',
        }} />

      <div style={{ fontSize: 12, color: CDV.textDim, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>Cor</div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
        {colors.map(c => (
          <button key={c} onClick={() => setColor(c)} style={{
            width: 34, height: 34, borderRadius: 99, background: c,
            border: color === c ? `2.5px solid ${CDV.text}` : '2.5px solid transparent',
            cursor: 'pointer',
          }} />
        ))}
      </div>

      <div style={{ display: 'flex', gap: 10 }}>
        <button onClick={onDelete} style={{
          width: 54, height: 54, borderRadius: 16,
          background: CDV.coral + '14', border: `1px solid ${CDV.coral}40`, color: CDV.coral,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontFamily: 'inherit',
        }}>
          <Icon name="trash" size={18} />
        </button>
        <button onClick={() => canSave && onSubmit({
          title: title.trim(), date: dateStr,
          start: Number(start), end: Number(end),
          location: location || '—', notes: notes || '', color,
        })} style={{
          flex: 1, height: 54, borderRadius: 16,
          background: CDV.brandGrad, border: 'none', color: '#fff', fontWeight: 600, fontSize: 15,
          opacity: canSave ? 1 : 0.4, cursor: canSave ? 'pointer' : 'not-allowed', fontFamily: 'inherit',
        }}>Salvar alterações</button>
      </div>
    </div>
  );
};

Object.assign(window, { CalendarScreen });