"use client";

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

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export type YearGroup = { year: number; count: number };
export type RecipientGroup = { name: string; count: number };
export type LocationGroup = { name: string; count: number };

// ---------------------------------------------------------------------------
// Diacritic-aware normalize (matches books-grid pattern)
// ---------------------------------------------------------------------------

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")
    .replace(/ā/g, "a")
    .replace(/ī/g, "i")
    .replace(/ū/g, "u")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");
}

// ---------------------------------------------------------------------------
// Pagination
// ---------------------------------------------------------------------------

const PAGE_SIZE_RECIPIENTS = 50;
const PAGE_SIZE_LOCATIONS = 60;
const PAGE_SIZE_YEARS = 100; // years are small cards, show all usually

function Pagination({
  page,
  totalPages,
  onPageChange,
}: {
  page: number;
  totalPages: number;
  onPageChange: (p: number) => void;
}) {
  if (totalPages <= 1) return null;

  return (
    <div className="flex items-center justify-center gap-3 pt-4">
      <button
        onClick={() => onPageChange(page - 1)}
        disabled={page <= 1}
        className={cn(
          "flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
          page <= 1
            ? "text-muted-foreground/40 cursor-not-allowed"
            : "text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
      >
        <ChevronLeft className="size-4" />
        Previous
      </button>

      <span className="text-sm text-muted-foreground">
        Page {page} of {totalPages}
      </span>

      <button
        onClick={() => onPageChange(page + 1)}
        disabled={page >= totalPages}
        className={cn(
          "flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
          page >= totalPages
            ? "text-muted-foreground/40 cursor-not-allowed"
            : "text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
      >
        Next
        <ChevronRight className="size-4" />
      </button>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function LettersBrowser({
  currentView,
  years,
  recipients,
  locations,
}: {
  currentView: string;
  years: YearGroup[];
  recipients: RecipientGroup[];
  locations: LocationGroup[];
}) {
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);

  // Reset page when query or view changes
  const handleQueryChange = (q: string) => {
    setQuery(q);
    setPage(1);
  };

  // --- Filtered data ---

  const filteredYears = useMemo(() => {
    if (!query.trim()) return years;
    const q = normalize(query.trim());
    return years.filter((yg) => String(yg.year).includes(q));
  }, [years, query]);

  const filteredRecipients = useMemo(() => {
    if (!query.trim()) return recipients;
    const q = normalize(query.trim());
    return recipients.filter((rg) => normalize(rg.name).includes(q));
  }, [recipients, query]);

  const filteredLocations = useMemo(() => {
    if (!query.trim()) return locations;
    const q = normalize(query.trim());
    return locations.filter((lg) => normalize(lg.name).includes(q));
  }, [locations, query]);

  // --- Paginated data ---

  const activeData =
    currentView === "year"
      ? filteredYears
      : currentView === "recipient"
        ? filteredRecipients
        : filteredLocations;

  const pageSize =
    currentView === "year"
      ? PAGE_SIZE_YEARS
      : currentView === "recipient"
        ? PAGE_SIZE_RECIPIENTS
        : PAGE_SIZE_LOCATIONS;

  const totalPages = Math.max(1, Math.ceil(activeData.length / pageSize));
  const safePage = Math.min(page, totalPages);
  const startIdx = (safePage - 1) * pageSize;
  const endIdx = startIdx + pageSize;

  const placeholder =
    currentView === "year"
      ? "Search years..."
      : currentView === "recipient"
        ? "Search recipients..."
        : "Search locations...";

  const resultCount = activeData.length;
  const totalCount =
    currentView === "year"
      ? years.length
      : currentView === "recipient"
        ? recipients.length
        : locations.length;

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

      {/* Result count */}
      {query.trim() && (
        <p className="text-sm text-muted-foreground">
          {resultCount === 0
            ? "No results found"
            : `${resultCount} of ${totalCount} ${currentView === "year" ? "years" : currentView === "recipient" ? "recipients" : "locations"}`}
        </p>
      )}

      {/* Year view */}
      {currentView === "year" && (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
          {(filteredYears.slice(startIdx, endIdx) as YearGroup[]).map((yg) => (
            <Link key={yg.year} href={`/letters/year/${yg.year}`}>
              <Card className="transition-all hover:shadow-md hover:ring-foreground/20">
                <CardContent className="py-4 px-4 text-center">
                  <p className="text-lg font-bold text-foreground">
                    {yg.year}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {yg.count} {yg.count === 1 ? "letter" : "letters"}
                  </p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}

      {/* Recipient view */}
      {currentView === "recipient" && (
        <div className="space-y-1.5">
          {(filteredRecipients.slice(startIdx, endIdx) as RecipientGroup[]).map(
            (rg) => (
              <Link
                key={rg.name}
                href={`/letters/recipient/${encodeURIComponent(rg.name)}`}
                className="block"
              >
                <Card className="transition-all hover:shadow-md hover:ring-foreground/20">
                  <CardContent className="py-3 px-5 flex items-center justify-between">
                    <p className="font-medium text-foreground truncate">
                      {rg.name}
                    </p>
                    <Badge variant="secondary" className="text-xs shrink-0 ml-3">
                      {rg.count}
                    </Badge>
                  </CardContent>
                </Card>
              </Link>
            ),
          )}
        </div>
      )}

      {/* Location view */}
      {currentView === "location" && (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
          {(filteredLocations.slice(startIdx, endIdx) as LocationGroup[]).map(
            (lg) => (
              <Link
                key={lg.name}
                href={`/letters/location/${encodeURIComponent(lg.name)}`}
              >
                <Card className="transition-all hover:shadow-md hover:ring-foreground/20">
                  <CardContent className="py-4 px-4 text-center">
                    <p className="font-medium text-foreground">{lg.name}</p>
                    <p className="text-xs text-muted-foreground">
                      {lg.count} {lg.count === 1 ? "letter" : "letters"}
                    </p>
                  </CardContent>
                </Card>
              </Link>
            ),
          )}
        </div>
      )}

      {/* Pagination */}
      <Pagination
        page={safePage}
        totalPages={totalPages}
        onPageChange={setPage}
      />
    </div>
  );
}