"use client";

import { useEffect, useState } from "react";

import { Plus } 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 { type ClassRecord, getStaffName, getStudentName, sessions, visibleClassesFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

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

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

  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">Classes</h1>
          <p className="text-muted-foreground text-sm">Class rosters, capacity, schedule, and teacher assignments.</p>
        </div>
        <Button
          onClick={() =>
            setRows((prev) => [
              {
                id: `class-${Date.now()}`,
                name: "New Academic Skills",
                sessionId: sessions[0]?.id ?? "",
                teacherId: user?.role === "teacher" ? user.id : "user-teacher-1",
                capacity: 16,
                schedule: "Fri 10:00 AM",
                studentIds: [],
              },
              ...prev,
            ])
          }
        >
          <Plus className="size-4" />
          Create Class
        </Button>
      </div>

      <div className="grid gap-3 lg:grid-cols-3">
        {rows.map((record) => (
          <Card key={record.id}>
            <CardHeader>
              <CardTitle className="text-base">{record.name}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              <div className="flex flex-wrap gap-2">
                <Badge>{sessions.find((session) => session.id === record.sessionId)?.name ?? "Session"}</Badge>
                <Badge variant="outline">
                  {record.studentIds.length}/{record.capacity}
                </Badge>
              </div>
              <p className="text-muted-foreground">{record.schedule}</p>
              <p>Teacher: {getStaffName(record.teacherId)}</p>
              <div className="space-y-1">
                {record.studentIds.map((studentId) => (
                  <div key={studentId} className="rounded-md bg-muted/40 px-2 py-1">
                    {getStudentName(studentId)}
                  </div>
                ))}
                {record.studentIds.length === 0 && <p className="text-muted-foreground">No students assigned yet.</p>}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}