/* B28 HospeX — Relatórios e dashboards */
function ViewReports({ hotelId }) {
  const [dash, setDash] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let canceled = false;
    async function load() {
      try {
        const qs = hotelId ? `?hotel_id=${encodeURIComponent(hotelId)}` : '';
        const res = await fetch(`/api/dashboard${qs}`);
        const json = await res.json();
        if (!canceled) setDash(json?.ok ? json : null);
      } catch (e) {
        if (!canceled) setDash(null);
      } finally {
        if (!canceled) setLoading(false);
      }
    }
    load();
    return () => {
      canceled = true;
    };
  }, [hotelId]);

  if (loading) return (
    <div style={{ display: 'grid', placeItems: 'center', height: '40vh' }}>
      <Icon name="progress_activity" size={40} className="hx-spin" style={{ color: 'var(--primary)' }} />
    </div>
  );

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginBottom: 22 }}>
        <Stat label="NPS" value={dash?.nps?.current ?? '—'} icon="sentiment_satisfied" accent="var(--primary)" />
        <Stat label="Reputação" value={dash?.reputation?.avg10 ?? '—'} unit="/10" icon="star" accent="#caa53a" />
        <Stat label="Casos abertos" value={dash?.cases_open ?? 0} icon="flag" accent="var(--error)" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <Card pad={26}>
          <SectionHead eyebrow="Dashboard" title="Resumo" right={<Chip bg="var(--surface-container-high)" color="var(--on-surface-variant)">{dash ? `${dash.period_days} dias` : '—'}</Chip>} />
          <div style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--on-surface-variant)' }}>
            Este painel é alimentado por dados reais do banco (pesquisas, avaliações e casos). Para gerar relatórios avançados (PDF/CSV) e agendamentos, conecte o BI ou use a API.
          </div>
        </Card>

        <Card pad={26}>
          <SectionHead eyebrow="Exportação" title="API" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ padding: 14, borderRadius: 12, background: 'var(--surface-container-low)' }}>
              <div style={{ fontSize: 12, fontWeight: 800, marginBottom: 6 }}>Resumo</div>
              <div style={{ fontSize: 12.5, color: 'var(--on-surface-variant)' }}><code>/api/dashboard</code></div>
            </div>
            <div style={{ padding: 14, borderRadius: 12, background: 'var(--surface-container-low)' }}>
              <div style={{ fontSize: 12, fontWeight: 800, marginBottom: 6 }}>Avaliações</div>
              <div style={{ fontSize: 12.5, color: 'var(--on-surface-variant)' }}><code>/api/reviews</code></div>
            </div>
            <div style={{ padding: 14, borderRadius: 12, background: 'var(--surface-container-low)' }}>
              <div style={{ fontSize: 12, fontWeight: 800, marginBottom: 6 }}>Casos</div>
              <div style={{ fontSize: 12.5, color: 'var(--on-surface-variant)' }}><code>/api/cases</code></div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

window.ViewReports = ViewReports;