"use client";

import React, { useState } from 'react';
import { useCollectionProducts } from '@/hooks/use-shopify-collections';
import ProductCard from './ProductCard';
import ProductModal from './ProductModal';
import { Button } from './ui/button';

interface ProductImage {
  url: string;
  altText?: string;
}

interface ProductPrice {
  amount: string;
  currencyCode: string;
}

interface ProductVariant {
  id: string;
  title: string;
  price: ProductPrice;
  availableForSale: boolean;
}

interface Product {
  id: string;
  title: string;
  description?: string;
  handle: string;
  images: {
    edges: Array<{
      node: ProductImage;
    }>;
  };
  priceRange: {
    minVariantPrice: ProductPrice;
  };
  compareAtPriceRange?: {
    minVariantPrice: ProductPrice;
  };
  variants: {
    edges: Array<{
      node: ProductVariant;
    }>;
  };
}

interface CollectionDetailProps {
  collectionHandle?: string;
}

const CollectionDetail: React.FC<CollectionDetailProps> = ({ collectionHandle }) => {
  const { collection, loading, error } = useCollectionProducts(collectionHandle || null, {
    first: 20,
    sortKey: 'BEST_SELLING',
    reverse: false
  });
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  if (loading) {
    return (
      <div className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
            Collection
          </h2>

          {/* Loading Skeleton */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {Array.from({ length: 8 }).map((_, index) => (
              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
                <div className="aspect-square bg-gray-200"></div>
                <div className="p-6">
                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
                  <div className="h-12 bg-gray-200 rounded"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error || !collection) {
    return (
      <div className="container mx-auto px-4 py-24 text-center">
        <div className="max-w-lg mx-auto">
          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
            <i className="ri-shopping-bag-line text-3xl text-gray-400"></i>
          </div>
          <h2 className="text-2xl font-heading font-semibold text-gray-900 mb-3">
            Collection Not Found
          </h2>
          <p className="text-gray-500 mb-8 leading-relaxed">
            {error || "We couldn't find the collection you're looking for. It may have been removed or the link might be incorrect."}
          </p>
          <Button
            onClick={() => window.history.back()}
            variant="outline"
            className="px-8"
          >
            <i className="ri-arrow-left-line mr-2"></i>
            Go Back
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-gray-50">
      {/* Hero Banner */}
      {collection.image && (
        <div className="relative w-full h-[300px] md:h-[350px] lg:h-[400px]">
          <img
            src={collection.image.url}
            alt={collection.image.altText || collection.title}
            className="w-full h-full object-cover object-center"
          />
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-white text-center px-4 font-heading">
              {collection.title}
            </h1>
          </div>
        </div>
      )}

      {/* Products Section */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          {collection.products.length === 0 ? (
            <div className="text-center py-12">
              <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
                <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
                <h3 className="text-lg font-semibold text-gray-600 mb-2">
                  No Products in Collection
                </h3>
                <p className="text-gray-500">
                  This collection doesn't have any products yet.
                </p>
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
              {collection.products.map((product) => (
                <ProductCard
                  key={product.id}
                  product={product}
                  onClick={(product) => {
                    setSelectedProduct(product);
                    setIsModalOpen(true);
                  }}
                />
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Product Modal */}
      {selectedProduct && (
        <ProductModal
          product={selectedProduct}
          isOpen={isModalOpen}
          onClose={() => {
            setIsModalOpen(false);
            setSelectedProduct(null);
          }}
        />
      )}
    </div>
  );
};

export default CollectionDetail;