"use client";

import { useEffect, useRef, useState } from "react";
import { Settings, Palette, BellRing, RotateCcw, LogOut } from "lucide-react";
import { ThemeToggle } from "./ThemeToggle";
import { useUser } from "@/hooks/useUser";
import { STORAGE_KEYS } from "@/lib/constants";

export function SettingsDropdown() {
  const [open, setOpen] = useState(false);
  const [showTheme, setShowTheme] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const user = useUser();

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
        setShowTheme(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  function handleResetSidebar() {
    localStorage.removeItem(STORAGE_KEYS.SIDEBAR_ORDER);
    window.location.reload();
  }

  function handleSignOut() {
    window.location.href = "/oauth2/sign_out";
  }

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => {
          setOpen(!open);
          if (open) setShowTheme(false);
        }}
        className="flex h-11 w-11 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 md:h-10 md:w-10 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
        title="Settings"
      >
        <Settings size={18} />
      </button>

      {open && (
        <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-xl border border-zinc-200 bg-white p-1.5 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
          {/* Logged in as */}
          <div className="px-3 py-2">
            <p className="text-xs text-zinc-400 dark:text-zinc-500">Logged in as</p>
            <p className="mt-0.5 truncate text-sm font-medium text-zinc-600 dark:text-zinc-300">
              {user.email || "—"}
            </p>
          </div>
          <div className="my-1 border-t border-zinc-200 dark:border-zinc-700" />

          {/* Theme */}
          <button
            onClick={() => setShowTheme(!showTheme)}
            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
          >
            <Palette size={16} />
            Theme
          </button>
          {showTheme && (
            <div className="mt-1 px-2 pb-1">
              <ThemeToggle />
            </div>
          )}

          {/* Notification Settings */}
          <button
            onClick={() => {}}
            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
          >
            <BellRing size={16} />
            Notification Settings
          </button>

          {/* Reset Sidebar Order */}
          <button
            onClick={handleResetSidebar}
            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
          >
            <RotateCcw size={16} />
            Reset Sidebar Order
          </button>

          <div className="my-1 border-t border-zinc-200 dark:border-zinc-700" />

          {/* Sign Out */}
          <button
            onClick={handleSignOut}
            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
          >
            <LogOut size={16} />
            Sign Out
          </button>
        </div>
      )}
    </div>
  );
}
