// Caririaçu Guincho — Tela consolidada de lembretes (toda a frota)

const { useState: useStateLC, useEffect: useEffectLC, useMemo: useMemoLC } = React;

const LembretesConsolidadosScreen = () => {
  const [lembretes, setLembretes] = useStateLC([]);
  const [frota, setFrota] = useStateLC([]);
  const [filtro, setFiltro] = useStateLC('todos'); // todos | vencido | proximo
  const [tick, setTick] = useStateLC(0);

  useEffectLC(() => {
    Promise.all([
      db.list('lembretes', { eq: { status: 'ativo' } }),
      db.list('frota'),
    ]).then(([ls, fs]) => { setLembretes(ls); setFrota(fs); });
  }, [tick]);

  const fmap = useMemoLC(() => Object.fromEntries(frota.map(g => [g.id, g])), [frota]);

  const itemsComStatus = useMemoLC(() => {
    const order = { vencido: 0, proximo: 1, ativo: 2 };
    const arr = lembretes.map(l => ({
      ...l,
      guincho: fmap[l.guincho_id],
      st: window.statusLembrete(l, fmap[l.guincho_id]?.km_atual)
    }));
    return arr
      .filter(x => filtro === 'todos' ? x.st.estado !== 'ativo' :
                   filtro === 'vencido' ? x.st.estado === 'vencido' :
                   filtro === 'proximo' ? x.st.estado === 'proximo' : true)
      .sort((a, b) => order[a.st.estado] - order[b.st.estado]);
  }, [lembretes, fmap, filtro]);

  // agrupado por guincho
  const grupos = useMemoLC(() => {
    const map = {};
    itemsComStatus.forEach(x => {
      const k = x.guincho_id;
      map[k] = map[k] || { guincho: x.guincho, items: [] };
      map[k].items.push(x);
    });
    return Object.values(map);
  }, [itemsComStatus]);

  const concluir = async (item) => {
    if (!confirm(`Marcar "${item.descricao}" como concluído?`)) return;
    const { error } = await sb.rpc('concluir_lembrete', { p_lembrete_id: item.id });
    if (error) { showToast('Erro: ' + error.message, 'error'); return; }
    setTick(t => t + 1);
    showToast(item.recorrente ? 'Concluído (próximo lembrete criado)' : 'Concluído', 'success');
  };

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <h1 style={{ fontSize: 22, fontWeight: 700, color: '#0F172A' }}>Lembretes pendentes</h1>

      <div style={{ display: 'flex', gap: 8 }}>
        {[
          { k: 'todos', label: 'Todos' },
          { k: 'vencido', label: 'Vencidos' },
          { k: 'proximo', label: 'Próximos' },
        ].map(o => (
          <button key={o.k} onClick={() => setFiltro(o.k)} style={{
            background: filtro === o.k ? '#0F172A' : '#fff',
            color: filtro === o.k ? '#fff' : '#475569',
            border: '1px solid ' + (filtro === o.k ? '#0F172A' : '#E2E8F0'),
            borderRadius: 6, padding: '8px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer'
          }}>{o.label}</button>
        ))}
      </div>

      {grupos.length === 0 ? (
        <div style={{ color: '#94A3B8', textAlign: 'center', padding: 40, background: '#fff', borderRadius: 10 }}>
          Nenhum lembrete {filtro !== 'todos' ? filtro : 'pendente'}.
        </div>
      ) : grupos.map(g => (
        <div key={g.guincho?.id} style={{ background: '#fff', borderRadius: 12, border: '1px solid #E2E8F0', overflow: 'hidden' }}>
          <div style={{ background: '#F8FAFC', padding: '10px 14px', borderBottom: '1px solid #E2E8F0',
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#0F172A' }}>
                {g.guincho?.marca} {g.guincho?.modelo} · {g.guincho?.placa}
              </div>
              <div style={{ fontSize: 11, color: '#64748B' }}>{fmtKM(g.guincho?.km_atual || 0)}</div>
            </div>
            <button onClick={() => window.abrirGuincho(g.guincho?.id)} style={{
              background: 'none', border: 'none', color: '#3B82F6', fontSize: 12, fontWeight: 600, cursor: 'pointer'
            }}>Ver guincho →</button>
          </div>
          {g.items.map(x => {
            const c = window.CORES_LEMBRETE[x.st.estado];
            return (
              <div key={x.id} style={{
                background: c.bg, padding: 12,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
                borderTop: '1px solid #fff'
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: c.text }}>
                    {c.icon} {x.descricao}
                  </div>
                  <div style={{ fontSize: 11, color: c.text, marginTop: 2, opacity: .85 }}>
                    {window.formatarFalta(x.st)}
                    {x.recorrente && ' · recorrente'}
                  </div>
                </div>
                <button onClick={() => concluir(x)} style={{
                  background: '#fff', border: '1px solid ' + c.border, borderRadius: 6,
                  padding: '6px 10px', fontSize: 11, fontWeight: 600, color: c.text, cursor: 'pointer'
                }}>✓ Concluir</button>
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { LembretesConsolidadosScreen });