"use client";

import { useRouter } from "next/navigation";
import {
  Bell,
  BellOff,
  Bot,
  Command,
  LogOut,
  Menu,
  Settings,
  Target,
  Timer,
} from "lucide-react";
import { useUIStore } from "@/stores/ui-store";
import { useFocusStore } from "@/stores/focus-store";
import { useTimerStore } from "@/stores/timer-store";
import { Avatar } from "@/components/ui/avatar";
import { NotificationCenter } from "@/components/layout/notification-center";
import { createClient } from "@/lib/supabase/client";
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownTrigger,
} from "@/components/ui/dropdown";

interface TopbarProps {
  userName: string;
  userAvatar?: string | null;
  userUsername?: string | null;
  userEmail: string;
}

export function Topbar({
  userName,
  userAvatar,
  userUsername,
  userEmail,
}: TopbarProps) {
  const router = useRouter();
  const { setSidebarOpen, setCommandPaletteOpen } = useUIStore();
  const { focusActive } = useFocusStore();
  const { isVisible: timerVisible, isRunning: timerRunning, show: showTimer, toggleMinimize } = useTimerStore();

  function handleFocusAction() {
    router.push("/focus");
  }

  async function handleSignOut() {
    const supabase = createClient();
    await supabase.auth.signOut();
    router.push("/login");
    router.refresh();
  }

  return (
    <header className="flex h-12 items-center border-b border-sidebar-border bg-background/80 px-4 backdrop-blur-md shrink-0">
      {/* Mobile menu */}
      <button
        onClick={() => setSidebarOpen(true)}
        className="md:hidden -ml-1 rounded-lg p-2 text-white/40 transition-colors hover:bg-white/[0.04] hover:text-white/60 cursor-pointer"
      >
        <Menu className="h-5 w-5" />
      </button>

      {/* Mobile logo */}
      <span className="md:hidden ml-2 text-sm font-bold text-white">Mindavio</span>

      {/* Spacer */}
      <div className="flex-1" />

      {/* Command trigger — desktop */}
      <button
        onClick={() => setCommandPaletteOpen(true)}
        className="hidden md:flex items-center gap-2 rounded-lg border border-white/[0.06] bg-white/[0.02] px-3 py-1.5 text-[12px] text-white/30 transition-all hover:border-white/[0.1] hover:bg-white/[0.04] hover:text-white/50 cursor-pointer"
      >
        <Command className="h-3 w-3" />
        <span>Command</span>
        <kbd className="ml-4 rounded bg-white/[0.06] px-1.5 py-0.5 font-mono text-[9px] text-white/20">⌘K</kbd>
      </button>

      <div className="flex items-center gap-1 ml-3">
        {/* AI Quick Access */}
        <button
          onClick={() => router.push("/ai")}
          className="rounded-lg p-2 text-white/25 transition-all hover:bg-white/[0.04] hover:text-indigo-400 cursor-pointer"
          title="AI Assistant"
        >
          <Bot className="h-4 w-4" />
        </button>

        {/* Pomodoro Timer */}
        <button
          onClick={() => { if (timerVisible) { toggleMinimize(); } else { showTimer(); } }}
          className={`relative rounded-lg border p-2 transition-all cursor-pointer ${
            timerRunning
              ? "border-violet-500/30 bg-violet-500/10 text-violet-300"
              : timerVisible
                ? "border-white/[0.10] bg-white/[0.04] text-white/60"
                : "border-transparent text-white/25 hover:border-white/[0.08] hover:bg-white/[0.03] hover:text-white/50"
          }`}
          title="Pomodoro Timer"
        >
          <Timer className="h-4 w-4" />
          {timerRunning && (
            <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-violet-400 animate-pulse" />
          )}
        </button>

        {/* Focus Mode */}
        <button
          onClick={handleFocusAction}
          className={`relative rounded-lg border p-2 transition-all cursor-pointer ${
            focusActive
              ? "border-[#ddc8ff]/45 bg-[#e8d8ff]/18 text-[#e8d8ff] shadow-[0_0_18px_rgba(216,180,255,0.16)] hover:bg-[#e8d8ff]/24"
              : "border-transparent text-white/25 hover:border-violet-400/15 hover:bg-violet-500/[0.08] hover:text-violet-300"
          }`}
          title={focusActive ? "Focus Center öffnen" : "Focus Mode starten"}
        >
          <Target className="h-4 w-4" />
          {focusActive && (
            <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-[#f2e7ff]" />
          )}
        </button>

        {/* Notifications */}
        {focusActive ? (
          <button
            type="button"
            className="rounded-lg p-2 text-[#cbb7ff]/55"
            title="Benachrichtigungen pausiert im Focus Mode"
          >
            <BellOff className="h-4 w-4" />
          </button>
        ) : (
          <NotificationCenter />
        )}

        {/* User Profile */}
        <Dropdown>
          <DropdownTrigger className="ml-1 rounded-lg p-1 transition-colors hover:bg-white/[0.04] cursor-pointer">
            <Avatar src={userAvatar} name={userName} size="sm" />
          </DropdownTrigger>

          <DropdownContent className="w-[260px] p-0" align="end" portal>
            <div className="border-b border-white/[0.06] px-4 py-3">
              <div className="flex items-center gap-3">
                <Avatar src={userAvatar} name={userName} size="md" />
                <div className="min-w-0">
                  <p className="truncate text-sm font-semibold text-white">{userName}</p>
                  <p className="truncate text-xs text-white/40">
                    {userUsername ? `@${userUsername}` : userEmail}
                  </p>
                </div>
              </div>
            </div>

            <div className="p-1.5">
              <DropdownItem onClick={() => router.push("/settings")}>
                <Settings className="h-4 w-4" />
                Settings
              </DropdownItem>
              <DropdownItem onClick={() => router.push("/notifications")}>
                <Bell className="h-4 w-4" />
                Notifications
              </DropdownItem>
              <DropdownItem destructive onClick={() => void handleSignOut()}>
                <LogOut className="h-4 w-4" />
                Sign out
              </DropdownItem>
            </div>
          </DropdownContent>
        </Dropdown>
      </div>
    </header>
  );
}