'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  MessageSquare,
  Bot,
  Users,
  Phone,
  BarChart3,
  Shield,
  Globe,
  GitBranch,
  Settings,
  Smartphone,
} from 'lucide-react';
import { cn } from '@/lib/utils';

const navItems = [
  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
  { label: 'Conversations', href: '/conversations', icon: MessageSquare },
  { label: 'Bots', href: '/bots', icon: Bot },
  { label: 'Contacts', href: '/contacts', icon: Users },
  { label: 'Phone Numbers', href: '/phone-numbers', icon: Phone },
  { label: 'Connect Phone', href: '/connect-phone', icon: Smartphone, new: true },
  { label: 'Analytics', href: '/analytics', icon: BarChart3 },
  { label: 'A2P Registration', href: '/a2p', icon: Shield },
  { label: 'Landing Pages', href: '/landing-pages', icon: Globe },
  { label: 'Routing', href: '/routing', icon: GitBranch },
  { label: 'Settings', href: '/settings', icon: Settings },
];

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

  function isActive(href: string) {
    if (href === '/') return pathname === '/';
    return pathname.startsWith(href);
  }

  return (
    <aside className="fixed inset-y-0 left-0 z-50 flex w-[240px] flex-col bg-[#0f1729] border-r border-slate-800/60">
      {/* Logo */}
      <div className="flex items-center gap-3 px-5 py-6">
        <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-cyan-500/10 border border-cyan-500/20">
          <Bot className="h-5 w-5 text-cyan-400" />
        </div>
        <div>
          <h1 className="text-[15px] font-bold text-white tracking-tight">
            CloseBot SMS
          </h1>
          <p className="text-[10px] text-slate-500 font-medium tracking-wide uppercase">
            Command Center
          </p>
        </div>
      </div>

      {/* Divider */}
      <div className="mx-4 border-t border-slate-800/60" />

      {/* Nav items */}
      <nav className="flex-1 px-3 py-4 space-y-1">
        {navItems.map((item) => {
          const active = isActive(item.href);
          const Icon = item.icon;

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150',
                active
                  ? 'bg-cyan-500/10 text-cyan-400 border-l-[3px] border-cyan-400 pl-[9px]'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 border-l-[3px] border-transparent pl-[9px]'
              )}
            >
              <Icon
                className={cn(
                  'h-[18px] w-[18px] flex-shrink-0 transition-colors',
                  active ? 'text-cyan-400' : 'text-slate-500 group-hover:text-slate-300'
                )}
              />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>

      {/* Bottom version */}
      <div className="px-5 py-4 border-t border-slate-800/60">
        <div className="flex items-center gap-2">
          <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
          <span className="text-[11px] text-slate-600 font-medium">
            System Online
          </span>
        </div>
        <p className="mt-1 text-[10px] text-slate-700 font-mono">
          v1.0.0 · CloseBot SMS
        </p>
      </div>
    </aside>
  );
}
