"use client"

import type React from "react"
import Image from "next/image"
import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import {
  LayoutDashboard,
  FileText,
  ChevronDown,
  ChevronRight,
  User,
  MapPin,
  BookOpen,
  Info,
  Users,
  Award,
  UserCheck,
  Upload,
  FileCheck,
  Send,
  CheckCircle,
  Menu,
  LogOut,
  Settings,
  Globe,
} from "lucide-react"
import { cn } from "@/lib/utils"

interface DashboardLayoutProps {
  children: React.ReactNode
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const pathname = usePathname()
  const [applicationsOpen, setApplicationsOpen] = useState(true)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [studentType, setStudentType] = useState<"local" | "foreign">("local")

  useEffect(() => {
    const savedType = localStorage.getItem("studentType") as "local" | "foreign"
    if (savedType) {
      setStudentType(savedType)
    }
  }, [])

  const applicationSections = [
    { name: "Biodata", href: "/dashboard/applications/biodata", icon: User },
    { name: "Address", href: "/dashboard/applications/address", icon: MapPin },
    { name: "Education Background", href: "/dashboard/applications/education", icon: BookOpen },
    { name: "Program Info", href: "/dashboard/applications/program", icon: Info },
    { name: "Guardian", href: "/dashboard/applications/guardian", icon: Users },
    { name: "Scholarship", href: "/dashboard/applications/scholarship", icon: Award },
    { name: "Referee", href: "/dashboard/applications/referee", icon: UserCheck },
    ...(studentType === "foreign"
      ? [{ name: "Foreign Student Info", href: "/dashboard/applications/foreign-student", icon: Globe }]
      : []),
    { name: "Uploads", href: "/dashboard/applications/uploads", icon: Upload },
    { name: "Declaration", href: "/dashboard/applications/declaration", icon: FileCheck },
  ]

  const mainNavItems = [
    { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
    { name: "Review & Submit", href: "/dashboard/review", icon: Send },
    { name: "Admission Status", href: "/dashboard/status", icon: CheckCircle },
  ]

  const SidebarContent = () => (
    <div className="flex flex-col h-full">
      <div className="p-6">
        <Link href="/dashboard" className="flex items-center gap-3">
          <Image
            src="/images/fanaka-logo.png"
            alt="Fanaka International University College Logo"
            width={32}
            height={32}
            className="h-8 w-auto"
          />
          <div className="text-center">
            <span className="text-lg font-black text-primary block leading-tight">Fanaka International</span>
            <span className="text-sm font-black text-primary block leading-tight">University College</span>
          </div>
        </Link>
      </div>

      <nav className="flex-1 px-4 space-y-2">
        <div className="space-y-1">
          <Link
            href="/dashboard"
            className={cn(
              "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
              pathname === "/dashboard"
                ? "bg-accent text-accent-foreground"
                : "text-muted-foreground hover:text-foreground hover:bg-muted",
            )}
          >
            <LayoutDashboard className="h-4 w-4" />
            Dashboard
          </Link>

          <Collapsible open={applicationsOpen} onOpenChange={setApplicationsOpen}>
            <CollapsibleTrigger className="flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
              <div className="flex items-center gap-3">
                <FileText className="h-4 w-4" />
                Applications
                {studentType === "foreign" && <Globe className="h-3 w-3 text-blue-500" />}
              </div>
              {applicationsOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-1 mt-1">
              {applicationSections.map((section) => {
                const Icon = section.icon
                return (
                  <Link
                    key={section.href}
                    href={section.href}
                    className={cn(
                      "flex items-center gap-3 px-6 py-2 rounded-lg text-sm transition-colors",
                      pathname === section.href
                        ? "bg-accent text-accent-foreground"
                        : "text-muted-foreground hover:text-foreground hover:bg-muted",
                    )}
                  >
                    <Icon className="h-4 w-4" />
                    {section.name}
                  </Link>
                )
              })}
            </CollapsibleContent>
          </Collapsible>

          {mainNavItems.slice(1).map((item) => {
            const Icon = item.icon
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                  pathname === item.href
                    ? "bg-accent text-accent-foreground"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
                )}
              >
                <Icon className="h-4 w-4" />
                {item.name}
              </Link>
            )
          })}
        </div>
      </nav>
    </div>
  )

  return (
    <div className="min-h-screen bg-background">
      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
        <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-card">
          <SidebarContent />
        </div>
      </div>

      <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
        <SheetContent side="left" className="w-72 p-0">
          <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-card">
            <SidebarContent />
          </div>
        </SheetContent>
      </Sheet>

      <div className="lg:pl-72">
        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-border bg-background px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="lg:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Open sidebar</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-72 p-0">
              <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-card">
                <SidebarContent />
              </div>
            </SheetContent>
          </Sheet>

          <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
            <div className="flex flex-1"></div>
            <div className="flex items-center gap-x-4 lg:gap-x-6">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src="/placeholder.svg?height=32&width=32" alt="User" />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none">John Doe</p>
                      <p className="text-xs leading-none text-muted-foreground">john.doe@email.com</p>
                      <p className="text-xs leading-none text-blue-600 capitalize">{studentType} Student</p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Settings className="mr-2 h-4 w-4" />
                    <span>Settings</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Log out</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>

        <main className="py-10">
          <div className="px-4 sm:px-6 lg:px-8">{children}</div>
        </main>
      </div>
    </div>
  )
}