// Caririaçu Guincho — Tela de detalhe do guincho (7 abas)

const { useState: useStateGD, useEffect: useEffectGD, useMemo: useMemoGD } = React;

const TABS_GUINCHO = [
  { key: 'geral',         label: 'Geral' },
  { key: 'abastecimento', label: 'Abast.' },
  { key: 'despesa',       label: 'Despesa' },
  { key: 'receita',       label: 'Receita' },
  { key: 'servico',       label: 'Serviço' },
  { key: 'checklist',     label: 'Checklist' },
  { key: 'lembrete',      label: 'Lembrete' },
];

const GuinchoDetalheScreen = ({ guinchoId, onBack }) => {
  const [guincho, setGuincho] = useStateGD(null);
  const [tab, setTab] = useStateGD('geral');
  const [periodo, setPeriodo] = useStateGD(() => {
    const f = new Date(); const i = new Date(); i.setDate(i.getDate() - 180);
    return { inicio: i.toISOString().slice(0, 10), fim: f.toISOString().slice(0, 10) };
  });
  const [lembretesCount, setLembretesCount] = useStateGD(0);
  const [lembretesRefresh, setLembretesRefresh] = useStateGD(0);

  useEffectGD(() => {
    if (!guinchoId) return;
    db.one('frota', guinchoId).then(setGuincho);
  }, [guinchoId]);

  // contagem de lembretes amarelo+vermelho deste guincho
  useEffectGD(() => {
    if (!guincho) return;
    let alive = true;
    (async () => {
      const ls = await db.list('lembretes', { eq: { guincho_id: guincho.id, status: 'ativo' } });
      let n = 0;
      for (const l of ls) {
        const st = window.statusLembrete(l, guincho.km_atual);
        if (st.estado !== 'ativo') n++;
      }
      if (alive) setLembretesCount(n);
    })();
    return () => { alive = false; };
  }, [guincho, lembretesRefresh]);

  if (!guincho) return <div style={{ padding: 24, color: '#94A3B8' }}>Carregando…</div>;

  return (
    <div style={{ background: '#F8FAFC', minHeight: '100%' }}>
      {/* Header */}
      <div style={{
        background: 'linear-gradient(135deg,#0F172A 0%,#1E3A5F 60%,#0F4C75 100%)',
        color: '#fff', padding: '16px 20px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
          <button onClick={onBack} style={{
            background: 'rgba(255,255,255,.1)', border: 'none', borderRadius: 8,
            width: 32, height: 32, color: '#fff', cursor: 'pointer', fontSize: 14
          }}>←</button>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>
              {guincho.marca} {guincho.modelo} · {guincho.placa}
            </div>
            <div style={{ fontSize: 11, opacity: .7 }}>
              {guincho.code} · Motorista: {guincho.motorista_nome || '—'}
            </div>
          </div>
          <BadgeLembrete count={lembretesCount} onClick={() => setTab('lembrete')} size="lg" />
        </div>
        <div style={{ display: 'flex', gap: 16, fontSize: 11, opacity: .85 }}>
          <span>📍 {fmtKM(guincho.km_atual)}</span>
          <span style={{
            color: guincho.status === 'ativo' ? '#86EFAC' :
                   guincho.status === 'manutencao' ? '#FCD34D' : '#CBD5E1'
          }}>● {guincho.status}</span>
        </div>
      </div>

      {/* Tabs */}
      <div style={{
        background: '#fff', borderBottom: '1px solid #E2E8F0',
        display: 'flex', overflowX: 'auto', fontSize: 11, fontWeight: 600,
        color: '#64748B', textTransform: 'uppercase', letterSpacing: 0.5
      }}>
        {TABS_GUINCHO.map(t => (
          <div key={t.key} onClick={() => setTab(t.key)} style={{
            padding: '14px 16px', whiteSpace: 'nowrap', cursor: 'pointer',
            color: tab === t.key ? '#F59E0B' : '#64748B',
            borderBottom: tab === t.key ? '2px solid #F59E0B' : '2px solid transparent'
          }}>{t.label}</div>
        ))}
      </div>

      {/* Filtro de período */}
      <PeriodoPicker inicio={periodo.inicio} fim={periodo.fim} onChange={setPeriodo} />

      {/* Conteúdo da tab */}
      <div style={{ padding: '12px 16px 80px' }}>
        {tab === 'geral'         && <TabGeral guincho={guincho} periodo={periodo} />}
        {tab === 'abastecimento' && <TabAbastecimento guincho={guincho} periodo={periodo} />}
        {tab === 'despesa'       && <TabDespesa guincho={guincho} periodo={periodo} />}
        {tab === 'receita'       && <TabReceita guincho={guincho} periodo={periodo} />}
        {tab === 'servico'       && <TabServico guincho={guincho} periodo={periodo} />}
        {tab === 'checklist'     && <TabChecklist guincho={guincho} periodo={periodo} />}
        {tab === 'lembrete'      && <TabLembrete guincho={guincho} onLembreteChange={() => setLembretesRefresh(t => t + 1)} />}
      </div>
    </div>
  );
};

Object.assign(window, { GuinchoDetalheScreen, TABS_GUINCHO });