import { useState, useEffect, useRef } from "react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "../hooks/useTranslation"
import { Button } from "./ui/button"
import { SettingsMenu } from "./SettingsMenu"
import { FlaskConical, LogOut, User, Moon, Sun, Globe, Command, Menu, RefreshCcw } from "lucide-react"
import { useTheme } from "./ThemeProvider"
import { logoutUser, getUserProfile } from "../api/users"
import { WorkspaceSelector } from "./WorkspaceSelector"
import { toast } from "sonner"
import { NotificationBell } from "./notifications/NotificationBell"
import { clearSessionTokens, getAccessToken, getRefreshToken, setDemoSessionMeta, setSessionTokens } from "../lib/session"
import { startDemo } from "../api/demo"

type NavbarProps = {
  onOpenSidebar?: () => void
}

export function Navbar({ onOpenSidebar }: NavbarProps) {
  const { t, lang, setLanguage } = useTranslation()
  const { theme, setTheme } = useTheme()
  const navigate = useNavigate()

  const [showLogoutModal, setShowLogoutModal] = useState(false)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const [isResettingDemo, setIsResettingDemo] = useState(false)
  const [user, setUser] = useState<any>(null)

  const dropdownRef = useRef<HTMLDivElement>(null)

  const isFa = lang === "fa"
  const isDarkMode =
    theme === "dark" ||
    (theme === "system" && document.documentElement.classList.contains("dark"))
  const isDemoUser = Boolean(user?.is_demo)
  const demoExpiryLabel = user?.demo_expires_at
    ? new Intl.DateTimeFormat(isFa ? "fa-IR" : "en-US", {
        dateStyle: "medium",
        timeStyle: "short",
      }).format(new Date(user.demo_expires_at))
    : null

  useEffect(() => {
    const handleProfileUpdated = ((e: CustomEvent) => {
      if (e.detail) {
        setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
      }
    }) as EventListener

    window.addEventListener("profile_updated", handleProfileUpdated)
    return () => window.removeEventListener("profile_updated", handleProfileUpdated)
  }, [])

  useEffect(() => {
    const fetchUser = async () => {
      const token = getAccessToken()
      if (!token) return

      try {
        const userData = await getUserProfile()
        setUser(userData)
      } catch (error) {
        console.error("Failed to fetch user profile:", error)
      }
    }

    void fetchUser()
  }, [])

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  const handleLogout = async () => {
    try {
      const refreshToken = getRefreshToken()
      if (refreshToken) {
        await logoutUser(refreshToken)
      }
    } catch (error) {
      console.error("Logout API failed:", error)
    } finally {
      clearSessionTokens()
      setUser(null)
      setShowLogoutModal(false)
      toast.success(t.logoutToast || "Successfully logged out!")
      navigate("/auth")
    }
  }

  const handleResetDemo = async () => {
    if (isResettingDemo) return
    setIsResettingDemo(true)
    try {
      const demo = await startDemo()
      setSessionTokens(demo.access, demo.refresh)
      setDemoSessionMeta(demo.expires_at)
      toast.success(t.demo?.reset || "Fresh demo environment is ready.")
      window.location.href = "/timesheet"
    } catch (error) {
      console.error("Demo reset failed:", error)
      toast.error(t.demo?.startError || "Could not start the demo environment.")
    } finally {
      setIsResettingDemo(false)
    }
  }

  const toggleTheme = () => {
    setTheme(isDarkMode ? "light" : "dark")
  }

  const toggleLanguage = () => {
    const newLang = isFa ? "en" : "fa"

    if (setLanguage) {
      setLanguage(newLang)
    } else {
      localStorage.setItem("language", newLang)
      window.location.reload()
    }
  }

  return (
    <>
      <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-4 py-4 backdrop-blur-md transition-colors md:px-8 md:py-6 dark:border-slate-800/80 dark:bg-slate-900/70">
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={onOpenSidebar}
            className="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-slate-200 text-slate-600 transition-colors hover:bg-slate-100 md:hidden dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
            title="Open menu"
          >
            <Menu className="h-5 w-5" />
          </button>

          <div
            className="flex cursor-pointer items-center gap-2"
            onClick={() => navigate("/")}
          >
            <span className="relative z-20 flex items-center gap-2 text-lg font-bold tracking-tight text-slate-900 md:text-xl dark:text-slate-50">
              <Command className="h-6 w-6 md:h-7 md:w-7" />
              Qlockify.ir
            </span>
          </div>
        </div>

        {/* Mobile navbar: theme toggle + notification bell */}
        <div className="flex items-center gap-2 md:hidden">
          <button
            type="button"
            onClick={toggleTheme}
            className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
            title={isDarkMode ? t.lightMode || "Light Mode" : t.darkMode || "Dark Mode"}
          >
            {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          </button>

          {user && <NotificationBell />}
        </div>

        {/* Desktop navbar: keep the old controls here */}
        <div className="hidden items-center gap-4 md:flex">
          {user && <WorkspaceSelector />}
          {isDemoUser && (
            <div className="inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-cyan-50 px-3 py-2 text-xs font-semibold text-cyan-800 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
              <FlaskConical className="h-4 w-4" />
              <span>{t.demo?.badge || "Demo environment"}</span>
            </div>
          )}

          {user ? (
            <>
              <NotificationBell />

              <div className="relative" ref={dropdownRef}>
                <button
                  onClick={() => setIsDropdownOpen((current) => !current)}
                  className="h-12 w-12 overflow-hidden rounded-full border-2 border-slate-200 transition-all hover:border-blue-500 focus:outline-none dark:border-slate-700 dark:hover:border-blue-500"
                >
                  {user.profile_picture ? (
                    <img
                      src={user.profile_picture}
                      alt="Profile"
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center bg-slate-100 text-sm font-bold uppercase text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                      {user.first_name?.[0] || user.email?.[0] || "U"}
                    </div>
                  )}
                </button>

                {isDropdownOpen && (
                  <div
                    dir={isFa ? "rtl" : "ltr"}
                    className={`absolute ${
                      isFa ? "left-0" : "right-0"
                    } z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
                  >
                    <div className="mb-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800">
                      <p className="truncate text-sm font-semibold text-slate-800 dark:text-slate-400">
                        {user.first_name || user.last_name
                          ? `${user.first_name || ""} ${user.last_name || ""}`.trim()
                          : user.email}
                      </p>
                      {isDemoUser && demoExpiryLabel && (
                        <p className="mt-1 text-xs text-cyan-700 dark:text-cyan-300">
                          {(t.demo?.expiresAt || "Expires at")}: {demoExpiryLabel}
                        </p>
                      )}
                    </div>

                    {isDemoUser && (
                      <button
                        onClick={handleResetDemo}
                        disabled={isResettingDemo}
                        className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-cyan-700 transition-colors hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-70 dark:text-cyan-300 dark:hover:bg-cyan-950/40"
                      >
                        <RefreshCcw className="h-4 w-4" />
                        <span>{isResettingDemo ? t.demo?.starting || "Preparing demo..." : t.demo?.resetAction || "Reset demo"}</span>
                      </button>
                    )}

                    <button
                      onClick={() => {
                        navigate("/profile")
                        setIsDropdownOpen(false)
                      }}
                      className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
                    >
                      <User className="h-4 w-4" />
                      <span>{t.profile?.title || "Profile"}</span>
                    </button>

                    <button
                      onClick={toggleTheme}
                      className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
                    >
                      {isDarkMode ? (
                        <Sun className="h-4 w-4" />
                      ) : (
                        <Moon className="h-4 w-4" />
                      )}
                      <span>
                        {isDarkMode
                          ? t.lightMode || "Light Mode"
                          : t.darkMode || "Dark Mode"}
                      </span>
                    </button>

                    <button
                      onClick={toggleLanguage}
                      className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
                    >
                      <Globe className="h-4 w-4" />
                      <span>{isFa ? "English" : "فارسی"}</span>
                    </button>

                    <div className="my-1 h-px bg-slate-200 dark:bg-slate-800" />

                    <button
                      onClick={() => {
                        setShowLogoutModal(true)
                        setIsDropdownOpen(false)
                      }}
                      className="flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
                    >
                      <LogOut className="h-4 w-4" />
                      <span>{t.logout || "Logout"}</span>
                    </button>
                  </div>
                )}
              </div>
            </>
          ) : (
            <>
              <SettingsMenu />

              <Button
                onClick={() => navigate("/auth")}
                className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
              >
                {t.login?.signIn || "Login"}
              </Button>
            </>
          )}
        </div>
      </header>

      {showLogoutModal && (
        <div
          className="fixed inset-0 z-[80] flex items-center justify-center bg-black/50 px-4"
          onClick={() => setShowLogoutModal(false)}
        >
          <div
            className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
            onClick={(e) => e.stopPropagation()}
          >
            <h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
              {t.confirmLogoutTitle || "Confirm Logout"}
            </h2>

            <p className="mb-6 text-slate-600 dark:text-slate-400">
              {t.confirmLogoutMessage ||
                "Are you sure you want to log out of your account?"}
            </p>

            <div className="flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => setShowLogoutModal(false)}
                className="dark:text-white"
              >
                {t.actions?.cancel || "Cancel"}
              </Button>

              <Button
                variant="destructive"
                onClick={handleLogout}
                className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
              >
                {t.logout || "Logout"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}