import { NavLink } from 'react-router-dom';
import { Book, Home, Key, Folder, Settings, FileCode, FileText, ExternalLink, Database, GitBranch } from 'lucide-react';
import { cn } from '@/utils/cn';

const navItems = [
  { to: '/', icon: Home, label: 'Главная' },
  { to: '/workbench', icon: Database, label: 'SQL интерфейс' },
  { to: '/schema', icon: GitBranch, label: 'Схема БД' },
  { to: '/endpoints', icon: FileCode, label: 'Эндпоинты' },
  { to: '/folders', icon: Folder, label: 'Папки' },
  { to: '/api-keys', icon: Key, label: 'API Ключи' },
  { to: '/logs', icon: FileText, label: 'Логи' },
  { to: '/settings', icon: Settings, label: 'Настройки' },
  { to: '/api-docs', icon: Book, label: 'Swagger', external: true },
];

export default function Sidebar() {
  return (
    <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
      <div className="flex-1 py-6">
        <nav className="space-y-1 px-3">
          {navItems.map(({ to, icon: Icon, label, external }) => {
            const linkClasses = 'flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-gray-700 hover:bg-gray-50';
            const activeClasses = 'bg-primary-50 text-primary-700 font-medium';

            if (external) {
              return (
                <a
                  key={to}
                  href={to}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={linkClasses}
                >
                  <Icon size={20} />
                  <span>{label}</span>
                  <ExternalLink size={14} className="ml-auto opacity-50" />
                </a>
              );
            }

            return (
              <NavLink
                key={to}
                to={to}
                className={({ isActive }) =>
                  cn(
                    linkClasses,
                    isActive && activeClasses
                  )
                }
              >
                <Icon size={20} />
                <span>{label}</span>
              </NavLink>
            );
          })}
        </nav>
      </div>

      <div className="p-4 border-t border-gray-200">
        <div className="text-xs text-gray-500">
          <p className="font-semibold">KIS API Builder v1.0</p>
        </div>
      </div>
    </aside>
  );
}