/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field, sb */
const { useState, useEffect } = React;

// Read Google settings from localStorage directly
function useGoogleSettings() {
  const [s] = useState(() => {
    try { return { calendarEnabled:false, meetEnabled:false, driveEnabled:false, ...JSON.parse(localStorage.getItem('inbrivvo_google_settings') || '{}') }; }
    catch { return { calendarEnabled:false, meetEnabled:false, driveEnabled:false }; }
  });
  return [s];
}

const TODAY = new Date();

function rowToEvent(row) {
  const dt = new Date(row.date + 'T00:00:00');
  const hStr = row.time ? row.time.slice(0, 2) : '09';
  return {
    id:  row.id,
    mo:  dt.getMonth(),
    d:   dt.getDate(),
    t:   row.time ? row.time.slice(0, 5) : '09:00',
    th:  row.hour_int || parseInt(hStr, 10),
    l:   row.title,
    who: row.who || '',
    c:   row.color || '#1D39C4',
  };
}

// ─── Novo Evento Modal ────────────────────────────────────────────────────────
function NovoEventoModal({ onClose, onCreate }) {
  const [titulo, setTitulo] = useState('');
  const [data,   setData]   = useState(() => TODAY.toISOString().slice(0, 10));
  const [hora,   setHora]   = useState('09:00');
  const [who,    setWho]    = useState('');
  const [cor,    setCor]    = useState('#1D39C4');
  const [saving,   setSaving]   = useState(false);
  const [withGCal, setWithGCal] = useState(false);
  const [gSettings] = useGoogleSettings();
  const CORES = ['#1D39C4','#36CFC9','#FA541C','#7C3AED','#22C55E','#FADB14','#1890FF','#FA8C16'];
  const IS = { width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:8, padding:'9px 12px', color:'var(--fg-primary)', fontSize:13, fontFamily:'inherit', outline:'none', boxSizing:'border-box' };
  const LS = { fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:8 };

  async function salvar() {
    if (!titulo.trim()) { window.__toast?.('Informe o título', { tone:'danger' }); return; }
    setSaving(true);
    try {
      const { data: { user } } = await sb.auth.getUser();
      const hourInt = parseInt(hora.slice(0, 2), 10);
      const { data: row, error } = await sb.from('calendar_events').insert({
        user_id:  user.id,
        title:    titulo.trim(),
        date:     data,
        time:     hora + ':00',
        who:      who,
        color:    cor,
        hour_int: hourInt,
      }).select().single();
      if (error) { window.__toast?.(error.message, { tone:'danger' }); setSaving(false); return; }
      onCreate(rowToEvent(row));
      window.__toast?.('Evento criado', { tone:'success' });
      if (withGCal && gSettings?.calendarEnabled && window.gcCreateEvent) {
        const endH = Math.min(parseInt(hora.slice(0, 2), 10) + 1, 23);
        window.gcCreateEvent({
          title: titulo.trim(),
          description: 'Criado via inBrivvo',
          start: `${data}T${hora}:00`,
          end:   `${data}T${String(endH).padStart(2,'0')}:${hora.slice(3)}:00`,
          withMeet: gSettings.meetEnabled,
        }).then(ev => {
          if (ev?.hangoutLink) window.__toast?.(`Meet criado: ${ev.hangoutLink}`, { tone:'success' });
        }).catch(() => {});
      }
      onClose();
    } catch { window.__toast?.('Erro ao criar evento', { tone:'danger' }); setSaving(false); }
  }

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.65)', backdropFilter:'blur(6px)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'min(480px,100%)', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', overflow:'hidden' }}>
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <h2 style={{ margin:0, fontSize:18, fontWeight:700 }}>Novo evento</h2>
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:20 }}>×</button>
        </div>
        <div style={{ padding:24, display:'flex', flexDirection:'column', gap:14 }}>
          <div><label style={LS}>Título *</label><input value={titulo} onChange={e=>setTitulo(e.target.value)} placeholder="Ex: Reunião com cliente" style={IS}/></div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            <div><label style={LS}>Data</label><input type="date" value={data} onChange={e=>setData(e.target.value)} style={IS}/></div>
            <div><label style={LS}>Hora</label><input type="time" value={hora} onChange={e=>setHora(e.target.value)} style={IS}/></div>
          </div>
          <div><label style={LS}>Participante</label><input value={who} onChange={e=>setWho(e.target.value)} placeholder="Ex: Cliente, Equipe" style={IS}/></div>
          <div>
            <label style={LS}>Cor</label>
            <div style={{ display:'flex', gap:8 }}>
              {CORES.map(c => <div key={c} onClick={()=>setCor(c)} style={{ width:28, height:28, borderRadius:8, background:c, cursor:'pointer', border:`2px solid ${cor===c?'#fff':'transparent'}`, boxShadow:cor===c?`0 0 0 2px ${c}`:'' }}/>)}
            </div>
          </div>
          {gSettings?.calendarEnabled && (
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 14px', borderRadius:8, background:'rgba(26,115,232,0.08)', border:'1px solid rgba(26,115,232,0.2)' }}>
              <div>
                <div style={{ fontSize:13, fontWeight:600, color:'#1a73e8' }}>Criar no Google Calendar</div>
                {gSettings.meetEnabled && <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:2 }}>Gera link Google Meet automaticamente</div>}
              </div>
              <button type="button" onClick={() => setWithGCal(g => !g)} style={{ width:40, height:22, borderRadius:11, border:'none', cursor:'pointer', background: withGCal ? '#1a73e8' : 'var(--border-strong)', position:'relative', transition:'background 200ms', flexShrink:0 }}>
                <span style={{ position:'absolute', top:2, left: withGCal ? 'calc(100% - 20px)' : 2, width:18, height:18, borderRadius:'50%', background:'#fff', transition:'left 200ms', boxShadow:'0 1px 4px rgba(0,0,0,0.3)' }}/>
              </button>
            </div>
          )}
        </div>
        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', justifyContent:'flex-end', gap:10 }}>
          <Button variant="secondary" onClick={onClose}>Cancelar</Button>
          <Button onClick={salvar} style={{ opacity:saving?0.6:1, pointerEvents:saving?'none':'auto' }}>{saving?'Criando…':'Criar evento'}</Button>
        </div>
      </div>
    </div>
  );
}

const MONTH_NAMES = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const SHORT_DAYS  = ['Seg','Ter','Qua','Qui','Sex','Sáb','Dom'];

// ─── Helpers ──────────────────────────────────────────────────────────────────
function sameDay(a, b) {
  return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate();
}
function getWeekStart(date) {
  const d = new Date(date);
  const day = d.getDay();
  const diff = day === 0 ? -6 : 1 - day;
  d.setDate(d.getDate() + diff);
  return d;
}
function eventsFor(events, mo, d) {
  return events.filter(e => e.mo === mo && e.d === d);
}

// ─── Modal: Agendamento público ───────────────────────────────────────────────
const FAKE_CLIENTS = ['Beatriz Costa','Rafael Lima','Camila Nunes','Thiago Moura','Isabela Pires','Rodrigo Souza'];

function AgendaPublicaModal({ onClose, linkKey, linkActive, setLinkActive, allSlots, enabledSlots, setEnabledSlots, bookedSlots, setBookedSlots, bookings, setBookings }) {
  const [copied,    setCopied]    = useState(false);
  const [simOpen,   setSimOpen]   = useState(false);
  const [simPicked, setSimPicked] = useState(null); // slot the simulated client just picked

  const link = `https://inbrivvo.app/agendar/${linkKey}`;
  const availableForClients = allSlots.filter(s => enabledSlots.has(s) && !bookedSlots.has(s));

  function copyLink() {
    navigator.clipboard?.writeText(link).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 2200);
    window.__toast?.('Link de agendamento copiado', { tone:'success' });
  }

  function toggleSlot(s) {
    if (bookedSlots.has(s)) return; // horário reservado não pode ser desativado diretamente
    setEnabledSlots(prev => { const n = new Set(prev); n.has(s) ? n.delete(s) : n.add(s); return n; });
  }

  function cancelBooking(slot) {
    setBookedSlots(prev => { const n = new Set(prev); n.delete(slot); return n; });
    setBookings(prev => prev.filter(b => b.slot !== slot));
    window.__toast?.('Agendamento cancelado e horário liberado', { tone:'info' });
  }

  function simulateClientBook(slot) {
    const now = new Date();
    const at  = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
    const name = FAKE_CLIENTS[Math.floor(Math.random() * FAKE_CLIENTS.length)];
    setBookedSlots(prev => new Set([...prev, slot]));
    setBookings(prev => [...prev, { slot, name, at }]);
    setSimPicked(slot);
    setTimeout(() => setSimPicked(null), 2600);
    window.__toast?.(`${name} agendou o horário das ${slot}`, { tone:'success' });
  }

  const IS = { width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:8, padding:'9px 12px', color:'var(--fg-primary)', fontSize:13, fontFamily:'inherit', outline:'none', boxSizing:'border-box' };
  const SL = { fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em' };

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.65)', backdropFilter:'blur(6px)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width:'min(560px,100%)', maxHeight:'90vh', display:'flex', flexDirection:'column', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', overflow:'hidden' }}>

        {/* Header */}
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between', flexShrink:0 }}>
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)' }}>Agenda</div>
            <h2 style={{ margin:'4px 0 0', fontSize:18, fontWeight:700 }}>Agendamento público</h2>
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', padding:4 }}><Icon d={ICONS.x} size={18}/></button>
        </div>

        {/* Body */}
        <div style={{ flex:1, overflow:'auto', padding:24, display:'flex', flexDirection:'column', gap:22 }}>

          {/* Link */}
          <div>
            <div style={{ ...SL, marginBottom:8 }}>Seu link de agendamento</div>
            <div style={{ display:'flex', gap:8 }}>
              <input readOnly value={linkActive ? link : '— link desativado —'} onClick={e => linkActive && e.target.select()} style={{ ...IS, flex:1, cursor: linkActive ? 'text' : 'default', color: linkActive ? 'var(--accent-primary)' : 'var(--fg-muted)', fontFamily:'var(--font-mono)', fontSize:12 }}/>
              <button onClick={linkActive ? copyLink : undefined} disabled={!linkActive} style={{ padding:'9px 16px', borderRadius:8, border:'none', background: copied ? '#22C55E22' : linkActive ? 'var(--primary)' : 'var(--bg-elevated)', color: copied ? '#22C55E' : linkActive ? '#fff' : 'var(--fg-muted)', cursor: linkActive ? 'pointer' : 'default', fontFamily:'inherit', fontSize:13, fontWeight:600, transition:'all 180ms', minWidth:90 }}>
                {copied ? '✓ Copiado' : 'Copiar'}
              </button>
            </div>
          </div>

          {/* Toggle ativo */}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'13px 16px', borderRadius:10, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)' }}>
            <div>
              <div style={{ fontSize:13, fontWeight:600 }}>Link {linkActive ? 'ativo' : 'desativado'}</div>
              <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>{linkActive ? 'Clientes podem ver horários disponíveis e agendar.' : 'Link inacessível para clientes.'}</div>
            </div>
            <button onClick={() => setLinkActive(a => !a)} style={{ width:44, height:24, borderRadius:12, border:'none', cursor:'pointer', background: linkActive ? '#22C55E' : 'var(--border-strong)', position:'relative', transition:'background 200ms', flexShrink:0 }}>
              <span style={{ position:'absolute', top:3, left: linkActive ? 'calc(100% - 21px)' : 3, width:18, height:18, borderRadius:'50%', background:'#fff', transition:'left 200ms', boxShadow:'0 1px 4px rgba(0,0,0,0.3)' }}/>
            </button>
          </div>

          {/* Configuração de horários */}
          <div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
              <span style={SL}>Horários configurados</span>
              <span style={{ fontSize:11, color:'var(--fg-muted)' }}>{availableForClients.length} disponível{availableForClients.length!==1?'is':''} · {bookings.length} reservado{bookings.length!==1?'s':''}</span>
            </div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
              {allSlots.map(s => {
                const enabled = enabledSlots.has(s);
                const booked  = bookedSlots.has(s);
                const bk      = bookings.find(b => b.slot === s);
                if (booked) {
                  return (
                    <div key={s} style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 10px 6px 12px', borderRadius:8, background:'#EF444418', border:'1.5px solid #EF444444' }}>
                      <span style={{ fontFamily:'var(--font-mono)', fontSize:13, fontWeight:700, color:'#EF4444' }}>{s}</span>
                      <span style={{ fontSize:11, color:'#EF4444', fontWeight:500 }}>{bk ? bk.name.split(' ')[0] : 'Reservado'}</span>
                      <button onClick={() => cancelBooking(s)} title="Cancelar reserva" style={{ width:16, height:16, borderRadius:'50%', border:'none', background:'#EF444444', color:'#EF4444', cursor:'pointer', fontSize:10, display:'grid', placeItems:'center', flexShrink:0 }}>✕</button>
                    </div>
                  );
                }
                return (
                  <button key={s} onClick={() => toggleSlot(s)} style={{ padding:'7px 14px', borderRadius:8, fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, cursor:'pointer', border:`1.5px solid ${enabled ? 'var(--primary)66' : 'var(--border-subtle)'}`, background: enabled ? 'var(--primary)22' : 'var(--bg-elevated)', color: enabled ? 'var(--accent-primary)' : 'var(--fg-muted)', transition:'all 140ms' }}>
                    {s}
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:8 }}>Horários em azul = disponíveis · em vermelho = reservados (clique ✕ para cancelar)</div>
          </div>

          {/* Reservas recebidas */}
          {bookings.length > 0 && (
            <div>
              <div style={{ ...SL, marginBottom:10 }}>Reservas recebidas</div>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {bookings.map((b, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderRadius:10, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)' }}>
                    <div style={{ width:8, height:8, borderRadius:'50%', background:'#22C55E', flexShrink:0 }}/>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:600 }}>{b.name}</div>
                      <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:1 }}>Agendou às {b.slot} · registrado {b.at}</div>
                    </div>
                    <button onClick={() => cancelBooking(b.slot)} style={{ padding:'4px 10px', borderRadius:6, border:'1px solid var(--border-subtle)', background:'transparent', color:'var(--fg-muted)', cursor:'pointer', fontSize:11, fontFamily:'inherit' }}>Cancelar</button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Simulação do cliente */}
          <div style={{ borderRadius:10, border:'1px solid var(--border-subtle)', overflow:'hidden' }}>
            <button onClick={() => setSimOpen(o => !o)} style={{ width:'100%', padding:'12px 16px', background:'var(--bg-elevated)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', fontFamily:'inherit' }}>
              <span style={{ ...SL }}>Simular como o cliente vê</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--fg-muted)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: simOpen ? 'rotate(180deg)' : 'none', transition:'transform 180ms' }}><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            {simOpen && (
              <div style={{ padding:'16px', borderTop:'1px solid var(--border-subtle)' }}>
                <p style={{ margin:'0 0 14px', fontSize:12, color:'var(--fg-secondary)', lineHeight:1.5 }}>
                  Abaixo está a visão do seu cliente ao abrir o link. Clique em um horário para simular uma reserva — o slot ficará ocupado imediatamente.
                </p>
                {availableForClients.length === 0 ? (
                  <div style={{ padding:'16px 0', textAlign:'center', fontSize:13, color:'var(--fg-muted)' }}>Todos os horários estão ocupados ou desativados.</div>
                ) : (
                  <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                    {availableForClients.map(s => (
                      <button key={s} onClick={() => simulateClientBook(s)} style={{ padding:'10px 18px', borderRadius:8, fontFamily:'var(--font-mono)', fontSize:14, fontWeight:700, cursor:'pointer', border:`1.5px solid ${simPicked===s ? '#22C55E66' : 'var(--border-strong)'}`, background: simPicked===s ? '#22C55E22' : 'var(--bg-elevated)', color: simPicked===s ? '#22C55E' : 'var(--fg-primary)', transition:'all 150ms' }}>
                        {s}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', justifyContent:'flex-end', gap:10, background:'var(--bg-elevated)', flexShrink:0 }}>
          <Button variant="ghost" onClick={onClose}>Fechar</Button>
          <Button onClick={copyLink}>Copiar link</Button>
        </div>
      </div>
    </div>
  );
}

// ─── Month view ───────────────────────────────────────────────────────────────
function MonthView({ currentDate, events }) {
  const year   = currentDate.getFullYear();
  const month  = currentDate.getMonth();
  const firstDow     = new Date(year, month, 1).getDay(); // 0=Sun
  const offset       = firstDow === 0 ? 6 : firstDow - 1; // Mon-first
  const daysInMonth  = new Date(year, month + 1, 0).getDate();
  const totalCells   = Math.ceil((offset + daysInMonth) / 7) * 7;

  return (
    <>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', borderBottom:'1px solid var(--border-subtle)' }}>
        {SHORT_DAYS.map(d => (
          <div key={d} style={{ padding:'10px 12px', fontSize:11, fontFamily:'var(--font-display)', fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>{d}</div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)' }}>
        {Array.from({ length: totalCells }).map((_, i) => {
          const day   = i - offset + 1;
          const valid = day >= 1 && day <= daysInMonth;
          const evs   = valid ? eventsFor(events, month, day) : [];
          const isToday = valid && sameDay(new Date(year, month, day), TODAY);
          return (
            <div key={i} style={{ borderRight:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)', padding:8, minHeight:100, background: isToday ? 'var(--primary-soft)' : 'transparent' }}>
              {valid && <div style={{ display:'inline-grid', placeItems:'center', width:22, height:22, borderRadius:'50%', background: isToday ? 'var(--primary)' : 'transparent', color: isToday ? '#fff' : 'var(--fg-secondary)', fontWeight:600, fontSize:11 }}>{day}</div>}
              <div style={{ marginTop:4, display:'flex', flexDirection:'column', gap:3 }}>
                {evs.slice(0, 3).map((e, j) => (
                  <div key={j} style={{ background:e.c+'24', color:e.c, padding:'3px 6px', borderRadius:4, fontSize:10, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{e.t} {e.l}</div>
                ))}
                {evs.length > 3 && <div style={{ fontSize:10, color:'var(--fg-muted)' }}>+{evs.length - 3} mais</div>}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

// ─── Week view ────────────────────────────────────────────────────────────────
function WeekView({ currentDate, events }) {
  const weekStart = getWeekStart(new Date(currentDate));
  const days = Array.from({ length: 7 }, (_, i) => {
    const d = new Date(weekStart);
    d.setDate(weekStart.getDate() + i);
    return d;
  });
  const HOURS = Array.from({ length: 12 }, (_, i) => i + 8); // 08–19

  return (
    <div style={{ overflowY:'auto', maxHeight:'calc(100vh - 230px)' }}>
      {/* Day headers */}
      <div style={{ display:'grid', gridTemplateColumns:'52px repeat(7,1fr)', borderBottom:'1px solid var(--border-subtle)', position:'sticky', top:0, background:'var(--bg-surface)', zIndex:2 }}>
        <div/>
        {days.map((d, i) => {
          const isToday = sameDay(d, TODAY);
          return (
            <div key={i} style={{ padding:'10px 8px', textAlign:'center', borderLeft:'1px solid var(--border-subtle)' }}>
              <div style={{ fontSize:11, fontFamily:'var(--font-display)', fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.05em' }}>{SHORT_DAYS[i]}</div>
              <div style={{ display:'inline-grid', placeItems:'center', width:26, height:26, borderRadius:'50%', marginTop:4, background: isToday ? 'var(--primary)' : 'transparent', color: isToday ? '#fff' : 'var(--fg-primary)', fontWeight:700, fontSize:14 }}>{d.getDate()}</div>
            </div>
          );
        })}
      </div>
      {/* Hour rows */}
      {HOURS.map(h => (
        <div key={h} style={{ display:'grid', gridTemplateColumns:'52px repeat(7,1fr)', borderBottom:'1px solid var(--border-subtle)', minHeight:60 }}>
          <div style={{ padding:'6px 8px 0', fontSize:11, fontFamily:'var(--font-mono)', color:'var(--fg-muted)', textAlign:'right', flexShrink:0 }}>{String(h).padStart(2,'0')}:00</div>
          {days.map((d, i) => {
            const dayEvs = eventsFor(events, d.getMonth(), d.getDate()).filter(e => e.th === h);
            return (
              <div key={i} style={{ borderLeft:'1px solid var(--border-subtle)', padding:3, background: sameDay(d, TODAY) ? 'var(--primary-soft)' : 'transparent' }}>
                {dayEvs.map((e, j) => (
                  <div key={j} style={{ background:e.c+'20', borderLeft:`3px solid ${e.c}`, borderRadius:4, padding:'3px 6px', fontSize:11, fontWeight:600, color:e.c, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', marginBottom:2 }}>
                    {e.t} {e.l}
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

// ─── Day view ─────────────────────────────────────────────────────────────────
function DayView({ currentDate, events }) {
  const HOURS = Array.from({ length: 12 }, (_, i) => i + 8);
  const mo = currentDate.getMonth();
  const d  = currentDate.getDate();
  const isToday = sameDay(currentDate, TODAY);
  const dowLabel = SHORT_DAYS[(currentDate.getDay() + 6) % 7];

  return (
    <div style={{ overflowY:'auto', maxHeight:'calc(100vh - 230px)' }}>
      {/* Day header */}
      <div style={{ padding:'14px 22px', borderBottom:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', display:'flex', alignItems:'center', gap:14 }}>
        <div style={{ display:'grid', placeItems:'center', width:44, height:44, borderRadius:'50%', background: isToday ? 'var(--primary)' : 'var(--bg-surface)', border:`2px solid ${isToday ? 'var(--primary)' : 'var(--border-subtle)'}`, color: isToday ? '#fff' : 'var(--fg-primary)', fontWeight:700, fontSize:22, fontFamily:'var(--font-display)' }}>{d}</div>
        <div>
          <div style={{ fontWeight:700, fontSize:15 }}>{dowLabel}, {d} de {MONTH_NAMES[mo]}</div>
          <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>{eventsFor(events, mo, d).length} evento{eventsFor(events, mo, d).length !== 1 ? 's' : ''}</div>
        </div>
      </div>
      {HOURS.map(h => {
        const hourEvs = eventsFor(events, mo, d).filter(e => e.th === h);
        return (
          <div key={h} style={{ display:'grid', gridTemplateColumns:'64px 1fr', borderBottom:'1px solid var(--border-subtle)', minHeight:72 }}>
            <div style={{ padding:'10px 14px 0', fontSize:12, fontFamily:'var(--font-mono)', color:'var(--fg-muted)', textAlign:'right' }}>{String(h).padStart(2,'0')}:00</div>
            <div style={{ padding:'6px 8px', borderLeft:'1px solid var(--border-subtle)', display:'flex', flexDirection:'column', gap:5 }}>
              {hourEvs.map((e, j) => (
                <div key={j} style={{ background:e.c+'18', borderLeft:`3px solid ${e.c}`, borderRadius:6, padding:'8px 12px' }}>
                  <div style={{ fontSize:13, fontWeight:700, color:e.c }}>{e.t} · {e.l}</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:2 }}>{e.who}</div>
                  {e.meetLink && (
                    <a href={e.meetLink} target="_blank" rel="noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:4, marginTop:5, padding:'3px 8px', borderRadius:5, background:'rgba(0,137,123,0.12)', color:'#00897b', fontSize:11, fontWeight:600, textDecoration:'none', border:'1px solid rgba(0,137,123,0.25)' }}>
                      Entrar no Meet ↗
                    </a>
                  )}
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ─── Google Calendar inline helpers ──────────────────────────────────────────
async function avGetToken() {
  try { const { data } = await sb.auth.getSession(); return data?.session?.provider_token || null; }
  catch { return null; }
}
async function gcGetEvents({ timeMin, timeMax } = {}) {
  const token = await avGetToken();
  if (!token) return [];
  const now  = new Date();
  const tMin = timeMin || now.toISOString();
  const tMax = timeMax || new Date(now.getFullYear(), now.getMonth() + 2, 1).toISOString();
  const url  = `https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=${encodeURIComponent(tMin)}&timeMax=${encodeURIComponent(tMax)}&singleEvents=true&orderBy=startTime&maxResults=50`;
  const res  = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
  if (!res.ok) throw new Error('Erro ao buscar eventos (' + res.status + ')');
  const d = await res.json();
  return d.items || [];
}
async function gcCreateEvent({ title, description, start, end, attendees = [], withMeet = false }) {
  const token = await avGetToken();
  if (!token) return null;
  const body = {
    summary: title, description,
    start: { dateTime: start, timeZone: 'America/Sao_Paulo' },
    end:   { dateTime: end,   timeZone: 'America/Sao_Paulo' },
    attendees: attendees.map(e => ({ email: e })),
    ...(withMeet ? { conferenceData: { createRequest: { requestId: 'inbrivvo-' + Date.now(), conferenceSolutionKey: { type: 'hangoutsMeet' } } } } : {}),
  };
  const url = 'https://www.googleapis.com/calendar/v3/calendars/primary/events' + (withMeet ? '?conferenceDataVersion=1' : '');
  const res = await fetch(url, { method: 'POST', headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
  if (!res.ok) return null;
  return await res.json();
}

// ─── Modal: Novo evento Google Calendar ──────────────────────────────────────
function NovoGCEventoModal({ onClose, onCreated }) {
  const today = new Date().toISOString().slice(0, 10);
  const [titulo,     setTitulo]     = useState('');
  const [data,       setData]       = useState(today);
  const [hInicio,    setHInicio]    = useState('09:00');
  const [hFim,       setHFim]       = useState('10:00');
  const [convidados, setConvidados] = useState('');
  const [withMeet,   setWithMeet]   = useState(false);
  const [saving,     setSaving]     = useState(false);
  const [meetLink,   setMeetLink]   = useState('');

  const IS = { width:'100%', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:8, padding:'9px 12px', color:'var(--fg-primary)', fontSize:13, fontFamily:'inherit', outline:'none', boxSizing:'border-box' };
  const LS = { fontSize:11, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:7 };

  async function salvar() {
    if (!titulo.trim()) { window.__toast?.('Informe o título', { tone:'danger' }); return; }
    setSaving(true);
    const attendees = convidados.split(',').map(s => s.trim()).filter(Boolean);
    const ev = await gcCreateEvent({ title: titulo.trim(), description: 'Criado via inBrivvo', start: `${data}T${hInicio}:00`, end: `${data}T${hFim}:00`, attendees, withMeet });
    setSaving(false);
    if (!ev) { window.__toast?.('Erro ao criar evento. Verifique as permissões do Google Calendar.', { tone:'danger' }); return; }
    window.__toast?.('Evento criado no Google Calendar!', { tone:'success' });
    const link = ev.hangoutLink || ev.conferenceData?.entryPoints?.find(p => p.entryPointType === 'video')?.uri || '';
    if (link) { setMeetLink(link); return; }
    onCreated(ev);
  }

  if (meetLink) {
    return (
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.7)', backdropFilter:'blur(6px)', zIndex:210, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
        <div onClick={e=>e.stopPropagation()} style={{ width:'min(420px,100%)', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, padding:28, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', textAlign:'center' }}>
          <div style={{ fontSize:48, marginBottom:12 }}>📹</div>
          <h3 style={{ margin:'0 0 8px', fontSize:18, fontWeight:700 }}>Google Meet criado!</h3>
          <div style={{ background:'var(--bg-elevated)', borderRadius:8, padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-primary)', wordBreak:'break-all', border:'1px solid var(--border-subtle)', marginBottom:18, textAlign:'left' }}>{meetLink}</div>
          <div style={{ display:'flex', gap:10, justifyContent:'center' }}>
            <Button variant="secondary" onClick={() => { navigator.clipboard?.writeText(meetLink); window.__toast?.('Copiado!', { tone:'success' }); }}>Copiar link</Button>
            <Button onClick={() => onCreated(null)}>Fechar</Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(8,12,28,0.7)', backdropFilter:'blur(6px)', zIndex:210, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'min(480px,100%)', background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:16, boxShadow:'0 24px 64px rgba(0,0,0,0.5)', overflow:'hidden' }}>
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <h2 style={{ margin:0, fontSize:18, fontWeight:700 }}>Novo evento Google Calendar</h2>
          <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:22 }}>×</button>
        </div>
        <div style={{ padding:24, display:'flex', flexDirection:'column', gap:14 }}>
          <div><label style={LS}>Título *</label><input value={titulo} onChange={e=>setTitulo(e.target.value)} style={IS} placeholder="Reunião de kickoff"/></div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
            <div><label style={LS}>Data</label><input type="date" value={data} onChange={e=>setData(e.target.value)} style={IS}/></div>
            <div><label style={LS}>Início</label><input type="time" value={hInicio} onChange={e=>setHInicio(e.target.value)} style={IS}/></div>
            <div><label style={LS}>Fim</label><input type="time" value={hFim} onChange={e=>setHFim(e.target.value)} style={IS}/></div>
          </div>
          <div><label style={LS}>Convidados (emails separados por vírgula)</label><input value={convidados} onChange={e=>setConvidados(e.target.value)} style={IS} placeholder="cliente@email.com"/></div>
          <label style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer', fontSize:13, color:'var(--fg-secondary)', userSelect:'none' }}>
            <button type="button" onClick={() => setWithMeet(m => !m)} style={{ width:40, height:22, borderRadius:11, border:'none', cursor:'pointer', background: withMeet ? '#1a73e8' : 'var(--border-strong)', position:'relative', transition:'background 200ms', flexShrink:0 }}>
              <span style={{ position:'absolute', top:2, left: withMeet ? 'calc(100% - 20px)' : 2, width:18, height:18, borderRadius:'50%', background:'#fff', transition:'left 200ms', boxShadow:'0 1px 4px rgba(0,0,0,0.3)' }}/>
            </button>
            Criar com Google Meet
          </label>
        </div>
        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', justifyContent:'flex-end', gap:10 }}>
          <Button variant="secondary" onClick={onClose}>Cancelar</Button>
          <Button onClick={salvar} style={{ opacity:saving?0.6:1, pointerEvents:saving?'none':'auto' }}>{saving?'Criando…':'Criar evento'}</Button>
        </div>
      </div>
    </div>
  );
}

// ─── AgendaView (Google Calendar tab — inlined to avoid window.AgendaView dep) ─
function AgendaView() {
  const [settings] = useGoogleSettings();
  const [events,   setEvents]   = useState([]);
  const [loading,  setLoading]  = useState(true);
  const [error,    setError]    = useState('');
  const [showForm, setShowForm] = useState(false);

  function reload() {
    setLoading(true); setError('');
    gcGetEvents({})
      .then(evs => { setEvents(evs); setLoading(false); })
      .catch(e  => { setError(e.message || 'Erro ao carregar eventos'); setLoading(false); });
  }

  useEffect(() => {
    if (!settings.calendarEnabled) { setLoading(false); return; }
    reload();
  }, [settings.calendarEnabled]);

  if (!settings.calendarEnabled) {
    return (
      <div style={{ padding:'48px 24px', textAlign:'center' }}>
        <div style={{ fontSize:40, marginBottom:14 }}>📅</div>
        <div style={{ fontSize:15, fontWeight:700, marginBottom:8 }}>Google Calendar não conectado</div>
        <div style={{ fontSize:13, color:'var(--fg-muted)', marginBottom:20 }}>Ative nas Configurações → Integrações para sincronizar seus eventos.</div>
        <Button onClick={() => window.__toast?.('Acesse Configurações → Integrações → Google Workspace', { tone:'info' })}>Configurar integrações Google</Button>
      </div>
    );
  }

  if (loading) return <div style={{ padding:40, textAlign:'center', color:'var(--fg-muted)', fontSize:13 }}>Carregando eventos do Google Calendar…</div>;

  if (error) return (
    <div style={{ padding:40, textAlign:'center' }}>
      <div style={{ fontSize:13, color:'#FF6A6A', marginBottom:14 }}>{error}</div>
      <Button variant="secondary" onClick={reload}>Tentar novamente</Button>
    </div>
  );

  return (
    <div style={{ padding:24 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
        <div style={{ fontSize:12, color:'var(--fg-muted)' }}>{events.length} evento{events.length !== 1 ? 's' : ''} nos próximos 2 meses</div>
        <div style={{ display:'flex', gap:8 }}>
          <Button variant="secondary" size="sm" onClick={reload}>⟳ Sincronizar</Button>
          <Button size="sm" onClick={() => setShowForm(true)}>+ Novo evento</Button>
        </div>
      </div>
      {events.length === 0 ? (
        <div style={{ padding:'48px 0', textAlign:'center', color:'var(--fg-muted)', fontSize:13 }}>Nenhum evento nos próximos 2 meses.</div>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {events.map(ev => {
            const startStr = ev.start?.dateTime || ev.start?.date || '';
            const startD   = startStr ? new Date(startStr) : null;
            const meet     = ev.hangoutLink || ev.conferenceData?.entryPoints?.find(p => p.entryPointType === 'video')?.uri;
            return (
              <div key={ev.id} style={{ display:'flex', gap:14, padding:'14px 18px', borderRadius:12, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', alignItems:'flex-start' }}>
                <div style={{ flexShrink:0, width:44, textAlign:'center', paddingTop:2 }}>
                  {startD && (<>
                    <div style={{ fontSize:10, fontWeight:700, textTransform:'uppercase', color:'var(--fg-muted)', letterSpacing:'0.05em' }}>{startD.toLocaleDateString('pt-BR', { month:'short' })}</div>
                    <div style={{ fontSize:22, fontWeight:700, lineHeight:1.1 }}>{startD.getDate()}</div>
                  </>)}
                </div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14, fontWeight:600 }}>{ev.summary || '(sem título)'}</div>
                  <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:3 }}>
                    {startD ? startD.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' }) : ''}
                    {ev.description ? <span style={{ marginLeft:8, opacity:0.7 }}>{ev.description.slice(0, 80)}</span> : null}
                  </div>
                  {meet && (
                    <a href={meet} target="_blank" rel="noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:5, marginTop:7, padding:'4px 10px', borderRadius:6, background:'rgba(26,115,232,0.12)', color:'#1a73e8', fontSize:12, fontWeight:600, textDecoration:'none', border:'1px solid rgba(26,115,232,0.25)' }}>
                      📹 Entrar no Meet
                    </a>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
      {showForm && (
        <NovoGCEventoModal
          onClose={() => setShowForm(false)}
          onCreated={ev => { if (ev) setEvents(prev => [ev, ...prev]); setShowForm(false); }}
        />
      )}
    </div>
  );
}

// ─── Calendar / Agenda ────────────────────────────────────────────────────────
const ALL_SLOTS = ['08:00','09:00','10:00','11:00','13:00','14:00','14:30','15:00','16:00','17:00'];

function Calendar({ onNav }) {
  const [calView,       setCalView]       = useState('Mês');
  const [currentDate,   setCurrentDate]   = useState(new Date(TODAY));
  const [agendaLinkOpen, setAgendaLinkOpen] = useState(false);
  const [novoOpen,      setNovoOpen]      = useState(false);
  const [events,        setEvents]        = useState([]);
  const [loading,       setLoading]       = useState(true);

  useEffect(() => {
    (async () => {
      const { data, error } = await sb.from('calendar_events').select('*').order('date').order('time');
      if (error) { window.__toast?.(error.message, { tone:'danger' }); }
      const dbEvents = (data || []).map(rowToEvent);

      // Merge meetings saved from Clients panel (Meet links)
      let meetingEvents = [];
      try {
        const meetings = JSON.parse(localStorage.getItem('inbrivvo_meetings') || '[]');
        meetingEvents = meetings.map(m => {
          const dt = new Date(m.date + 'T00:00:00');
          return {
            id:   'meet-local-' + m.id,
            mo:   dt.getMonth(),
            d:    dt.getDate(),
            t:    m.hInicio || '10:00',
            th:   parseInt((m.hInicio || '10:00').slice(0, 2), 10),
            l:    '📹 ' + m.title,
            who:  m.clientName || '',
            c:    '#00897b',
            meetLink: m.meetLink || '',
          };
        });
      } catch {}

      setEvents([...dbEvents, ...meetingEvents]);
      setLoading(false);
    })();
  }, []);

  // Public scheduling state — lifted here so it persists between modal opens
  const [linkKey]      = useState(() => 'agenda-' + Math.random().toString(36).slice(2, 8));
  const [linkActive,   setLinkActive]   = useState(true);
  const [enabledSlots, setEnabledSlots] = useState(new Set(['09:00','10:00','14:00','14:30','16:00']));
  const [bookedSlots,  setBookedSlots]  = useState(new Set());
  const [bookings,     setBookings]     = useState([]);

  const availableForClients = ALL_SLOTS.filter(s => enabledSlots.has(s) && !bookedSlots.has(s));

  const todayEvs = eventsFor(events, TODAY.getMonth(), TODAY.getDate());

  function goToday() {
    setCurrentDate(new Date(TODAY));
    window.__toast?.('Voltou para hoje');
  }

  function navPrev() {
    setCurrentDate(prev => {
      const d = new Date(prev);
      if (calView === 'Mês')    d.setMonth(d.getMonth() - 1);
      if (calView === 'Semana') d.setDate(d.getDate() - 7);
      if (calView === 'Dia')    d.setDate(d.getDate() - 1);
      return d;
    });
  }

  function navNext() {
    setCurrentDate(prev => {
      const d = new Date(prev);
      if (calView === 'Mês')    d.setMonth(d.getMonth() + 1);
      if (calView === 'Semana') d.setDate(d.getDate() + 7);
      if (calView === 'Dia')    d.setDate(d.getDate() + 1);
      return d;
    });
  }

  function getTitle() {
    if (calView === 'Mês') {
      return `${MONTH_NAMES[currentDate.getMonth()]} · ${currentDate.getFullYear()}`;
    }
    if (calView === 'Semana') {
      const ws = getWeekStart(new Date(currentDate));
      const we = new Date(ws); we.setDate(ws.getDate() + 6);
      return ws.getMonth() === we.getMonth()
        ? `${ws.getDate()}–${we.getDate()} de ${MONTH_NAMES[ws.getMonth()]} · ${ws.getFullYear()}`
        : `${ws.getDate()} ${MONTH_NAMES[ws.getMonth()].slice(0,3)} – ${we.getDate()} ${MONTH_NAMES[we.getMonth()].slice(0,3)} · ${ws.getFullYear()}`;
    }
    if (calView === 'Dia') {
      const dow = SHORT_DAYS[(currentDate.getDay() + 6) % 7];
      return `${dow}, ${currentDate.getDate()} de ${MONTH_NAMES[currentDate.getMonth()]} · ${currentDate.getFullYear()}`;
    }
    return '';
  }

  const navBtnStyle = { width:30, height:30, borderRadius:6, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-secondary)', cursor:'pointer', display:'grid', placeItems:'center' };

  return (
    <div style={{ padding:'24px 28px', display:'grid', gridTemplateColumns:'1fr 320px', gap:18 }}>
      <Card padding={0} style={{ overflow:'hidden' }}>

        {/* Toolbar */}
        <div style={{ padding:'14px 22px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid var(--border-subtle)', gap:10, flexWrap:'wrap' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <h3 style={{ margin:0, fontSize:15, fontWeight:700, whiteSpace:'nowrap', minWidth:0 }}>{getTitle()}</h3>
            <button onClick={goToday} style={{ padding:'5px 10px', borderRadius:6, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-secondary)', cursor:'pointer', fontSize:12, fontWeight:600, fontFamily:'inherit', whiteSpace:'nowrap' }}>Hoje</button>
            <button onClick={navPrev} style={navBtnStyle}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <button onClick={navNext} style={navBtnStyle}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
          </div>

          <Button icon="plus" size="sm" onClick={() => setNovoOpen(true)}>Novo evento</Button>
          <div style={{ display:'inline-flex', background:'var(--bg-elevated)', borderRadius:8, padding:3 }}>
            {['Mês','Semana','Dia','Google'].map(v => (
              <button key={v} onClick={() => setCalView(v)} style={{ padding:'6px 14px', borderRadius:6, border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600, background: calView===v ? 'var(--bg-surface)' : 'transparent', color: calView===v ? 'var(--fg-primary)' : 'var(--fg-muted)', boxShadow: calView===v ? '0 1px 4px rgba(0,0,0,0.18)' : 'none', transition:'all 140ms' }}>{v}</button>
            ))}
          </div>
        </div>

        {/* View */}
        {loading && <div style={{ padding:40, textAlign:'center', color:'var(--fg-muted)', fontSize:14 }}>Carregando eventos…</div>}
        {!loading && calView === 'Mês'    && <MonthView currentDate={currentDate} events={events} />}
        {!loading && calView === 'Semana' && <WeekView  currentDate={currentDate} events={events} />}
        {!loading && calView === 'Dia'    && <DayView   currentDate={currentDate} events={events} />}
        {calView === 'Google' && <AgendaView />}
      </Card>

      {/* Sidebar */}
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <Card padding={20}>
          <h3 style={{ margin:0, fontSize:16, fontWeight:700 }}>Hoje · {TODAY.getDate()} de {MONTH_NAMES[TODAY.getMonth()]}</h3>
          {todayEvs.length === 0 && <div style={{ fontSize:13, color:'var(--fg-muted)', marginTop:14 }}>Nenhum evento hoje.</div>}
          <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:14 }}>
            {todayEvs.map((e, i) => (
              <div key={i} style={{ display:'flex', gap:10, padding:12, borderRadius:10, background:'var(--bg-elevated)' }}>
                <span style={{ width:4, alignSelf:'stretch', background:e.c, borderRadius:4 }}/>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:11, color:'var(--fg-muted)', fontFamily:'var(--font-mono)' }}>{e.t}</div>
                  <div style={{ fontSize:13, fontWeight:600, marginTop:2 }}>{e.l}</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)', marginTop:2 }}>{e.who}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card padding={20}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:4 }}>
            <h3 style={{ margin:0, fontSize:16, fontWeight:700 }}>Agendamentos públicos</h3>
            {bookings.length > 0 && <span style={{ fontSize:11, fontWeight:700, color:'#22C55E', background:'#22C55E18', padding:'2px 8px', borderRadius:20 }}>{bookings.length} reserva{bookings.length!==1?'s':''}</span>}
          </div>
          <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2, marginBottom:12 }}>
            {linkActive ? `${availableForClients.length} horário${availableForClients.length!==1?'s':''} ${availableForClients.length!==1?'disponíveis':'disponível'}` : 'Link desativado'}
          </div>
          <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
            {availableForClients.length === 0 && linkActive && (
              <span style={{ fontSize:12, color:'var(--fg-muted)' }}>Nenhum horário disponível</span>
            )}
            {availableForClients.map(h => (
              <span key={h} style={{ padding:'5px 9px', borderRadius:7, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', fontSize:12, fontFamily:'var(--font-mono)' }}>{h}</span>
            ))}
          </div>
          <button
            onClick={() => setAgendaLinkOpen(true)}
            style={{ width:'100%', marginTop:14, padding:'9px 14px', borderRadius:8, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', cursor:'pointer', fontSize:13, fontWeight:600, fontFamily:'inherit', display:'flex', alignItems:'center', justifyContent:'center', gap:7 }}
            onMouseEnter={e => e.currentTarget.style.background='var(--border-subtle)'}
            onMouseLeave={e => e.currentTarget.style.background='var(--bg-elevated)'}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
            Configurar link público
          </button>
        </Card>
      </div>

      {agendaLinkOpen && (
        <AgendaPublicaModal
          onClose={() => setAgendaLinkOpen(false)}
          linkKey={linkKey}
          linkActive={linkActive}
          setLinkActive={setLinkActive}
          allSlots={ALL_SLOTS}
          enabledSlots={enabledSlots}
          setEnabledSlots={setEnabledSlots}
          bookedSlots={bookedSlots}
          setBookedSlots={setBookedSlots}
          bookings={bookings}
          setBookings={setBookings}
        />
      )}
      {novoOpen && (
        <NovoEventoModal
          onClose={() => setNovoOpen(false)}
          onCreate={ev => setEvents(prev => [...prev, ev])}
        />
      )}
    </div>
  );
}
window.Calendar = Calendar;

// ─── Reports ──────────────────────────────────────────────────────────────────
function Reports() {
  return (
    <div style={{ padding:'24px 28px', display:'flex', flexDirection:'column', gap:18 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14 }}>
        {[
          { l:'Horas trabalhadas',    v:'186h', d:'Maio',       c:'#1D39C4' },
          { l:'Projetos entregues',   v:'4',     d:'no mês',     c:'#22C55E' },
          { l:'Utilização da equipe', v:'78%',   d:'meta 75%',   c:'#36CFC9' },
          { l:'NPS médio',            v:'72',    d:'↑ 8 pontos', c:'#FADB14' },
        ].map(s => (
          <Card key={s.l} padding={18}>
            <div style={{ fontFamily:'var(--font-display)',fontSize:11,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--fg-muted)' }}>{s.l}</div>
            <div style={{ fontFamily:'var(--font-display)',fontSize:28,fontWeight:700,marginTop:8,letterSpacing:'-0.02em', color:s.c }}>{s.v}</div>
            <div style={{ fontSize:12,color:'var(--fg-muted)',marginTop:4 }}>{s.d}</div>
          </Card>
        ))}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
        <Card padding={20}>
          <h3 style={{ margin:0, fontSize:16, fontWeight:700 }}>Horas por projeto</h3>
          <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:12 }}>
            {[
              { p:'Rebranding · Astra', h:62, max:80, c:'#1D39C4' },
              { p:'Site Café Norte',    h:38, max:60, c:'#36CFC9' },
              { p:'App Bemvindo',       h:44, max:50, c:'#FA541C' },
              { p:'Norte Foods',        h:22, max:80, c:'#7C3AED' },
              { p:'Casa do Pão',        h:20, max:40, c:'#FADB14' },
            ].map(r => (
              <div key={r.p}>
                <div style={{ display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:6 }}>
                  <span>{r.p}</span>
                  <span style={{ fontFamily:'var(--font-mono)', color:'var(--fg-muted)' }}>{r.h}h / {r.max}h</span>
                </div>
                <div style={{ height:8, background:'var(--bg-elevated)', borderRadius:999, overflow:'hidden' }}>
                  <div style={{ width:(r.h/r.max*100)+'%', height:'100%', background:`linear-gradient(90deg, ${r.c}, ${r.c}88)` }}/>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card padding={20}>
          <h3 style={{ margin:0, fontSize:16, fontWeight:700 }}>Produtividade por pessoa</h3>
          <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:10 }}>
            {[
              { n:'Ana Silva',     role:'Designer Lead', pct:92, t:'72h · 18 tarefas concluídas' },
              { n:'Marcos Reis',   role:'Designer',      pct:78, t:'58h · 14 tarefas concluídas' },
              { n:'Juliana Pires', role:'Account',       pct:84, t:'62h · 24 reuniões'            },
              { n:'Lucas Vieira',  role:'Dev',           pct:71, t:'48h · 9 tarefas concluídas'  },
            ].map((p, i) => (
              <div key={p.n} style={{ display:'flex', alignItems:'center', gap:12, padding:10, borderRadius:10, background:'var(--bg-elevated)' }}>
                <Avatar name={p.n} size={36} idx={i}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>{p.n}</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)' }}>{p.role} · {p.t}</div>
                </div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18, color: p.pct>=80?'#22C55E':p.pct>=70?'#FADB14':'#FF6A6A' }}>{p.pct}%</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card padding={20}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
          <h3 style={{ margin:0, fontSize:16, fontWeight:700 }}>Pipeline de receita</h3>
          <Button variant="secondary" size="sm" onClick={() => window.__toast?.('Gerando CSV…', { tone:'success' })}>Exportar CSV</Button>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:10 }}>
          {[
            { l:'Lead',        v:'R$ 86k', n:8, c:'#7A859A' },
            { l:'Qualificado', v:'R$ 64k', n:5, c:'#1890FF' },
            { l:'Proposta',    v:'R$ 41k', n:3, c:'#FADB14' },
            { l:'Negociação',  v:'R$ 28k', n:2, c:'#FA541C' },
            { l:'Fechado',     v:'R$ 24k', n:2, c:'#22C55E' },
          ].map(p => (
            <div key={p.l} style={{ background:'var(--bg-elevated)', borderRadius:12, padding:14, borderLeft:`3px solid ${p.c}` }}>
              <div style={{ fontSize:11, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', fontFamily:'var(--font-display)', fontWeight:700 }}>{p.l}</div>
              <div style={{ fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, marginTop:6 }}>{p.v}</div>
              <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>{p.n} oportunidades</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}
window.Reports = Reports;