import { Card, CardContent } from "@/components/ui/card";
import {
  AlertsPanel,
  DashboardIntro,
  KPIGrid,
  TerritorialInsights,
  TerritorySummaryTable,
} from "@/components/dashboard/dashboard-panels";
import { getDashboardAnalytics } from "@/server/queries/dashboard";

export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  const analytics = await getDashboardAnalytics();

  return (
    <div className="space-y-8">
      <DashboardIntro stats={analytics.stats} vulnerability={analytics.vulnerability} />

      <KPIGrid analysis={analytics} />

      <section className="grid gap-6 xl:grid-cols-[1.35fr_0.9fr]">
        <TerritorialInsights analysis={analytics} />
        <AlertsPanel items={analytics.alerts} />
      </section>

      <TerritorySummaryTable rows={analytics.territorialRows} />

      <Card className="border-border shadow-sm">
        <CardContent className="grid gap-3 p-6 lg:grid-cols-3">
          <MiniFootnote title="Preparado para GIS" text="Estructura abierta para incorporar capas, georreferencias y mapas territoriales." />
          <MiniFootnote title="Filtros avanzados" text="Base lista para extender por manzana, resolución, servicios y vulnerabilidad." />
          <MiniFootnote title="Exportación y reportes" text="El dashboard puede alimentar Excel, PDF y paneles ejecutivos sin reescritura mayor." />
        </CardContent>
      </Card>
    </div>
  );
}

function MiniFootnote({ title, text }: { title: string; text: string }) {
  return (
    <div className="rounded-2xl border border-border bg-muted p-4">
      <p className="text-sm font-semibold text-foreground">{title}</p>
      <p className="mt-1 text-sm leading-6 text-muted-foreground">{text}</p>
    </div>
  );
}