"use client";

import { useEffect, useState } from "react";

import { useCurrentUser } from "@/hooks/use-current-user";
import { getStats } from "@/lib/api";
import type { StatsResponse } from "@/types/stats";
import { SiteHeader } from "@/components/site-header";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export default function DashboardPage() {
  const { hasPermission } = useCurrentUser();
  const [stats, setStats] = useState<StatsResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const canReadStats = hasPermission("stats:read");

  useEffect(() => {
    if (!canReadStats) return;
    getStats()
      .then(setStats)
      .catch((e) => setError(e.message));
  }, [canReadStats]);

  return (
    <>
      <SiteHeader title="Dashboard" />
      <div className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
        {error && <p className="text-destructive text-sm">{error}</p>}
        {canReadStats && (
          <>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <Card>
                <CardHeader className={"text-center sm:text-left"}>
                  <CardDescription>Total Records</CardDescription>
                  <CardTitle className="text-xl sm:text-2xl font-semibold tabular-nums">
                    {stats ? stats.total_records.toLocaleString() : "--"}
                  </CardTitle>
                </CardHeader>
              </Card>
              <Card>
                <CardHeader className={"text-center sm:text-left"}>
                  <CardDescription>Collections</CardDescription>
                  <CardTitle className="text-xl sm:text-2xl font-semibold tabular-nums">
                    {stats ? stats.collections.length : "--"}
                  </CardTitle>
                </CardHeader>
              </Card>
            </div>

            {stats && stats.collections.length > 0 && (
              <div className="rounded-lg border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Collection</TableHead>
                      <TableHead className="text-right">Records</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {stats.collections.map((col) => (
                      <TableRow key={col.collection}>
                        <TableCell className="font-mono text-sm">
                          {col.collection}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {col.count.toLocaleString()}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </>
        )}
      </div>
    </>
  );
}