"use client";

import { NavLink } from "@/components/ui/nav-link";
import { Button } from "@/components/ui/button";
import {
  BarChart3,
  Database,
  DollarSign,
  PlusCircle,
  TrendingUp,
  Settings,
  Menu,
  X,
  Zap,
  Trophy,
  Key,
  MessageSquare,
  Wifi,
  Network,
  Users,
  PiggyBank,
  Smartphone,
  ShoppingCart,
} from "lucide-react";
import { useState } from "react";
import { useSession, signOut } from "next-auth/react";
import Link from "next/link";
import { LogOut } from "lucide-react";
import TokenWidget from "@/components/token/TokenWidget";

const navItems = [
  { href: "/dashboard", icon: <BarChart3 size={20} />, label: "Overview" },
  { href: "/dashboard/spending", icon: <DollarSign size={20} />, label: "Spending" },
  { href: "/dashboard/savings", icon: <PiggyBank size={20} />, label: "Savings" },
  { href: "/dashboard/add", icon: <PlusCircle size={20} />, label: "Add Entry" },
  { href: "/dashboard/projections", icon: <TrendingUp size={20} />, label: "Projections" },
  { href: "/dashboard/achievements", icon: <Trophy size={20} />, label: "Achievements" },
  { href: "/dashboard/keys", icon: <Key size={20} />, label: "API Keys" },
  { href: "/dashboard/cache", icon: <Database size={20} />, label: "Cache" },
  { href: "/dashboard/feedback", icon: <MessageSquare size={20} />, label: "Feedback" },
  { href: "/dashboard/topology", icon: <Network size={20} />, label: "Topology" },
  { href: "/dashboard/devices", icon: <Smartphone size={20} />, label: "Devices" },
  { href: "/dashboard/marketplace", icon: <ShoppingCart size={20} />, label: "Marketplace" },
  { href: "/dashboard/lan-nodes", icon: <Wifi size={20} />, label: "LAN Nodes" },
  { href: "/dashboard/token", icon: <Zap size={20} />, label: "Token" },
  { href: "/dashboard/team", icon: <Users size={20} />, label: "Team" },
  { href: "/dashboard/settings", icon: <Settings size={20} />, label: "Settings" },
];

export default function DashboardLayoutClient({
  children,
}: {
  children: React.ReactNode;
}) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { data: session } = useSession();
  const plan = (session?.user as Record<string, unknown>)?.plan as string | undefined;
  const isPaid = plan === "pro" || plan === "team" || plan === "enterprise";

  return (
    <div className="flex min-h-screen">
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-30 bg-black/60 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-gray-800 bg-gray-900 transition-transform duration-200 lg:static lg:translate-x-0 ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {/* Logo */}
        <div className="flex h-16 items-center gap-2 border-b border-gray-800 px-6">
          <Zap className="h-6 w-6 text-indigo-400" />
          <span className="text-lg font-bold text-gray-100">LLMHosts</span>
          <button
            onClick={() => setSidebarOpen(false)}
            className="ml-auto text-gray-400 hover:text-gray-100 lg:hidden"
          >
            <X size={20} />
          </button>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 px-3 py-4">
          {navItems.map((item) => (
            <NavLink
              key={item.href}
              href={item.href}
              icon={item.icon}
              label={item.label}
              onClick={() => setSidebarOpen(false)}
            />
          ))}
        </nav>

        {/* Footer */}
        <div className="border-t border-gray-800 p-4">
          <div className="mb-3 rounded-lg bg-gray-800/50 p-3">
            <p className="text-xs font-medium text-gray-400">Current Plan</p>
            <p className="text-sm font-semibold text-gray-100 capitalize">
              {plan ?? "Free"}
            </p>
          </div>
          {!isPaid && (
            <Link href="/dashboard/settings">
              <Button variant="primary" size="sm" className="w-full">
                Upgrade to Pro
              </Button>
            </Link>
          )}
          <div className="mt-3 flex items-center justify-between">
            <p className="truncate text-xs text-gray-500">
              {session?.user?.email ?? ""}
            </p>
            <button
              onClick={() => signOut({ callbackUrl: "/" })}
              className="ml-2 shrink-0 rounded p-1 text-gray-500 hover:bg-gray-800 hover:text-gray-300 transition-colors"
              title="Sign out"
            >
              <LogOut size={14} />
            </button>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <div className="flex flex-1 flex-col">
        {/* Mobile header */}
        <header className="flex h-16 items-center border-b border-gray-800 bg-gray-900 px-4 lg:hidden">
          <button
            onClick={() => setSidebarOpen(true)}
            className="text-gray-400 hover:text-gray-100"
          >
            <Menu size={24} />
          </button>
          <div className="ml-4 flex items-center gap-2">
            <Zap className="h-5 w-5 text-indigo-400" />
            <span className="font-bold text-gray-100">LLMHosts</span>
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
          {children}
        </main>
      </div>

      {/* Token quick-access widget */}
      <TokenWidget />
    </div>
  );
}
