'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Lock } from 'lucide-react';
import { usePlanFeatures } from '@client/contexts/PlanFeaturesContext';
import { useLanguage } from '@client/contexts/LanguageContext';

interface FeatureGuardProps {
  feature: string;
  children: React.ReactNode;
}

export default function FeatureGuard({ feature, children }: FeatureGuardProps) {
  const { hasFeature, loading } = usePlanFeatures();
  const { t } = useLanguage();
  const router = useRouter();
  const allowed = hasFeature(feature);

  useEffect(() => {
    if (!loading && !allowed) {
      router.replace('/billing?reason=feature_not_included');
    }
  }, [loading, allowed, router]);

  if (loading) return null;

  if (!allowed) {
    return (
      <div className="flex flex-col items-center justify-center py-24 text-center gap-4">
        <div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'hsl(var(--muted))' }}>
          <Lock size={24} style={{ color: 'hsl(var(--muted-foreground))' }} />
        </div>
        <div>
          <p className="font-bold text-base mb-1" style={{ color: 'hsl(var(--foreground))' }}>
            {t('featureGuard.notIncluded', 'Not included in your plan')}
          </p>
          <p className="text-sm" style={{ color: 'hsl(var(--muted-foreground))' }}>
            {t('featureGuard.upgradePrompt', 'Upgrade your subscription to access this feature.')}
          </p>
        </div>
        <a
          href="/billing"
          className="btn-primary"
        >
          {t('featureGuard.viewPlans', 'View Plans')}
        </a>
      </div>
    );
  }

  return <>{children}</>;
}
