"use client";

import { useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { campuses, type School, staffUsers, students, visibleSchoolsFor } from "@/data/education";
import { type AuthUser, getAuthUser } from "@/lib/auth";

export default function SchoolsPage() {
  const [schools, setSchools] = useState<School[]>([]);

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

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h1 className="font-semibold text-xl">Schools</h1>
        <p className="text-muted-foreground text-sm">Owner school management and school administrator profile view.</p>
      </div>
      <div className="grid gap-3 lg:grid-cols-2">
        {schools.map((school) => (
          <Card key={school.id}>
            <CardHeader>
              <CardTitle className="flex items-center justify-between text-base">
                {school.name}
                <Badge variant={school.subscription === "Past Due" ? "destructive" : "outline"}>
                  {school.subscription}
                </Badge>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-sm">
              <p className="text-muted-foreground">
                {school.city}, {school.state}
              </p>
              <div className="grid grid-cols-3 gap-2">
                <div className="rounded-md bg-muted/40 p-3">
                  <p className="text-muted-foreground text-xs">Students</p>
                  <p className="font-bold text-lg">
                    {students.filter((student) => student.schoolId === school.id).length}
                  </p>
                </div>
                <div className="rounded-md bg-muted/40 p-3">
                  <p className="text-muted-foreground text-xs">Campuses</p>
                  <p className="font-bold text-lg">
                    {campuses.filter((campus) => campus.schoolId === school.id).length}
                  </p>
                </div>
                <div className="rounded-md bg-muted/40 p-3">
                  <p className="text-muted-foreground text-xs">Users</p>
                  <p className="font-bold text-lg">
                    {staffUsers.filter((staff) => staff.schoolId === school.id).length}
                  </p>
                </div>
              </div>
              <div className="space-y-1">
                {campuses
                  .filter((campus) => campus.schoolId === school.id)
                  .map((campus) => (
                    <div key={campus.id} className="rounded-md border p-2">
                      <p className="font-medium">{campus.name}</p>
                      <p className="text-muted-foreground text-xs">{campus.address}</p>
                    </div>
                  ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}