'use client';

import { usePathname, useRouter } from 'next/navigation';
import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search, Lightbulb, Clock, Shield } from 'lucide-react';

const NAV_GROUPS = [
  {
    label: '工作区',
    items: [
      { label: '与我相关', path: '/workspace', icon: Inbox },
      { label: '产品', path: '/products', icon: Package },
      { label: '项目', path: '/projects', icon: FolderKanban },
      { label: '版本', path: '/versions', icon: Tag },
      { label: '需求池', path: '/requirements', icon: Lightbulb },
      { label: '加班记录', path: '/overtime', icon: Clock },
    ],
  },
  {
    label: '管理',
    items: [
      { label: '成员', path: '/admin/members', icon: Users },
      { label: '角色', path: '/admin/roles', icon: Shield },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();

  const isActive = (path: string) =>
    pathname === path || (path !== '/' && pathname.startsWith(path));

  return (
    <aside className="flex h-screen w-60 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
      <div className="flex h-14 items-center gap-2 px-4">
        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--accent)]">
          <LayoutGrid className="h-4 w-4 text-white" strokeWidth={2.25} />
        </div>
        <span className="text-[13px] font-semibold tracking-tight text-[var(--ink)]">FTB</span>
      </div>

      <div className="px-3 pb-2">
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
          <input
            placeholder="搜索"
            className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] pl-8 pr-2 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:bg-[var(--bg-card)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
          />
        </div>
      </div>

      <nav className="flex-1 px-2 pt-2">
        {NAV_GROUPS.map((group) => (
          <div key={group.label} className="mb-4">
            <p className="mb-1 px-2 text-[11px] font-medium text-[var(--ink-muted)]">
              {group.label}
            </p>
            {group.items.map((item) => {
              const Icon = item.icon;
              const active = isActive(item.path);
              return (
                <button
                  key={item.path}
                  onClick={() => router.push(item.path)}
                  className={`flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-[13px] transition-colors ${
                    active
                      ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent-hover)]'
                      : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]'
                  }`}
                >
                  <Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
                  <span className="truncate">{item.label}</span>
                </button>
              );
            })}
          </div>
        ))}
      </nav>

      <div className="border-t border-[var(--line)] p-2">
        <button className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-[var(--bg-subtle)]">
          <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--accent)] text-[11px] font-semibold text-white">
            A
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-[13px] font-medium text-[var(--ink)]">Admin</p>
            <p className="truncate text-[11px] text-[var(--ink-muted)]">管理员</p>
          </div>
        </button>
      </div>
    </aside>
  );
}
