"use client";

import { useEffect, useState } from "react";

import { FileText, RotateCcw, WalletCards } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { commissions, type FinanceRecord, getStaffName, getStudentName, visibleFinanceFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

function money(value: number) {
  return `$${value.toLocaleString()}`;
}

export default function FinancePage() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [rows, setRows] = useState<FinanceRecord[]>([]);

  useEffect(() => {
    const current = getAuthUser();
    setUser(current);
    setRows(visibleFinanceFor(current));
  }, []);

  const recordPayment = (id: string) => {
    setRows((prev) =>
      prev.map((row) => {
        if (row.id !== id) return row;
        const amountPaid = row.tuitionAmount;
        return { ...row, amountPaid, balanceDue: 0, status: "Paid" };
      }),
    );
  };

  const totalDue = rows.reduce((sum, row) => sum + row.balanceDue, 0);
  const visibleStudentIds = new Set(rows.map((row) => row.studentId));
  const visibleCommissions = commissions.filter(
    (row) => visibleStudentIds.has(row.studentId) && (user?.role !== "agent" || row.agentId === user.id),
  );

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h1 className="font-semibold text-xl">Finance</h1>
        <p className="text-muted-foreground text-sm">
          Tuition, payment status, invoices, refunds, and agent commissions.
        </p>
      </div>
      <div className="grid gap-3 sm:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Balance Due</CardTitle>
          </CardHeader>
          <CardContent className="font-bold text-2xl">{money(totalDue)}</CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Paid Tuition</CardTitle>
          </CardHeader>
          <CardContent className="font-bold text-2xl">
            {money(rows.reduce((sum, row) => sum + row.amountPaid, 0))}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Commissions</CardTitle>
          </CardHeader>
          <CardContent className="font-bold text-2xl">
            {money(visibleCommissions.reduce((sum, row) => sum + row.paidTuition * (row.commissionPercent / 100), 0))}
          </CardContent>
        </Card>
      </div>
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Student Finance Records</CardTitle>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Student</TableHead>
                <TableHead>Tuition</TableHead>
                <TableHead>Paid</TableHead>
                <TableHead>Balance</TableHead>
                <TableHead>Due</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.id}>
                  <TableCell className="font-medium">{getStudentName(row.studentId)}</TableCell>
                  <TableCell>{money(row.tuitionAmount)}</TableCell>
                  <TableCell>{money(row.amountPaid)}</TableCell>
                  <TableCell>{money(row.balanceDue)}</TableCell>
                  <TableCell>{row.dueDate}</TableCell>
                  <TableCell>
                    <Badge variant={row.status === "Overdue" ? "destructive" : "outline"}>{row.status}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="icon" onClick={() => recordPayment(row.id)}>
                      <WalletCards className="size-4" />
                    </Button>
                    <Button variant="ghost" size="icon">
                      <FileText className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() =>
                        setRows((prev) =>
                          prev.map((item) => (item.id === row.id ? { ...item, status: "Refunded" } : item)),
                        )
                      }
                    >
                      <RotateCcw className="size-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Agent Commissions</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-2 md:grid-cols-2">
          {visibleCommissions.map((row) => (
            <div key={row.id} className="rounded-md border p-3 text-sm">
              <p className="font-medium">
                {getStaffName(row.agentId)} · {getStudentName(row.studentId)}
              </p>
              <p className="text-muted-foreground">
                {money(row.paidTuition)} × {row.commissionPercent}% ={" "}
                {money(row.paidTuition * (row.commissionPercent / 100))}
              </p>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}