import Link from "next/link";
import { notFound } from "next/navigation";
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,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { CoachingAttendance } from "@/lib/types";

interface CoachingDetail {
  id: string;
  student_name: string;
  email: string | null;
  phone: string | null;
  status: string;
  fees: number | null;
  start_date: string | null;
  subject: { name: string } | null;
  level: { name: string } | null;
  faculty: { name: string } | null;
  register_for: { name: string } | null;
  lead: { full_name: string } | null;
}

function Field({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="space-y-1">
      <p className="text-xs uppercase tracking-wide text-muted-foreground">
        {label}
      </p>
      <p className="text-sm">{value ?? "—"}</p>
    </div>
  );
}

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  await requireUser();
  const { id } = await params;
  const supabase = await createClient();

  const { data } = await supabase
    .from("coaching_applications")
    .select(
      "*, subject:coaching_subjects(name), level:coaching_levels(name), faculty:coaching_faculty(name), register_for:register_for(name), lead:leads(full_name)",
    )
    .eq("id", id)
    .maybeSingle();

  if (!data) notFound();
  const app = data as CoachingDetail;

  const { data: attendanceData } = await supabase
    .from("coaching_attendance")
    .select("*")
    .eq("coaching_application_id", id)
    .order("date", { ascending: false });

  const attendance = (attendanceData as CoachingAttendance[] | null) ?? [];

  return (
    <div>
      <PageHeader
        title={app.student_name}
        breadcrumb="Application / Coaching / Detail"
        action={
          <div className="flex gap-2">
            <Button asChild variant="outline">
              <Link href={`/applications/attendance?application=${app.id}`}>
                Attendance
              </Link>
            </Button>
            <Button asChild>
              <Link href={`/applications/coaching/${app.id}/edit`}>Edit</Link>
            </Button>
          </div>
        }
      />

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Student</CardTitle>
          </CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="Student name" value={app.student_name} />
            <Field label="Email" value={app.email} />
            <Field label="Phone" value={app.phone} />
            <Field label="Linked lead" value={app.lead?.full_name} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Coaching</CardTitle>
          </CardHeader>
          <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <Field label="Subject" value={app.subject?.name} />
            <Field label="Level" value={app.level?.name} />
            <Field label="Faculty" value={app.faculty?.name} />
            <Field label="Register for" value={app.register_for?.name} />
            <Field
              label="Status"
              value={<Badge variant="secondary">{app.status}</Badge>}
            />
            <Field label="Fees" value={app.fees ?? "—"} />
            <Field label="Start date" value={app.start_date} />
          </CardContent>
        </Card>
      </div>

      <Card className="mt-6">
        <CardHeader>
          <CardTitle>Attendance history</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Date</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {attendance.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={2}
                    className="text-center text-muted-foreground"
                  >
                    No attendance recorded yet.
                  </TableCell>
                </TableRow>
              ) : (
                attendance.map((a) => (
                  <TableRow key={a.id}>
                    <TableCell>{a.date}</TableCell>
                    <TableCell>
                      <Badge
                        variant={a.status === "present" ? "default" : "destructive"}
                      >
                        {a.status}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}