import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { KeyRound, Lock, ShoppingCart } from "lucide-react";
import type { Edition } from "../../services/licenseService";
import type { FeatureKey } from "../../shared/entitlements";

interface UpsellGateProps {
  feature: FeatureKey;
  requiredTier: Edition;
  /**
   * Called right after a CTA navigates away. Lets modal hosts (e.g. the
   * ProfileSwitcher upsell dialog) close themselves — the Sidebar stays
   * mounted across navigations, so an uncontrolled modal would linger on top
   * of the destination page. Optional: route-level usage ignores it.
   */
  onNavigate?: () => void;
}

/**
 * Full locked screen shown in place of a gated module (soft paywall).
 *
 * Two CTAs:
 * - "Get <tier>" — VISIBLE but DISABLED with a "coming soon" note: the online
 *   purchase flow (#270 / Stripe) is not live yet. It will be wired by #270.
 * - "I already have a key" — the active flow, navigates to the license card
 *   at /settings/users.
 *
 * The tier label reuses the existing `license.editions.*` keys; the feature
 * description comes from `upsell.features.<FeatureKey>` (FR/EN).
 */
export default function UpsellGate({ feature, requiredTier, onNavigate }: UpsellGateProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const tier = t(`license.editions.${requiredTier}`);

  return (
    <div className="flex min-h-full items-center justify-center p-4">
      <div className="max-w-md w-full space-y-6 text-center">
        <Lock className="mx-auto h-16 w-16 text-[var(--muted-foreground)]" />

        <div className="space-y-2">
          <h1 className="text-2xl font-bold text-[var(--foreground)]">
            {t("upsell.title", { tier })}
          </h1>
          <p className="text-[var(--muted-foreground)]">
            {t(`upsell.features.${feature}`)}
          </p>
        </div>

        <div className="flex flex-col gap-3">
          <div>
            <button
              type="button"
              disabled
              className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md bg-[var(--primary)] text-[var(--primary-foreground)] opacity-50 cursor-not-allowed"
            >
              <ShoppingCart className="h-4 w-4" />
              {t("upsell.ctaGet", { tier })}
            </button>
            <p className="mt-1 text-xs text-[var(--muted-foreground)]">
              {t("upsell.ctaGetSoon")}
            </p>
          </div>

          <button
            type="button"
            onClick={() => {
              navigate("/settings/users");
              onNavigate?.();
            }}
            className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
          >
            <KeyRound className="h-4 w-4" />
            {t("upsell.ctaHaveKey")}
          </button>
        </div>
      </div>
    </div>
  );
}
