"use client";

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

import { FileUp, History, Trash2 } 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 { type DocumentRecord, getStudentName, visibleDocumentsFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

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

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

  const expiring = useMemo(() => rows.filter((row) => row.expiryDate && row.expiryDate <= "2026-07-31"), [rows]);

  const replaceDocument = (id: string) => {
    setRows((prev) =>
      prev.map((row) =>
        row.id === id
          ? {
              ...row,
              version: row.version + 1,
              uploadedDate: new Date().toISOString().slice(0, 10),
              notes: "Replaced in POC session.",
            }
          : row,
      ),
    );
  };

  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">Documents</h1>
          <p className="text-muted-foreground text-sm">
            {rows.length} visible documents · {expiring.length} expiring soon
          </p>
        </div>
        <Button
          onClick={() =>
            setRows((prev) => [
              {
                id: `doc-${Date.now()}`,
                documentType: "Passport",
                studentId: prev[0]?.studentId ?? "stu-1001",
                schoolId: user?.schoolId ?? "school-pacific",
                uploadedBy: user?.name ?? "Demo user",
                uploadedDate: new Date().toISOString().slice(0, 10),
                version: 1,
                notes: "Uploaded in POC session.",
              },
              ...prev,
            ])
          }
        >
          <FileUp className="size-4" />
          Upload
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Document Register</CardTitle>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Document</TableHead>
                <TableHead>Student</TableHead>
                <TableHead>Uploaded</TableHead>
                <TableHead>Version</TableHead>
                <TableHead>Expiry</TableHead>
                <TableHead>Notes</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.id}>
                  <TableCell className="font-medium">{row.documentType}</TableCell>
                  <TableCell>{getStudentName(row.studentId)}</TableCell>
                  <TableCell>
                    {row.uploadedDate}
                    <div className="text-muted-foreground text-xs">by {row.uploadedBy}</div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">v{row.version}</Badge>
                  </TableCell>
                  <TableCell>
                    {row.expiryDate ? (
                      <Badge variant={row.expiryDate <= "2026-07-31" ? "destructive" : "secondary"}>
                        {row.expiryDate}
                      </Badge>
                    ) : (
                      "None"
                    )}
                  </TableCell>
                  <TableCell className="max-w-[220px] truncate text-muted-foreground">
                    {row.notes ?? "No notes"}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="icon" onClick={() => replaceDocument(row.id)}>
                      <History className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setRows((prev) => prev.filter((item) => item.id !== row.id))}
                    >
                      <Trash2 className="size-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}