"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { clsx } from "clsx";
import { useAuth } from "@/lib/auth";
import {
  Home,
  Activity,
  LogOut,
  Globe,
  Lock,
  Settings,
  Search,
  ChevronLeft,
  ChevronRight,
  Users,
  Plus,
} from "lucide-react";
import { useVaults, useTeams } from "@/lib/use-data";
import { encodeVaultSlug } from "@/lib/types";

const navItems = [
  { href: "/", label: "Home", icon: Home },
];

export function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  const { auth, logout } = useAuth();
  const router = useRouter();
  const { vaults } = useVaults();
  const { teams } = useTeams();

  const handleLogout = () => {
    logout();
    router.push("/login");
  };

  return (
    <aside
      className={clsx(
        "fixed top-0 left-0 h-screen bg-background border-r border-border-light flex flex-col z-40 transition-all duration-200",
        collapsed ? "w-16" : "w-60"
      )}
    >
      {/* Logo */}
      <div className="flex items-center justify-between px-4 h-14 border-b border-border-light">
        {!collapsed && (
          <Link href="/" className="text-lg font-semibold text-text-primary tracking-tight">
            KnowHub
          </Link>
        )}
        <button
          onClick={() => setCollapsed(!collapsed)}
          className="p-1.5 rounded-md hover:bg-surface text-text-secondary hover:text-text-primary transition-colors"
        >
          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
        </button>
      </div>

      {/* Search */}
      <div className="px-3 py-2">
        <button
          onClick={() => {
            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
          }}
          className="w-full flex items-center gap-2 px-3 py-1.5 rounded-md border border-border text-text-secondary text-sm hover:border-text-muted transition-colors">
          <Search size={14} />
          {!collapsed && (
            <>
              <span className="flex-1 text-left">Search...</span>
              <kbd className="text-xs text-text-muted bg-surface px-1.5 py-0.5 rounded">
                &#8984;K
              </kbd>
            </>
          )}
        </button>
      </div>

      {/* Main nav */}
      <nav className="flex-1 overflow-y-auto px-2 py-2">
        {/* Primary */}
        {navItems.map(({ href, label, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className={clsx(
              "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
              pathname === href
                ? "bg-surface text-text-primary font-medium border-l-2 border-accent"
                : "text-text-secondary hover:bg-surface hover:text-text-primary"
            )}
          >
            <Icon size={18} />
            {!collapsed && <span>{label}</span>}
          </Link>
        ))}

        {/* My Vaults (private) */}
        <div className="mt-6">
          {!collapsed && (
            <span className="px-3 mb-1 block text-[11px] uppercase tracking-wider text-text-muted font-medium">
              My Vaults
            </span>
          )}
          {vaults.filter(v => v.isPrivate).slice(0, 5).map((vault) => {
            const slug = encodeVaultSlug(vault.owner, vault.name);
            return (
              <Link
                key={vault.id}
                href={`/vaults/${slug}`}
                className={clsx(
                  "flex items-center gap-3 px-3 py-1.5 rounded-md text-sm transition-colors",
                  pathname.startsWith(`/vaults/${slug}`)
                    ? "bg-surface text-text-primary"
                    : "text-text-secondary hover:bg-surface hover:text-text-primary"
                )}
              >
                <Lock size={14} className="text-text-muted shrink-0" />
                {!collapsed && <span className="truncate">{vault.name}</span>}
              </Link>
            );
          })}
          {vaults.filter(v => v.isPrivate).length > 5 && (
            <Link href="/vaults" className="px-3 py-1 text-xs text-text-muted hover:text-text-primary transition-colors">
              {!collapsed && <span>View all</span>}
            </Link>
          )}
          {vaults.filter(v => v.isPrivate).length === 0 && !collapsed && (
            <p className="px-3 py-1 text-xs text-text-muted">No private vaults</p>
          )}
        </div>

        {/* Shared Vaults (public) */}
        <div className="mt-6">
          {!collapsed && (
            <span className="px-3 mb-1 block text-[11px] uppercase tracking-wider text-text-muted font-medium">
              Shared Vaults
            </span>
          )}
          {vaults.filter(v => !v.isPrivate).slice(0, 5).map((vault) => {
            const slug = encodeVaultSlug(vault.owner, vault.name);
            return (
              <Link
                key={vault.id}
                href={`/vaults/${slug}`}
                className={clsx(
                  "flex items-center gap-3 px-3 py-1.5 rounded-md text-sm transition-colors",
                  pathname.startsWith(`/vaults/${slug}`)
                    ? "bg-surface text-text-primary"
                    : "text-text-secondary hover:bg-surface hover:text-text-primary"
                )}
              >
                <Globe size={14} className="text-accent shrink-0" />
                {!collapsed && <span className="truncate">{vault.name}</span>}
              </Link>
            );
          })}
          {vaults.filter(v => !v.isPrivate).length > 5 && (
            <Link href="/vaults" className="px-3 py-1 text-xs text-text-muted hover:text-text-primary transition-colors">
              {!collapsed && <span>View all</span>}
            </Link>
          )}
          {vaults.filter(v => !v.isPrivate).length === 0 && !collapsed && (
            <p className="px-3 py-1 text-xs text-text-muted">No shared vaults</p>
          )}
        </div>

        {/* Teams */}
        <div className="mt-6">
          {!collapsed && (
            <span className="px-3 mb-1 block text-[11px] uppercase tracking-wider text-text-muted font-medium">
              Teams
            </span>
          )}
          {teams.slice(0, 5).map((team) => (
            <Link
              key={`${team.org}-${team.slug}`}
              href={`/teams/${team.org}/${team.slug}`}
              className={clsx(
                "flex items-center gap-3 px-3 py-1.5 rounded-md text-sm transition-colors",
                pathname.startsWith(`/teams/${team.org}/${team.slug}`)
                  ? "bg-surface text-text-primary"
                  : "text-text-secondary hover:bg-surface hover:text-text-primary"
              )}
            >
              <Users size={14} className="text-text-muted shrink-0" />
              {!collapsed && (
                <span className="truncate">
                  {team.name}
                  {team.memberCount != null && (
                    <span className="text-text-muted text-xs ml-1">({team.memberCount})</span>
                  )}
                </span>
              )}
            </Link>
          ))}
          {teams.length > 5 && !collapsed && (
            <Link href="/teams" className="px-3 py-1 text-xs text-text-muted hover:text-text-primary transition-colors">
              <span>View all</span>
            </Link>
          )}
          {!collapsed && (
            <Link
              href="/teams/create"
              className="flex items-center gap-3 px-3 py-1.5 rounded-md text-sm text-text-muted hover:bg-surface hover:text-text-primary transition-colors"
            >
              <Plus size={14} className="shrink-0" />
              <span>Create Team</span>
            </Link>
          )}
        </div>
      </nav>

      {/* Bottom */}
      <div className="border-t border-border-light px-2 py-2">
        {/* User info */}
        {auth?.user && !collapsed && (
          <div className="px-3 py-2 mb-1">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 rounded-full bg-accent/20 text-accent flex items-center justify-center text-xs font-bold">
                {auth.user.login.charAt(0).toUpperCase()}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-xs font-medium text-text-primary truncate">{auth.user.login}</p>
                <p className="text-[10px] text-text-muted truncate">{auth.serverUrl.replace(/https?:\/\//, '').replace(/\/api\/v3$/, '')}</p>
              </div>
            </div>
          </div>
        )}
        <Link
          href="/settings"
          className="flex items-center gap-3 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-surface hover:text-text-primary transition-colors"
        >
          <Settings size={18} />
          {!collapsed && <span>Settings</span>}
        </Link>
        <button
          onClick={handleLogout}
          className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-surface hover:text-error transition-colors"
        >
          <LogOut size={18} />
          {!collapsed && <span>Sign out</span>}
        </button>
      </div>
    </aside>
  );
}