"use client";

import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useApp } from "@/lib/app-context";
import { useAuth } from "@/lib/auth-context";
import { ProfileModal } from "@/components/profile-modal";
import { ProjectSwitcher } from "./project-switcher";
import { slideUp } from "@/components/ui/motion-presets";

const NAV_ITEMS = [
  {
    href: "/",
    label: "工作台",
    phase: "Phase 0",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
      </svg>
    ),
  },
  {
    href: "/docs",
    label: "文档",
    phase: "Phase 1",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
        <polyline points="14 2 14 8 20 8" />
        <line x1="8" y1="13" x2="16" y2="13" />
        <line x1="8" y1="17" x2="13" y2="17" />
      </svg>
    ),
  },
  {
    href: "/gallery",
    label: "资源库",
    phase: "Phase 0",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
        <circle cx="8.5" cy="8.5" r="1.5" />
        <polyline points="21 15 16 10 5 21" />
      </svg>
    ),
  },
  {
    href: "/styles",
    label: "风格库",
    phase: "Phase 1",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <circle cx="13.5" cy="6.5" r=".5" />
        <circle cx="17.5" cy="10.5" r=".5" />
        <circle cx="8.5" cy="7.5" r=".5" />
        <circle cx="6.5" cy="12.5" r=".5" />
        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.55 0 1-.45 1-1v-3.5c0-.55.45-1 1-1h2c2.76 0 5-2.24 5-5 0-5.5-4.5-9.5-10-9.5z" />
      </svg>
    ),
  },
  {
    href: "/characters",
    label: "角色库",
    phase: "Phase 1",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </svg>
    ),
  },
  {
    href: "/training",
    label: "训练中心",
    phase: "Phase 2",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M12 2L3 7v5c0 5 3.8 9.7 9 11 5.2-1.3 9-6 9-11V7l-9-5z" />
      </svg>
    ),
  },
] as const;

export function TopNav() {
  const pathname = usePathname();
  const { sidebarCollapsed, setSidebarCollapsed } = useApp();
  const { user, logout } = useAuth();
  const [menuOpen, setMenuOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

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

  return (
  <>
    <header className="relative z-10 flex-shrink-0 h-14 border-b border-[var(--border)] surface-1 backdrop-blur-xl flex items-center px-4 md:px-5 gap-3 md:gap-5">
      {/* 移动端汉堡菜单 */}
      <button
        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
        className="md:hidden flex-shrink-0 p-1.5 rounded-md
                   text-[var(--text-secondary)] hover:text-[var(--accent)]
                   transition-colors cursor-pointer"
        title="菜单"
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M3 12h18M3 6h18M3 18h18" />
        </svg>
      </button>

      {/* Logo */}
      <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 group">
        <div className="w-8 h-8 rounded-lg bg-[var(--accent)] flex items-center justify-center
                        shadow-[0_0_12px_rgba(46,139,122,0.25)]
                        group-hover:shadow-[0_0_20px_rgba(46,139,122,0.4)] transition-shadow">
          <svg width="18" height="18" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="white" />
            <circle cx="23" cy="12" r="3.5" stroke="white" strokeWidth="1.8" fill="none" />
            <path d="M23 15.5v5" stroke="white" strokeWidth="1.8" strokeLinecap="round" />
            <circle cx="23" cy="22.5" r="1" fill="white" />
          </svg>
        </div>
        <span className="text-base font-bold tracking-tight text-[var(--text-primary)] hidden sm:inline">
          EPEEKit
        </span>
      </Link>

      {/* 项目切换器 */}
      <ProjectSwitcher />

      {/* 导航 Tab */}
      <nav className="flex items-center gap-1 overflow-x-auto hide-scrollbar">
        {NAV_ITEMS.map(({ href, label, icon, phase }) => {
          const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              className={`relative flex items-center gap-1.5 px-2.5 md:px-3.5 py-2 text-sm rounded-lg transition-all whitespace-nowrap ${
                active
                  ? "glow-border text-[var(--accent)] font-medium !bg-[var(--bg-secondary)]"
                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-transparent hover:border-[var(--border-glow)]"
              }`}
              title={`${label}（${phase}）`}
            >
              {icon}
              <span className="hidden md:inline">{label}</span>
              {phase !== "Phase 0" && (
                <span
                  className="hidden lg:inline text-[9px] px-1 py-px rounded font-semibold"
                  style={{
                    background: "rgba(184, 147, 90, 0.12)",
                    color: "var(--gold)",
                  }}
                >
                  {phase.replace("Phase ", "P")}
                </span>
              )}
            </Link>
          );
        })}
      </nav>

      <div className="flex-1" />

      {/* 用户菜单 */}
      {user && (
        <div className="relative" ref={menuRef}>
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm
                       text-[var(--text-secondary)] hover:text-[var(--text-primary)]
                       hover:bg-[var(--bg-tertiary)] border border-transparent
                       hover:border-[var(--border)] transition-all cursor-pointer"
          >
            <div className="w-7 h-7 rounded-full bg-[var(--accent)]/15 border border-[var(--accent)]/30
                            flex items-center justify-center text-[var(--accent)] text-xs font-semibold">
              {(user.display_name || user.username).charAt(0).toUpperCase()}
            </div>
            <span className="hidden sm:inline max-w-[80px] truncate">
              {user.display_name || user.username}
            </span>
          </button>
          <AnimatePresence>
            {menuOpen && (
              <motion.div
                variants={slideUp}
                initial="hidden"
                animate="visible"
                exit={{ opacity: 0, y: 4, transition: { duration: 0.1 } }}
                className="absolute right-0 top-full mt-1.5 w-56 rounded-xl
                            surface-3 py-1.5 z-50"
              >
                <div className="px-3.5 py-2 text-xs text-[var(--text-secondary)]
                                border-b border-[var(--border)] flex items-center gap-1.5">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                  <span className="truncate">{user.username}</span>
                  {user.is_admin && <span className="text-[var(--accent)] font-medium">(管理员)</span>}
                </div>
                <button
                  onClick={() => { setMenuOpen(false); setProfileOpen(true); }}
                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-primary)]
                             hover:bg-[var(--bg-tertiary)] cursor-pointer transition-colors
                             flex items-center gap-2"
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                  </svg>
                  个人信息 / 记忆
                </button>
                <Link
                  href="/settings"
                  onClick={() => setMenuOpen(false)}
                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-primary)]
                             hover:bg-[var(--bg-tertiary)] cursor-pointer transition-colors
                             flex items-center gap-2"
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <circle cx="12" cy="12" r="3" />
                    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
                  </svg>
                  项目设置
                  <span className="ml-auto text-[9px] px-1 py-px rounded font-semibold"
                        style={{ background: "rgba(184, 147, 90, 0.12)", color: "var(--gold)" }}>
                    P1
                  </span>
                </Link>
                <button
                  onClick={() => { setMenuOpen(false); alert("全局设置（Phase 2 规划中）\n- API Key 配置\n- 界面偏好\n- 通知设置"); }}
                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-secondary)]
                             hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]
                             cursor-pointer transition-colors flex items-center gap-2"
                  title="Phase 2 占位"
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 20V10M6 20v-5M18 20V4" />
                  </svg>
                  全局设置
                  <span className="ml-auto text-[9px] px-1 py-px rounded font-semibold"
                        style={{ background: "rgba(184, 147, 90, 0.12)", color: "var(--gold)" }}>
                    P2
                  </span>
                </button>
                <div className="border-t border-[var(--border)] my-1" />
                <button
                  onClick={() => { setMenuOpen(false); logout(); }}
                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-secondary)]
                             hover:text-[var(--hot)] hover:bg-[var(--bg-tertiary)]
                             transition-colors cursor-pointer flex items-center gap-2"
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" />
                  </svg>
                  退出登录
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      )}
    </header>

    {profileOpen && <ProfileModal onClose={() => setProfileOpen(false)} />}
  </>
  );
}