"use client";

import Link from "next/link";
import { isTeacherRole } from "@/lib/permissions";

export type SchoolSetupPage =
  | "dashboard"
  | "classes"
  | "periods"
  | "subjects"
  | "books"
  | "new-book"
  | "school-settings"
  | "schedule"
  | "class-subjects"
  | "placement";

export function PillNavItem({
  href,
  label,
  current,
}: {
  href: string;
  label: string;
  current: boolean;
}) {
  if (current) {
    return (
      <span className="rounded-full bg-primary px-3 py-1.5 text-xs font-semibold text-white">
        {label}
      </span>
    );
  }

  return (
    <Link
      href={href}
      className="rounded-full bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-200"
    >
      {label}
    </Link>
  );
}

export function SchoolSetupNav({
  branchId,
  classId,
  current,
}: {
  branchId: number;
  classId?: number;
  current: SchoolSetupPage;
}) {
  const schoolItems: Array<{ id: SchoolSetupPage; label: string; href: string }> = [
    { id: "dashboard", label: "داشبورد", href: `/schools/${branchId}/dashboard` },
    { id: "classes", label: "کلاس‌ها", href: `/schools/${branchId}/classes` },
    { id: "periods", label: "زنگ‌ها", href: `/schools/${branchId}/periods` },
    { id: "subjects", label: "فهرست دروس", href: `/schools/${branchId}/subjects` },
    { id: "books", label: "فهرست کتاب‌ها", href: `/academic/curriculum/books?branch_id=${branchId}` },
    {
      id: "new-book",
      label: "افزودن کتاب مدرسه",
      href: `/academic/curriculum/books/new?branch_id=${branchId}`,
    },
  ];

  if (isTeacherRole()) return null;

  const classItems: Array<{ id: SchoolSetupPage; label: string; href: string }> = classId
    ? [
        {
          id: "schedule",
          label: "برنامه هفتگی",
          href: `/schools/${branchId}/classes/${classId}/schedule`,
        },
        {
          id: "class-subjects",
          label: "دروس و معلمان",
          href: `/schools/${branchId}/classes/${classId}/subjects`,
        },
        {
          id: "placement",
          label: "کلاس‌بندی",
          href: `/schools/${branchId}/classes/${classId}/placement`,
        },
      ]
    : [];

  return (
    <nav className="mb-4 flex flex-wrap items-center gap-2" aria-label="صفحات مرتبط مدرسه">
      {schoolItems.map((item) => (
        <PillNavItem key={item.id} href={item.href} label={item.label} current={current === item.id} />
      ))}
      {classItems.length ? (
        <span className="hidden h-4 w-px bg-[var(--border)] sm:block" aria-hidden />
      ) : null}
      {classItems.map((item) => (
        <PillNavItem key={item.id} href={item.href} label={item.label} current={current === item.id} />
      ))}
    </nav>
  );
}