import { createClient } from "@/lib/supabase/server";
import { PageHeader } from "@/components/layout/page-header";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { VisaClient } from "./visa-client";

interface VisaRow {
  id: string;
  status_id: string | null;
  applied_date: string | null;
  interview_date: string | null;
  decision: string | null;
  decision_date: string | null;
  notes: string | null;
  status: { name: string } | null;
}

interface AppRow {
  id: string;
  applicant_name: string;
  status: string | null;
  institute: { name: string } | null;
  visa: VisaRow[] | VisaRow | null;
}

function firstVisa(visa: AppRow["visa"]): VisaRow | null {
  if (!visa) return null;
  return Array.isArray(visa) ? (visa[0] ?? null) : visa;
}

export default async function VisaTrackingPage() {
  const supabase = await createClient();

  const [appsRes, statusesRes] = await Promise.all([
    supabase
      .from("student_applications")
      .select(
        "id, applicant_name, status, institute:institutes(name), visa:visa_tracking(*, status:visa_statuses(name))",
      )
      .order("created_at", { ascending: false }),
    supabase.from("visa_statuses").select("id, name").order("name"),
  ]);

  const apps = (appsRes.data as unknown as AppRow[] | null) ?? [];
  const statuses = (statusesRes.data as { id: string; name: string }[]) ?? [];

  return (
    <div>
      <PageHeader title="Visa Tracking" breadcrumb="Application / Visa" />
      <Card className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">No</TableHead>
              <TableHead>Applicant</TableHead>
              <TableHead>Institute</TableHead>
              <TableHead>App Status</TableHead>
              <TableHead>Visa Status</TableHead>
              <TableHead>Decision</TableHead>
              <TableHead className="text-right">Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {apps.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={7}
                  className="py-10 text-center text-muted-foreground"
                >
                  No student applications yet.
                </TableCell>
              </TableRow>
            ) : (
              apps.map((app, i) => {
                const visa = firstVisa(app.visa);
                return (
                  <TableRow key={app.id}>
                    <TableCell>{i + 1}</TableCell>
                    <TableCell className="font-medium">
                      {app.applicant_name}
                    </TableCell>
                    <TableCell>{app.institute?.name ?? "—"}</TableCell>
                    <TableCell>{app.status ?? "—"}</TableCell>
                    <TableCell>
                      {visa?.status?.name ? (
                        <Badge variant="secondary">{visa.status.name}</Badge>
                      ) : (
                        <Badge variant="outline">Not tracked</Badge>
                      )}
                    </TableCell>
                    <TableCell>{visa?.decision ?? "—"}</TableCell>
                    <TableCell className="text-right">
                      <VisaClient
                        applicationId={app.id}
                        statuses={statuses}
                        current={visa}
                      />
                    </TableCell>
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}