"use client";

import { useEffect, useState, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import Image from "next/image";

export default function ProjectsPage() {
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get("query") || "";

  const [query, setQuery] = useState(initialQuery);
  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
  const [projects, setProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [categories] = useState([
    "assets",
    "documents",
    "fixtures",
    "projects",
    "templates",
    "test files",
    "tools"
  ]);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedQuery(query), 300);
    return () => clearTimeout(timer);
  }, [query]);

  useEffect(() => {
    const url = new URL(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects`);
    url.searchParams.set("fields", "submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title");
    url.searchParams.set("limit", "-1");

    fetch(url.toString(), { cache: "no-store" })
    .then((res) => res.json())
    .then((data) => {
      setProjects(data.data || []);
      setLoading(false);
    })
    .catch(() => setLoading(false));
  }, []);

  const highlight = (text: string) => {
    if (!debouncedQuery) return text;
    const regex = new RegExp(`(${debouncedQuery})`, "gi");
    return text?.replace(regex, '<mark>$1</mark>');
  };

  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");

  const filtered = useMemo(() => {
    const q = normalize(debouncedQuery);
    return projects.filter((entry) => {
      const fieldsToSearch = [
        entry.title ?? "",
        entry.uploader ?? "",
        entry.category ?? "",
        Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
      ];
      return fieldsToSearch.filter(Boolean).some((field) =>
      normalize(field).includes(q)
      );
    });
  }, [projects, debouncedQuery]);

  const tagCounts = useMemo(() => {
    const counts: Record<string, number> = {};
    projects.forEach((p) => {
      if (Array.isArray(p.tags)) {
        p.tags.forEach((tag) => {
          counts[tag] = (counts[tag] || 0) + 1;
        });
      }
    });
    return counts;
  }, [projects]);

  const popularTags = Object.entries(tagCounts)
  .sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
  .slice(0, 10)
  .map(([tag]) => tag);

  const recentTags = [...projects]
  .sort((a, b) => b.submission_id - a.submission_id)
  .slice(0, 10)
  .flatMap((p) => p.tags || [])
  .filter((tag, i, self) => self.indexOf(tag) === i)
  .slice(0, 10);

  const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
  const totalTags = Object.keys(tagCounts).length;

  return (
    <div className="p-6 max-w-7xl mx-auto">
    <style jsx global>{`
      mark {
        background: #ffde59;
        color: #242424;
        padding: 0 2px;
        border-radius: 2px;
      }
      .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
        gap: 1rem;
      }
      .project-card {
        display: flex;
        background-color: #242424;
        color: var(--card-foreground);
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        overflow: hidden;
        height: 150px;
      }
      .project-image {
        width: 150px;
        height: 150px;
        object-fit: cover;
      }
      .project-content {
        padding: 0.75rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .project-tags {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .project-tags span,
      .flex.flex-wrap span {
        display: inline-block;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
        padding: 0.25rem 0.5rem;
        background-color: var(--muted);
        color: var(--foreground);
        border-radius: 0.25rem;
        font-size: 0.7rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }
      .project-tags span:hover,
      .flex.flex-wrap span:hover {
        background-color: #ffde59;
        color: #000;
      }
      `}</style>

      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
      <div className="card bg-card text-card-foreground p-4">
      <h1 className="text-xl font-bold mb-2">Community Projects</h1>
      <input
      type="search"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search projects..."
      className="w-full dark:bg-background border border-border rounded-md p-2"
      />
      <Link
      href="/"
      className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
      >
      ← Back to Main Menu
      </Link>
      </div>
      <div className="card bg-card text-card-foreground p-4">
      <h2 className="text-md font-semibold mb-2">Popular Tags</h2>
      {popularTags.length > 0 ? (
        <div className="flex flex-wrap">
        {popularTags.map((tag, i) => (
          <span key={i} onClick={() => setQuery(tag)} title={tag}>
          {tag}
          </span>
        ))}
        </div>
      ) : (
        <p className="text-sm text-muted-foreground">No tags yet.</p>
      )}
      </div>
      <div className="card bg-card text-card-foreground p-4">
      <h2 className="text-md font-semibold mb-2">Recent Tags</h2>
      {recentTags.length > 0 ? (
        <div className="flex flex-wrap">
        {recentTags.map((tag, i) => (
          <span key={i} onClick={() => setQuery(tag)} title={tag}>
          {tag}
          </span>
        ))}
        </div>
      ) : (
        <p className="text-sm text-muted-foreground">No recent tags.</p>
      )}
      </div>
      <div className="card bg-card text-card-foreground p-4">
      <h2 className="text-md font-semibold mb-2">Project Stats</h2>
      <p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
      <p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
      <p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
      </div>
      <div className="card bg-card text-card-foreground p-4">
      <h2 className="text-md font-semibold mb-2">Browse by Category</h2>
      <div className="flex flex-wrap">
      {categories.map((cat, i) => (
        <span key={i} onClick={() => setQuery(cat)}>
        {cat === "test_files" ? "test files" : cat}
        </span>
      ))}
      </div>
      </div>
      <div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
      <div>
      <h2 className="text-md font-semibold mb-2">Submit a Project</h2>
      <p className="text-sm text-muted-foreground mb-2">
      Have a cool design, tool, or jig to share? Submit it to the community database.
      </p>
      </div>
      <button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
      Coming Soon
      </button>
      </div>
      </div>

      <hr className="my-8 border-border" />

      {loading ? (
        <p className="text-muted">Loading projects...</p>
      ) : filtered.length === 0 ? (
        <p className="text-muted">No projects found.</p>
      ) : (
        <div className="card-grid">
        {filtered.map((project) => (
          <div key={project.submission_id} className="project-card">
          <Image
          src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
          alt={project.p_image?.title || "Project image"}
          width={150}
          height={150}
          className="project-image"
          />
          <div className="project-content">
          <div>
          <Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
          {project.title || "Untitled"}
          </Link>
          <p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
          <p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
          </div>
          <div className="project-tags">
          {Array.isArray(project.tags) && project.tags.length > 0
            ? project.tags.map((tag, i) => (
              <span
              key={i}
              onClick={() => setQuery(tag)}
              title={tag}
              >
              {tag}
              </span>
            ))
            : ""}
            </div>
            </div>
            </div>
        ))}
        </div>
      )}
      </div>
  );
}