"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import ProjectThumbnail from "@/app/components/ProjectThumbnail";
import ScrollFadeIn from "@/app/components/ScrollFadeIn";
import { BackArrow, SubpageIntro, card, ghost, monoLabel } from "./subpage";

export type ProjectListItem = {
  id: number | string; // Allow both for Directus (string) and Prisma (number) compatibility
  slug: string;
  title: string;
  description: string;
  tags: string[];
  category: string;
  date?: string;
  createdAt?: string;
  imageUrl?: string | null;
};

function yearOf(project: ProjectListItem): string | null {
  const raw = project.date || project.createdAt;
  if (!raw) return null;
  const year = new Date(raw).getFullYear();
  return Number.isNaN(year) ? null : String(year);
}

const filterPill = (active: boolean) =>
  `rounded-full px-4 py-2 text-sm font-medium transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
    active ? "bg-ink text-paper" : "shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] hover:bg-ink hover:text-paper"
  }`;

export default function ProjectsPageClient({
  projects,
  locale,
}: {
  projects: ProjectListItem[];
  locale: string;
}) {
  const tCommon = useTranslations("common");
  const tList = useTranslations("projects.list");

  const [selectedCategory, setSelectedCategory] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");

  const categories = useMemo(() => {
    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
    return ["all", ...unique];
  }, [projects]);

  const filteredProjects = useMemo(() => {
    let result = projects;
    if (selectedCategory !== "all") {
      result = result.filter((project) => project.category === selectedCategory);
    }
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      result = result.filter(
        (p) =>
          p.title.toLowerCase().includes(query) ||
          p.description.toLowerCase().includes(query) ||
          p.tags.some((t) => t.toLowerCase().includes(query)),
      );
    }
    return result;
  }, [projects, selectedCategory, searchQuery]);

  const resetFilters = () => {
    setSelectedCategory("all");
    setSearchQuery("");
  };

  return (
    <>
      <SubpageIntro
        back={
          <Link href={`/${locale}`} className={ghost}>
            <BackArrow /> {tCommon("backToHome")}
          </Link>
        }
        kicker={`${String(projects.length).padStart(2, "0")} ${locale === "de" ? "Projekte" : "projects"}`}
        title={tList("title")}
      >
        <p>{tList("intro")}</p>
      </SubpageIntro>

      {/* Filter: Kategorien als Pillen, Suche als Tinten-Feld */}
      <div className="mt-8 flex flex-col gap-4 md:mt-10 md:flex-row md:items-center md:justify-between">
        <div className="flex flex-wrap gap-2" role="group" aria-label={locale === "de" ? "Kategorien" : "Categories"}>
          {categories.map((cat) => (
            <button
              key={cat}
              type="button"
              onClick={() => setSelectedCategory(cat)}
              aria-pressed={selectedCategory === cat}
              className={filterPill(selectedCategory === cat)}
            >
              {cat === "all" ? tList("all") : cat}
            </button>
          ))}
        </div>
        <label className="relative block w-full md:w-80">
          <span className="sr-only">{tList("searchPlaceholder")}</span>
          <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            className="pointer-events-none absolute left-4 top-1/2 h-[18px] w-[18px] -translate-y-1/2"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          >
            <circle cx="11" cy="11" r="7" />
            <path d="m20 20-3.5-3.5" />
          </svg>
          <input
            type="search"
            placeholder={tList("searchPlaceholder")}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full rounded-full border-2 border-ink bg-paper py-3 pl-11 pr-5 text-base text-ink placeholder:text-ink/60 transition-shadow duration-150 ease-out focus:shadow-[4px_4px_0_rgb(var(--plakat-ink))] focus:outline-none"
          />
        </label>
      </div>

      {filteredProjects.length === 0 ? (
        <div className={`${card} mt-10 flex flex-col items-start gap-4 p-6 md:p-8`}>
          <p className="font-display text-[clamp(1.6rem,4vw,2.4rem)] font-extrabold leading-tight tracking-[-0.03em]">
            {tList("noResults")}
          </p>
          <button type="button" onClick={resetFilters} className={ghost}>
            {tList("clearFilters")}
          </button>
        </div>
      ) : (
        <ul className="mt-10 grid gap-6 md:grid-cols-2 md:gap-8 xl:grid-cols-3">
          {filteredProjects.map((project, i) => {
            const year = yearOf(project);
            return (
              <li key={project.id} className="min-w-0">
                <ScrollFadeIn delay={Math.min(i, 5) * 0.05} className="h-full">
                  <Link
                    href={`/${locale}/projects/${project.slug}`}
                    className={`${card} group flex h-full flex-col overflow-hidden transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-1 hover:shadow-[8px_10px_0_rgb(var(--plakat-ink))] active:scale-[0.97]`}
                  >
                    <div className="relative aspect-[16/10] border-b-2 border-ink" aria-hidden="true">
                      {project.imageUrl ? (
                        <Image
                          src={project.imageUrl}
                          alt=""
                          fill
                          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                          className="object-cover"
                        />
                      ) : (
                        <ProjectThumbnail
                          title={project.title}
                          category={project.category}
                          tags={project.tags}
                          slug={project.slug}
                          size="card"
                        />
                      )}
                    </div>
                    <div className="flex flex-1 flex-col gap-3 p-5 md:p-6">
                      <p className={monoLabel}>{[project.category, year].filter(Boolean).join(" · ")}</p>
                      <div className="flex items-start justify-between gap-4">
                        <h2 className="min-w-0 hyphens-auto break-words font-display text-[clamp(1.7rem,3vw,2.3rem)] font-extrabold leading-[0.95] tracking-[-0.04em]">
                          {project.title}
                        </h2>
                        <span
                          aria-hidden="true"
                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-lg shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-colors duration-150 ease-out group-hover:bg-signal group-hover:text-ink"
                        >
                          ↗
                        </span>
                      </div>
                      <p className="line-clamp-3 text-[15px] leading-relaxed">{project.description}</p>
                      {project.tags.length > 0 && (
                        <ul className="mt-auto flex flex-wrap gap-1.5 pt-2" aria-label="Stack">
                          {project.tags.slice(0, 4).map((tag) => (
                            <li key={tag} className="rounded-full bg-paper-2 px-2.5 py-1 font-mono text-xs">
                              {tag}
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </Link>
                </ScrollFadeIn>
              </li>
            );
          })}
        </ul>
      )}
    </>
  );
}