"use client"

import { useState } from "react"
import Link from "next/link"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export type Project = {
    title: string
    slug: string
    category: string
    description: string
    tags: string[]
    gradient?: string
    emoji?: string
    imageUrl?: string | null
}

const categories = ["All", "Web", "Mobile", "Design", "SEO"]

export function ProjectGallery({ projects }: { projects: Project[] }) {
    const [active, setActive] = useState("All")

    const filtered = active === "All"
        ? projects
        : projects.filter((p) => p.category === active)

    return (
        <div>
            {/* Filter tabs */}
            <div className="animate-fade-in-up flex flex-wrap justify-center gap-2 mb-12">
                {categories.map((cat) => (
                    <Button
                        key={cat}
                        variant={active === cat ? "default" : "outline"}
                        size="sm"
                        onClick={() => setActive(cat)}
                        className="rounded-full"
                    >
                        {cat}
                    </Button>
                ))}
            </div>

            {/* Project grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {filtered.map((project, i) => (
                    <Link key={project.slug} href={`/portfolio/${project.slug}`}>
                        <article
                            className="animate-fade-in-up h-full"
                            style={{ animationDelay: `${i * 0.06}s` }}
                        >
                            <Card className="group h-full overflow-hidden border hover:border-primary/20 hover:shadow-xl hover:shadow-primary/5 transition-all duration-500 cursor-pointer">
                                {/* Thumbnail */}
                                <div className="relative aspect-[16/10] bg-muted overflow-hidden flex items-center justify-center">
                                    {project.imageUrl ? (
                                        <img
                                            src={project.imageUrl.startsWith('http') || project.imageUrl.startsWith('/') ? project.imageUrl : `/${project.imageUrl}`}
                                            alt={project.title}
                                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                        />
                                    ) : (
                                        <div className={`w-full h-full bg-gradient-to-br ${project.gradient || 'from-gray-800 to-gray-600'} flex items-center justify-center`}>
                                            <span
                                                className="text-6xl group-hover:scale-110 transition-transform duration-500"
                                                role="img"
                                                aria-label={project.title}
                                            >
                                                {project.emoji || '🚀'}
                                            </span>
                                        </div>
                                    )}
                                </div>
                                <CardHeader>
                                    <p className="text-overline text-primary mb-2">{project.category}</p>
                                    <h3 className="text-xl font-semibold leading-none">{project.title}</h3>
                                </CardHeader>
                                <CardContent>
                                    <p className="text-caption leading-relaxed mb-4">{project.description}</p>
                                    {/* Technology tags (SF-015) */}
                                    <div className="flex flex-wrap gap-2">
                                        {project.tags.map((tag) => (
                                            <span
                                                key={tag}
                                                className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-medium"
                                            >
                                                {tag}
                                            </span>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        </article>
                    </Link>
                ))}
            </div>

            {filtered.length === 0 && (
                <p className="text-center text-muted-foreground py-12">
                    No projects in this category yet. Check back soon!
                </p>
            )}
        </div>
    )
}