// Caririaçu Guincho — Tab Lembrete

const { useState: useStateTL, useEffect: useEffectTL, useMemo: useMemoTL } = React;

const CORES_LEMBRETE = {
  ativo:   { bg: '#ECFDF5', border: '#86EFAC', text: '#065F46', icon: '🟢' },
  proximo: { bg: '#FEF3C7', border: '#FCD34D', text: '#92400E', icon: '🟡' },
  vencido: { bg: '#FEE2E2', border: '#FCA5A5', text: '#991B1B', icon: '🔴' },
};

const TabLembrete = ({ guincho, onLembreteChange }) => {
  const [items, setItems] = useStateTL([]);
  const [edit, setEdit] = useStateTL(null);
  const [tick, setTick] = useStateTL(0);

  useEffectTL(() => {
    db.list('lembretes', { eq: { guincho_id: guincho.id, status: 'ativo' }, order: 'created_at', asc: false })
      .then(setItems);
  }, [guincho.id, tick]);

  const itemsComStatus = useMemoTL(() => {
    const order = { vencido: 0, proximo: 1, ativo: 2 };
    return items.map(x => ({
      ...x,
      st: window.statusLembrete(x, guincho.km_atual)
    })).sort((a, b) => order[a.st.estado] - order[b.st.estado]);
  }, [items, guincho.km_atual]);

  const metricas = useMemoTL(() => {
    const ativos = itemsComStatus.filter(x => x.st.estado === 'ativo').length;
    const proximos = itemsComStatus.filter(x => x.st.estado === 'proximo').length;
    const vencidos = itemsComStatus.filter(x => x.st.estado === 'vencido').length;
    return { ativos, proximos, vencidos };
  }, [itemsComStatus]);

  const novo = () => setEdit({
    descricao: '', gatilho: 'km',
    proximo_km: (guincho.km_atual || 0) + 5000,
    proxima_data: null,
    antecedencia_km: 500, antecedencia_dias: 15,
    recorrente: false, intervalo_km: 10000, intervalo_dias: 90,
  });

  const salvar = async () => {
    if (!edit.descricao?.trim()) { showToast('Descreva o lembrete', 'warning'); return; }
    if (edit.gatilho === 'km' && !edit.proximo_km) { showToast('Informe próximo km', 'warning'); return; }
    if (edit.gatilho === 'data' && !edit.proxima_data) { showToast('Informe próxima data', 'warning'); return; }

    const payload = {
      ...edit, guincho_id: guincho.id,
      proximo_km: edit.gatilho !== 'data' ? parseInt(edit.proximo_km) : null,
      proxima_data: edit.gatilho !== 'km' ? edit.proxima_data : null,
      antecedencia_km: parseInt(edit.antecedencia_km || 0),
      antecedencia_dias: parseInt(edit.antecedencia_dias || 0),
      intervalo_km: edit.recorrente && edit.gatilho !== 'data' ? parseInt(edit.intervalo_km || 0) || null : null,
      intervalo_dias: edit.recorrente && edit.gatilho !== 'km' ? parseInt(edit.intervalo_dias || 0) || null : null,
    };
    const result = edit.id
      ? await db.update('lembretes', edit.id, payload)
      : await db.insert('lembretes', payload);
    if (!result) return;
    setEdit(null); setTick(t => t + 1);
    onLembreteChange?.();
    showToast('Lembrete salvo', 'success');
  };

  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);
    onLembreteChange?.();
    showToast(item.recorrente ? 'Concluído (próximo lembrete criado)' : 'Concluído', 'success');
  };

  const excluir = async () => {
    if (!confirm('Excluir este lembrete?')) return;
    const ok = await db.remove('lembretes', edit.id);
    if (!ok) return;
    setEdit(null); setTick(t => t + 1);
    onLembreteChange?.();
  };

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 12 }}>
        <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 10, color: '#64748B', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Ativos</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#10B981', marginTop: 4 }}>{metricas.ativos}</div>
        </div>
        <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 10, color: '#64748B', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Próximos</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#F59E0B', marginTop: 4 }}>{metricas.proximos}</div>
        </div>
        <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 10, color: '#64748B', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Vencidos</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#EF4444', marginTop: 4 }}>{metricas.vencidos}</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {itemsComStatus.length === 0 ? (
          <div style={{ color: '#94A3B8', textAlign: 'center', padding: 24, background: '#fff', borderRadius: 10 }}>
            Nenhum lembrete ativo. Clique no + pra criar.
          </div>
        ) : itemsComStatus.map(x => {
          const c = CORES_LEMBRETE[x.st.estado];
          return (
            <div key={x.id} style={{
              background: c.bg, border: '1px solid ' + c.border, borderRadius: 10, padding: 12,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
            }}>
              <div style={{ flex: 1, cursor: 'pointer' }} onClick={() => { const { st, ...rest } = x; setEdit(rest); }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: c.text }}>
                  {c.icon} {x.descricao}
                </div>
                <div style={{ fontSize: 11, color: c.text, marginTop: 4, 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>

      <FabAdicionar onClick={novo} />

      {edit && (
        <Modal open={true} onClose={() => setEdit(null)}
               title={edit.id ? 'Editar lembrete' : 'Novo lembrete'} width={500}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Input label="Descrição" placeholder="Ex: Troca de óleo" value={edit.descricao || ''}
                   onChange={e => setEdit({ ...edit, descricao: e.target.value })} />

            <Select label="Gatilho" value={edit.gatilho}
                    onChange={e => setEdit({ ...edit, gatilho: e.target.value })}
                    options={[
                      { value: 'km', label: 'Por km' },
                      { value: 'data', label: 'Por data' },
                      { value: 'ambos', label: 'Por km ou data (o que vier primeiro)' },
                    ]} />

            {edit.gatilho !== 'data' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Input label="Próximo km" type="number" value={edit.proximo_km || ''}
                       onChange={e => setEdit({ ...edit, proximo_km: e.target.value })} />
                <Input label="Avisar com antecedência (km)" type="number" value={edit.antecedencia_km}
                       onChange={e => setEdit({ ...edit, antecedencia_km: e.target.value })} />
              </div>
            )}

            {edit.gatilho !== 'km' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Input label="Próxima data" type="date" value={edit.proxima_data || ''}
                       onChange={e => setEdit({ ...edit, proxima_data: e.target.value })} />
                <Input label="Avisar com antecedência (dias)" type="number" value={edit.antecedencia_dias}
                       onChange={e => setEdit({ ...edit, antecedencia_dias: e.target.value })} />
              </div>
            )}

            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
              <input type="checkbox" checked={!!edit.recorrente}
                     onChange={e => setEdit({ ...edit, recorrente: e.target.checked })} />
              Recorrente (ao concluir, gera o próximo automaticamente)
            </label>

            {edit.recorrente && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {edit.gatilho !== 'data' && (
                  <Input label="Intervalo (km)" type="number" value={edit.intervalo_km || ''}
                         onChange={e => setEdit({ ...edit, intervalo_km: e.target.value })} />
                )}
                {edit.gatilho !== 'km' && (
                  <Input label="Intervalo (dias)" type="number" value={edit.intervalo_dias || ''}
                         onChange={e => setEdit({ ...edit, intervalo_dias: e.target.value })} />
                )}
              </div>
            )}

            <div style={{ display: 'flex', gap: 10, justifyContent: 'space-between',
                          paddingTop: 8, borderTop: '1px solid #F1F5F9' }}>
              {edit.id ? <Btn variant="danger" onClick={excluir}>Excluir</Btn> : <div />}
              <div style={{ display: 'flex', gap: 10 }}>
                <Btn variant="secondary" onClick={() => setEdit(null)}>Cancelar</Btn>
                <Btn variant="primary" icon="check" onClick={salvar}>Salvar</Btn>
              </div>
            </div>
          </div>
        </Modal>
      )}
    </>
  );
};

// Expor CORES_LEMBRETE no window pra reuso na tela consolidada (Task 18)
window.CORES_LEMBRETE = CORES_LEMBRETE;

Object.assign(window, { TabLembrete });