"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useAuth } from "@/components/auth-provider"
import { useLanguage } from "@/lib/language-context"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Ship, Menu, Home, FileText, Users, Package, Bell, Settings, LogOut, Receipt, Globe } from "lucide-react"
import { cn } from "@/lib/utils"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"

interface DashboardLayoutProps {
  children: React.ReactNode
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  const { user, logout } = useAuth()
  const { language, setLanguage, t, dir } = useLanguage()
  const pathname = usePathname()
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) {
    return (
      <div className="flex min-h-screen flex-col">
        <div className="flex items-center justify-center h-screen">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      </div>
    )
  }

  const navigation = [
    { name: t("dashboard.nav.dashboard") || "Dashboard", href: "/dashboard", icon: Home },
    { name: t("dashboard.nav.clearance") || "Clearance Requests", href: "/dashboard/clearance", icon: FileText },
    { name: t("dashboard.nav.clients") || "Clients", href: "/dashboard/clients", icon: Users, adminOnly: true },
    { name: t("dashboard.nav.shipments") || "Shipments", href: "/dashboard/shipments", icon: Package },
    { name: t("dashboard.nav.invoices") || "Invoices", href: "/dashboard/invoices", icon: Receipt },
    { name: t("dashboard.nav.notifications") || "Notifications", href: "/dashboard/notifications", icon: Bell },
    { name: t("dashboard.nav.settings") || "Settings", href: "/dashboard/settings", icon: Settings },
  ]

  const filteredNavigation = navigation.filter(
    (item) => !item.adminOnly || user?.role === "admin" || user?.role === "agent",
  )

  return (
    <div className="flex min-h-screen flex-col" dir={dir}>
      <header className="sticky top-0 z-40 border-b bg-background">
        <div className="container flex h-16 items-center justify-between py-4">
          <div className="flex items-center gap-2">
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon" className="md:hidden bg-transparent">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">{t("dashboard.toggleMenu") || "Toggle menu"}</span>
                </Button>
              </SheetTrigger>
              <SheetContent side={dir === "rtl" ? "right" : "left"} className="w-64">
                <div className="flex items-center gap-2 pb-4 pt-2">
                  <Ship className="h-6 w-6 text-primary" />
                  <span className="text-lg font-bold">I-Linker</span>
                </div>
                <nav className="flex flex-col gap-2">
                  {filteredNavigation.map((item) => (
                    <Link
                      key={item.name}
                      href={item.href}
                      className={cn(
                        "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                        pathname === item.href ? "bg-accent text-accent-foreground" : "transparent",
                      )}
                    >
                      <item.icon className="h-5 w-5" />
                      {item.name}
                    </Link>
                  ))}
                  <Button
                    variant="ghost"
                    className="flex items-center gap-2 justify-start px-3 py-2 text-sm font-medium"
                    onClick={logout}
                  >
                    <LogOut className="h-5 w-5" />
                    {t("dashboard.logout") || "Logout"}
                  </Button>
                </nav>
              </SheetContent>
            </Sheet>
            <Link href="/dashboard" className="flex items-center gap-2">
              <Ship className="h-6 w-6 text-primary" />
              <span className="text-lg font-bold hidden md:inline-block">I-Linker</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            {/* Language Selector */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                  <Globe className="h-4 w-4" />
                  <Badge variant="secondary" className="text-xs">
                    {language === "ar" ? "AR" : "EN"}
                  </Badge>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setLanguage("en")}>
                  <span className="mr-2">🇺🇸</span>
                  English
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage("ar")}>
                  <span className="mr-2">🇸🇦</span>
                  العربية
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

            <div className="hidden md:flex">
              <span className="text-sm font-medium">
                {user?.name} ({user?.role})
              </span>
            </div>
            <Button variant="outline" size="sm" onClick={logout}>
              <LogOut className="h-4 w-4 mr-2" />
              {t("dashboard.logout") || "Logout"}
            </Button>
          </div>
        </div>
      </header>
      <div className="flex flex-1">
        <aside className="hidden w-64 flex-col border-r bg-background md:flex">
          <nav className="flex flex-col gap-2 p-4">
            {filteredNavigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                  pathname === item.href ? "bg-accent text-accent-foreground" : "transparent",
                )}
              >
                <item.icon className="h-5 w-5" />
                {item.name}
              </Link>
            ))}
          </nav>
        </aside>
        <main className="flex-1 overflow-auto">
          <div className="container py-4 md:py-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}