"use client";

import { useEffect, useState } from "react";

import { Archive, CalendarPlus } 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 { getCampusName, getSchoolName, getStaffName, type Session, visibleSessionsFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

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

  useEffect(() => {
    const current = getAuthUser();
    setUser(current);
    setRows(visibleSessionsFor(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">Sessions</h1>
          <p className="text-muted-foreground text-sm">
            Create, archive, and assign students or teachers to school sessions.
          </p>
        </div>
        <Button
          onClick={() =>
            setRows((prev) => [
              {
                id: `session-${Date.now()}`,
                name: "Winter 2027",
                startDate: "2027-01-11",
                endDate: "2027-03-26",
                schoolId: user?.schoolId ?? "school-pacific",
                campusId: user?.campusId ?? "campus-pacific-main",
                teacherIds: [],
                studentIds: [],
              },
              ...prev,
            ])
          }
        >
          <CalendarPlus className="size-4" />
          Create Session
        </Button>
      </div>

      <div className="grid gap-3 lg:grid-cols-3">
        {rows.map((session) => (
          <Card key={session.id}>
            <CardHeader>
              <CardTitle className="flex items-center justify-between gap-2 text-base">
                {session.name}
                <Badge variant={session.archived ? "secondary" : "default"}>
                  {session.archived ? "Archived" : "Active"}
                </Badge>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              <p className="text-muted-foreground">
                {getSchoolName(session.schoolId)} · {getCampusName(session.campusId)}
              </p>
              <p>
                {session.startDate} to {session.endDate}
              </p>
              <p>
                {session.studentIds.length} students ·{" "}
                {session.teacherIds.map(getStaffName).join(", ") || "No teachers"}
              </p>
              <Button
                variant="outline"
                size="sm"
                onClick={() =>
                  setRows((prev) =>
                    prev.map((row) => (row.id === session.id ? { ...row, archived: !row.archived } : row)),
                  )
                }
              >
                <Archive className="size-4" />
                {session.archived ? "Restore" : "Archive"}
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}