"use client";

import { useMemo, useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { ToolCard } from "@/components/tools/ToolCard";
import {
  allCategories,
  categoryDescriptions,
  categoryLabels,
  toolRegistry,
  type ToolCategory,
} from "@/tools/registry";

const synonyms: Record<string, string[]> = {
  qr: ["qr-code-generator", "qr-generator"],
  qrcode: ["qr-code-generator", "qr-generator"],
  "qr code": ["qr-code-generator", "qr-generator"],
  "json schön machen": ["json-formatter"],
  passwort: ["password-generator", "passwort-generator", "password-check"],
  "zeichen zählen": ["word-counter", "wort-zaehler"],
  timestamp: ["timestamp-converter", "unixzeit-rechner"],
  "unix zeit": ["timestamp-converter", "unixzeit-rechner"],
  zeitstempel: ["timestamp-converter", "unixzeit-rechner"],
  "2fa": ["login"],
  login: ["login"],
  account: ["login"],
};

const quickSearches = ["QR", "JSON", "Passwort", "Timestamp", "CSV", "Farbe", "Base64"];

export function ToolsExplorer({
  initialSearch = "",
  initialCategory = "all",
}: {
  initialSearch?: string;
  initialCategory?: ToolCategory | "all";
}) {
  const [search, setSearch] = useState(initialSearch);
  const [activeCategory, setActiveCategory] = useState<ToolCategory | "all">(initialCategory);

  const usedCategories = allCategories.filter((category) =>
    toolRegistry.some((tool) => tool.category === category)
  );
  const filtered = useMemo(() => {
    return toolRegistry.filter((tool) => {
      const query = search.toLowerCase().trim();
      const boosted = Object.entries(synonyms).find(([key]) => query.includes(key))?.[1] ?? [];
      const matchesSearch =
        !query ||
        boosted.includes(tool.slug) ||
        tool.name.toLowerCase().includes(query) ||
        tool.description.toLowerCase().includes(query) ||
        tool.keywords.some((keyword) => keyword.toLowerCase().includes(query));
      const matchesCat = activeCategory === "all" || tool.category === activeCategory;
      return matchesSearch && matchesCat;
    });
  }, [activeCategory, search]);

  return (
    <section className="border-2 border-ink-primary bg-surface-base shadow-[6px_6px_0_rgb(var(--ink-primary))]">
      {/* Header */}
      <div className="border-b-2 border-ink-primary p-4 sm:p-5">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <p
              className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
              style={{ fontFamily: '"Courier New", monospace' }}
            >
              Tool Finder
            </p>
            <h2 className="font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
              Suchen, filtern, direkt öffnen
            </h2>
          </div>
          <span
            className="inline-flex w-fit items-center gap-2 border-2 border-ink-primary bg-ink-primary px-3 py-1.5 text-[0.65rem] font-bold uppercase tracking-[0.16em] text-surface-base"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            {filtered.length} Treffer
          </span>
        </div>

        <div className="relative mt-5">
          <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-primary" />
          <Input
            placeholder="Tool suchen, z. B. QR-Code, JSON, Passwort, Timestamp..."
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            className="h-12 pl-11 text-base"
          />
        </div>

        <div className="mt-3 flex flex-wrap gap-2">
          {quickSearches.map((item) => (
            <button
              key={item}
              type="button"
              onClick={() => setSearch(item)}
              className="border-2 border-ink-primary/40 bg-surface-sunken px-3 py-1 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-ink-secondary transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:border-ink-primary hover:bg-surface-raised"
              style={{ fontFamily: '"Courier New", monospace' }}
            >
              {item}
            </button>
          ))}
        </div>
      </div>

      {/* Category filter */}
      <div className="border-b-2 border-ink-primary p-4 sm:p-5">
        <div className="flex gap-2 overflow-x-auto pb-1">
          <CategoryButton
            active={activeCategory === "all"}
            onClick={() => setActiveCategory("all")}
            label="Alle"
            count={toolRegistry.length}
          />
          {usedCategories.map((category) => (
            <CategoryButton
              key={category}
              active={activeCategory === category}
              onClick={() => setActiveCategory(category)}
              label={categoryLabels[category]}
              count={toolRegistry.filter((tool) => tool.category === category).length}
            />
          ))}
        </div>
        {activeCategory !== "all" && (
          <p className="mt-3 max-w-3xl text-sm leading-6 text-ink-secondary">
            {categoryDescriptions[activeCategory]}
          </p>
        )}
      </div>

      {/* Results */}
      <div className="p-4 sm:p-5">
        {filtered.length > 0 ? (
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            {filtered.map((tool) => (
              <ToolCard key={tool.slug} tool={tool} />
            ))}
          </div>
        ) : (
          <div className="border-2 border-dashed border-ink-primary/40 bg-surface-sunken py-16 text-center">
            <p className="font-display text-lg font-bold uppercase tracking-tight text-ink-primary">
              Kein Tool gefunden
            </p>
            <p className="mt-1 text-sm text-ink-tertiary">Versuche einen anderen Suchbegriff oder Kategorie.</p>
          </div>
        )}
      </div>
    </section>
  );
}

function CategoryButton({
  active,
  onClick,
  label,
  count,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
  count: number;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`inline-flex shrink-0 items-center gap-2 border-2 border-ink-primary px-3 py-1.5 text-[0.75rem] font-bold uppercase tracking-[0.08em] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] ${
        active
          ? "bg-ink-primary text-surface-base shadow-[3px_3px_0_rgb(var(--brand-500))]"
          : "bg-surface-raised text-ink-primary hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[0_0_0_rgb(var(--ink-primary))] shadow-[3px_3px_0_rgb(var(--ink-primary))]"
      }`}
    >
      {label}
      <span
        className={`text-[0.6rem] font-bold ${active ? "text-surface-base/70" : "text-ink-tertiary"}`}
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {count}
      </span>
    </button>
  );
}