smoothschedule/frontend/src/components/UpgradePrompt.tsx

/**
 * UpgradePrompt Component
 *
 * Shows a locked state with upgrade prompt for features not available in current plan
 */

import React from 'react';
import { Lock, Crown, ArrowUpRight } from 'lucide-react';
import { FeatureKey, FEATURE_NAMES, FEATURE_DESCRIPTIONS } from '../hooks/usePlanFeatures';
import { Link } from 'react-router-dom';

interface UpgradePromptProps {
  feature: FeatureKey;
  children?: React.ReactNode;
  variant?: 'inline' | 'overlay' | 'banner';
  size?: 'sm' | 'md' | 'lg';
  showDescription?: boolean;
}

/**
 * Inline variant - Small badge for locked features
 */
const InlinePrompt: React.FC<{ feature: FeatureKey }> = ({ feature }) => (
  <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-amber-50 text-amber-700 text-xs font-medium border border-amber-200">
    <Lock className="w-3 h-3" />
    <span>Upgrade Required</span>
  </div>
);

/**
 * Banner variant - Full-width banner for locked sections
 */
const BannerPrompt: React.FC<{ feature: FeatureKey; showDescription: boolean }> = ({
  feature,
  showDescription
}) => (
  <div className="rounded-lg border-2 border-amber-300 bg-gradient-to-br from-amber-50 to-orange-50 p-6">
    <div className="flex items-start gap-4">
      <div className="flex-shrink-0">
        <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
          <Crown className="w-6 h-6 text-white" />
        </div>
      </div>
      <div className="flex-1">
        <h3 className="text-lg font-semibold text-gray-900 mb-1">
          {FEATURE_NAMES[feature]} - Upgrade Required
        </h3>
        {showDescription && (
          <p className="text-gray-600 mb-4">
            {FEATURE_DESCRIPTIONS[feature]}
          </p>
        )}
        <Link
          to="/settings/billing"
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium hover:from-amber-600 hover:to-orange-600 transition-all shadow-md hover:shadow-lg"
        >
          <Crown className="w-4 h-4" />
          Upgrade Your Plan
          <ArrowUpRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  </div>
);

/**
 * Overlay variant - Overlay on top of disabled content
 */
const OverlayPrompt: React.FC<{
  feature: FeatureKey;
  children?: React.ReactNode;
  size: 'sm' | 'md' | 'lg';
}> = ({ feature, children, size }) => {
  const sizeClasses = {
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8',
  };

  return (
    <div className="relative">
      {/* Disabled content */}
      <div className="pointer-events-none opacity-50 blur-sm">
        {children}
      </div>

      {/* Overlay */}
      <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-white/90 to-gray-50/90 backdrop-blur-sm">
        <div className={`text-center ${sizeClasses[size]}`}>
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 mb-4 shadow-lg">
            <Lock className="w-8 h-8 text-white" />
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">
            {FEATURE_NAMES[feature]}
          </h3>
          <p className="text-gray-600 mb-4 max-w-md">
            {FEATURE_DESCRIPTIONS[feature]}
          </p>
          <Link
            to="/settings/billing"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium hover:from-amber-600 hover:to-orange-600 transition-all shadow-md hover:shadow-lg"
          >
            <Crown className="w-5 h-5" />
            Upgrade Your Plan
            <ArrowUpRight className="w-5 h-5" />
          </Link>
        </div>
      </div>
    </div>
  );
};

/**
 * Main UpgradePrompt Component
 */
export const UpgradePrompt: React.FC<UpgradePromptProps> = ({
  feature,
  children,
  variant = 'banner',
  size = 'md',
  showDescription = true,
}) => {
  if (variant === 'inline') {
    return <InlinePrompt feature={feature} />;
  }

  if (variant === 'overlay') {
    return <OverlayPrompt feature={feature} size={size}>{children}</OverlayPrompt>;
  }

  // Default to banner
  return <BannerPrompt feature={feature} showDescription={showDescription} />;
};

/**
 * Locked Section Wrapper
 *
 * Wraps a section and shows upgrade prompt if feature is not available
 */
interface LockedSectionProps {
  feature: FeatureKey;
  isLocked: boolean;
  children: React.ReactNode;
  variant?: 'overlay' | 'banner';
  fallback?: React.ReactNode;
}

export const LockedSection: React.FC<LockedSectionProps> = ({
  feature,
  isLocked,
  children,
  variant = 'banner',
  fallback,
}) => {
  if (!isLocked) {
    return <>{children}</>;
  }

  if (fallback) {
    return <>{fallback}</>;
  }

  if (variant === 'overlay') {
    return (
      <UpgradePrompt feature={feature} variant="overlay">
        {children}
      </UpgradePrompt>
    );
  }

  return <UpgradePrompt feature={feature} variant="banner" />;
};

/**
 * Locked Button
 *
 * Shows a disabled button with lock icon for locked features
 */
interface LockedButtonProps {
  feature: FeatureKey;
  isLocked: boolean;
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
}

export const LockedButton: React.FC<LockedButtonProps> = ({
  feature,
  isLocked,
  children,
  className = '',
  onClick,
}) => {
  if (isLocked) {
    return (
      <div className="relative group inline-block">
        <button
          disabled
          className={`${className} opacity-50 cursor-not-allowed flex items-center gap-2`}
        >
          <Lock className="w-4 h-4" />
          {children}
        </button>
        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
          {FEATURE_NAMES[feature]} - Upgrade Required
          <div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
        </div>
      </div>
    );
  }

  return (
    <button onClick={onClick} className={className}>
      {children}
    </button>
  );
};