"use client";

import { useEffect, useState } from "react";

import { Archive, CheckCircle2, Plus, XCircle } 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 { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  getGeneratedAlerts,
  getStaffName,
  getStudentName,
  type RequestRecord,
  visibleRequestsFor,
} from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

export default function RequestsPage() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [rows, setRows] = useState<RequestRecord[]>([]);
  const [showCompleted, setShowCompleted] = useState(false);

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

  const setStatus = (id: string, status: RequestRecord["status"]) => {
    setRows((prev) => prev.map((row) => (row.id === id ? { ...row, status } : row)));
  };

  const visibleRows = showCompleted ? rows : rows.filter((row) => !["Completed", "Cancelled"].includes(row.status));
  const alerts = getGeneratedAlerts(user);

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h1 className="font-semibold text-xl">Requests</h1>
          <p className="text-muted-foreground text-sm">Admissions, DSO, document, invoice, and student update tasks.</p>
        </div>
        <Button
          onClick={() =>
            setRows((prev) => [
              {
                id: `req-${Date.now()}`,
                type: "Document Request",
                priority: "Normal",
                severity: "Standard",
                studentId: prev[0]?.studentId ?? "stu-1001",
                assignedToId: user?.id ?? "user-admin-1",
                assignedById: user?.id ?? "user-admin-1",
                description: "New POC request created from the dashboard.",
                deadline: "2026-06-30",
                attachments: [],
                status: "Open",
              },
              ...prev,
            ])
          }
        >
          <Plus className="size-4" />
          New Request
        </Button>
      </div>

      <div className="grid gap-3 lg:grid-cols-4">
        {alerts.slice(0, 4).map((alert) => (
          <Card key={alert.id}>
            <CardHeader>
              <CardTitle className="text-sm">{alert.title}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-sm">
              <div className="flex flex-wrap gap-2">
                <Badge variant={alert.severity === "Major" ? "destructive" : "outline"}>{alert.severity}</Badge>
                <Badge variant="secondary">{alert.alertType}</Badge>
              </div>
              <p className="text-muted-foreground">Deadline: {alert.deadline}</p>
              <p className="text-muted-foreground">Trigger: {alert.trigger}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-base">Work Queue</CardTitle>
          <div className="flex items-center gap-2 text-sm">
            <Switch checked={showCompleted} onCheckedChange={setShowCompleted} />
            <span>Show completed</span>
          </div>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Request</TableHead>
                <TableHead>Student</TableHead>
                <TableHead>Assigned</TableHead>
                <TableHead>Deadline</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {visibleRows.map((row) => (
                <TableRow key={row.id}>
                  <TableCell>
                    <p className="font-medium">{row.type}</p>
                    <p className="text-muted-foreground text-xs">{row.description}</p>
                  </TableCell>
                  <TableCell>{getStudentName(row.studentId)}</TableCell>
                  <TableCell>
                    {getStaffName(row.assignedToId)}
                    <div className="text-muted-foreground text-xs">by {getStaffName(row.assignedById)}</div>
                  </TableCell>
                  <TableCell>{row.deadline}</TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      <Badge variant={row.priority === "Urgent" ? "destructive" : "outline"}>{row.priority}</Badge>
                      <Badge variant="outline">{row.severity}</Badge>
                      <Badge>{row.status}</Badge>
                    </div>
                    <p className="mt-1 text-muted-foreground text-xs">
                      Trigger: {row.attachments.length > 0 ? `${row.attachments.length} attachment` : "Manual task"}
                    </p>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="icon" onClick={() => setStatus(row.id, "Completed")}>
                      <CheckCircle2 className="size-4" />
                    </Button>
                    <Button variant="ghost" size="icon" onClick={() => setStatus(row.id, "Waiting")}>
                      <Archive className="size-4" />
                    </Button>
                    <Button variant="ghost" size="icon" onClick={() => setStatus(row.id, "Cancelled")}>
                      <XCircle className="size-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}