import Link from "next/link";
import { createClient } from "@/lib/supabase/server";
import { requireUser } from "@/lib/auth/session";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

interface CoachingRow {
  id: string;
  student_name: string;
  status: string;
  start_date: string | null;
  subject: { name: string } | null;
  level: { name: string } | null;
  faculty: { name: string } | null;
}

export default async function Page() {
  await requireUser();
  const supabase = await createClient();
  const { data } = await supabase
    .from("coaching_applications")
    .select(
      "*, subject:coaching_subjects(name), level:coaching_levels(name), faculty:coaching_faculty(name)",
    )
    .order("created_at", { ascending: false });

  const rows = (data as CoachingRow[] | null) ?? [];

  return (
    <div>
      <PageHeader
        title="Coaching Application"
        breadcrumb="Application / Coaching"
        action={
          <Button asChild>
            <Link href="/applications/coaching/new">Add</Link>
          </Button>
        }
      />

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">No</TableHead>
                <TableHead>Student</TableHead>
                <TableHead>Subject</TableHead>
                <TableHead>Level</TableHead>
                <TableHead>Faculty</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Start date</TableHead>
                <TableHead className="text-right">View</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={8}
                    className="text-center text-muted-foreground"
                  >
                    No coaching applications yet.
                  </TableCell>
                </TableRow>
              ) : (
                rows.map((r, i) => (
                  <TableRow key={r.id}>
                    <TableCell>{i + 1}</TableCell>
                    <TableCell className="font-medium">
                      {r.student_name}
                    </TableCell>
                    <TableCell>{r.subject?.name ?? "—"}</TableCell>
                    <TableCell>{r.level?.name ?? "—"}</TableCell>
                    <TableCell>{r.faculty?.name ?? "—"}</TableCell>
                    <TableCell>
                      <Badge variant="secondary">{r.status}</Badge>
                    </TableCell>
                    <TableCell>{r.start_date ?? "—"}</TableCell>
                    <TableCell className="text-right">
                      <Link
                        href={`/applications/coaching/${r.id}`}
                        className="text-brand-blue hover:underline"
                      >
                        View
                      </Link>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}