"use client";

import { useEffect, useMemo, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { commissions, getStudentName, staffUsers, visibleStudentsFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

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

  useEffect(() => {
    setUser(getAuthUser());
  }, []);

  const visibleStudents = useMemo(() => visibleStudentsFor(user), [user]);
  const agents = staffUsers.filter(
    (staff) => staff.role === "agent" && (user?.role === "owner" || staff.schoolId === user?.schoolId),
  );

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h1 className="font-semibold text-xl">Agents</h1>
        <p className="text-muted-foreground text-sm">
          Agent profiles, assigned students, commission terms, and payout tracking.
        </p>
      </div>
      <div className="grid gap-3 lg:grid-cols-3">
        {agents.map((agent) => {
          const assigned = visibleStudents.filter((student) => student.assignedAgentId === agent.id);
          const agentCommissions = commissions.filter((row) => row.agentId === agent.id);
          const payout = agentCommissions.reduce(
            (sum, row) => sum + row.paidTuition * (row.commissionPercent / 100),
            0,
          );
          return (
            <Card key={agent.id}>
              <CardHeader>
                <CardTitle className="flex items-center justify-between text-base">
                  {agent.name}
                  <Badge variant="outline">{agent.commissionPercent}%</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <p className="text-muted-foreground">{agent.email}</p>
                <p className="font-medium">${payout.toLocaleString()} accrued commission</p>
                <div className="space-y-1">
                  {assigned.map((student) => (
                    <div key={student.id} className="rounded-md bg-muted/40 px-2 py-1">
                      {getStudentName(student.id)} · {student.status}
                    </div>
                  ))}
                  {assigned.length === 0 && <p className="text-muted-foreground">No visible students assigned.</p>}
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}