"use client";

import Link from "next/link";
import { T } from "@/components/TranslatedText";
import { useState, useEffect, useMemo } from "react";

interface Project {
  id: string;
  title: string;
  category: string;
  location: string | null;
  description: string | null;
  coverImage: string | null;
  status: string;
}

export default function ProjetosPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  useEffect(() => {
    async function fetchProjects() {
      try {
        const res = await fetch("/api/projects", { cache: "no-store" });
        if (res.ok) {
          const data = await res.json();
          // Mostrar todos os projetos (status pode ser "Em andamento" ou "Concluído")
          setProjects(data);
        }
      } catch (error) {
        console.error("Erro ao carregar projetos:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchProjects();
  }, []);

  // Extrair categorias únicas dos projetos
  const categories = useMemo(() => {
    const cats = new Set<string>();
    projects.forEach((p) => {
      if (p.category) cats.add(p.category);
    });
    return Array.from(cats);
  }, [projects]);

  // Filtrar projetos por categoria e pesquisa
  const filteredProjects = useMemo(() => {
    return projects.filter((project) => {
      const matchesCategory = !selectedCategory || project.category === selectedCategory;
      const matchesSearch =
        !searchTerm ||
        project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        project.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        project.category?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        project.location?.toLowerCase().includes(searchTerm.toLowerCase());
      return matchesCategory && matchesSearch;
    });
  }, [projects, selectedCategory, searchTerm]);

  const defaultImage = "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop";

  return (
    <main className="bg-white dark:bg-secondary transition-colors duration-300">
      {/* Hero Section */}
      <section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
        <div className="absolute inset-0 bg-black/60 z-10"></div>
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
        <div className="container mx-auto px-4 relative z-20">
          <h1 className="text-5xl font-bold font-headline mb-4"><T>Nossos Projetos</T></h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            <T>Conheça alguns dos projetos que já realizamos para nossos clientes</T>
          </p>
        </div>
      </section>

      {/* Projects Grid */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          {/* Search Bar */}
          <div className="max-w-xl mx-auto mb-8">
            <div className="relative">
              <input
                type="text"
                placeholder="Pesquisar projetos..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full px-5 py-3 pl-12 rounded-full border border-gray-200 dark:border-white/20 bg-white dark:bg-white/5 text-secondary dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
              />
              <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xl"></i>
              {searchTerm && (
                <button
                  onClick={() => setSearchTerm("")}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors"
                >
                  <i className="ri-close-line text-xl"></i>
                </button>
              )}
            </div>
          </div>

          {/* Category Filters */}
          <div className="flex flex-wrap gap-3 mb-12 justify-center">
            <button
              onClick={() => setSelectedCategory(null)}
              className={`px-6 py-2 rounded-full font-bold transition-all ${
                selectedCategory === null
                  ? "bg-primary text-white shadow-md"
                  : "bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/20"
              }`}
            >
              <T>Todos</T>
            </button>
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-6 py-2 rounded-full font-bold transition-all ${
                  selectedCategory === category
                    ? "bg-primary text-white shadow-md"
                    : "bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/20"
                }`}
              >
                {category}
              </button>
            ))}
          </div>

          {/* Loading State */}
          {loading && (
            <div className="flex justify-center items-center py-20">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
          )}

          {/* Empty State */}
          {!loading && filteredProjects.length === 0 && (
            <div className="text-center py-20">
              <i className="ri-folder-open-line text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
              <h3 className="text-xl font-bold text-gray-500 dark:text-gray-400 mb-2">
                <T>Nenhum projeto encontrado</T>
              </h3>
              <p className="text-gray-400 dark:text-gray-500">
                {searchTerm || selectedCategory ? (
                  <T>Tente ajustar os filtros de busca</T>
                ) : (
                  <T>Em breve adicionaremos novos projetos</T>
                )}
              </p>
              {(searchTerm || selectedCategory) && (
                <button
                  onClick={() => {
                    setSearchTerm("");
                    setSelectedCategory(null);
                  }}
                  className="mt-4 px-6 py-2 bg-primary text-white rounded-full font-bold hover:bg-primary/90 transition-colors"
                >
                  <T>Limpar filtros</T>
                </button>
              )}
            </div>
          )}

          {/* Projects Grid */}
          {!loading && filteredProjects.length > 0 && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredProjects.map((project) => (
                <Link key={project.id} href={`/projetos/${project.id}`} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col cursor-pointer">
                  <div className="relative h-64 overflow-hidden">
                    <div
                      className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
                      style={{ backgroundImage: `url('${project.coverImage || defaultImage}')` }}
                    ></div>
                    <div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors"></div>
                    {project.category && (
                      <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-xs font-bold text-secondary uppercase tracking-wider">
                        {project.category}
                      </div>
                    )}
                  </div>
                  <div className="p-6 grow flex flex-col">
                    <h3 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2 group-hover:text-primary transition-colors">
                      {project.title}
                    </h3>
                    {project.location && (
                      <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm mb-4">
                        <i className="ri-map-pin-line"></i>
                        <span>{project.location}</span>
                      </div>
                    )}
                    {project.description && (
                      <p className="text-gray-600 dark:text-gray-400 text-sm mb-6 line-clamp-3 grow">
                        {project.description}
                      </p>
                    )}
                    <span className="inline-flex items-center gap-2 text-primary font-bold group-hover:gap-3 transition-all mt-auto">
                      <T>Ver Detalhes</T> <i className="ri-arrow-right-line"></i>
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          )}

          {/* Results Count */}
          {!loading && filteredProjects.length > 0 && (
            <div className="text-center mt-12 text-gray-500 dark:text-gray-400">
              <T>Exibindo</T> {filteredProjects.length} <T>de</T> {projects.length} <T>projetos</T>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}