"use client";
import Link from "next/link";
import { useState } from "react";

const navLinks = [
  { href: "/", label: "仪表盘" },
  { href: "/history", label: "历史" },
  { href: "/signals", label: "信号" },
  { href: "/about", label: "说明" },
];

export default function Navbar() {
  const [open, setOpen] = useState(false);

  return (
    <nav className="border-b border-slate-700 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
      <div className="max-w-6xl mx-auto px-4 h-14 flex items-center">
        <Link href="/" className="font-bold text-cyan-400 tracking-tight text-lg shrink-0">
          ⚡ Arbitrage Engine
        </Link>

        {/* Desktop nav */}
        <div className="hidden md:flex items-center gap-6 text-sm ml-8">
          {navLinks.map(l => (
            <Link key={l.href} href={l.href} className="text-slate-300 hover:text-cyan-400 transition-colors">
              {l.label}
            </Link>
          ))}
        </div>
        <div className="hidden md:flex items-center gap-3 text-sm ml-auto">
          <Link href="/login" className="text-slate-400 hover:text-slate-200 transition-colors">登录</Link>
          <Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded-lg transition-colors">注册</Link>
        </div>

        {/* Mobile: right side buttons + hamburger */}
        <div className="md:hidden ml-auto flex items-center gap-2">
          <Link href="/login" className="text-slate-400 hover:text-slate-200 text-sm transition-colors">登录</Link>
          <Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-2 py-1 rounded text-sm transition-colors">注册</Link>
          <button
            onClick={() => setOpen(!open)}
            className="ml-1 p-2 text-slate-400 hover:text-slate-200"
            aria-label="菜单"
          >
            {open ? (
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            )}
          </button>
        </div>
      </div>

      {/* Mobile dropdown */}
      {open && (
        <div className="md:hidden border-t border-slate-700 bg-slate-900 px-4 py-3 space-y-1">
          {navLinks.map(l => (
            <Link
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className="block py-2 text-slate-300 hover:text-cyan-400 transition-colors text-sm"
            >
              {l.label}
            </Link>
          ))}
        </div>
      )}
    </nav>
  );
}
