"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { clearToken, isSignedIn } from "@/lib/auth";

const NAV = [
  { href: "/", label: "Dashboard", icon: "◈" },
  { href: "/scanner", label: "Scanner", icon: "⌖" },
  { href: "/signals", label: "Signals", icon: "⚡" },
  { href: "/paper-trades", label: "Paper Trades", icon: "≋" },
  { href: "/news", label: "Market News", icon: "🗞" },
  { href: "/risk", label: "Risk Manager", icon: "⛨" },
  { href: "/backtest", label: "Backtest", icon: "↺" },
  { href: "/performance", label: "AI Performance", icon: "★" },
  { href: "/reports", label: "Daily Reports", icon: "▤" },
  { href: "/settings", label: "Settings", icon: "⚙" },
];

// Mobile bottom nav: max 5 primary items (docs/MOBILE_DESIGN_SPEC.md).
const PRIMARY = NAV.slice(0, 4);
const MORE = NAV.slice(4);

export default function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const [moreOpen, setMoreOpen] = useState(false);
  const [signedIn, setSignedIn] = useState(false);

  useEffect(() => {
    setSignedIn(isSignedIn());
  }, [pathname]);

  const signOut = () => {
    clearToken();
    setSignedIn(false);
    setMoreOpen(false);
    router.push("/login");
  };

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href);
  const moreActive = MORE.some((i) => isActive(i.href));

  return (
    <>
      {/* Mobile top brand bar */}
      <div className="md:hidden fixed top-0 inset-x-0 z-40 flex items-center justify-center bg-ink-900/95 backdrop-blur border-b border-ink-700 px-4 py-3">
        <span className="font-semibold text-slate-100">
          📡 AI Signal <span className="text-accent">Lab</span>
          <span className="ml-2 text-[9px] uppercase tracking-widest text-slate-500 align-middle">
            paper only
          </span>
        </span>
      </div>

      {/* Desktop / tablet sidebar */}
      <aside className="hidden md:block fixed z-30 top-0 left-0 h-full w-60 bg-ink-900 border-r border-ink-700">
        <div className="flex items-center gap-2 px-5 py-5 border-b border-ink-700">
          <span className="text-xl">📡</span>
          <div>
            <div className="font-semibold text-slate-100 leading-tight">
              AI Signal <span className="text-accent">Lab</span>
            </div>
            <div className="text-[10px] uppercase tracking-widest text-slate-500">
              Paper trading only
            </div>
          </div>
        </div>
        <nav className="px-3 py-4 space-y-1">
          {NAV.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
                isActive(item.href)
                  ? "bg-ink-700 text-slate-100 border border-ink-600"
                  : "text-slate-400 hover:bg-ink-850 hover:text-slate-200"
              }`}
            >
              <span className="w-4 text-center">{item.icon}</span>
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="absolute bottom-0 inset-x-0 p-4 border-t border-ink-800">
          {signedIn && (
            <button
              onClick={signOut}
              className="w-full mb-3 text-xs py-2 rounded-lg border border-ink-600 text-slate-400 hover:bg-ink-800 hover:text-slate-200"
            >
              ⎋ Sign out
            </button>
          )}
          <div className="text-[11px] text-slate-600">
            Research tool — not financial advice. No live trades are ever executed.
          </div>
        </div>
      </aside>

      {/* Mobile bottom navigation (44px+ touch targets) */}
      <nav
        className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-ink-900/95 backdrop-blur border-t border-ink-700 flex items-stretch pb-[env(safe-area-inset-bottom)]"
        aria-label="Primary"
      >
        {PRIMARY.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            onClick={() => setMoreOpen(false)}
            className={`flex-1 flex flex-col items-center justify-center gap-0.5 min-h-[52px] text-[10px] ${
              isActive(item.href) ? "text-accent" : "text-slate-400"
            }`}
          >
            <span className="text-lg leading-none">{item.icon}</span>
            {item.label.split(" ")[0]}
          </Link>
        ))}
        <button
          onClick={() => setMoreOpen(!moreOpen)}
          aria-label="More pages"
          aria-expanded={moreOpen}
          className={`flex-1 flex flex-col items-center justify-center gap-0.5 min-h-[52px] text-[10px] ${
            moreOpen || moreActive ? "text-accent" : "text-slate-400"
          }`}
        >
          <span className="text-lg leading-none">⋯</span>
          More
        </button>
      </nav>

      {/* Mobile "More" bottom sheet */}
      {moreOpen && (
        <>
          <div
            className="md:hidden fixed inset-0 z-40 bg-black/60"
            onClick={() => setMoreOpen(false)}
          />
          <div className="md:hidden fixed bottom-[calc(52px+env(safe-area-inset-bottom))] inset-x-2 z-50 card p-2 motion-safe:animate-[fadeup_0.2s_ease-out]">
            {MORE.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setMoreOpen(false)}
                className={`flex items-center gap-3 rounded-lg px-4 py-3.5 text-sm ${
                  isActive(item.href) ? "bg-ink-700 text-slate-100" : "text-slate-300"
                }`}
              >
                <span className="w-5 text-center">{item.icon}</span>
                {item.label}
              </Link>
            ))}
            {signedIn && (
              <button
                onClick={signOut}
                className="w-full flex items-center gap-3 rounded-lg px-4 py-3.5 text-sm text-slate-400 border-t border-ink-800 mt-1"
              >
                <span className="w-5 text-center">⎋</span>
                Sign out
              </button>
            )}
          </div>
        </>
      )}
    </>
  );
}