import { useAppBridge } from "@shopify/app-bridge-react";

export default function IAAnalyticsDashboard() {
  return (
    <s-page heading="IA Analytics Pro" inlineSize="base">

      {"// Alertas IA — s-banner con tone warning/info"}
      <s-banner heading="Stock bajo detectado" tone="warning" dismissible>
        3 productos con stock crítico — revisa inventario.
      </s-banner>

      {"// Métricas — s-section + s-grid + s-box"}
      <s-section heading="Resumen de hoy">
        <s-grid gridTemplateColumns="1fr 1fr 1fr 1fr" gap="base">
          <s-box padding="base" background="subdued" borderRadius="base">
            <s-heading>€ 1.284</s-heading>
            <s-badge tone="success">+12% vs ayer</s-badge>
          </s-box>
          {"// ... más métricas"}
        </s-grid>
      </s-section>

      {"// Tabla — s-table + s-table-header-row + s-table-body"}
      <s-section heading="Top productos del día">
        <s-table variant="auto">
          <s-table-header-row>
            <s-table-header listSlot="primary">Producto</s-table-header>
            <s-table-header listSlot="labeled">Unidades</s-table-header>
            <s-table-header listSlot="labeled" format="currency">Revenue</s-table-header>
          </s-table-header-row>
        </s-table>
      </s-section>

      {"// Acciones — s-button-group"}
      <s-button-group gap="base">
        <s-button variant="primary">Ver informe completo</s-button>
        <s-button variant="secondary">Configurar IA</s-button>
      </s-button-group>

    </s-page>
  );
}