'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { FiSearch, FiTarget, FiList, FiTrendingUp, FiDatabase, FiSettings } from 'react-icons/fi';

const navItems = [
  { href: '/', label: 'Scout', icon: FiSearch },
  { href: '/discoveries', label: 'Discoveries', icon: FiList },
  { href: '/deep-dives', label: 'Deep Dives', icon: FiTarget },
  { href: '/compare', label: 'Compare', icon: FiTrendingUp },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="w-64 bg-[#12121a] border-r border-[#1e1e2e] h-screen sticky top-0 flex flex-col">
      {/* Logo */}
      <div className="p-6 border-b border-[#1e1e2e]">
        <Link href="/" className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gradient-to-br from-[#00d4ff] to-[#7c3aed] rounded-lg flex items-center justify-center">
            <FiDatabase className="text-white text-xl" />
          </div>
          <div>
            <h1 className="font-bold text-lg gradient-text">TECHSCOUT</h1>
            <p className="text-xs text-gray-500">Technology Discovery</p>
          </div>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-4">
        <ul className="space-y-2">
          {navItems.map(item => {
            const isActive = pathname === item.href;
            const Icon = item.icon;

            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
                    isActive
                      ? 'bg-gradient-to-r from-[#00d4ff]/20 to-[#7c3aed]/20 text-[#00d4ff] border border-[#00d4ff]/30'
                      : 'text-gray-400 hover:text-white hover:bg-[#1e1e2e]'
                  }`}
                >
                  <Icon className={isActive ? 'text-[#00d4ff]' : ''} />
                  <span className="font-medium">{item.label}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Footer */}
      <div className="p-4 border-t border-[#1e1e2e]">
        <div className="text-xs text-gray-500 text-center">
          <p>TechScout v0.1.0</p>
          <p className="mt-1">100% Local Processing</p>
        </div>
      </div>
    </aside>
  );
}