'use client'

import { useState } from 'react'
import { Download, Eye, ChevronLeft, ChevronRight } from 'lucide-react'
import { Model3D } from '@/types'
import { ImagePlaceholder } from './ImagePlaceholder'
import Image from 'next/image'

interface ModelCardProps {
  model: Model3D
  onClick: () => void
}

export function ModelCard({ model, onClick }: ModelCardProps) {
  const [currentImageIndex, setCurrentImageIndex] = useState(0)

  const nextImage = (e: React.MouseEvent) => {
    e.stopPropagation()
    setCurrentImageIndex((prev) => (prev + 1) % model.images.length)
  }

  const prevImage = (e: React.MouseEvent) => {
    e.stopPropagation()
    setCurrentImageIndex((prev) => (prev - 1 + model.images.length) % model.images.length)
  }

  return (
    <div className="bg-secondary/20 rounded-xl overflow-hidden hover:bg-secondary/30 transition-all duration-300 cursor-pointer group">
      {/* Image Gallery */}
      <div className="relative h-48 overflow-hidden">
        <Image
          src={model.images[currentImageIndex]}
          alt={model.title}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-300"
        />
        
        {/* Image Navigation */}
        {model.images.length > 1 && (
          <>
            <button
              onClick={prevImage}
              className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all opacity-0 group-hover:opacity-100"
            >
              <ChevronLeft size={16} />
            </button>
            <button
              onClick={nextImage}
              className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all opacity-0 group-hover:opacity-100"
            >
              <ChevronRight size={16} />
            </button>
            
            {/* Image Indicators */}
            <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-1">
              {model.images.map((_, index) => (
                <div
                  key={index}
                  className={`w-2 h-2 rounded-full transition-all ${
                    index === currentImageIndex ? 'bg-white' : 'bg-white/50'
                  }`}
                />
              ))}
            </div>
          </>
        )}
      </div>

      {/* Card Content */}
      <div className="p-6">
        <div className="flex items-start justify-between mb-3">
          <h3 className="text-xl font-semibold text-foreground group-hover:text-primary transition-colors">
            {model.title}
          </h3>
        </div>

        <div className="flex items-center gap-2 mb-3">
          <span className="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs font-medium">
            {model.category}
          </span>
          <span className="text-sm text-muted-foreground">
            {model.files.length} files
          </span>
        </div>

        <p className="text-muted-foreground text-sm leading-relaxed mb-4 line-clamp-3">
          {model.description}
        </p>

        {/* Action Buttons */}
        <div className="flex gap-2">
          <button
            onClick={onClick}
            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium"
          >
            <Eye size={16} />
            View Details
          </button>
          {model.files.length > 0 && (
            <a
              href={model.files[0].url}
              download
              onClick={(e) => e.stopPropagation()} // prevents opening modal
              className="px-4 py-2 border border-border rounded-lg hover:bg-secondary/50 transition-colors text-sm font-medium flex items-center gap-2"
            >
              <Download size={16} />
              Quick Download
            </a>
          )}
        </div>
      </div>
    </div>
  )
}