"use client";

import { useState, useMemo } from "react";
import Link from "next/link";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { Search } from "lucide-react";

export type OtherDocumentInfo = {
  slug: string;
  title: string;
  description: string;
  year: number | null;
  totalChapters: number;
  href: string;
};

/**
 * Strip diacritics / accents so that "Krsna" matches "Kṛṣṇa",
 * "Gita" matches "Gītā", "Srimad" matches "Śrīmad", etc.
 */
function normalize(text: string): string {
  return (
    text
      .toLowerCase()
      .replace(/ṛ/g, "r")
      .replace(/ṝ/g, "r")
      .replace(/ṣ/g, "s")
      .replace(/ś/g, "s")
      .replace(/ṭ/g, "t")
      .replace(/ḍ/g, "d")
      .replace(/ṇ/g, "n")
      .replace(/ñ/g, "n")
      .replace(/ṅ/g, "n")
      .replace(/ḥ/g, "h")
      .replace(/ṁ/g, "m")
      .replace(/ṃ/g, "m")
      .replace(/ḷ/g, "l")
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "")
  );
}

export function OtherDocumentsGrid({
  items,
}: {
  items: OtherDocumentInfo[];
}) {
  const [query, setQuery] = useState("");

  const normalizedItems = useMemo(
    () =>
      items.map((item) => ({
        item,
        searchText: normalize(
          `${item.title} ${item.description} ${item.slug}`,
        ),
      })),
    [items],
  );

  const filtered = useMemo(() => {
    if (!query.trim()) return items;
    const q = normalize(query.trim());
    return normalizedItems
      .filter((entry) => entry.searchText.includes(q))
      .map((entry) => entry.item);
  }, [items, normalizedItems, query]);

  return (
    <div className="space-y-6">
      {/* Search input */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
        <Input
          type="text"
          placeholder="Search documents by title..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="pl-9"
        />
      </div>

      {/* Results count when searching */}
      {query.trim() && (
        <p className="text-sm text-muted-foreground">
          {filtered.length === 0
            ? "No documents found"
            : `${filtered.length} document${filtered.length === 1 ? "" : "s"} found`}
        </p>
      )}

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filtered.map((item) => (
          <Link key={item.slug} href={item.href} className="block h-full">
            <Card
              className={cn(
                "h-full transition-all hover:shadow-md hover:ring-foreground/20",
              )}
            >
              <CardHeader className="pb-2">
                <CardTitle className="text-base font-bold leading-snug">
                  {item.title}
                </CardTitle>
                {item.description && (
                  <CardDescription className="text-xs line-clamp-2">
                    {item.description}
                  </CardDescription>
                )}
              </CardHeader>
              <CardContent className="pt-0">
                <div className="flex flex-wrap items-center gap-2 text-sm">
                  {item.year && (
                    <Badge variant="secondary" className="text-xs">
                      {item.year}
                    </Badge>
                  )}
                  {item.totalChapters > 0 && (
                    <span className="text-muted-foreground text-xs">
                      {item.totalChapters}{" "}
                      {item.totalChapters === 1 ? "chapter" : "chapters"}
                    </span>
                  )}
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}