'use client';

import React from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { MembershipTier } from '../../types/auth';
import { hasPremiumAccess, hasVipAccess } from '../../lib/auth';
import { Button } from '../ui/Button';
import { Lock, Crown, Heart } from 'lucide-react';

interface ProtectedRouteProps {
  children: React.ReactNode;
  requiredTier?: MembershipTier;
  fallback?: React.ReactNode;
}

export function ProtectedRoute({ 
  children, 
  requiredTier = MembershipTier.ODDECH,
  fallback 
}: ProtectedRouteProps) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[200px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  if (!user) {
    return fallback || (
      <div className="text-center py-12">
        <Lock className="mx-auto mb-4 text-neutral-400" size={48} />
        <h2 className="font-display text-2xl font-bold text-neutral-700 mb-2">
          Dostęp wymaga logowania
        </h2>
        <p className="text-neutral-600 mb-6">
          Zaloguj się, aby uzyskać dostęp do tej treści.
        </p>
        <Button variant="primary">
          Zaloguj się
        </Button>
      </div>
    );
  }

  // Check membership tier requirements
  const hasAccess = (() => {
    switch (requiredTier) {
      case MembershipTier.WOLNOŚĆ:
        return hasVipAccess(user);
      case MembershipTier.CZUŁOŚĆ:
        return hasPremiumAccess(user);
      case MembershipTier.ODDECH:
        return true;
      default:
        return true;
    }
  })();

  if (!hasAccess) {
    return fallback || (
      <div className="text-center py-12">
        {requiredTier === MembershipTier.WOLNOŚĆ ? (
          <Crown className="mx-auto mb-4 text-yellow-500" size={48} />
        ) : (
          <Heart className="mx-auto mb-4 text-pink-500" size={48} />
        )}
        <h2 className="font-display text-2xl font-bold text-neutral-700 mb-2">
          {requiredTier === MembershipTier.WOLNOŚĆ 
            ? 'Dostęp tylko dla członków VIP' 
            : 'Dostęp tylko dla członków Premium'
          }
        </h2>
        <p className="text-neutral-600 mb-6">
          {requiredTier === MembershipTier.WOLNOŚĆ
            ? 'Ulepsz swoje członkostwo do VIP, aby uzyskać dostęp do ekskluzywnych treści.'
            : 'Ulepsz swoje członkostwo do Premium, aby uzyskać dostęp do tej treści.'
          }
        </p>
        <div className="space-y-2">
          <Button variant="primary" className="w-full sm:w-auto">
            Ulepsz członkostwo
          </Button>
          <div className="text-sm text-neutral-500">
            Twój obecny status: {user.membershipTier}
          </div>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}