// Tidal — Agenda · conectada à API real · design fiel ao original

const fmtDate = (d) => {
  if (!d) return '';
  const ds = String(d).slice(0, 10);
  const dt = new Date(ds + 'T12:00:00');
  if (isNaN(dt.getTime())) return '';
  return dt.toLocaleDateString('pt-BR', {weekday:'short', day:'numeric', month:'short'});
};

const Agenda = ({state, setState}) => {
  const tt = useT();
  const lang = tt.lang;
  const toast = useToast();
  const isMobile = useMobile();
  const token = () => localStorage.getItem('genesis_token');
  const me = state.currentUser || {};
  const canManage = me.role === 'admin' || me.is_staff === true;

  const [tab, setTab] = useState('week');
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [editing, setEditing] = useState(null);

  const fetchEvents = async () => {
    try {
      const res = await fetch('/api/events', {
        headers: { 'Authorization': `Bearer ${token()}` }
      });
      if (res.ok) setEvents(await res.json());
    } catch(e) { console.error(e); }
    finally { setLoading(false); }
  };

  useEffect(() => { fetchEvents(); }, []);

  // 7 próximos dias
  const weekDays = useMemo(() => {
    const days = [];
    for (let i = 0; i < 7; i++) {
      const d = new Date();
      d.setDate(d.getDate() + i);
      days.push(d.toISOString().split('T')[0]);
    }
    return days;
  }, []);

  const today = new Date().toISOString().split('T')[0];

  const eventsByDay = useMemo(() => {
    const m = {};
    events.forEach(e => {
      const d = (e.data || '').slice(0, 10);
      if (!m[d]) m[d] = [];
      m[d].push(e);
    });
    return m;
  }, [events]);

  const myEvents = events.filter(e => {
    const parts = e.participantes || [];
    return parts.some(p => (typeof p === 'object' ? p.user_id : p) === me.id);
  });

  const toggleSignup = async (ev) => {
    const parts = ev.participantes || [];
    const signed = parts.some(p => (typeof p === 'object' ? p.user_id : p) === me.id);
    try {
      const res = await fetch(`/api/events/${ev.id}/signup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token()}` },
        body: JSON.stringify({ cancelar: signed })
      });
      if (res.ok) {
        toast.push({
          icon: signed ? 'x' : 'check',
          title: signed ? `Cancelado: ${ev.nome}` : `Inscrito em ${ev.nome}`,
          body: fmtDate(ev.data) + (ev.horario ? ' · ' + ev.horario : '')
        });
        await fetchEvents();
      }
    } catch(e) { toast.push({icon:'x', title: lang==='pt'?'Erro de conexão':'Connection error'}); }
  };

  // Dias com eventos (para o grid)
  const activeDays = isMobile
    ? weekDays.filter(d => (eventsByDay[d]||[]).length > 0).slice(0, 4)
    : weekDays;

  // Resumo da semana
  const totalSemana = weekDays.reduce((acc, d) => acc + (eventsByDay[d]||[]).length, 0);
  const proximoEvento = (() => {
    const futuros = events
      .filter(e => (e.data||'').slice(0,10) >= today)
      .sort((a,b) => {
        const da = (a.data||'').slice(0,10), db = (b.data||'').slice(0,10);
        if (da !== db) return da.localeCompare(db);
        return (a.horario||'').localeCompare(b.horario||'');
      });
    return futuros[0] || null;
  })();

  return (
    <main style={{padding: isMobile ? '16px 16px 80px' : '30px 36px 56px', flex:1}}>
      {/* Cabeçalho de página */}
      <div style={{marginBottom:22}}>
        <div className="t-eyebrow">{lang==='pt'?'vida a bordo':'life aboard'}</div>
        <h1 style={{fontFamily:'var(--fs)',fontSize:isMobile?30:38,letterSpacing:'-0.8px',lineHeight:1.05,marginTop:6}}>
          {lang==='pt'?<>Esta <em style={{fontStyle:'italic',color:'var(--accent)'}}>semana.</em></>:<>This <em style={{fontStyle:'italic',color:'var(--accent)'}}>week.</em></>}
        </h1>
      </div>

      {/* Resumo */}
      {!loading && (
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginBottom:24}}>
          <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--accent)',borderRadius:18,padding:'14px 20px',display:'flex',alignItems:'center',gap:10,boxShadow:'var(--shadow-sm)'}}>
            <span style={{fontFamily:'var(--fs)',fontSize:28,fontWeight:600,letterSpacing:'-0.6px',lineHeight:1}}>{totalSemana}</span>
            <span style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--fm)'}}>{lang==='pt'?<>evento{totalSemana!==1?'s':''}<br/>na semana</>:<>event{totalSemana!==1?'s':''}<br/>this week</>}</span>
          </div>
          {proximoEvento && (
            <div style={{flex:1,minWidth:200,background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--accent)',borderRadius:18,padding:'14px 20px',boxShadow:'var(--shadow-sm)'}}>
              <div className="t-eyebrow" style={{marginBottom:4}}>{lang==='pt'?'Próximo':'Next'}</div>
              <div style={{fontFamily:'var(--fs)',fontSize:17,fontWeight:500,letterSpacing:'-0.3px',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{proximoEvento.nome || proximoEvento.titulo}</div>
              <div style={{fontSize:11.5,color:'var(--muted)',fontFamily:'var(--fm)',marginTop:3}}>
                {fmtDate(proximoEvento.data)}{proximoEvento.horario?` · ${proximoEvento.horario}`:''}
              </div>
            </div>
          )}
        </div>
      )}

      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20,flexWrap:'wrap',gap:10}}>
        <div className="toggle">
          <button className={tab==='week'?'active':''} onClick={()=>setTab('week')}>{lang==='pt'?'Semana':'Week'}</button>
          <button className={tab==='month'?'active':''} onClick={()=>setTab('month')}>{lang==='pt'?'Mês':'Month'}</button>
          <button className={tab==='mine'?'active':''} onClick={()=>setTab('mine')}>
            {lang==='pt'?'Meus eventos':'My events'}{myEvents.length > 0 ? ` · ${myEvents.length}` : ''}
          </button>
        </div>
        {canManage && (
          <button className="btn-tidal" onClick={()=>setCreating(true)}><Icon n="plus" size={14}/>Evento</button>
        )}
      </div>

      {loading ? (
        // Skeleton loaders
        <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(4, 1fr)',gap:14}}>
          {[1,2,3,4].map(col=>(
            <div key={col}>
              <div style={{height:50,marginBottom:12,borderRadius:10,background:'linear-gradient(90deg,var(--cream-2) 25%,var(--cream-3) 50%,var(--cream-2) 75%)',backgroundSize:'200% 100%',animation:'shimmer 1.5s infinite'}}/>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {[1,2].map(i=>(
                  <div key={i} style={{height:72,borderRadius:18,background:'linear-gradient(90deg,var(--cream-2) 25%,var(--cream-3) 50%,var(--cream-2) 75%)',backgroundSize:'200% 100%',animation:'shimmer 1.5s infinite'}}/>
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : tab === 'week' ? (
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile
            ? '1fr'
            : `repeat(${activeDays.filter(d=>(eventsByDay[d]||[]).length>0 || !isMobile).length || 2}, 1fr)`,
          gap: isMobile ? 20 : 14
        }}>
          {weekDays.map(d => {
            const evs = (eventsByDay[d] || []).sort((a,b) => (a.horario||'').localeCompare(b.horario||''));
            const dt = new Date(d + 'T12:00:00');
            const isToday = d === today;
            // No mobile, só mostra dias com eventos
            if (isMobile && evs.length === 0) return null;
            return (
              <div key={d}>
                {/* Cabeçalho do dia */}
                <div style={{padding:'0 4px 12px', borderBottom:'1px solid var(--line-soft)', marginBottom:12}}>
                  <div className="t-eyebrow">
                    {['dom','seg','ter','qua','qui','sex','sáb'][dt.getDay()]}
                  </div>
                  <div style={{
                    fontFamily:'var(--fs)', fontSize:isMobile?36:30, letterSpacing:'-0.6px',
                    lineHeight:1, marginTop:4,
                    color: isToday ? 'var(--accent)' : 'var(--ink)'
                  }}>
                    {dt.getDate()}
                    {isToday && <span style={{fontSize:14,color:'var(--muted)',marginLeft:6,fontStyle:'italic'}}>· hoje</span>}
                  </div>
                </div>
                {/* Cards de evento */}
                <div style={{display:'flex',flexDirection:'column',gap:10}}>
                  {evs.map(ev => (
                    <EventCard lang={lang}
                      key={ev.id} ev={ev} me={me}
                      signed={(ev.participantes||[]).some(p=>(typeof p==='object'?p.user_id:p)===me.id)}
                      onSignup={()=>toggleSignup(ev)}
                      onEdit={canManage ? setEditing : undefined}
                      expanded={isMobile}
                    />
                  ))}
                  {evs.length === 0 && (
                    <div style={{fontSize:12,color:'var(--muted-2)',fontStyle:'italic',fontFamily:'var(--fs)',padding:'10px 4px'}}>
                      {lang==='pt'?'nada agendado':'nothing scheduled'}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      ) : tab === 'month' ? (
        <MonthView events={events} me={me} onSignup={toggleSignup} onEdit={canManage ? setEditing : undefined} isMobile={isMobile} lang={lang}/>
      ) : (
        // Meus eventos
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(300px, 1fr))', gap:16}}>
          {myEvents.map(ev => (
            <EventCard lang={lang} key={ev.id} ev={ev} me={me} signed expanded onSignup={()=>toggleSignup(ev)} onEdit={canManage ? setEditing : undefined} lang={lang}/>
          ))}
          {myEvents.length === 0 && (
            <div className="empty" style={{gridColumn:'1/-1',padding:60,textAlign:'center'}}>
              {lang==='pt'?'você ainda não está inscrito em nenhum evento esta semana.':'you have not joined any event this week yet.'}
            </div>
          )}
        </div>
      )}

      {/* Modal criar evento */}
      {creating && (
        <CreateEventModal
          token={token} toast={toast}
          onClose={()=>setCreating(false)}
          onCreated={()=>{ fetchEvents(); setCreating(false); }}
        />
      )}
      {editing && (
        <CreateEventModal
          token={token} toast={toast} event={editing} lang={lang}
          onClose={()=>setEditing(null)}
          onCreated={()=>{ fetchEvents(); setEditing(null); }}
        />
      )}
    </main>
  );
};

// ─── EventCard — fiel ao design original ───
// ─── MonthView — calendário mensal ───
const MV_COR = {
  coral:'var(--coral)', sky:'var(--teal)', leaf:'var(--leaf)', sun:'#A87A1F', teal:'var(--teal)',
  verde:'var(--leaf)', aula:'var(--teal)', treino:'var(--leaf)', cinema:'var(--coral)', musica:'#A87A1F', drill:'var(--coral)', outro:'var(--muted)',
};
const mvCor = (ev) => MV_COR[ev.cor] || MV_COR[ev.tipo] || 'var(--teal)';

const MonthView = ({events, me, onSignup, onEdit, isMobile, lang}) => {
  const [ref, setRef] = useState(() => { const d=new Date(); return new Date(d.getFullYear(), d.getMonth(), 1); });
  const [sel, setSel] = useState(null);
  const todayStr = new Date().toISOString().split('T')[0];
  const year = ref.getFullYear(), month = ref.getMonth();
  const firstDow = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month+1, 0).getDate();

  const byDay = {};
  events.forEach(e => { const d=(e.data||'').slice(0,10); if(!byDay[d]){byDay[d]=[];} byDay[d].push(e); });

  const cells = [];
  for (let i=0;i<firstDow;i++) cells.push(null);
  for (let day=1; day<=daysInMonth; day++) {
    const ds = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
    cells.push({ day, ds, evs: (byDay[ds]||[]).sort((a,b)=>(a.horario||'').localeCompare(b.horario||'')) });
  }
  const monthName = ref.toLocaleDateString('pt-BR',{month:'long',year:'numeric'});
  const go = (delta) => { setSel(null); setRef(new Date(year, month+delta, 1)); };
  const selEvs = sel ? (byDay[sel]||[]).sort((a,b)=>(a.horario||'').localeCompare(b.horario||'')) : [];
  const maxChips = isMobile ? 2 : 3;

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
        <button className="btn btn-sm" onClick={()=>go(-1)} style={{minWidth:38}}>‹</button>
        <div style={{fontFamily:'var(--fs)',fontSize:isMobile?20:24,letterSpacing:'-0.4px',textTransform:'capitalize'}}>{monthName}</div>
        <button className="btn btn-sm" onClick={()=>go(1)} style={{minWidth:38}}>›</button>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:isMobile?4:8,marginBottom:8}}>
        {['dom','seg','ter','qua','qui','sex','sáb'].map(w=>(
          <div key={w} style={{textAlign:'center',fontFamily:'var(--fm)',fontSize:10,letterSpacing:0.5,color:'var(--muted)',textTransform:'uppercase'}}>{isMobile?w[0]:w}</div>
        ))}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:isMobile?4:8}}>
        {cells.map((c,i)=> c===null ? <div key={'e'+i}/> : (
          <div key={c.ds} onClick={()=>c.evs.length && setSel(c.ds)} style={{
            minHeight:isMobile?62:96, background:'var(--surface)',
            border:'1px solid var(--line-soft)',
            borderTop: c.ds===todayStr ? '3px solid var(--accent)' : '1px solid var(--line-soft)',
            borderRadius:12, padding:isMobile?'5px':'7px 8px', cursor:c.evs.length?'pointer':'default',
            boxShadow: c.evs.length?'var(--shadow-sm)':'none', display:'flex', flexDirection:'column', gap:3, overflow:'hidden',
            transition:'transform .12s'
          }}
            onMouseDown={e=>{ if(c.evs.length) e.currentTarget.style.transform='scale(0.96)'; }}
            onMouseUp={e=>{ e.currentTarget.style.transform=''; }}
            onMouseLeave={e=>{ e.currentTarget.style.transform=''; }}
          >
            <div style={{fontFamily:'var(--fm)',fontSize:isMobile?11:12,fontWeight:c.ds===todayStr?700:400,color:c.ds===todayStr?'var(--accent)':'var(--ink)'}}>{c.day}</div>
            {c.evs.slice(0,maxChips).map(ev=>(
              <div key={ev.id} style={{display:'flex',alignItems:'center',gap:4,minWidth:0}}>
                <div style={{width:5,height:5,borderRadius:'50%',background:mvCor(ev),flexShrink:0}}/>
                {!isMobile && <div style={{fontFamily:'var(--f)',fontSize:10,color:'var(--ink)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{ev.nome||ev.titulo}</div>}
              </div>
            ))}
            {c.evs.length>maxChips && <div style={{fontFamily:'var(--fm)',fontSize:9,color:'var(--muted)'}}>+{c.evs.length-maxChips}</div>}
          </div>
        ))}
      </div>
      {sel && (
        <div style={{position:'fixed',inset:0,zIndex:200,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'6vh 16px',overflowY:'auto'}} onClick={()=>setSel(null)}>
          <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:480,background:'var(--surface)',borderRadius:22,padding:'24px',animation:'cardPop .25s ease both'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16,gap:10}}>
              <div style={{fontFamily:'var(--fs)',fontSize:isMobile?18:22,letterSpacing:'-0.4px',textTransform:'capitalize',lineHeight:1.1}}>{new Date(sel+'T12:00:00').toLocaleDateString('pt-BR',{weekday:'long',day:'numeric',month:'long'})}</div>
              <button className="btn btn-sm" onClick={()=>setSel(null)}>{lang==='pt'?'fechar':'close'}</button>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:12}}>
              {selEvs.map(ev=>(
                <EventCard lang={lang} key={ev.id} ev={ev} me={me} expanded
                  signed={(ev.participantes||[]).some(p=>(typeof p==='object'?p.user_id:p)===me.id)}
                  onSignup={()=>onSignup(ev)} onEdit={onEdit}/>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ─── EventCard — muda de cor por completo quando inscrito ───
const EventCard = ({ev, me, signed, expanded, onSignup, onOpen, onEdit, lang}) => {
  const [pulse, setPulse] = useState(false);
  const corMap = {
    coral:'var(--accent)', sky:'var(--teal)', leaf:'var(--leaf)',
    sun:'#A87A1F', teal:'var(--teal)', verde:'var(--leaf)',
    aula:'var(--teal)', treino:'var(--leaf)', cinema:'var(--accent)',
    musica:'#A87A1F', drill:'var(--accent)', outro:'var(--muted)',
  };
  const cor = corMap[ev.cor] || corMap[ev.tipo] || 'var(--teal)';
  const parts = ev.participantes || [];
  const count = parts.length;
  const colors = ['var(--teal)','var(--leaf)','var(--coral)','var(--sky)','#A87A1F','var(--rose)'];

  // Paleta que reage ao estado inscrito (teal profundo — elegante e legível)
  const sBg     = signed ? 'var(--teal)' : 'var(--surface)';
  const sTop    = signed ? 'var(--cream)' : 'var(--accent)';
  const sInk    = signed ? '#fff' : 'var(--ink)';
  const sMuted  = signed ? 'rgba(255,255,255,0.78)' : 'var(--muted)';
  const sBar    = signed ? 'rgba(255,255,255,0.9)' : cor;
  const avBorder= signed ? 'var(--teal)' : 'var(--cream)';

  return (
    <div onClick={()=>onOpen && onOpen(ev)} style={{
      background: sBg, border:'1px solid var(--line-soft)',
      borderTop: `3px solid ${sTop}`,
      borderRadius:16, padding: expanded ? '18px 20px' : '14px 16px',
      transition:'background .35s ease, border-top-color .35s ease, transform .2s, box-shadow .2s',
      boxShadow:'var(--shadow-sm)', cursor: onOpen?'pointer':'default',
      animation:'cardPop .25s ease both'
    }}
      onMouseEnter={e=>{
        e.currentTarget.style.transform='translateY(-2px)';
        e.currentTarget.style.boxShadow='0 12px 32px -16px rgba(31,42,46,0.18)';
      }}
      onMouseLeave={e=>{
        e.currentTarget.style.transform='';
        e.currentTarget.style.boxShadow='var(--shadow-sm)';
      }}
      onMouseDown={e=>{ e.currentTarget.style.transform='scale(0.98)'; }}
      onMouseUp={e=>{ e.currentTarget.style.transform='translateY(-2px)'; }}
    >
      {/* Header: barra colorida + hora + título */}
      <div style={{display:'flex',alignItems:'flex-start',gap:10,marginBottom:10}}>
        <div style={{width:4,minHeight:36,borderRadius:3,background:sBar,flexShrink:0,alignSelf:'stretch'}}/>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontFamily:'var(--fm)',fontSize:11,color:sMuted,letterSpacing:0.4,marginBottom:3}}>
            {ev.horario || ev.hora || '—'}{ev.recorrente ? ' · 🔁' : ''}
          </div>
          <div style={{fontFamily:'var(--fs)',fontSize:expanded?19:16,fontWeight:500,letterSpacing:'-0.3px',lineHeight:1.2,color:sInk}}>
            {ev.nome || ev.titulo}
          </div>
          {expanded && ev.local && (
            <div style={{fontSize:12.5,color:sMuted,fontFamily:'var(--fs)',fontStyle:'italic',marginTop:4}}>
              {ev.local}
            </div>
          )}
          {expanded && ev.responsavel_nome && (
            <div style={{fontSize:11.5,color: signed?'rgba(255,255,255,0.9)':'var(--teal)',fontFamily:'var(--fm)',marginTop:4}}>
              👤 responsável: {ev.responsavel_nome}
            </div>
          )}
        </div>
        {onEdit && (
          <button onClick={e=>{ e.stopPropagation(); onEdit(ev); }} title="Editar evento"
            style={{background:'transparent',border:'none',cursor:'pointer',fontSize:14,padding:'2px 4px',flexShrink:0,color:sMuted,lineHeight:1}}>
            ✏️
          </button>
        )}
        {ev.streak && (
          <span style={{fontSize:11,color: signed?'#fff':'var(--coral)',fontFamily:'var(--fm)',whiteSpace:'nowrap',flexShrink:0}}>
            🔥 {ev.streak}
          </span>
        )}
      </div>

      {/* Footer: avatares empilhados + contador + botão */}
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        {/* Avatares com letras */}
        <div style={{display:'flex',alignItems:'center'}}>
          {parts.slice(0, 5).map((uid, i) => {
            const letter = String(uid).slice(-1).toUpperCase();
            return (
              <div key={uid} style={{
                marginLeft: i ? -8 : 0, zIndex: 10-i,
                width:26, height:26, borderRadius:'50%',
                background: colors[i % colors.length],
                color:'white', border:`2px solid ${avBorder}`,
                display:'grid', placeItems:'center',
                fontFamily:'var(--fm)', fontSize:9, fontWeight:700
              }}>
                {letter}
              </div>
            );
          })}
          {count > 5 && (
            <div style={{
              marginLeft:-8, padding:'0 7px', height:26, borderRadius:14,
              background: signed?'rgba(255,255,255,0.2)':'var(--cream-2)', color: signed?'#fff':'var(--muted)', fontSize:10,
              display:'grid', placeItems:'center', fontFamily:'var(--fm)',
              border:`2px solid ${avBorder}`
            }}>
              +{count - 5}
            </div>
          )}
        </div>

        {count > 0 && (
          <span style={{fontSize:11,color:sMuted,fontFamily:'var(--fm)'}}>🔥 {count}</span>
        )}

        <div style={{flex:1}}/>

        {/* Botão entrar/inscrito */}
        <button
          onClick={e=>{ e.stopPropagation(); if(!signed){ setPulse(true); setTimeout(()=>setPulse(false),450);} onSignup(); }}
          style={{
            background: signed ? 'var(--cream)' : 'var(--ink)',
            color: signed ? 'var(--leaf)' : 'var(--cream)',
            border:'none', padding:'7px 14px', borderRadius:999,
            fontSize:12, fontWeight:600, cursor:'pointer',
            fontFamily:'var(--f)', transition:'background .3s ease, color .3s ease', whiteSpace:'nowrap',
            animation: pulse ? 'joinPulse .45s ease' : 'none'
          }}
          onMouseEnter={e=>{ if(!signed) e.currentTarget.style.background='#2E3A3F'; }}
          onMouseLeave={e=>{ if(!signed) e.currentTarget.style.background='var(--ink)'; }}
        >
          {signed ? (lang==='pt'?'✓ inscrito':'✓ joined') : (lang==='pt'?'+ entrar':'+ join')}
        </button>
      </div>
    </div>
  );
};

// ─── Modal criar evento ───
const CreateEventModal = ({token, toast, onClose, onCreated, event, lang}) => {
  const editMode = !!event;
  const [form, setForm] = useState(editMode ? {
    nome: event.nome||event.titulo||'', data: (event.data||'').slice(0,10), horario: event.horario||'',
    local: event.local||'', tipo: event.tipo||'aula', descricao: event.descricao||'',
    cor: event.cor||'coral', responsavel_id: event.responsavel_id||'',
    recorrente:false, recorrencia:'semanal', recorrencia_ate:''
  } : {
    nome:'', data:'', horario:'', local:'', tipo:'aula', descricao:'',
    responsavel_id:'', recorrente:false, recorrencia:'semanal', recorrencia_ate:''
  });
  const [saving, setSaving] = useState(false);
  const [pessoas, setPessoas] = useState([]);

  useEffect(() => {
    fetch('/api/boarding/manifesto', { headers:{ 'Authorization':`Bearer ${token()}` } })
      .then(r=>r.json())
      .then(d=> setPessoas((d.abordo||[]).filter(u=>u.nome).sort((a,b)=>a.nome.localeCompare(b.nome))))
      .catch(()=>{});
  }, []);

  // Data máxima da recorrência = 1 ano após a data do evento
  const maxAte = (() => {
    if (!form.data) return '';
    const d = new Date(form.data + 'T12:00:00');
    if (isNaN(d.getTime())) return '';
    d.setFullYear(d.getFullYear() + 1);
    return d.toISOString().slice(0,10);
  })();

  const save = async () => {
    if (!form.nome || !form.data) { toast.push({icon:'x', title: lang==='pt'?'Nome e data são obrigatórios':'Name and date are required'}); return; }
    setSaving(true);
    try {
      const res = await fetch(editMode ? `/api/events/${event.id}` : '/api/events', {
        method: editMode ? 'PUT' : 'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${token()}`},
        body: JSON.stringify(form)
      });
      if (res.ok) {
        const d = await res.json().catch(()=>({}));
        toast.push({icon:'check', title: editMode ? (lang==='pt'?'Evento atualizado!':'Event updated!') : (d.criados>1 ? (lang==='pt'?`${d.criados} ocorrências criadas!`:`${d.criados} occurrences created!`) : (lang==='pt'?'Evento criado!':'Event created!'))});
        onCreated();
      } else {
        const d = await res.json();
        toast.push({icon:'x', title:'Erro', body:d.error});
      }
    } catch(e) { toast.push({icon:'x', title: lang==='pt'?'Erro de conexão':'Connection error'}); }
    finally { setSaving(false); }
  };

  const remover = async (serie) => {
    const msg = serie
      ? (lang==='pt'?'Excluir TODA a série recorrente? Isso remove todas as ocorrências deste evento.':'Delete the WHOLE recurring series? This removes every occurrence.')
      : (lang==='pt'?'Excluir este evento?':'Delete this event?');
    if (!window.confirm(msg)) return;
    setSaving(true);
    try {
      const res = await fetch(`/api/events/${event.id}${serie?'?serie=true':''}`, {
        method:'DELETE', headers:{'Authorization':`Bearer ${token()}`}
      });
      if (res.ok) {
        const d = await res.json().catch(()=>({}));
        toast.push({icon:'check', title: serie ? (lang==='pt'?`Série removida${d.removidos?` (${d.removidos})`:''}`:`Series removed${d.removidos?` (${d.removidos})`:''}`) : (lang==='pt'?'Evento removido':'Event removed')});
        onCreated();
      } else { toast.push({icon:'x', title: lang==='pt'?'Erro ao remover':'Error removing'}); }
    } catch(e) { toast.push({icon:'x', title: lang==='pt'?'Erro de conexão':'Connection error'}); }
    finally { setSaving(false); }
  };

  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(31,42,46,0.45)',backdropFilter:'blur(6px)',zIndex:8000,display:'grid',placeItems:'center',padding:20}}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:520,maxHeight:'88vh',overflowY:'auto',background:'var(--cream)',borderRadius:24,padding:'28px 30px',animation:'slideIn .3s both'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:22}}>
          <div style={{fontFamily:'var(--fs)',fontSize:26,letterSpacing:'-0.5px'}}>
            {editMode ? (lang==='pt'?'Editar':'Edit') : (lang==='pt'?'Criar':'Create')} <em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'evento':'event'}</em>
          </div>
          <button className="btn ghost" onClick={onClose}><Icon n="x" size={14}/></button>
        </div>
        <div style={{display:'grid',gap:12}}>
          <div>
            <label className="label">{lang==='pt'?'Nome *':'Name *'}</label>
            <input className="input" style={{width:'100%',boxSizing:'border-box'}} value={form.nome}
              onChange={e=>setForm(f=>({...f,nome:e.target.value}))} placeholder="Ex: Treino funcional"/>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div>
              <label className="label">{lang==='pt'?'Data *':'Date *'}</label>
              <input className="input" type="date" style={{width:'100%',boxSizing:'border-box'}} value={form.data}
                onChange={e=>setForm(f=>({...f,data:e.target.value}))}/>
            </div>
            <div>
              <label className="label">{lang==='pt'?'Horário':'Time'}</label>
              <input className="input" style={{width:'100%',boxSizing:'border-box'}} value={form.horario}
                onChange={e=>setForm(f=>({...f,horario:e.target.value}))} placeholder="19:30"/>
            </div>
          </div>
          <div>
            <label className="label">{lang==='pt'?'Local':'Location'}</label>
            <input className="input" style={{width:'100%',boxSizing:'border-box'}} value={form.local}
              onChange={e=>setForm(f=>({...f,local:e.target.value}))} placeholder="Academia, Salão, Popa…"/>
          </div>
          <div>
            <label className="label">{lang==='pt'?'Tipo':'Type'}</label>
            <select className="input select" style={{width:'100%',boxSizing:'border-box'}} value={form.tipo}
              onChange={e=>setForm(f=>({...f,tipo:e.target.value}))}>
              <option value="aula">{lang==='pt'?'Aula':'Class'}</option>
              <option value="treino">{lang==='pt'?'Treino':'Workout'}</option>
              <option value="cinema">Cinema</option>
              <option value="musica">{lang==='pt'?'Música':'Music'}</option>
              <option value="drill">{lang==='pt'?'Drill / Emergência':'Drill / Emergency'}</option>
              <option value="outro">{lang==='pt'?'Outro':'Other'}</option>
            </select>
          </div>
          <div>
            <label className="label">{lang==='pt'?'Responsável a bordo':'Person in charge aboard'}</label>
            <select className="input select" style={{width:'100%',boxSizing:'border-box'}} value={form.responsavel_id}
              onChange={e=>setForm(f=>({...f,responsavel_id:e.target.value}))}>
              <option value="">— ninguém / a definir —</option>
              {pessoas.map(p => <option key={p.id} value={p.id}>{p.nome}</option>)}
            </select>
          </div>
          {!editMode && (
          <div style={{borderTop:'1px solid var(--line-soft)',paddingTop:14,marginTop:2}}>
            <label style={{display:'flex',alignItems:'center',gap:9,cursor:'pointer',fontFamily:'var(--fm)',fontSize:13,color:'var(--ink)'}}>
              <input type="checkbox" checked={form.recorrente} onChange={e=>setForm(f=>({...f,recorrente:e.target.checked}))} style={{width:16,height:16,accentColor:'var(--accent)',cursor:'pointer'}}/>
              🔁 Evento recorrente
            </label>
            {form.recorrente && (
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:12}}>
                <div>
                  <label className="label">{lang==='pt'?'Repete':'Repeats'}</label>
                  <select className="input select" style={{width:'100%',boxSizing:'border-box'}} value={form.recorrencia}
                    onChange={e=>setForm(f=>({...f,recorrencia:e.target.value}))}>
                    <option value="semanal">{lang==='pt'?'Toda semana':'Every week'}</option>
                    <option value="diario">{lang==='pt'?'Todo dia':'Every day'}</option>
                    <option value="quinzenal">{lang==='pt'?'A cada 15 dias':'Every 15 days'}</option>
                    <option value="mensal">{lang==='pt'?'Todo mês':'Every month'}</option>
                  </select>
                </div>
                <div>
                  <label className="label">{lang==='pt'?'Até':'Until'}</label>
                  <input className="input" type="date" style={{width:'100%',boxSizing:'border-box'}} value={form.recorrencia_ate}
                    max={maxAte} min={form.data||undefined}
                    onChange={e=>setForm(f=>({...f,recorrencia_ate:e.target.value}))}/>
                </div>
                <div style={{gridColumn:'1/-1',fontSize:11,color:'var(--muted)',fontFamily:'var(--fm)',lineHeight:1.5}}>
                  Limite de 1 ano. Em branco = repete por 1 ano a partir da data inicial.
                </div>
              </div>
            )}
          </div>
          )}
        </div>
        <div style={{marginTop:22,display:'flex',gap:10,alignItems:'center',flexWrap:'wrap'}}>
          {editMode && (
            <>
              <button className="btn" onClick={()=>remover(false)} disabled={saving}
                style={{color:'var(--rose)',borderColor:'var(--rose)',background:'transparent'}}>{lang==='pt'?'Excluir':'Delete'}</button>
              {event.serie_id && (
                <button className="btn" onClick={()=>remover(true)} disabled={saving}
                  style={{color:'#fff',background:'var(--rose)',border:'1px solid var(--rose)'}}>{lang==='pt'?'Excluir série 🔁':'Delete series 🔁'}</button>
              )}
            </>
          )}
          <div style={{flex:1}}/>
          <button className="btn" onClick={onClose}>{lang==='pt'?'Cancelar':'Cancel'}</button>
          <button className="btn btn-primary" onClick={save} disabled={saving}>
            <Icon n="check" size={14}/>{saving?(lang==='pt'?'Salvando…':'Saving…'):(editMode?(lang==='pt'?'Salvar':'Save'):(lang==='pt'?'Criar evento':'Create event'))}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {Agenda});