/**
 * TierGate Component
 *
 * Displays a consistent upgrade prompt when a feature requires a higher subscription tier.
 * Matches the styling from the CMS page (app/dashboard/cms/page.tsx) for consistency.
 *
 * Usage:
 * ```tsx
 * <TierGate
 *   title="Growth Tier Required"
 *   description="Lead management is available for Growth tier and above."
 *   features={['Capture leads from contact forms', 'View and manage inquiries', 'Lead form settings']}
 *   requiredTier="growth"
 * />
 * ```
 */

'use client';

import { useRouter } from 'next/navigation';
import { Card, CardBody } from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import styles from '@/app/dashboard/dashboard.module.css';

export type SubscriptionTier = 'starter' | 'growth' | 'enhanced' | 'professional';

interface TierGateProps {
  /** The main title, e.g. "Professional Tier Required" */
  title: string;
  /** Description of what the feature does */
  description: string;
  /** List of features unlocked by upgrading */
  features: string[];
  /** The minimum tier required (used for button text) */
  requiredTier: SubscriptionTier;
  /** Optional back link text and href */
  backLink?: {
    href: string;
    text: string;
  };
}

const tierDisplayNames: Record<SubscriptionTier, string> = {
  starter: 'Starter',
  growth: 'Growth',
  enhanced: 'Enhanced',
  professional: 'Professional',
};

export function TierGate({ title, description, features, requiredTier, backLink }: TierGateProps) {
  const router = useRouter();

  return (
    <section className={styles.section}>
      <div className={styles.content}>
        {backLink && (
          <div className="mb-6">
            <a
              href={backLink.href}
              className="text-cyan-400 hover:text-cyan-300 text-sm no-underline"
            >
              ← {backLink.text}
            </a>
          </div>
        )}
        <Card variant="surface">
          <CardBody>
            <div className={styles.emptyState}>
              <h2 className={styles.emptyState__title}>{title}</h2>
              <p className={styles.emptyState__description}>{description}</p>
              <p className={styles.emptyState__description}>
                Upgrade to {tierDisplayNames[requiredTier]} to unlock:
              </p>
              <ul className="text-left mt-4 ml-8 text-slate-300/90 leading-relaxed list-disc">
                {features.map((feature, index) => (
                  <li key={index}>{feature}</li>
                ))}
              </ul>
              <div className="mt-6">
                <Button
                  variant="primary"
                  size="md"
                  onClick={() => router.push('/dashboard/subscription')}
                >
                  Upgrade to {tierDisplayNames[requiredTier]}
                </Button>
              </div>
            </div>
          </CardBody>
        </Card>
      </div>
    </section>
  );
}

export default TierGate;