import React, { useState, useEffect } from 'react';

// Import components and hooks
import { useSEO } from '../hooks/useSEO';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';


// Import custom components
import ShareableImage from '../components/ShareableImage';

const Profile: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const { user, userData, isAuthenticated } = useAuthStore();

  // SEO optimization for Profile page
  useSEO({
    title: 'My Profile - AiFigure | Manage Your AI Action Figure Creations',
    description: 'View and manage your AI-generated action figures, account settings, and token balance. Track your creative journey with AiFigure\'s AI art generation platform.',
    keywords: 'AiFigure profile, my AI action figures, account settings, token balance, AI art portfolio, user dashboard, generated images gallery',
    ogTitle: 'My Profile - AiFigure | Manage Your AI Action Figure Creations',
    ogDescription: 'View and manage your AI-generated action figures, account settings, and token balance. Track your creative journey with AiFigure.',
    ogImage: 'https://aifigure.com/profile-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'My Profile - AiFigure | Manage Your AI Action Figure Creations',
    twitterDescription: 'View and manage your AI-generated action figures, account settings, and token balance. Track your creative journey with AiFigure.',
    twitterImage: 'https://aifigure.com/profile-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });


  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/auth');
      return;
    }

    // User data is now managed centrally by the auth store
    if (userData) {
      setLoading(false);
    }
  }, [isAuthenticated, userData, navigate]);



  // const getTierInfo = (tier: string) => {
  //   switch (tier) {
  //     case 'free':
  //       return { name: 'Free', color: 'bg-gray-600', monthlyTokens: 25 };
  //     case 'basic':
  //       return { name: 'Basic', color: 'bg-blue-600', monthlyTokens: 50 };
  //     case 'pro':
  //       return { name: 'Pro', color: 'bg-purple-600', monthlyTokens: 200 };
  //     case 'premium':
  //       return { name: 'Premium', color: 'bg-yellow-600', monthlyTokens: 1000 };
  //     default:
  //       return { name: 'Free', color: 'bg-gray-600', monthlyTokens: 25 };
  //   }
  // };

  if (loading) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="text-white">Loading profile...</div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-white mb-4">Please sign in</h1>
          <p className="text-gray-400">You need to be signed in to view your profile.</p>
        </div>
      </div>
    );
  }

  if (!userData) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto mb-4"></div>
          <h1 className="text-2xl font-bold text-white mb-4">Loading your profile...</h1>
          <p className="text-gray-400">Fetching your account information.</p>
        </div>
      </div>
    );
  }


  return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Profile Header */}
        <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-4 mb-8">
          <div className="flex items-center space-x-6">
           
            <div>
              <h1 className="text-3xl font-bold">{user.email?.split('@')[0]}</h1>
              <p className="text-gray-400">{user.email}</p>
              {/* <div className="flex items-center mt-2">
                <span className={`px-3 py-1 rounded-full text-sm font-medium ${tierInfo.color} text-white`}>
                  {tierInfo.name} Plan
                </span>
                <span className="ml-4 text-gray-400">
                  Member since {userData.createdAt.toLocaleDateString()}
                </span>
              </div> */}
            </div>
          </div>
        </div>

        {/* Token Balance Card */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-2xl font-bold mb-2">Token Balance</h2>
              <p className="text-blue-100">Available for AI generation</p>
            </div>
            <div className="text-right">
              <div className="text-4xl font-bold">{userData.tokens}</div>
              <div className="text-blue-100">tokens remaining</div>
            </div>
          </div>
        </div>

        {/* Subscription Info */}
        {/* <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-8 mb-8">
          <h2 className="text-2xl font-bold mb-6">Subscription Details</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="text-3xl font-bold text-blue-400">{tierInfo.monthlyTokens}</div>
              <div className="text-gray-400">Monthly Tokens</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-green-400">{userData.generatedImages.length}</div>
              <div className="text-gray-400">Images Generated</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-purple-400">
                {userData.generatedImages.length > 0 ? Math.round(userData.generatedImages.length / 30 * 30) : 0}
              </div>
              <div className="text-gray-400">Avg per Month</div>
            </div>
          </div>
        </div> */}

        {/* Recent Generations */}
        <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-8">
          <h2 className="text-2xl font-bold mb-6">My Generations</h2>

          {userData.generatedImages.length === 0 ? (
            <div className="text-center py-12 flex flex-col items-center">
              <div className="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-300 mb-2">No generations yet</h3>
              <p className="text-gray-500">Start creating amazing action figures!</p>
              <div className="cursor-pointer w-[220px] mt-8 bg-gradient-to-r from-blue-700 to-purple-500 rounded-full p-4 text-white text-center font-bold"
                onClick={() => navigate('/create')}
              >
                + Create your own now
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {userData.generatedImages
                .sort((a, b) => {
                  const dateA = a.createdAt?.toDate?.() || new Date(a.createdAt);
                  const dateB = b.createdAt?.toDate?.() || new Date(b.createdAt);
                  return dateB.getTime() - dateA.getTime(); // Sort latest first
                })
                .map((image: any, index: number) => {
                  const imageId = image.id || `user-${user.uid}-${index}`;
                  const createdAt = image.createdAt?.toDate?.() || new Date(image.createdAt);
                  console.log(`🔍 Profile image ${index}:`, {
                    hasId: !!image.id,
                    imageId,
                    createdAt: createdAt.toISOString(),
                    imageUrl: image.imageUrl?.substring(0, 50) + '...'
                  });
                  return (
                    <ShareableImage
                      key={index}
                      image={image}
                      imageId={imageId}
                      showShareButton={true}
                    />
                  );
                })}
            </div>
          )}
        </div>
      </div>

    </div>
  );
};

export default Profile;