import { NavLink } from 'react-router-dom';

const FREE_NAV = [
  { to: '/dashboard', icon: '📊', label: 'Dashboard' },
  { to: '/leads',     icon: '👥', label: 'Leads'     },
  { to: '/lists',     icon: '📋', label: 'Lists'     },
  { to: '/campaigns', icon: '📣', label: 'Campaigns' },
];

const PRO_NAV = [
  { to: '/sequences',    icon: '🔄', label: 'Sequences'    },
  { to: '/funnels',      icon: '🎯', label: 'Funnels'      },
  { to: '/export',       icon: '📤', label: 'Export'       },
  { to: '/integrations', icon: '🔌', label: 'Integrations' },
];

const TOOLS_NAV = [
  { to: '/settings', icon: '⚙️', label: 'Settings' },
  { to: '/license',  icon: '🔑', label: 'License'  },
];

function NavItem({ to, icon, label }) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        `flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[0.8125rem] font-medium transition-all duration-150 relative ${
          isActive
            ? 'bg-indigo-50 text-indigo-700 font-semibold'
            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
        }`
      }
    >
      {({ isActive }) => (
        <>
          {isActive && <span className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-indigo-600 rounded-r" />}
          <span className="text-base w-5 shrink-0 text-center leading-none">{icon}</span>
          <span className="flex-1 leading-none">{label}</span>
        </>
      )}
    </NavLink>
  );
}

export default function Sidebar({ isPro }) {
  const upgradeUrl = window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro';

  return (
    <aside className="w-[220px] shrink-0 bg-white border-r border-slate-200 flex flex-col" style={{ minHeight: 'calc(100vh - 56px)' }}>
      <nav className="flex-1 overflow-y-auto py-3 px-2.5 space-y-3.5">

        {/* Core (always visible) */}
        <div>
          <p className="px-2 mb-1 text-[0.6875rem] font-bold text-slate-400 uppercase tracking-widest">Core</p>
          <div className="space-y-0.5">
            {FREE_NAV.map(item => <NavItem key={item.to} {...item} />)}
          </div>
        </div>

        {/* Pro Features */}
        <div>
          <p className="px-2 mb-1 text-[0.6875rem] font-bold text-slate-400 uppercase tracking-widest">
            Pro Features
            {!isPro && <span className="ml-1 text-[8px] font-bold text-amber-600 bg-amber-50 border border-amber-200 px-1 py-0.5 rounded">PRO</span>}
          </p>
          <div className="space-y-0.5">
            {PRO_NAV.map(item => <NavItem key={item.to} {...item} />)}
          </div>
        </div>

        {/* Tools */}
        <div>
          <p className="px-2 mb-1 text-[0.6875rem] font-bold text-slate-400 uppercase tracking-widest">Tools</p>
          <div className="space-y-0.5">
            {TOOLS_NAV.map(item => <NavItem key={item.to} {...item} />)}
          </div>
        </div>
      </nav>

      {/* Footer */}
      <div className="p-3 border-t border-slate-200">
        {!isPro ? (
          <div className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-100 rounded-xl p-4 text-center">
            <div className="text-2xl mb-2">⚡</div>
            <p className="text-xs font-bold text-slate-900 mb-1">Unlock Pro Features</p>
            <p className="text-[0.6875rem] text-slate-500 mb-3 leading-relaxed">Sequences, Funnels, Export & more</p>
            <a href={upgradeUrl} target="_blank" rel="noopener noreferrer"
              className="block w-full text-white text-xs font-bold py-2 rounded-lg transition-all hover:opacity-90"
              style={{ background: 'linear-gradient(135deg,#4f46e5,#7c3aed)' }}>
              Get Pro →
            </a>
          </div>
        ) : (
          <div className="bg-gradient-to-br from-emerald-50 to-green-50 border border-emerald-100 rounded-xl p-4 text-center">
            <div className="text-2xl mb-1">✓</div>
            <p className="text-xs font-bold text-emerald-900">Pro Active</p>
            <p className="text-[0.6875rem] text-emerald-600 leading-relaxed">All features unlocked</p>
          </div>
        )}
        <p className="text-[0.625rem] text-center text-slate-400 mt-2">v{window.rescueFill?.version || '2.1.0'}</p>
      </div>
    </aside>
  );
}