"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Download, Copy, Eye, Share } from "lucide-react"

interface GeneratedImage {
  id: string
  title: string
  prompt: string
  jasonPrompt: string
  thumbnail: string
  seriesId: string
}

interface GalleryProps {
  images: GeneratedImage[]
  onExport?: (image: GeneratedImage) => void
  onCopy?: (prompt: string) => void
}

export function Gallery({ images, onExport, onCopy }: GalleryProps) {
  const selectedImage = images[0] // Mock selection

  return (
    <section className="container mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold mb-4">Generated Image Series</h2>
        <p className="text-gray-600">
          Your AI-generated images with Jason language prompts for maximum compatibility
        </p>
      </div>

      <div className="max-w-6xl mx-auto">
        {/* Main Image Display */}
        <div className="grid lg:grid-cols-3 gap-8 mb-8">
          <div className="lg:col-span-2">
            <Card className="overflow-hidden">
              <div className="aspect-square bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-24 h-24 mx-auto mb-4 bg-blue-200 rounded-full flex items-center justify-center">
                    <Eye className="h-12 w-12 text-blue-600" />
                  </div>
                  <p className="text-gray-600">Generated Image Preview</p>
                  <p className="text-sm font-medium mt-1">{selectedImage?.title}</p>
                </div>
              </div>
              <CardContent className="p-6">
                <div className="space-y-4">
                  <div>
                    <h4 className="font-medium mb-2">Original Prompt</h4>
                    <div className="p-3 bg-gray-100 rounded-lg text-sm">
                      {selectedImage?.prompt}
                    </div>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">Jason Language Prompt</h4>
                    <div className="p-3 bg-gray-100 rounded-lg text-sm font-mono">
                      {selectedImage?.jasonPrompt}
                    </div>
                    <div className="flex gap-2 mt-2">
                      <Button 
                        variant="outline" 
                        size="sm"
                        onClick={() => onCopy?.(selectedImage?.jasonPrompt || "")}
                      >
                        <Copy className="h-4 w-4 mr-2" />
                        Copy
                      </Button>
                      <Button variant="outline" size="sm">
                        <Download className="h-4 w-4 mr-2" />
                        Export
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Series Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div>
                  <p className="text-sm text-gray-600">Title</p>
                  <p className="font-medium">{selectedImage?.title}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Images in Series</p>
                  <p className="font-medium">{images.length}/30</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Style</p>
                  <p className="font-medium">Anime Fantasy</p>
                </div>
                <Button className="w-full mt-4">
                  <Share className="mr-2 h-4 w-4" />
                  Share Series
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" className="w-full justify-start">
                  <Download className="mr-2 h-4 w-4" />
                  Download All
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Copy className="mr-2 h-4 w-4" />
                  Copy All Prompts
                </Button>
                <Button variant="outline" className="w-full justify-start">
                  <Eye className="mr-2 h-4 w-4" />
                  View Slideshow
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Image Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {images.map((image) => (
            <Card key={image.id} className="overflow-hidden transition-transform hover:scale-105 cursor-pointer">
              <div className="aspect-square bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-16 h-16 mx-auto mb-2 bg-blue-200 rounded-full flex items-center justify-center">
                    <Eye className="h-8 w-8 text-blue-600" />
                  </div>
                  <p className="text-xs font-medium truncate px-2">{image.title}</p>
                </div>
              </div>
              <CardContent className="p-4">
                <div className="space-y-2">
                  <p className="text-xs text-gray-600 truncate">
                    {image.prompt.substring(0, 50)}...
                  </p>
                  <div className="flex gap-1">
                    <Button 
                      variant="ghost" 
                      size="sm"
                      className="flex-1"
                      onClick={() => onCopy?.(image.jasonPrompt)}
                    >
                      <Copy className="h-3 w-3" />
                    </Button>
                    <Button variant="ghost" size="sm" className="flex-1">
                      <Download className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}