"use client";

import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { projectsData, Project } from '@/content/projects';
import { cn } from '@/lib/utils';
import { MapPin, ArrowRight } from 'lucide-react';

type Category = 'wszystkie' | Project['category'];

const categories: { id: Category; label: string }[] = [
  { id: 'wszystkie', label: 'Wszystkie' },
  { id: 'klimatyzacja', label: 'Klimatyzacja' },
  { id: 'pompy-ciepla', label: 'Pompy ciepła' },
  { id: 'remonty', label: 'Remonty' },
  { id: 'hydraulika', label: 'Hydraulika' },
];

export function ProjectsGrid() {
  const [activeCategory, setActiveCategory] = useState<Category>('wszystkie');

  const filteredProjects = projectsData.filter(
    (project) => activeCategory === 'wszystkie' || project.category === activeCategory
  );

  return (
    <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      {/* Filtry */}
      <div className="flex flex-wrap items-center justify-center gap-3 mb-12">
        {categories.map((category) => (
          <button
            key={category.id}
            onClick={() => setActiveCategory(category.id)}
            className={cn(
              "px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 border",
              activeCategory === category.id
                ? "bg-primary text-white border-primary shadow-md"
                : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
            )}
          >
            {category.label}
          </button>
        ))}
      </div>

      {/* Siatka */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {filteredProjects.map((project) => (
          <div 
            key={project.id} 
            className="group relative rounded-2xl overflow-hidden bg-slate-100 aspect-[4/3]"
          >
            <Image
              src={project.imageUrl}
              alt={project.title}
              fill
              className="object-cover transition-transform duration-700 group-hover:scale-105"
            />
            
            {/* Nakładka gradientowa */}
            <div className="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300" />

            {/* Treść (Zawsze widoczna lokalizacja i kategoria, pojawiający się opis) */}
            <div className="absolute inset-0 p-6 flex flex-col justify-end">
              <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                <div className="flex items-center gap-3 mb-3">
                  <span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider">
                    {categories.find(c => c.id === project.category)?.label}
                  </span>
                  <div className="flex items-center gap-1 text-white/80 text-sm font-medium">
                    <MapPin className="w-3.5 h-3.5" />
                    <span>{project.location}</span>
                  </div>
                </div>
                
                <h3 className="text-xl font-bold text-white mb-2 font-heading">
                  {project.title}
                </h3>
                
                <p className="text-white/80 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                  {project.description}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {filteredProjects.length === 0 && (
        <div className="text-center py-20 text-text-muted">
          <p className="text-lg">Brak realizacji w tej kategorii.</p>
        </div>
      )}
    </section>
  );
}