"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Users, LayoutDashboard, BookOpen, CalendarDays, Bell, LogOut } from "lucide-react";
import { RouteGuard } from "@/components/auth/route-guard";
import { useAuth } from "@/context/auth-context";
import { cn } from "@/lib/utils";

const parentNavItems = [
  { label: "Ward Dashboard", href: "/parent/dashboard", icon: LayoutDashboard },
  { label: "Subjects", href: "/parent/subjects", icon: BookOpen },
  { label: "Attendance History", href: "/parent/history", icon: CalendarDays },
  { label: "Circulars", href: "/parent/notices", icon: Bell },
];

export default function ParentLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const { user, logout } = useAuth();

  return (
    <RouteGuard allowedRoles={["PARENT", "SUPER_ADMIN"]}>
      <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950">
        <header className="h-14 bg-white border-b border-slate-200 px-4 sm:px-6 flex items-center justify-between sticky top-0 z-30 dark:bg-slate-900 dark:border-slate-800">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded bg-slate-900 text-white flex items-center justify-center font-bold text-xs tracking-tight dark:bg-slate-100 dark:text-slate-900">
              <Users className="w-4 h-4" />
            </div>
            <div>
              <span className="text-xs font-bold text-slate-900 tracking-tight block dark:text-slate-100">
                IHM Ward Monitoring Portal
              </span>
              <span className="text-[10px] text-slate-500 block leading-tight">
                {user?.name || "Parent Access"}
              </span>
            </div>
          </div>

          <nav className="hidden sm:flex items-center gap-1 text-xs">
            {parentNavItems.map((item) => {
              const Icon = item.icon;
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-1.5 px-3 py-1.5 rounded font-medium transition-colors",
                    isActive
                      ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-semibold"
                      : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
                  )}
                >
                  <Icon className="w-3.5 h-3.5" />
                  <span>{item.label}</span>
                </Link>
              );
            })}
          </nav>

          <button
            onClick={logout}
            title="Sign out"
            className="p-1.5 rounded text-slate-500 hover:text-rose-600 hover:bg-slate-100 transition-colors dark:hover:bg-slate-800"
            aria-label="Sign out"
          >
            <LogOut className="w-4 h-4" />
          </button>
        </header>

        <main className="flex-1 p-3 sm:p-6 lg:p-8 pb-20 sm:pb-8 max-w-5xl mx-auto w-full">
          {children}
        </main>

        {/* Mobile Bottom Navigation Bar */}
        <nav className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-slate-200 py-1.5 px-3 flex justify-around items-center shadow-lg dark:bg-slate-900 dark:border-slate-800">
          {parentNavItems.map((item) => {
            const Icon = item.icon;
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center gap-1 py-1 px-2 rounded-lg text-[10px] font-medium transition-colors",
                  isActive
                    ? "text-[#1769E8] font-bold dark:text-blue-400"
                    : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200"
                )}
              >
                <Icon className={cn("w-4 h-4", isActive ? "text-[#1769E8] dark:text-blue-400" : "text-slate-500")} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>
      </div>
    </RouteGuard>
  );
}