"use client";

import { useEffect, useMemo, useState } from "react";

import { BarChart3 } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { visibleFinanceFor, visibleRequestsFor, visibleStudentsFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

export default function ReportsPage() {
  const [user, setUser] = useState<AuthUser | null>(null);

  useEffect(() => {
    setUser(getAuthUser());
  }, []);

  const students = useMemo(() => visibleStudentsFor(user), [user]);
  const finance = useMemo(() => visibleFinanceFor(user), [user]);
  const requests = useMemo(() => visibleRequestsFor(user), [user]);
  const cards = [
    ["Active students", students.filter((student) => student.status === "Active").length],
    ["Pending enrollment", students.filter((student) => student.status.includes("Pending")).length],
    ["Open requests", requests.filter((request) => !["Completed", "Cancelled"].includes(request.status)).length],
    [
      "Overdue balance",
      `$${finance
        .filter((record) => record.status === "Overdue")
        .reduce((sum, record) => sum + record.balanceDue, 0)
        .toLocaleString()}`,
    ],
  ];

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h1 className="font-semibold text-xl">Reports</h1>
        <p className="text-muted-foreground text-sm">
          POC reporting surface for enrollment, compliance, finance, and task load.
        </p>
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {cards.map(([label, value]) => (
          <Card key={label}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="font-medium text-sm">{label}</CardTitle>
              <BarChart3 className="size-4 text-muted-foreground" />
            </CardHeader>
            <CardContent className="font-bold text-2xl">{value}</CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}