"use client";

import { useState, useMemo, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Search, X, Menu, ChevronLeft, ChevronRight } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { Button, buttonVariants } from "@/components/ui/button";
import { ReadingSettings } from "@/components/reading-settings";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

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

type GlossaryEntry = {
  term: string;
  definition: string;
  definition_html: string;
};

type Props = {
  entries: GlossaryEntry[];
  activeLetter: string;
  letters: string[];
  letterCounts: Record<string, number>;
};

// ---------------------------------------------------------------------------
// Normalize for search
// ---------------------------------------------------------------------------

function normalizeForSearch(text: string): string {
  return text
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase();
}

// ---------------------------------------------------------------------------
// Letter Navigation — horizontal row matching disciples pattern
// ---------------------------------------------------------------------------

function LetterNav({
  letters,
  activeLetter,
  letterCounts,
}: {
  letters: string[];
  activeLetter: string;
  letterCounts: Record<string, number>;
}) {
  return (
    <nav className="flex flex-wrap gap-1 justify-center">
      {letters.map((letter) => {
        const count = letterCounts[letter] ?? 0;
        const isActive = letter === activeLetter;
        const isEmpty = count === 0;

        return (
          <Link
            key={letter}
            href={`/glossary/${letter.toLowerCase()}`}
            className={cn(
              "relative flex flex-col items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors min-w-9",
              isActive
                ? "bg-primary text-primary-foreground shadow-sm"
                : isEmpty
                  ? "text-muted-foreground/40 cursor-default"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
          >
            <span className="leading-none">{letter}</span>
          </Link>
        );
      })}
    </nav>
  );
}

// ---------------------------------------------------------------------------
// Sidebar (desktop) — shows terms for active letter only
// ---------------------------------------------------------------------------

function TermSidebar({
  terms,
  activeTerm,
  filteredTerms,
  onSelectTerm,
}: {
  terms: string[];
  activeTerm: string;
  filteredTerms: string[] | null;
  onSelectTerm: (term: string) => void;
}) {
  const activeRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    activeRef.current?.scrollIntoView({ block: "nearest" });
  }, [activeTerm]);

  const displayTerms = filteredTerms ?? terms;

  return (
    <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
        Terms
      </h2>
      <nav className="flex flex-col gap-0.5">
        {displayTerms.map((term) => {
          const isActive = term === activeTerm;
          return (
            <button
              key={term}
              ref={isActive ? activeRef : undefined}
              onClick={() => onSelectTerm(term)}
              className={cn(
                "px-2 py-1.5 rounded-md text-sm transition-colors truncate text-left",
                isActive
                  ? "bg-primary/10 text-primary font-medium"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
              title={term}
            >
              {term}
            </button>
          );
        })}
        {displayTerms.length === 0 && (
          <p className="px-2 py-4 text-sm text-muted-foreground">No matches</p>
        )}
      </nav>
    </aside>
  );
}

// ---------------------------------------------------------------------------
// Mobile drawer
// ---------------------------------------------------------------------------

function TermMobileNav({
  terms,
  activeTerm,
  filteredTerms,
  onSelectTerm,
  activeLetter,
}: {
  terms: string[];
  activeTerm: string;
  filteredTerms: string[] | null;
  onSelectTerm: (term: string) => void;
  activeLetter: string;
}) {
  const [open, setOpen] = useState(false);
  const displayTerms = filteredTerms ?? terms;

  return (
    <Drawer open={open} onOpenChange={setOpen} direction="left">
      <DrawerTrigger
        className={cn(
          buttonVariants({ variant: "outline", size: "sm" }),
          "lg:hidden gap-1.5",
        )}
      >
        <Menu className="size-4" />
        <span className="hidden sm:inline">Terms</span>
      </DrawerTrigger>
      <DrawerContent direction="left" className="h-full">
        <DrawerHeader className="text-left border-b border-border pb-4 mb-2">
          <DrawerTitle>Glossary — {activeLetter}</DrawerTitle>
        </DrawerHeader>
        <nav className="overflow-y-auto px-4 pb-6 pt-2">
          <div className="flex flex-col gap-0.5">
            {displayTerms.map((term) => {
              const isActive = term === activeTerm;
              return (
                <DrawerClose key={term} asChild>
                  <button
                    onClick={() => {
                      onSelectTerm(term);
                      setOpen(false);
                    }}
                    className={cn(
                      "px-2 py-2 rounded-md text-sm transition-colors truncate text-left",
                      isActive
                        ? "bg-primary/10 text-primary font-medium"
                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                    )}
                  >
                    {term}
                  </button>
                </DrawerClose>
              );
            })}
          </div>
        </nav>
      </DrawerContent>
    </Drawer>
  );
}

// ---------------------------------------------------------------------------
// Prev / Next nav — matches BbdNav pattern
// ---------------------------------------------------------------------------

function TermNav({
  prev,
  next,
  terms,
  activeTerm,
  filteredTerms,
  onSelectTerm,
  activeLetter,
}: {
  prev: string | null;
  next: string | null;
  terms: string[];
  activeTerm: string;
  filteredTerms: string[] | null;
  onSelectTerm: (term: string) => void;
  activeLetter: string;
}) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="flex items-center gap-2">
        <TermMobileNav
          terms={terms}
          activeTerm={activeTerm}
          filteredTerms={filteredTerms}
          onSelectTerm={onSelectTerm}
          activeLetter={activeLetter}
        />

        {prev ? (
          <button
            onClick={() => onSelectTerm(prev)}
            className={cn(
              buttonVariants({ variant: "outline", size: "sm" }),
              "gap-1.5",
            )}
          >
            <ChevronLeft className="size-4" />
            <span className="hidden sm:inline truncate max-w-[180px]">
              {prev}
            </span>
            <span className="sm:hidden">Previous</span>
          </button>
        ) : (
          <div className="hidden lg:block" />
        )}
      </div>

      {next ? (
        <button
          onClick={() => onSelectTerm(next)}
          className={cn(
            buttonVariants({ variant: "outline", size: "sm" }),
            "gap-1.5",
          )}
        >
          <span className="hidden sm:inline truncate max-w-[180px]">
            {next}
          </span>
          <span className="sm:hidden">Next</span>
          <ChevronRight className="size-4" />
        </button>
      ) : (
        <div />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------

export function GlossaryClient({
  entries,
  activeLetter,
  letters,
  letterCounts,
}: Props) {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [activeTermRaw, setActiveTerm] = useState(entries[0]?.term || "");
  const contentRef = useRef<HTMLDivElement>(null);

  // All term names
  const allTerms = useMemo(() => entries.map((e) => e.term), [entries]);

  // Term → entry index map
  const termIndex = useMemo(() => {
    const map = new Map<string, number>();
    entries.forEach((e, i) => map.set(e.term, i));
    return map;
  }, [entries]);

  // Search filter
  const searchResults = useMemo(() => {
    if (!query.trim()) return null;
    const q = normalizeForSearch(query.trim());
    return entries
      .filter((e) => {
        const normTerm = normalizeForSearch(e.term);
        const normDef = normalizeForSearch(e.definition);
        return normTerm.includes(q) || normDef.includes(q);
      })
      .map((e) => e.term);
  }, [entries, query]);

  // Safe activeTerm — if search is active and current term isn't in results, use first result
  const activeTerm = useMemo(() => {
    if (
      searchResults &&
      searchResults.length > 0 &&
      !searchResults.includes(activeTermRaw)
    ) {
      return searchResults[0];
    }
    return activeTermRaw;
  }, [searchResults, activeTermRaw]);

  // Navigation list — search results or all terms
  const navList = useMemo(() => {
    return searchResults ?? allTerms;
  }, [searchResults, allTerms]);

  // Prev / next within nav list
  const currentIdx = navList.indexOf(activeTerm);
  const prev = currentIdx > 0 ? navList[currentIdx - 1] : null;
  const next =
    currentIdx >= 0 && currentIdx < navList.length - 1
      ? navList[currentIdx + 1]
      : null;

  // Active entry data
  const activeEntry = useMemo(() => {
    const idx = termIndex.get(activeTerm);
    return idx !== undefined ? entries[idx] : null;
  }, [entries, termIndex, activeTerm]);

  // Update URL with ?term= when active term changes (for OG + shareable links)
  useEffect(() => {
    const url = new URL(window.location.href);
    if (activeTerm) {
      url.searchParams.set("term", activeTerm);
    } else {
      url.searchParams.delete("term");
    }
    window.history.replaceState({}, "", url.toString());
  }, [activeTerm]);

  const handleSelectTerm = useCallback((term: string) => {
    setActiveTerm(term);
    contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  return (
    <>
      {/* Sticky header */}
      <header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
        <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0">
            <Link
              href="/"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              &larr; Home
            </Link>
            <h1 className="mt-3 text-2xl font-bold text-foreground">
              <span className="text-primary">Glossary: </span>
              {activeEntry?.term || activeLetter}
            </h1>
          </div>
          <div className="shrink-0 pt-1">
            <ReadingSettings />
          </div>
        </div>
      </header>

      {/* Letter navigation row */}
      <div className="border-b border-border bg-card px-6 py-3">
        <div className="max-w-5xl mx-auto">
          <LetterNav
            letters={letters}
            activeLetter={activeLetter}
            letterCounts={letterCounts}
          />
        </div>
      </div>

      {/* Sidebar + Main */}
      <div className="max-w-5xl mx-auto flex">
        {/* Sidebar — terms for active letter */}
        <TermSidebar
          terms={allTerms}
          activeTerm={activeTerm}
          filteredTerms={searchResults}
          onSelectTerm={handleSelectTerm}
        />

        {/* Main content */}
        <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
          {/* Search bar */}
          <div className="relative w-full">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
            <Input
              type="text"
              placeholder={`Search within ${activeLetter}...`}
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="pl-10 pr-10"
            />
            {query && (
              <Button
                variant="ghost"
                size="icon-xs"
                className="absolute right-2 top-1/2 -translate-y-1/2"
                onClick={() => setQuery("")}
                aria-label="Clear search"
              >
                <X className="size-3.5" />
              </Button>
            )}
          </div>

          {/* Top nav */}
          <TermNav
            prev={prev}
            next={next}
            terms={allTerms}
            activeTerm={activeTerm}
            filteredTerms={searchResults}
            onSelectTerm={handleSelectTerm}
            activeLetter={activeLetter}
          />

          {/* Search hint */}
          {searchResults && (
            <p className="text-sm text-muted-foreground">
              {searchResults.length === 0
                ? "No entries match your search."
                : `${searchResults.length} result${searchResults.length !== 1 ? "s" : ""} for "${query}"`}
            </p>
          )}

          {/* Single entry view */}
          {activeEntry ? (
            <Card>
              <CardContent className="py-8 px-6 sm:px-8">
                <div className="space-y-4">
                  <h2 className="text-2xl font-bold text-foreground">
                    {activeEntry.term}
                  </h2>
                  <div
                    className="text-base text-foreground leading-relaxed"
                    dangerouslySetInnerHTML={{
                      __html: activeEntry.definition_html,
                    }}
                  />
                </div>
              </CardContent>
            </Card>
          ) : (
            <div className="py-12 text-center text-muted-foreground">
              <p className="text-lg font-medium">No entry selected</p>
            </div>
          )}

          {/* Bottom nav */}
          <TermNav
            prev={prev}
            next={next}
            terms={allTerms}
            activeTerm={activeTerm}
            filteredTerms={searchResults}
            onSelectTerm={handleSelectTerm}
            activeLetter={activeLetter}
          />
        </main>
      </div>
    </>
  );
}