import React, { useEffect } from 'react';
import { createIcons } from 'lucide';
import { ArrowLeft, Share, Heart, Star, StarHalf, Cpu, Smartphone, Camera, Battery, Home, Grid, Search, ShoppingCart, User } from 'lucide-react';

const ProductDetailScreen = () => {
  useEffect(() => {
    createIcons();
  }, []);

  return (
    <div className="bg-background min-h-screen">
      {/* Top Navigation */}
      <div className="sticky top-0 z-50 bg-surface border-b border-border">
        <div className="flex items-center justify-between p-4 max-w-6xl mx-auto">
          <button className="p-2">
            <ArrowLeft className="w-6 h-6 text-textPrimary" />
          </button>
          <div className="flex gap-4">
            <button className="p-2">
              <Share className="w-6 h-6 text-textPrimary" />
            </button>
            <button className="p-2">
              <Heart className="w-6 h-6 text-textPrimary" />
            </button>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="pb-20 max-w-6xl mx-auto">
        {/* Image Carousel */}
        <div className="relative">
          <div className="snap-x snap-mandatory flex overflow-x-auto scrollbar-hide">
            <div className="snap-center flex-shrink-0 w-full">
              <img src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dzl.webp" alt="Product Image 1" className="w-full h-[400px] object-cover" />
            </div>
            <div className="snap-center flex-shrink-0 w-full">
              <img src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dzt.webp" alt="Product Image 2" className="w-full h-[400px] object-cover" />
            </div>
            <div className="snap-center flex-shrink-0 w-full">
              <img src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7e11.webp" alt="Product Image 3" className="w-full h-[400px] object-cover" />
            </div>
          </div>
          <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
            <div className="w-2 h-2 rounded-full bg-primary"></div>
            <div className="w-2 h-2 rounded-full bg-surface opacity-50"></div>
            <div className="w-2 h-2 rounded-full bg-surface opacity-50"></div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
          {/* Product Info */}
          <div className="bg-surface p-6 rounded-lg">
            <div className="flex justify-between items-start">
              <div>
                <h1 className="text-3xl font-bold text-textPrimary">iPhone 14 Pro Max</h1>
                <p className="text-textSecondary mt-1">256GB, Space Black</p>
              </div>
              <div className="text-right">
                <p className="text-3xl font-bold text-primary">$1,099</p>
                <p className="text-sm text-success line-through text-textSecondary">$1,199</p>
              </div>
            </div>

            {/* Rating */}
            <div className="flex items-center mt-4">
              <div className="flex">
                {[...Array(4)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 text-warning fill-warning" />
                ))}
                <StarHalf className="w-4 h-4 text-warning" />
              </div>
              <span className="ml-2 text-sm text-textSecondary">(4.5 • 2.3k reviews)</span>
            </div>
          </div>

          {/* Product Details */}
          <div className="bg-surface p-6 rounded-lg">
            <h2 className="text-xl font-semibold text-textPrimary">Product Details</h2>
            <div className="mt-4 space-y-4">
              <div className="flex items-center">
                <Cpu className="w-5 h-5 text-textSecondary mr-3" />
                <span className="text-textSecondary">A16 Bionic chip</span>
              </div>
              <div className="flex items-center">
                <Smartphone className="w-5 h-5 text-textSecondary mr-3" />
                <span className="text-textSecondary">6.7-inch Super Retina XDR display</span>
              </div>
              <div className="flex items-center">
                <Camera className="w-5 h-5 text-textSecondary mr-3" />
                <span className="text-textSecondary">48MP main camera system</span>
              </div>
              <div className="flex items-center">
                <Battery className="w-5 h-5 text-textSecondary mr-3" />
                <span className="text-textSecondary">Up to 29 hours video playback</span>
              </div>
            </div>
          </div>

          {/* Description */}
          <div className="bg-surface p-6 rounded-lg md:col-span-2">
            <h2 className="text-xl font-semibold text-textPrimary">Description</h2>
            <p className="mt-4 text-textSecondary leading-relaxed">
              Experience the ultimate iPhone. Featuring the A16 Bionic chip, a 48MP camera system, and Dynamic Island — a magical new way to interact with iPhone. With a 6.7-inch Super Retina XDR display and all-day battery life, iPhone 14 Pro Max redefines what a smartphone can do.
            </p>
          </div>
        </div>

        {/* Sticky Bottom Bar */}
        <div className="fixed bottom-0 left-0 right-0 bg-surface border-t border-border p-4">
          <div className="flex gap-4 max-w-6xl mx-auto">
            <button className="flex-1 bg-surface border-2 border-primary text-primary rounded-lg py-3 font-semibold">
              Add to Cart
            </button>
            <button className="flex-1 bg-primary text-white rounded-lg py-3 font-semibold">
              Buy Now
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetailScreen;