import Link from "next/link";
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { getDepartmentHomeRoute } from "@/lib/access-control";
import { DEPARTMENT_OPTIONS } from "@/lib/departments";
import type { DepartmentKey } from "@/lib/types";

export default async function DepartmentsHubPage() {
  const session = await getServerSession(authOptions);

  if (!session?.user) {
    redirect("/login");
  }

  if (session.user.role !== "owner") {
    redirect(getDepartmentHomeRoute((session.user.department as DepartmentKey | null | undefined) ?? null));
  }

  return (
    <div className="space-y-5">
      <section className="rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell">
        <p className="text-sm font-semibold uppercase tracking-wide text-benell-brown">Departamento</p>
        <h1 className="mt-1 text-2xl font-semibold text-benell-text">Selecciona un departamento</h1>
        <p className="mt-1 text-sm text-benell-text-soft">Elige una vista para revisar indicadores, reuniones y ejecución por área.</p>
      </section>

      <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {DEPARTMENT_OPTIONS.map((option) => {
          const href = getDepartmentHomeRoute(option.value);

          return (
            <Link
              key={option.value}
              href={href}
              className="rounded-benell border border-benell-stroke bg-benell-surface p-4 shadow-benell transition hover:border-benell-brown/50"
            >
              <p className="text-sm font-semibold text-benell-text">{option.label}</p>
              <p className="mt-1 text-xs text-benell-text-soft">Entrar a vista de {option.label.toLowerCase()}.</p>
            </Link>
          );
        })}
      </section>
    </div>
  );
}
