import React, { useState, useEffect, useRef } from 'react';
import { 
  Star, 
  Gift, 
  TrendingUp, 
  Users, 
  Award,
  Copy,
  CheckCircle,
  Clock,
  History,
  CreditCard
} from 'lucide-react';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import EmptyState from '../../shared/components/EmptyState';
import loyaltyService, {
  UserLoyaltyStatus,
  PointsTransaction,
  LoyaltyReward,
  RewardRedemption,
  Referral
} from '../../features/loyalty/services/loyaltyService';
import { formatDate } from '../../shared/utils/format';

type Tab = 'overview' | 'rewards' | 'history' | 'referrals';

const LoyaltyPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const [loyaltyStatus, setLoyaltyStatus] = useState<UserLoyaltyStatus | null>(null);
  const [rewards, setRewards] = useState<LoyaltyReward[]>([]);
  const [redemptions, setRedemptions] = useState<RewardRedemption[]>([]);
  const [referrals, setReferrals] = useState<Referral[]>([]);
  const [transactions, setTransactions] = useState<PointsTransaction[]>([]);
  const [loading, setLoading] = useState(true);
  const [isDisabled, setIsDisabled] = useState(false);
  const [redeeming, setRedeeming] = useState<number | null>(null);
  const [copiedCode, setCopiedCode] = useState(false);
  const [birthday, setBirthday] = useState('');
  const [anniversaryDate, setAnniversaryDate] = useState('');
  const [showRedemptionModal, setShowRedemptionModal] = useState(false);
  const [redemptionData, setRedemptionData] = useState<{ code: string; rewardName: string; pointsUsed: number } | null>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  useEffect(() => {
    // Cancel previous request if exists
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    // Create new abort controller
    abortControllerRef.current = new AbortController();

    fetchLoyaltyStatus();

    // Cleanup: abort request on unmount
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  useEffect(() => {
    // Cancel previous request if exists
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    // Create new abort controller
    abortControllerRef.current = new AbortController();

    if (activeTab === 'rewards') {
      fetchRewards();
      fetchRedemptions();
    } else if (activeTab === 'history') {
      fetchTransactions();
    } else if (activeTab === 'referrals') {
      fetchReferrals();
    }

    // Cleanup: abort request on unmount
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, [activeTab]);

  const fetchLoyaltyStatus = async () => {
    try {
      setLoading(true);
      setIsDisabled(false);
      const response = await loyaltyService.getMyStatus();
      setLoyaltyStatus(response.data);
      if (response.data.birthday) {
        setBirthday(response.data.birthday);
      }
      if (response.data.anniversary_date) {
        setAnniversaryDate(response.data.anniversary_date);
      }
    } catch (error: unknown) {
      const isAbortError = (e: unknown): boolean => {
        return typeof e === 'object' && e !== null && (e as { name?: string; code?: string }).name === 'AbortError';
        return (e as { name?: string; code?: string }).code === 'ERR_CANCELED';
      };
      // Check if the error is about loyalty program being disabled
      // FastAPI returns detail in error.response.data.detail
      // The apiClient might transform it, so check both locations
      const statusCode = getUserFriendlyError(error) || error.status;
      const errorData = error.response?.data || {};
      const errorDetail = errorData.detail || errorData.message || '';
      const errorMessage = getUserFriendlyError(error) || '';
      
      // Check if it's a 503 error (service unavailable) which indicates disabled
      // OR if the error message/detail explicitly mentions "disabled"
      // For 503 errors from loyalty status endpoint, always treat as disabled
      const isDisabledError = 
        statusCode === 503 ||
        (typeof errorDetail === 'string' && errorDetail.toLowerCase().includes('disabled')) ||
        (typeof errorMessage === 'string' && errorMessage.toLowerCase().includes('disabled'));
      
      if (isDisabledError) {
        setIsDisabled(true);
        setLoyaltyStatus(null);
        // Don't show toast for disabled state - it's not an error, just disabled
        // Return early to prevent any toast from showing
        return;
      }
      
      const isAbortError = (e: unknown): boolean => {
        if (typeof e === 'object' && e !== null) {
          const err = e as { name?: string; code?: string };
          return err.name === 'AbortError' || err.code === 'ERR_CANCELED';
        }
        return false;
      };
      if (isAbortError(error)) {
        return;
      }
      // Only show toast for actual errors (not disabled state)
      toast.error(getUserFriendlyError(error) || 'Failed to load loyalty status');
    } finally {
      setLoading(false);
    }
  };

  const fetchRewards = async () => {
    try {
      const response = await loyaltyService.getAvailableRewards();
      setRewards(response.data.rewards);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load rewards');
    }
  };

  const fetchRedemptions = async () => {
    try {
      const response = await loyaltyService.getMyRedemptions();
      setRedemptions(response.data.redemptions);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load redemptions');
    }
  };

  const fetchTransactions = async () => {
    try {
      const response = await loyaltyService.getPointsHistory(1, 50);
      setTransactions(response.data.transactions);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load transaction history');
    }
  };

  const fetchReferrals = async () => {
    try {
      const response = await loyaltyService.getMyReferrals();
      setReferrals(response.data.referrals);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load referrals');
    }
  };

  const handleRedeem = async (rewardId: number) => {
    try {
      setRedeeming(rewardId);
      const response = await loyaltyService.redeemReward(rewardId);
      
      // Find the reward name for display
      const redeemedReward = rewards.find(r => r.id === rewardId);
      const rewardName = redeemedReward?.name || 'Reward';
      
      // Show redemption success modal with code
      if (response.data?.code) {
        setRedemptionData({
          code: response.data.code,
          rewardName: rewardName,
          pointsUsed: response.data.points_used || redeemedReward?.points_cost || 0
        });
        setShowRedemptionModal(true);
      }
      
      toast.success(response.message || 'Reward redeemed successfully!');
      await Promise.all([fetchLoyaltyStatus(), fetchRewards(), fetchRedemptions()]);
    } catch (error: unknown) {
      const errorMessage = getUserFriendlyError(error) || getUserFriendlyError(error) || 'Failed to redeem reward';
      toast.error(errorMessage);
    } finally {
      setRedeeming(null);
    }
  };

  const handleCopyReferralCode = () => {
    if (loyaltyStatus?.referral_code) {
      navigator.clipboard.writeText(loyaltyStatus.referral_code);
      setCopiedCode(true);
      toast.success('Referral code copied to clipboard!');
      setTimeout(() => setCopiedCode(false), 2000);
    }
  };

  const handleUpdateInfo = async () => {
    try {
      await loyaltyService.updateMyStatus({
        birthday: birthday || undefined,
        anniversary_date: anniversaryDate || undefined,
      });
      toast.success('Information updated successfully!');
      await fetchLoyaltyStatus();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to update information');
    }
  };

  const getTierColor = (level?: string) => {
    switch (level) {
      case 'bronze':
        return 'from-orange-500 to-amber-600';
      case 'silver':
        return 'from-gray-400 to-gray-500';
      case 'gold':
        return 'from-yellow-400 to-yellow-600';
      case 'platinum':
        return 'from-purple-400 to-indigo-600';
      default:
        return 'from-gray-400 to-gray-500';
    }
  };

  const getTransactionIcon = (type: string) => {
    switch (type) {
      case 'earned':
        return <TrendingUp className="w-5 h-5 text-green-600" />;
      case 'redeemed':
        return <Gift className="w-5 h-5 text-blue-600" />;
      case 'expired':
        return <Clock className="w-5 h-5 text-red-600" />;
      case 'bonus':
        return <Award className="w-5 h-5 text-purple-600" />;
      default:
        return <History className="w-5 h-5 text-gray-600" />;
    }
  };

  if (loading && !loyaltyStatus && !isDisabled) {
    return <Loading fullScreen text="Loading loyalty program..." />;
  }

  if (isDisabled) {
    return (
      <div className="min-h-screen bg-gray-50 py-8">
        <div className="max-w-7xl mx-auto px-4">
          <EmptyState
            icon={Star}
            title="Loyalty Program Disabled"
            description="The loyalty program is currently disabled by the administrator. Please check back later."
          />
        </div>
      </div>
    );
  }

  if (!loyaltyStatus) {
    return (
      <div className="min-h-screen bg-gray-50 py-8">
        <div className="max-w-7xl mx-auto px-4">
          <EmptyState
            icon={Star}
            title="Unable to load loyalty status"
            description="Please try again later"
          />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Loyalty Program</h1>
          <p className="text-gray-600">Earn points, unlock rewards, and enjoy exclusive benefits</p>
        </div>

        {/* Status Overview Card */}
        <div className={`bg-gradient-to-br ${getTierColor(loyaltyStatus.tier?.level)} rounded-2xl shadow-xl p-8 mb-8 text-white`}>
          <div className="flex items-start justify-between mb-6">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <Award className="w-8 h-8" />
                <h2 className="text-2xl font-bold">{loyaltyStatus.tier?.name} Member</h2>
              </div>
              <p className="text-white/90">{loyaltyStatus.tier?.description}</p>
            </div>
            {loyaltyStatus.tier?.icon && (
              <div className="text-6xl opacity-50">{loyaltyStatus.tier.icon}</div>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-sm opacity-90 mb-1">Available Points</div>
              <div className="text-3xl font-bold">{loyaltyStatus.available_points.toLocaleString()}</div>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-sm opacity-90 mb-1">Lifetime Points</div>
              <div className="text-3xl font-bold">{loyaltyStatus.lifetime_points.toLocaleString()}</div>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="text-sm opacity-90 mb-1">Earn Rate</div>
              <div className="text-3xl font-bold">{loyaltyStatus.tier?.points_earn_rate}x</div>
              <div className="text-sm opacity-90">points per dollar</div>
            </div>
          </div>

          {loyaltyStatus.next_tier && (
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm opacity-90">Progress to {loyaltyStatus.next_tier.name}</span>
                <span className="text-sm font-semibold">
                  {loyaltyStatus.points_needed_for_next_tier?.toLocaleString()} points needed
                </span>
              </div>
              <div className="w-full bg-white/20 rounded-full h-3">
                <div
                  className="bg-white h-3 rounded-full transition-all"
                  style={{
                    width: `${Math.min(
                      100,
                      ((loyaltyStatus.lifetime_points / loyaltyStatus.next_tier.min_points) * 100)
                    )}%`
                  }}
                />
              </div>
            </div>
          )}
        </div>

        {/* Tabs */}
        <div className="bg-white rounded-lg shadow-sm mb-6">
          <div className="border-b border-gray-200">
            <nav className="flex -mb-px">
              {[
                { id: 'overview', label: 'Overview', icon: Star },
                { id: 'rewards', label: 'Rewards', icon: Gift },
                { id: 'history', label: 'History', icon: History },
                { id: 'referrals', label: 'Referrals', icon: Users },
              ].map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id as Tab)}
                    className={`flex items-center gap-2 px-6 py-4 font-medium text-sm border-b-2 transition-colors ${
                      activeTab === tab.id
                        ? 'border-indigo-600 text-indigo-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    {tab.label}
                  </button>
                );
              })}
            </nav>
          </div>

          <div className="p-6">
            {/* Overview Tab */}
            {activeTab === 'overview' && (
              <div className="space-y-6">
                {/* Benefits */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Tier Benefits</h3>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <p className="text-gray-700 whitespace-pre-line">
                      {loyaltyStatus.tier?.benefits || 'No benefits listed'}
                    </p>
                  </div>
                </div>

                {/* Referral Code */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Your Referral Code</h3>
                  <div className="flex items-center gap-3">
                    <div className="flex-1 bg-gray-50 rounded-lg p-4 flex items-center justify-between">
                      <code className="text-lg font-mono font-bold text-gray-900">
                        {loyaltyStatus.referral_code}
                      </code>
                      <button
                        onClick={handleCopyReferralCode}
                        className="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
                      >
                        {copiedCode ? (
                          <>
                            <CheckCircle className="w-4 h-4" />
                            Copied!
                          </>
                        ) : (
                          <>
                            <Copy className="w-4 h-4" />
                            Copy
                          </>
                        )}
                      </button>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">
                    Share your code with friends! You both get bonus points when they make their first booking.
                  </p>
                  <p className="text-sm font-semibold text-gray-900 mt-1">
                    Referrals: {loyaltyStatus.referral_count}
                  </p>
                </div>

                {/* Personal Info */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Personal Information</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Birthday (for birthday rewards)
                      </label>
                      <input
                        type="date"
                        value={birthday}
                        onChange={(e) => setBirthday(e.target.value)}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Anniversary Date (for anniversary bonuses)
                      </label>
                      <input
                        type="date"
                        value={anniversaryDate}
                        onChange={(e) => setAnniversaryDate(e.target.value)}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                      />
                    </div>
                    <button
                      onClick={handleUpdateInfo}
                      className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
                    >
                      Update Information
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* Rewards Tab */}
            {activeTab === 'rewards' && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Available Rewards</h3>
                  {rewards.length === 0 ? (
                    <EmptyState
                      icon={Gift}
                      title="No rewards available"
                      description="Check back later for new rewards"
                    />
                  ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {rewards.map((reward) => (
                        <div
                          key={reward.id}
                          className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-shadow"
                        >
                          {reward.image && (
                            <img
                              src={reward.image}
                              alt={reward.name}
                              className="w-full h-32 object-cover rounded-lg mb-3"
                            />
                          )}
                          <h4 className="font-semibold text-gray-900 mb-1">{reward.name}</h4>
                          <p className="text-sm text-gray-600 mb-3">{reward.description}</p>
                          <div className="flex items-center justify-between mb-3">
                            <span className="text-lg font-bold text-indigo-600">
                              {reward.points_cost} points
                            </span>
                            {reward.stock_remaining !== null && (
                              <span className="text-sm text-gray-500">
                                {reward.stock_remaining} left
                              </span>
                            )}
                          </div>
                          <button
                            onClick={() => handleRedeem(reward.id)}
                            disabled={!reward.is_available || !reward.can_afford || redeeming === reward.id}
                            className={`w-full py-2 rounded-lg font-medium transition-colors ${
                              reward.is_available && reward.can_afford && redeeming !== reward.id
                                ? 'bg-indigo-600 text-white hover:bg-indigo-700'
                                : 'bg-gray-200 text-gray-500 cursor-not-allowed'
                            }`}
                          >
                            {redeeming === reward.id
                              ? 'Redeeming...'
                              : !reward.can_afford
                              ? 'Insufficient Points'
                              : !reward.is_available
                              ? 'Not Available'
                              : 'Redeem Now'}
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">My Redemptions</h3>
                  {redemptions.length === 0 ? (
                    <EmptyState
                      icon={CreditCard}
                      title="No redemptions yet"
                      description="Redeem rewards to see them here"
                    />
                  ) : (
                    <div className="space-y-3">
                      {redemptions.map((redemption) => (
                        <div
                          key={redemption.id}
                          className="border border-gray-200 rounded-lg p-4 flex items-center justify-between"
                        >
                          <div>
                            <h4 className="font-semibold text-gray-900">{redemption.reward.name}</h4>
                            <p className="text-sm text-gray-600">{redemption.reward.description}</p>
                            {redemption.code && (
                              <code className="text-xs text-indigo-600 font-mono mt-1 block">
                                Code: {redemption.code}
                              </code>
                            )}
                          </div>
                          <div className="text-right">
                            <span
                              className={`px-3 py-1 rounded-full text-xs font-medium ${
                                redemption.status === 'active'
                                  ? 'bg-green-100 text-green-800'
                                  : redemption.status === 'used'
                                  ? 'bg-blue-100 text-blue-800'
                                  : redemption.status === 'expired'
                                  ? 'bg-red-100 text-red-800'
                                  : 'bg-gray-100 text-gray-800'
                              }`}
                            >
                              {redemption.status}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* History Tab */}
            {activeTab === 'history' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Points History</h3>
                {transactions.length === 0 ? (
                  <EmptyState
                    icon={History}
                    title="No transactions yet"
                    description="Your points transactions will appear here"
                  />
                ) : (
                  <div className="space-y-3">
                    {transactions.map((transaction) => (
                      <div
                        key={transaction.id}
                        className="border border-gray-200 rounded-lg p-4 flex items-center gap-4"
                      >
                        {getTransactionIcon(transaction.transaction_type)}
                        <div className="flex-1">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="font-medium text-gray-900">{transaction.description}</p>
                              <p className="text-sm text-gray-500">
                                {formatDate(transaction.created_at)} • {transaction.source}
                              </p>
                            </div>
                            <div className="text-right">
                              <p
                                className={`font-bold ${
                                  transaction.points > 0 ? 'text-green-600' : 'text-red-600'
                                }`}
                              >
                                {transaction.points > 0 ? '+' : ''}
                                {transaction.points.toLocaleString()}
                              </p>
                              {transaction.expires_at && (
                                <p className="text-xs text-gray-500">
                                  Expires: {formatDate(transaction.expires_at)}
                                </p>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Referrals Tab */}
            {activeTab === 'referrals' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">My Referrals</h3>
                {referrals.length === 0 ? (
                  <EmptyState
                    icon={Users}
                    title="No referrals yet"
                    description="Share your referral code to earn bonus points!"
                  />
                ) : (
                  <div className="space-y-3">
                    {referrals.map((referral) => (
                      <div
                        key={referral.id}
                        className="border border-gray-200 rounded-lg p-4"
                      >
                        <div className="flex items-center justify-between mb-2">
                          <div>
                            <p className="font-semibold text-gray-900">
                              {referral.referred_user?.name || 'Unknown User'}
                            </p>
                            <p className="text-sm text-gray-500">{referral.referred_user?.email}</p>
                          </div>
                          <span
                            className={`px-3 py-1 rounded-full text-xs font-medium ${
                              referral.status === 'rewarded'
                                ? 'bg-green-100 text-green-800'
                                : referral.status === 'completed'
                                ? 'bg-blue-100 text-blue-800'
                                : 'bg-yellow-100 text-yellow-800'
                            }`}
                          >
                            {referral.status}
                          </span>
                        </div>
                        {referral.status === 'rewarded' && (
                          <div className="mt-2 pt-2 border-t border-gray-200 flex items-center justify-between text-sm">
                            <span className="text-gray-600">You earned:</span>
                            <span className="font-semibold text-green-600">
                              +{referral.referrer_points_earned} points
                            </span>
                          </div>
                        )}
                        {referral.completed_at && (
                          <p className="text-xs text-gray-500 mt-2">
                            Completed: {formatDate(referral.completed_at)}
                          </p>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Redemption Success Modal */}
      {showRedemptionModal && redemptionData && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
            <div className="text-center mb-4">
              <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
              <h3 className="text-xl font-bold text-gray-900 mb-2">Reward Redeemed Successfully!</h3>
              <p className="text-gray-600 mb-4">
                You've redeemed <strong>{redemptionData.rewardName}</strong> for {redemptionData.pointsUsed.toLocaleString()} points.
              </p>
            </div>
            
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <label className="text-sm font-medium text-gray-700 mb-2 block">Your Redemption Code:</label>
              <div className="flex items-center justify-between bg-white border-2 border-indigo-500 rounded-lg p-3">
                <code className="text-lg font-mono font-bold text-gray-900">{redemptionData.code}</code>
                <button
                  onClick={() => {
                    navigator.clipboard.writeText(redemptionData.code);
                    toast.success('Code copied to clipboard!');
                  }}
                  className="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
                >
                  <Copy className="w-4 h-4" />
                  Copy
                </button>
              </div>
              <p className="text-xs text-gray-500 mt-2">
                Save this code! You can use it when booking or contact support to apply it.
              </p>
            </div>
            
            <div className="flex gap-3">
              <button
                onClick={() => {
                  setShowRedemptionModal(false);
                  setRedemptionData(null);
                }}
                className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
              >
                Close
              </button>
              <button
                onClick={() => {
                  setActiveTab('rewards');
                  setShowRedemptionModal(false);
                  setRedemptionData(null);
                }}
                className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
              >
                View My Redemptions
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default LoyaltyPage;

