import { useEffect, useState } from 'react';
import collectionMetadata from '../data/collection-metadata.json';

interface NFT {
  id: string;
  name: string;
  image: string;
  description: string;
  animation_url?: string;
  external_url?: string;
  attributes?: Array<{
    trait_type: string;
    value: string;
  }>;
}

export default function Gallery() {
  const [nfts, setNfts] = useState<NFT[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchNFTs = async () => {
      try {
        // Convert the collection metadata array into our NFT format
        const nftData: NFT[] = collectionMetadata.map((nft, index) => ({
          id: (index + 1).toString(),
          name: nft.name,
          image: nft.image,
          description: nft.description,
          animation_url: nft.animation_url,
          external_url: nft.external_url,
          attributes: nft.attributes
        }));
        
        setNfts(nftData);
        setLoading(false);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to fetch NFTs');
        setLoading(false);
      }
    };

    fetchNFTs();
  }, []);

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border-l-4 border-red-400 p-4">
        <div className="flex">
          <div className="flex-shrink-0">
            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
          </div>
          <div className="ml-3">
            <p className="text-sm text-red-700">{error}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {nfts.map((nft) => (
        <div key={nft.id} className="bg-white overflow-hidden shadow rounded-lg">
          <div className="p-4">
            <img
              src={nft.image}
              alt={nft.name}
              className="w-full h-48 object-cover rounded-lg"
            />
            <h3 className="mt-4 text-lg font-medium text-gray-900">{nft.name}</h3>
            <p className="mt-1 text-sm text-gray-500">{nft.description}</p>
            
            {nft.attributes && nft.attributes.length > 0 && (
              <div className="mt-4">
                <h4 className="text-sm font-medium text-gray-900">Attributes</h4>
                <div className="mt-2 grid grid-cols-2 gap-2">
                  {nft.attributes.map((attr, index) => (
                    <div key={index} className="bg-gray-50 p-2 rounded">
                      <p className="text-xs text-gray-500">{attr.trait_type}</p>
                      <p className="text-sm font-medium text-gray-900">{attr.value}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {nft.external_url && (
              <a
                href={nft.external_url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-4 inline-flex items-center text-sm text-blue-600 hover:text-blue-800"
              >
                View on External Site
                <svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                </svg>
              </a>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}