"use client";

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

import Link from "next/link";

import { Banknote, Bell, CalendarDays, CheckCircle2, FileWarning, GraduationCap, School, Users } 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 {
  demoScenarios,
  financeRecords,
  getCampusName,
  getGeneratedAlerts,
  getRoleNextActions,
  getSchoolName,
  getStudentName,
  students,
  visibleFinanceFor,
  visibleNotificationsFor,
  visibleRequestsFor,
  visibleSchoolsFor,
  visibleSessionsFor,
  visibleStudentsFor,
} from "@/data/education";
import { type AuthUser, getAuthUser, ROLE_LABELS } from "@/lib/auth";

function money(value: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(value);
}

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

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

  const visibleStudents = useMemo(() => visibleStudentsFor(user), [user]);
  const visibleFinance = useMemo(() => visibleFinanceFor(user), [user]);
  const visibleRequests = useMemo(() => visibleRequestsFor(user), [user]);
  const visibleSessions = useMemo(() => visibleSessionsFor(user), [user]);
  const visibleSchools = useMemo(() => visibleSchoolsFor(user), [user]);
  const visibleNotifications = useMemo(() => visibleNotificationsFor(user), [user]);
  const generatedAlerts = useMemo(() => getGeneratedAlerts(user), [user]);
  const nextActions = useMemo(() => getRoleNextActions(user), [user]);

  const openRequests = visibleRequests.filter((request) => !["Completed", "Cancelled"].includes(request.status));
  const overduePayments = visibleFinance.filter((record) => record.status === "Overdue");
  const revenue =
    user?.role === "owner"
      ? financeRecords.reduce((sum, record) => sum + record.amountPaid, 0)
      : visibleFinance.reduce((sum, record) => sum + record.amountPaid, 0);

  const kpis = [
    {
      label: user?.role === "owner" ? "Schools" : "Students",
      value: user?.role === "owner" ? visibleSchools.length : visibleStudents.length,
      icon: user?.role === "owner" ? School : GraduationCap,
      helper:
        user?.role === "owner"
          ? `${students.length} total students`
          : `${visibleStudents.filter((item) => item.status === "Active").length} active`,
    },
    {
      label: "Open Requests",
      value: openRequests.length,
      icon: FileWarning,
      helper: `${openRequests.filter((item) => item.priority === "Urgent" || item.priority === "High").length} high priority`,
    },
    {
      label: "Overdue Payments",
      value: overduePayments.length,
      icon: Banknote,
      helper: money(overduePayments.reduce((sum, record) => sum + record.balanceDue, 0)),
    },
    {
      label: user?.role === "teacher" ? "Assigned Classes" : "Revenue",
      value: user?.role === "teacher" ? visibleSessions.length : money(revenue),
      icon: user?.role === "teacher" ? Users : Banknote,
      helper: user?.role === "teacher" ? "Current sessions" : "Paid tuition",
    },
  ];

  const statuses = Array.from(new Set(visibleStudents.map((student) => student.status))).map((status) => ({
    status,
    count: visibleStudents.filter((student) => student.status === status).length,
  }));

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="font-bold text-2xl">Dashboard</h1>
          <p className="mt-0.5 text-muted-foreground text-sm">
            {user
              ? `${ROLE_LABELS[user.role]} view for ${getSchoolName(user.schoolId)}`
              : "Loading role-aware dashboard..."}
          </p>
        </div>
        <Button asChild size="sm">
          <Link href="/dashboard/students">
            <GraduationCap className="size-4" />
            Open students
          </Link>
        </Button>
      </div>

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {kpis.map(({ label, value, icon: Icon, helper }) => (
          <Card key={label}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="font-medium text-sm">{label}</CardTitle>
              <Icon className="size-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="font-bold text-2xl">{value}</div>
              <p className="text-muted-foreground text-xs">{helper}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <CheckCircle2 className="size-4" />
            Client Demo Flow
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-3 lg:grid-cols-6">
            {[
              "Agent creates student",
              "Admissions review",
              "Finance payment",
              "DSO I-20",
              "Active enrollment",
              "Class attendance",
            ].map((step, index) => (
              <div key={step} className="rounded-md border bg-muted/20 p-3">
                <Badge variant="outline">Step {index + 1}</Badge>
                <p className="mt-2 font-medium text-sm">{step}</p>
              </div>
            ))}
          </div>
          <div className="mt-4 grid gap-2 md:grid-cols-3">
            {demoScenarios.slice(0, 6).map((scenario) => (
              <Link
                key={scenario.id}
                href={scenario.route}
                className="rounded-md border p-3 transition-colors hover:bg-muted/40"
              >
                <p className="font-medium text-sm">{scenario.title}</p>
                <p className="mt-1 text-muted-foreground text-xs">{scenario.description}</p>
              </Link>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Next Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {nextActions.slice(0, 5).map((action) => (
              <div key={action.id} className="flex flex-wrap items-center justify-between gap-2 rounded-md border p-3">
                <div>
                  <p className="font-medium text-sm">{action.title}</p>
                  <p className="text-muted-foreground text-xs">
                    {getStudentName(action.studentId ?? "")} · due {action.deadline}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant={action.severity === "Major" ? "destructive" : "outline"}>{action.severity}</Badge>
                  <Badge>{action.alertType}</Badge>
                </div>
              </div>
            ))}
            {nextActions.length === 0 && (
              <p className="text-muted-foreground text-sm">No urgent next actions for this role.</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">Status Distribution</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {statuses.map((item) => (
              <div key={item.status} className="flex items-center justify-between gap-3 text-sm">
                <span className="text-muted-foreground">{item.status}</span>
                <Badge variant="outline">{item.count}</Badge>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <CalendarDays className="size-4" />
              Upcoming Sessions
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {visibleSessions.slice(0, 4).map((session) => (
              <div key={session.id} className="rounded-md bg-muted/40 p-3">
                <p className="font-medium text-sm">{session.name}</p>
                <p className="text-muted-foreground text-xs">
                  {getCampusName(session.campusId)} · {session.startDate}
                </p>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Bell className="size-4" />
              Notifications
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {visibleNotifications.map((notification) => (
              <div key={notification.id} className="rounded-md border p-3">
                <p className="font-medium text-sm">{notification.title}</p>
                <p className="text-muted-foreground text-xs">{notification.body}</p>
              </div>
            ))}
            {generatedAlerts.slice(0, 3).map((alert) => (
              <div key={alert.id} className="rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-950">
                <p className="font-medium text-sm">{alert.title}</p>
                <p className="text-xs">Trigger: {alert.trigger}</p>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">Recent Students</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {[...visibleStudents]
              .sort((a, b) => b.createdAt.localeCompare(a.createdAt))
              .slice(0, 4)
              .map((student) => (
                <div key={student.id} className="flex items-center justify-between gap-3">
                  <div>
                    <p className="font-medium text-sm">
                      {student.firstName} {student.lastName}
                    </p>
                    <p className="text-muted-foreground text-xs">{student.email}</p>
                  </div>
                  <Badge variant="outline">{student.status}</Badge>
                </div>
              ))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}