Analytics Dashboard

import { createClient } from "@/lib/supabase-server";

export default async function DashboardPage() {
    const supabase = await createClient();

    // Fetch incident counts
    const { count: totalIncidents } = await supabase
        .from("incidents")
        .select("*", { count: "exact", head: true });

    const { count: pendingCount } = await supabase
        .from("incidents")
        .select("*", { count: "exact", head: true })
        .eq("status", "pendiente");

    const { count: inProgressCount } = await supabase
        .from("incidents")
        .select("*", { count: "exact", head: true })
        .eq("status", "en_progreso");

    const { count: resolvedCount } = await supabase
        .from("incidents")
        .select("*", { count: "exact", head: true })
        .eq("status", "resuelta");

    const cardData = {
        total: totalIncidents || 0,
        pending: pendingCount || 0,
        inProgress: inProgressCount || 0,
        resolved: resolvedCount || 0,
    };

    return (
        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
            <SectionCards data={cardData} />
            {/* More components */}
        </div>
    );
}

// Fetch incident trend data (grouped by day, last 90 days)
const ninetyDaysAgo = new Date();
ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90);

const { data: trendRaw } = await supabase
    .from("incidents")
    .select("created_at, status")
    .gte("created_at", ninetyDaysAgo.toISOString())
    .order("created_at", { ascending: true });

// Group by date
const trendMap = new Map<string, { created: number; resolved: number }>();
(trendRaw || []).forEach((inc: any) => {
    const date = inc.created_at?.split("T")[0];
    if (!date) return;
    if (!trendMap.has(date)) {
        trendMap.set(date, { created: 0, resolved: 0 });
    }
    const entry = trendMap.get(date)!;
    entry.created++;
    if (inc.status === "resuelta") {
        entry.resolved++;
    }
});

const chartData = Array.from(trendMap.entries()).map(([date, val]) => ({
    date,
    created: val.created,
    resolved: val.resolved,
}));

import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

export function ChartAreaInteractive({ data }) {
  return (
    <ChartContainer config={chartConfig}>
      <AreaChart data={data}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="date"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          tickFormatter={(value) => {
            const date = new Date(value);
            return date.toLocaleDateString("en-US", {
              month: "short",
              day: "numeric",
            });
          }}
        />
        <YAxis tickLine={false} axisLine={false} />
        <ChartTooltip
          cursor={false}
          content={<ChartTooltipContent indicator="dot" />}
        />
        <Area
          dataKey="created"
          type="monotone"
          fill="hsl(var(--chart-1))"
          fillOpacity={0.4}
          stroke="hsl(var(--chart-1))"
        />
        <Area
          dataKey="resolved"
          type="monotone"
          fill="hsl(var(--chart-2))"
          fillOpacity={0.4}
          stroke="hsl(var(--chart-2))"
        />
      </AreaChart>
    </ChartContainer>
  );
}

const { data: incidents } = await supabase
    .from("incidents")
    .select(`
        id,
        title,
        description,
        status,
        priority,
        created_at,
        updated_at,
        area:areas(name),
        room:rooms(room_code, floor),
        assignee:profiles!incidents_assigned_to_fkey(full_name, email)
    `)
    .order("created_at", { ascending: false });

// Transform incidents data for the table
const tableData = (incidents || []).map((incident: any, index: number) => ({
    id: index + 1,
    uuid: incident.id,
    title: incident.title || "Sin título",
    status: incident.status || "pendiente",
    priority: incident.priority || "media",
    area: incident.area?.name || "Sin área",
    room: incident.room?.room_code || "Sin habitación",
    assigned_to: incident.assignee?.full_name || "Sin asignar",
    created_at: incident.created_at || "",
}));

return <DataTable data={tableData} />;