import { createFileRoute } from "@tanstack/react-router";
import { useState, useMemo } from "react";
import { Search } from "lucide-react";
import { SiteNav } from "@/components/site-nav";
import { SiteFooter } from "@/components/site-footer";
import { projects } from "@/lib/projects";

export const Route = createFileRoute("/projetos")({
  head: () => ({
    meta: [
      { title: "Projetos — Pilotis Estrutural" },
      { name: "description", content: "Portfólio de projetos estruturais da Pilotis: madeira, aço, concreto protendido, pré-moldado, OAE e obras hídricas." },
      { property: "og:title", content: "Projetos — Pilotis Estrutural" },
      { property: "og:description", content: "Portfólio de projetos estruturais multimateriais no Ceará." },
    ],
  }),
  component: ProjetosPage,
});

type FilterKey = "todos" | "concreto" | "aco" | "madeira" | "misto" | "oae";

const FILTERS: { key: FilterKey; label: string; match: (category: string) => boolean }[] = [
  { key: "todos", label: "Todos", match: () => true },
  { key: "concreto", label: "Concreto", match: (c) => /concreto/i.test(c) && !/misto|madeira|aço|aco/i.test(c) },
  { key: "aco", label: "Aço", match: (c) => /aço/i.test(c) && !/misto/i.test(c) },
  { key: "madeira", label: "Madeira", match: (c) => /madeira/i.test(c) && !/misto|híbrido|hibrido/i.test(c) },
  { key: "misto", label: "Misto & Híbrido", match: (c) => /misto|híbrido|hibrido/i.test(c) },
  { key: "oae", label: "OAE & Hídricas", match: (c) => /oae|hídric|hidric|pré-moldado|pre-moldado/i.test(c) },
];

function ProjetosPage() {
  const [filter, setFilter] = useState<FilterKey>("todos");
  const [query, setQuery] = useState("");

  const normalizedQuery = query.trim().toLowerCase();

  const filtered = useMemo(() => {
    const f = FILTERS.find((x) => x.key === filter)!;
    return projects.filter((p) => {
      const matchesCategory = f.match(p.category);
      const matchesName = normalizedQuery === "" || p.name.toLowerCase().includes(normalizedQuery);
      return matchesCategory && matchesName;
    });
  }, [filter, normalizedQuery]);

  return (
    <div className="min-h-screen bg-surface text-brand-dark">
      <SiteNav />

      <header className="px-6 md:px-8 pt-20 pb-16 bg-background border-b border-brand-dark/5">
        <div className="max-w-6xl mx-auto">
          <span className="inline-block px-3 py-1 mb-6 text-[10px] font-bold tracking-[0.25em] uppercase bg-brand-accent/10 text-brand-accent">
            Portfólio
          </span>
          <h1 className="text-5xl md:text-7xl font-display font-bold leading-[0.95] max-w-4xl">
            Projetos <span className="text-brand-dark/25 italic">selecionados</span>.
          </h1>
          <p className="mt-8 max-w-xl text-lg text-brand-dark/70 leading-relaxed">
            Uma seleção de obras projetadas pela Pilotis em diferentes escalas, materiais e tipologias.
          </p>

          <div className="mt-10 max-w-md relative">
            <label htmlFor="project-search" className="sr-only">
              Buscar projeto
            </label>
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-brand-dark/40" aria-hidden="true" />
            <input
              id="project-search"
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Buscar projeto por nome..."
              className="w-full pl-11 pr-4 py-3 bg-background border border-brand-dark/15 text-sm text-brand-dark placeholder:text-brand-dark/40 focus:outline-none focus:border-brand-dark/40 transition-colors"
            />
          </div>
        </div>
      </header>

      <div className="sticky top-0 z-20 bg-background/95 backdrop-blur border-b border-brand-dark/10">
        <div className="max-w-6xl mx-auto px-6 md:px-8 py-4 flex items-center gap-3 overflow-x-auto">
          <span className="text-[10px] font-mono uppercase tracking-[0.25em] text-brand-dark/40 shrink-0 mr-2">
            Filtrar
          </span>
          {FILTERS.map((f) => {
            const active = filter === f.key;
            const count = projects.filter((p) => f.match(p.category)).length;
            return (
              <button
                key={f.key}
                type="button"
                onClick={() => setFilter(f.key)}
                className={`shrink-0 px-4 py-2 text-xs font-bold uppercase tracking-[0.15em] border transition-colors ${
                  active
                    ? "bg-brand-dark text-background border-brand-dark"
                    : "bg-transparent text-brand-dark/70 border-brand-dark/15 hover:border-brand-dark/40 hover:text-brand-dark"
                }`}
              >
                {f.label} <span className="ml-1 opacity-60">{count}</span>
              </button>
            );
          })}
        </div>
      </div>

      <section className="py-20 md:py-24 px-6 md:px-8 bg-background">
        <div className="max-w-6xl mx-auto space-y-24">
          {filtered.length === 0 && (
            <p className="text-center text-brand-dark/50 text-sm">
              Nenhum projeto nesta categoria por enquanto.
            </p>
          )}
          {filtered.map((p, i) => (
            <article
              key={p.slug}
              className={`grid md:grid-cols-2 gap-10 md:gap-16 items-center ${
                i % 2 === 1 ? "md:[&>div:first-child]:order-2" : ""
              }`}
            >
              <div className="overflow-hidden">
                <img
                  src={p.image}
                  alt={p.name}
                  loading="lazy"
                  width={800}
                  height={1000}
                  className="w-full aspect-[4/5] object-cover hover:scale-[1.02] transition-transform duration-700"
                />
              </div>
              <div>
                <div className="flex items-center gap-3 text-[10px] font-mono uppercase tracking-[0.25em] text-brand-accent mb-4">
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <span className="h-px w-8 bg-brand-accent" />
                  <span>{p.category}</span>
                </div>
                <h2 className="text-3xl md:text-4xl font-display font-bold mb-4">{p.name}</h2>
                <p className="text-base leading-relaxed text-brand-dark/70 mb-8 max-w-md">
                  {p.summary}
                </p>
                <dl className="grid grid-cols-2 gap-6 max-w-sm border-t border-brand-dark/10 pt-6">
                  <div>
                    <dt className="text-[10px] uppercase tracking-[0.25em] text-brand-dark/40 mb-1">Local</dt>
                    <dd className="text-sm font-medium">{p.location}</dd>
                  </div>
                  <div>
                    <dt className="text-[10px] uppercase tracking-[0.25em] text-brand-dark/40 mb-1">Ano</dt>
                    <dd className="text-sm font-medium">{p.year}</dd>
                  </div>
                </dl>
              </div>
            </article>
          ))}
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}