"use client"

import {
  Copy,
  Download,
  Heart,
  MoreVertical,
  RefreshCw,
} from "lucide-react"
import Image from "next/image"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { type GeneratedImage } from "./image-gallery"
import { cn } from "@/lib/utils"
import { useState } from "react"

interface ImageCardProps {
  image: GeneratedImage
}

export function ImageCard({ image }: ImageCardProps) {
  const [isFavorite, setIsFavorite] = useState(image.isFavorite);

  const toggleFavorite = () => {
    setIsFavorite(!isFavorite);
  }

  return (
    <Card className="group relative overflow-hidden rounded-lg">
      <CardContent className="p-0">
        <Image
          src={image.url}
          alt={image.prompt}
          width={512}
          height={512}
          className="aspect-square w-full object-cover transition-transform group-hover:scale-105"
          data-ai-hint={image.data_ai_hint}
        />
        <div className="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100" />
        <div className="absolute top-2 right-2 flex scale-90 flex-col gap-2 opacity-0 transition-all group-hover:scale-100 group-hover:opacity-100">
          <Button
            size="icon"
            variant="secondary"
            className="h-8 w-8 rounded-full"
            onClick={toggleFavorite}
          >
            <Heart className={cn("h-4 w-4", isFavorite && "fill-red-500 text-red-500")} />
          </Button>
          <Button
            size="icon"
            variant="secondary"
            className="h-8 w-8 rounded-full"
          >
            <Download className="h-4 w-4" />
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                size="icon"
                variant="secondary"
                className="h-8 w-8 rounded-full"
              >
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Copy className="mr-2 h-4 w-4" />
                Copy URL
              </DropdownMenuItem>
              <DropdownMenuItem>
                <RefreshCw className="mr-2 h-4 w-4" />
                Regenerate
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 to-transparent p-3 text-white">
          <p className="truncate text-xs text-gray-300">
            {image.model} &middot; {image.generationTime.toFixed(1)}s
          </p>
          <p className="truncate text-sm font-medium">{image.prompt}</p>
        </div>
      </CardContent>
    </Card>
  )
}