import { useTranslation } from "react-i18next";
import { NavLink } from "react-router-dom";
import {
  LayoutDashboard,
  Upload,
  ArrowLeftRight,
  Tags,
  SlidersHorizontal,
  PiggyBank,
  BarChart3,
  Wallet,
  Settings,
  Languages,
  Lock,
  Moon,
  Sun,
} from "lucide-react";
import { NAV_ITEMS, APP_NAME } from "../../shared/constants";
import { useEntitlement } from "../../hooks/useEntitlement";
import { useTheme } from "../../hooks/useTheme";
import type { FeatureKey } from "../../shared/entitlements";
import ProfileSwitcher from "../profile/ProfileSwitcher";

const iconMap: Record<string, React.ComponentType<{ size?: number }>> = {
  LayoutDashboard,
  Upload,
  ArrowLeftRight,
  Tags,
  SlidersHorizontal,
  PiggyBank,
  BarChart3,
  Wallet,
  Settings,
};

/**
 * Lock badge next to a gated nav item. Rendered as a child component so the
 * useEntitlement hook runs at a component top level (never inside the
 * NAV_ITEMS.map callback). Shown ONLY when the license is `ready` AND the
 * feature is not allowed — never during boot, so a paying user sees no
 * "locked" flash. The item itself stays clickable (route shows the upsell).
 */
function NavLock({ feature }: { feature: FeatureKey }) {
  const { t } = useTranslation();
  const { allowed, ready } = useEntitlement(feature);

  if (!ready || allowed) return null;

  return (
    <span
      className="ml-auto opacity-60"
      title={t("nav.locked")}
      aria-label={t("nav.locked")}
      role="img"
    >
      <Lock size={14} aria-hidden="true" />
    </span>
  );
}

export default function Sidebar() {
  const { t, i18n } = useTranslation();
  const { theme, toggleTheme } = useTheme();

  const toggleLanguage = () => {
    const next = i18n.language === "fr" ? "en" : "fr";
    i18n.changeLanguage(next);
  };

  return (
    <aside className="flex flex-col w-60 h-screen bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)]">
      <div className="p-5 border-b border-white/10">
        <h1 className="text-lg font-bold tracking-tight">{APP_NAME}</h1>
      </div>

      <ProfileSwitcher />

      <nav className="flex-1 py-4 space-y-1 px-3">
        {NAV_ITEMS.map((item) => {
          const Icon = iconMap[item.icon];
          return (
            <NavLink
              key={item.key}
              to={item.path}
              className={({ isActive }) =>
                `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  isActive
                    ? "bg-[var(--sidebar-active)] text-white"
                    : "text-[var(--sidebar-fg)] hover:bg-[var(--sidebar-hover)]"
                }`
              }
            >
              {Icon && <Icon size={18} />}
              <span>{t(item.labelKey)}</span>
              {item.feature && <NavLock feature={item.feature} />}
            </NavLink>
          );
        })}
      </nav>

      <div className="p-3 border-t border-white/10 space-y-1">
        <button
          onClick={toggleTheme}
          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm hover:bg-[var(--sidebar-hover)] transition-colors"
        >
          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
          <span>{theme === "dark" ? t("common.lightMode") : t("common.darkMode")}</span>
        </button>
        <button
          onClick={toggleLanguage}
          className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm hover:bg-[var(--sidebar-hover)] transition-colors"
        >
          <Languages size={18} />
          <span>{i18n.language === "fr" ? "English" : "Français"}</span>
        </button>
      </div>
    </aside>
  );
}
