"use client";

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { SchoolSetupNav } from "@/components/school/SchoolSetupNav";
import { SchoolManagerDashboard } from "@/components/schools/SchoolManagerDashboard";
import { apiGet } from "@/lib/api";

export default function SchoolDashboardPage() {
  const { id } = useParams<{ id: string }>();
  const branchId = Number(id);
  const [schoolName, setSchoolName] = useState<string | undefined>();

  useEffect(() => {
    apiGet<{ name: string }>(`/branches/${branchId}/directory`)
      .then((school) => setSchoolName(school.name))
      .catch(() => setSchoolName(undefined));
  }, [branchId]);

  return (
    <AppShell
      title="داشبورد مدرسه"
      subtitle={schoolName ? `${schoolName} — نمای عملیاتی مدیر` : "نمای عملیاتی مدیر برای پیگیری روزانه"}
      breadcrumbLabels={{ school: schoolName }}
    >
      <SchoolSetupNav branchId={branchId} current="dashboard" />
      <SchoolManagerDashboard branchId={branchId} />
    </AppShell>
  );
}