encoach_frontend_new_v2/src/pages/RecordPage.tsx

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Loader2, Download } from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";
import AiReportNarrative from "@/components/ai/AiReportNarrative";
import { reportsService, RecordRow } from "@/services/reports.service";

type Period = "all" | "day" | "week" | "month";

export default function RecordPage() {
  const [entityId, setEntityId] = useState("all");
  const [userId, setUserId] = useState("all");
  const [period, setPeriod] = useState<Period>("all");

  const { data: filters } = useQuery({
    queryKey: ["reports-filters"],
    queryFn: () => reportsService.filters(),
  });

  const { data, isLoading } = useQuery({
    queryKey: ["record", entityId, userId, period],
    queryFn: () =>
      reportsService.record({
        entity_id: entityId === "all" ? undefined : Number(entityId),
        user_id: userId === "all" ? undefined : Number(userId),
        period: period === "all" ? undefined : period,
        size: 100,
      }),
  });

  const records: RecordRow[] = data?.items ?? [];

  const exportCsv = () => {
    const header = [
      "Student",
      "Assignment",
      "Exam",
      "Date",
      "Score",
      "Duration",
      "Status",
    ];
    const lines = records.map((r) =>
      [
        r.student_name,
        r.assignment,
        r.exam_code || r.exam,
        r.date ?? "",
        r.score ?? "",
        r.duration,
        r.status_label,
      ]
        .map((v) => `"${String(v).replace(/"/g, '""')}"`)
        .join(","),
    );
    const blob = new Blob([[header.join(","), ...lines].join("\n")], {
      type: "text/csv",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `records-${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const statusVariant = (status: string) => {
    if (status === "completed" || status === "released" || status === "scored")
      return "default";
    if (status === "in_progress" || status === "scoring") return "secondary";
    return "outline";
  };

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Record</h1>
          <p className="text-muted-foreground">
            Browse assignment and exam attempt history.
            {data && (
              <span className="ml-2 text-xs">({data.total} attempts)</span>
            )}
          </p>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={exportCsv}
          disabled={!records.length}
        >
          <Download className="h-4 w-4 mr-1" /> Export CSV
        </Button>
      </div>

      <AiTipBanner context="record" variant="insight" />

      {records.length > 0 && (
        <AiReportNarrative report_type="record" data={{ records }} />
      )}

      <div className="flex flex-wrap gap-3 items-center">
        <Select value={entityId} onValueChange={setEntityId}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="All Entities" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Entities</SelectItem>
            {filters?.entities.map((e) => (
              <SelectItem key={e.id} value={String(e.id)}>
                {e.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={userId} onValueChange={setUserId}>
          <SelectTrigger className="w-[220px]">
            <SelectValue placeholder="All Users" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Users</SelectItem>
            {filters?.students.map((s) => (
              <SelectItem key={s.id} value={String(s.id)}>
                {s.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <div className="flex gap-1">
          {(["all", "day", "week", "month"] as Period[]).map((p) => (
            <Button
              key={p}
              variant={period === p ? "default" : "outline"}
              size="sm"
              onClick={() => setPeriod(p)}
            >
              {p === "all" ? "All" : p.charAt(0).toUpperCase() + p.slice(1)}
            </Button>
          ))}
        </div>
      </div>

      <Card className="border-0 shadow-sm">
        <CardContent className="p-0">
          {isLoading ? (
            <div className="flex items-center justify-center p-12 text-muted-foreground">
              <Loader2 className="h-5 w-5 animate-spin mr-2" /> Loading
              attempts...
            </div>
          ) : records.length === 0 ? (
            <div className="p-8 text-center text-muted-foreground">
              No attempts match these filters.
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Student</TableHead>
                  <TableHead>Assignment</TableHead>
                  <TableHead>Exam</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Score</TableHead>
                  <TableHead>Duration</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {records.map((r) => (
                  <TableRow key={r.id}>
                    <TableCell className="font-medium">
                      {r.student_name || "—"}
                    </TableCell>
                    <TableCell>{r.assignment || "—"}</TableCell>
                    <TableCell className="font-mono text-xs">
                      {r.exam_code}
                    </TableCell>
                    <TableCell>{r.date || "—"}</TableCell>
                    <TableCell>
                      {r.score ? r.score.toFixed(1) : "—"}
                    </TableCell>
                    <TableCell>{r.duration}</TableCell>
                    <TableCell>
                      <Badge variant={statusVariant(r.status)}>
                        {r.status_label}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
}