"use client";

import { useState, useEffect } from "react";
import { ArrowRight, Users, MapPin, Calendar, Building2 } from "lucide-react";

type Project = {
  id: string;
  title: string;
  partner: string;
  tag: string;
  tagColor: string;
  location: string;
  period: string;
  description: string;
  outcomes: string[];
  image: string;
};

const TAGS = ["Tous", "Nutrition", "Sécurité alimentaire", "Résilience", "Genre", "Suivi-Évaluation", "Nutrition maternelle"];

export default function ProjetsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedTag, setSelectedTag] = useState("Tous");

  useEffect(() => {
    fetch("/api/projects")
      .then((res) => res.json())
      .then((data) => {
        setProjects(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching projects:", error);
        setLoading(false);
      });
  }, []);

  const filteredProjects = selectedTag === "Tous"
    ? projects
    : projects.filter(p => p.tag === selectedTag);

  return (
    <>
      {/* Page Hero - Clean */}
      <section className="relative bg-linear-to-br from-[#F7F8F5] via-white to-[#E8F5E9] py-20 sm:py-28 overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-[0.03]">
          <div className="absolute inset-0" style={{
            backgroundImage: `radial-gradient(circle at 2px 2px, #4A7C59 1px, transparent 0)`,
            backgroundSize: '32px 32px'
          }}></div>
        </div>

        {/* Decorative Blobs */}
        <div className="absolute top-10 right-10 w-64 h-64 bg-[#4A7C59]/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-10 left-10 w-96 h-96 bg-[#E67E22]/5 rounded-full blur-3xl"></div>

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <p className="text-xs font-semibold text-[#4A7C59] uppercase tracking-widest mb-4">Nos réalisations</p>
          <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-black text-[#2C3E50] leading-tight mb-6">
            Projets &amp; Activités
          </h1>
          <p className="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-3xl mb-8">
            20+ ans d&apos;interventions humanitaires et de développement en Mauritanie pour combattre la malnutrition et renforcer la sécurité alimentaire.
          </p>

          {/* Filter tags */}
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Filtrer par domaine</p>
            <div className="flex flex-wrap gap-2">
              {TAGS.map((tag) => (
                <button
                  key={tag}
                  onClick={() => setSelectedTag(tag)}
                  className={`text-xs font-medium px-4 py-2 rounded-lg border transition-all ${
                    selectedTag === tag
                      ? "bg-[#4A7C59] text-white border-[#4A7C59] shadow-md"
                      : "border-gray-300 text-gray-700 bg-white hover:border-[#4A7C59] hover:text-[#4A7C59] hover:shadow-sm"
                  }`}
                >
                  {tag}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Projects Grid */}
      <section className="py-8 sm:py-12 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          {loading ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="animate-pulse">
                  <div className="bg-gray-200 rounded-2xl h-56 mb-4"></div>
                  <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                  <div className="h-4 bg-gray-200 rounded w-full"></div>
                </div>
              ))}
            </div>
          ) : filteredProjects.length > 0 ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {filteredProjects.map((p) => (
                <article
                  key={p.id}
                  className="group bg-white rounded-2xl border-2 border-gray-200 overflow-hidden hover:border-[#4A7C59]/30 hover:shadow-xl transition-all duration-300"
                >
                  {/* Image */}
                  <div className="relative h-56 overflow-hidden bg-gray-100">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={p.image}
                      alt={p.title}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />

                    {/* Category Tag */}
                    <span
                      className="absolute top-4 left-4 text-xs font-bold text-white px-3 py-1.5 rounded-lg shadow-lg"
                      style={{ backgroundColor: p.tagColor }}
                    >
                      {p.tag}
                    </span>

                    {/* Period Badge */}
                    <div className="absolute bottom-4 right-4 bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-lg">
                      <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-700">
                        <Calendar size={12} />
                        {p.period}
                      </div>
                    </div>
                  </div>

                  {/* Content */}
                  <div className="p-6">
                    {/* Title */}
                    <h2 className="font-serif text-xl font-bold text-[#2C3E50] mb-3 leading-tight group-hover:text-[#4A7C59] transition-colors">
                      {p.title}
                    </h2>

                    {/* Meta Info */}
                    <div className="flex flex-wrap gap-4 mb-4 text-xs text-gray-500">
                      <span className="flex items-center gap-1.5">
                        <Building2 size={13} className="text-[#4A7C59]" />
                        <span className="font-medium">{p.partner}</span>
                      </span>
                      <span className="flex items-center gap-1.5">
                        <MapPin size={13} className="text-[#4A7C59]" />
                        <span className="font-medium">{p.location}</span>
                      </span>
                    </div>

                    {/* Description */}
                    <p className="text-sm text-gray-700 leading-relaxed mb-5 font-medium">
                      {p.description}
                    </p>

                    {/* Outcomes */}
                    <div className="border-t-2 border-gray-100 pt-4">
                      <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                        <Users size={12} className="text-[#4A7C59]" />
                        Impact & Résultats
                      </p>
                      <ul className="space-y-2">
                        {p.outcomes.map((o, idx) => (
                          <li key={idx} className="text-xs text-gray-700 flex items-start gap-2.5 font-medium">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#4A7C59] flex-shrink-0 mt-1.5"></span>
                            {o}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <p className="text-gray-500 text-lg">Aucun projet trouvé dans cette catégorie.</p>
            </div>
          )}
        </div>
      </section>
    </>
  );
}