import { createClient } from "@/lib/supabase/server";
import { canDo } from "@/lib/auth/permissions";
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 { CommissionDialog } from "./commission-dialog";
import { CommissionStatusAction } from "./commission-status-action";

type CommissionRow = {
  id: string;
  amount: number;
  currency: string | null;
  status: string;
  received_date: string | null;
  institute: { name: string } | null;
  application: { applicant_name: string } | null;
};

function statusVariant(
  status: string,
): "default" | "secondary" | "destructive" | "outline" {
  if (status === "received") return "default";
  if (status === "invoiced") return "secondary";
  return "outline";
}

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

  const [{ data: commissionsData }, { data: institutesData }, { data: appsData }] =
    await Promise.all([
      supabase
        .from("university_commissions")
        .select(
          "*, institute:institutes(name), application:student_applications(applicant_name)",
        )
        .order("created_at", { ascending: false }),
      supabase.from("institutes").select("id, name").order("name"),
      supabase
        .from("student_applications")
        .select("id, applicant_name")
        .order("created_at", { ascending: false })
        .limit(500),
    ]);

  const commissions = (commissionsData as CommissionRow[]) ?? [];
  const institutes = (institutesData as { id: string; name: string }[]) ?? [];
  const applications =
    (appsData as { id: string; applicant_name: string }[]) ?? [];

  const canManage = await canDo("finance", "update");
  const total = commissions.reduce((sum, c) => sum + Number(c.amount ?? 0), 0);

  return (
    <div>
      <PageHeader
        title="University Commission"
        breadcrumb="Home / Commission"
        action={
          canManage ? (
            <CommissionDialog
              institutes={institutes}
              applications={applications}
            />
          ) : undefined
        }
      />
      <Card className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>No</TableHead>
              <TableHead>Institute</TableHead>
              <TableHead>Applicant</TableHead>
              <TableHead>Amount</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Received Date</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {commissions.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={7}
                  className="py-10 text-center text-muted-foreground"
                >
                  No commissions recorded yet.
                </TableCell>
              </TableRow>
            ) : (
              <>
                {commissions.map((c, i) => (
                  <TableRow key={c.id}>
                    <TableCell>{i + 1}</TableCell>
                    <TableCell className="font-medium">
                      {c.institute?.name ?? "—"}
                    </TableCell>
                    <TableCell>{c.application?.applicant_name ?? "—"}</TableCell>
                    <TableCell className="font-medium">
                      {Number(c.amount ?? 0).toLocaleString()} {c.currency ?? "GBP"}
                    </TableCell>
                    <TableCell>
                      <Badge variant={statusVariant(c.status)}>{c.status}</Badge>
                    </TableCell>
                    <TableCell>{c.received_date ?? "—"}</TableCell>
                    <TableCell>
                      {canManage ? (
                        <CommissionStatusAction id={c.id} status={c.status} />
                      ) : (
                        "—"
                      )}
                    </TableCell>
                  </TableRow>
                ))}
                <TableRow>
                  <TableCell colSpan={3} className="text-right font-medium">
                    Total
                  </TableCell>
                  <TableCell className="font-semibold text-brand-blue">
                    {total.toLocaleString()}
                  </TableCell>
                  <TableCell colSpan={3} />
                </TableRow>
              </>
            )}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}