"use client";

import { ChevronRight } from "lucide-react";
import Link from "next/link";

import { cn } from "@/lib/utils";
import { buildItemSearchUrl, type ItemSearchParams } from "@/lib/item-search-params";
import type { FacetCount } from "./types";

interface CategoryNode {
  id: number;
  name: string;
  slug: string;
  children: CategoryNode[];
}

interface CategoryFacetProps {
  facets: FacetCount[];
  tree: CategoryNode[];
  params: ItemSearchParams;
}

function findNodeBySlug(nodes: CategoryNode[], slug: string): CategoryNode | null {
  for (const node of nodes) {
    if (node.slug === slug) return node;
    const child = findNodeBySlug(node.children, slug);
    if (child) return child;
  }
  return null;
}

export function CategoryFacet({ facets, tree, params }: CategoryFacetProps) {
  const selected = params.categorySlug;
  const countBySlug = new Map(facets.map((f) => [f.value, f.count]));

  const activeNode = selected ? findNodeBySlug(tree, selected) : null;
  const visibleNodes = activeNode ? activeNode.children : tree;

  return (
    <div className="space-y-2">
      <h3 className="text-sm font-semibold text-slate-900">Category</h3>
      {selected && (
        <Link
          href={buildItemSearchUrl(params, { categorySlug: null })}
          className="block text-xs text-forest-700 hover:underline"
        >
          &larr; Back to all
        </Link>
      )}
      {activeNode && (
        <div className="text-sm font-medium text-slate-700">{activeNode.name}</div>
      )}
      <ul className="space-y-1">
        {visibleNodes.map((node) => {
          const count = countBySlug.get(node.slug) ?? 0;
          if (count === 0 && selected !== node.slug) return null;
          return (
            <li key={node.id}>
              <Link
                href={buildItemSearchUrl(params, { categorySlug: node.slug })}
                className={cn(
                  "flex items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-slate-100",
                  selected === node.slug && "bg-forest-50 text-forest-800",
                )}
              >
                <span className="flex items-center gap-1">
                  {node.children.length > 0 && <ChevronRight className="h-3 w-3" />}
                  {node.name}
                </span>
                <span className="text-xs text-slate-500">{count}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}