"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import DashboardSidebar from "./DashboardSidebar";
import DashboardHeader from "./DashboardHeader";
import type { DashboardNavItem } from "./dashboard-nav";

interface DashboardPageLayoutProps {
  children: React.ReactNode;
  navItems: DashboardNavItem[];
  title: string;
  subtitle?: string;
  userPhone?: string;
  gisVerified?: boolean;
  onLogout: () => void;
}

export default function DashboardPageLayout({
  children,
  navItems,
  title,
  subtitle,
  userPhone,
  gisVerified,
  onLogout,
}: DashboardPageLayoutProps) {
  const pathname = usePathname();

  return (
    <div className="min-h-screen bg-page-bg">
      <DashboardSidebar items={navItems} />

      <div className="flex min-h-screen flex-col md:pl-[72px] xl:pl-[220px]">
        <DashboardHeader
          title={title}
          subtitle={subtitle}
          userPhone={userPhone}
          gisVerified={gisVerified}
          onLogout={onLogout}
        />

        <main className="flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8 pb-24 md:pb-8">
          {children}
        </main>
      </div>

      <nav
        data-testid="dashboard-mobile-nav"
        className="fixed inset-x-0 bottom-0 z-50 border-t border-border bg-surface md:hidden"
        aria-label="Mobile module navigation"
      >
        <div className="flex items-stretch justify-around px-1 pb-[env(safe-area-inset-bottom)]">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            const Icon = item.icon;

            return (
              <Link
                key={item.id}
                href={item.href}
                data-testid={`dashboard-nav-${item.id}`}
                aria-current={isActive ? "page" : undefined}
                className={cn(
                  "flex min-h-11 min-w-11 flex-1 flex-col items-center justify-center gap-1 px-1 py-2 font-inter text-[10px] font-medium transition-colors duration-200",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-inset",
                  isActive
                    ? "text-green-deep"
                    : "text-muted hover:text-ink",
                )}
              >
                <span
                  className={cn(
                    "flex size-9 items-center justify-center rounded-full transition-colors",
                    isActive ? "bg-green-deep/10" : "bg-transparent",
                  )}
                >
                  <Icon className="size-5" aria-hidden="true" />
                </span>
                <span className="truncate max-w-full">{item.label}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}