"use client";

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Post } from '@/types/types';
import { cn } from '@/lib/utils';
import { Calendar, ArrowRight } from 'lucide-react';

interface PostsGridProps {
  posts: Post[];
}

const POSTS_PER_PAGE = 6;

const categories = [
  { id: 'wszystkie', label: 'Wszystkie' },
  { id: 'klimatyzacja', label: 'Klimatyzacja' },
  { id: 'pompy-ciepla', label: 'Pompy ciepła' },
  { id: 'porady', label: 'Porady' },
];

export function PostsGrid({ posts }: PostsGridProps) {
  const [activeCategory, setActiveCategory] = useState('wszystkie');
  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);

  const filteredPosts = posts.filter(
    (post) => activeCategory === 'wszystkie' || post.category === activeCategory
  );

  const visiblePosts = filteredPosts.slice(0, visibleCount);
  const hasMore = visibleCount < filteredPosts.length;

  const handleShowMore = () => {
    setVisibleCount(prev => prev + POSTS_PER_PAGE);
  };

  const handleCategoryChange = (categoryId: string) => {
    setActiveCategory(categoryId);
    setVisibleCount(POSTS_PER_PAGE); // Reset paginacji przy zmianie kategorii
  };

  const categoryLabels: Record<string, string> = {
    'klimatyzacja': 'Klimatyzacja',
    'pompy-ciepla': 'Pompy Ciepła',
    'porady': 'Porady'
  };

  return (
    <div className="py-12">
      {/* Filtry */}
      <div className="flex flex-wrap items-center gap-3 mb-12">
        {categories.map((category) => (
          <button
            key={category.id}
            onClick={() => handleCategoryChange(category.id)}
            className={cn(
              "px-4 py-2 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 Artykułów */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {visiblePosts.map((post) => {
          const dateObj = new Date(post.date);
          const formattedDate = dateObj.toLocaleDateString('pl-PL', {
            day: 'numeric', month: 'long', year: 'numeric'
          });

          return (
            <article 
              key={post.slug} 
              className="group flex flex-col bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all duration-300"
            >
              <Link href={`/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden">
                <Image
                  src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80'}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
                <div className="absolute top-4 left-4">
                  <span className="px-3 py-1 bg-accent text-white text-[10px] font-bold rounded-full uppercase tracking-wider shadow-sm">
                    {categoryLabels[post.category] || post.category}
                  </span>
                </div>
              </Link>
              
              <div className="flex flex-col flex-grow p-6 md:p-8">
                <div className="flex items-center gap-2 text-xs font-medium text-text-muted mb-3">
                  <Calendar className="w-3.5 h-3.5 text-primary/50" />
                  <span>{formattedDate}</span>
                </div>
                
                <h3 className="text-xl font-bold text-primary font-heading leading-snug mb-3 group-hover:text-accent transition-colors">
                  <Link href={`/blog/${post.slug}`}>
                    {post.title}
                  </Link>
                </h3>
                
                <p className="text-sm text-text-muted leading-relaxed line-clamp-3 mb-6 flex-grow">
                  {post.excerpt}
                </p>
                
                <div className="mt-auto">
                  <Link 
                    href={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
                  >
                    <span>Czytaj więcej</span>
                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                  </Link>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      {visiblePosts.length === 0 && (
        <div className="text-center py-16 bg-slate-50 rounded-2xl border border-border">
          <p className="text-lg text-text-muted font-medium">Brak artykułów w tej kategorii.</p>
        </div>
      )}

      {/* Pokaż więcej */}
      {hasMore && (
        <div className="mt-12 flex justify-center">
          <button 
            onClick={handleShowMore}
            className="btn btn-outline btn-primary bg-white font-bold"
          >
            Wczytaj więcej artykułów
          </button>
        </div>
      )}
    </div>
  );
}