"use client";

import { useEffect, useState } from "react";

import { Check, Clock, UserMinus, X } 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 AttendanceRecord,
  type AttendanceStatus,
  classRecords,
  getStudentName,
  visibleAttendanceFor,
} from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

const actions: Array<{ status: AttendanceStatus; icon: typeof Check }> = [
  { status: "Present", icon: Check },
  { status: "Absent", icon: X },
  { status: "Late Arrival", icon: Clock },
  { status: "Excused Absence", icon: UserMinus },
];

export default function AttendancePage() {
  const [rows, setRows] = useState<AttendanceRecord[]>([]);

  useEffect(() => {
    const current: AuthUser | null = getAuthUser();
    setRows(visibleAttendanceFor(current));
  }, []);

  const setStatus = (id: string, status: AttendanceStatus) => {
    setRows((prev) => prev.map((row) => (row.id === id ? { ...row, status, notes: "Updated in POC session." } : row)));
  };

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h1 className="font-semibold text-xl">Attendance</h1>
        <p className="text-muted-foreground text-sm">Teacher-focused daily attendance marking.</p>
      </div>
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Today’s Roster</CardTitle>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Student</TableHead>
                <TableHead>Class</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Mark</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.id}>
                  <TableCell className="font-medium">{getStudentName(row.studentId)}</TableCell>
                  <TableCell>{classRecords.find((record) => record.id === row.classId)?.name}</TableCell>
                  <TableCell>{row.date}</TableCell>
                  <TableCell>
                    <Badge>{row.status}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    {actions.map(({ status, icon: Icon }) => (
                      <Button key={status} variant="ghost" size="icon" onClick={() => setStatus(row.id, status)}>
                        <Icon className="size-4" />
                      </Button>
                    ))}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}