"use client";

import { useState, useEffect, useCallback, useRef, Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import Link from "next/link";
import { PageHeader } from "@/components/page-header";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import {
  Search,
  Loader2,
  BookOpen,
  Mail,
  Mic,
  BookA,
  PenLine,
  NotebookPen,
  Newspaper,
  FileStack,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

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

interface SearchResult {
  collection: string;
  id: string;
  title: string;
  snippet: string;
  url: string;
  meta: Record<string, string | undefined>;
}

interface SearchResponse {
  query: string;
  type: string;
  results: SearchResult[];
  total: number;
  page: number;
  limit: number;
  total_pages: number;
}

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

const CONTENT_TABS = [
  { label: "All", value: "all" },
  { label: "Books", value: "books" },
  { label: "Letters", value: "letters" },
  { label: "Transcriptions", value: "transcriptions" },
  { label: "Glossary", value: "glossary" },
  { label: "Essays", value: "essays" },
  { label: "Journals", value: "journals" },
  { label: "Magazines", value: "magazines" },
  { label: "Other Documents", value: "other_documents" },
] as const;

// Maps a frontend tab value to the actual BFF collection name(s).
// "books" expands to verses + prose for the API call.
const TAB_TO_COLLECTIONS: Record<string, string[]> = {
  books: ["verses", "prose"],
};

function tabsToBffType(tabs: Set<string>): string {
  if (tabs.size === 0) return "all";
  const collections: string[] = [];
  for (const tab of tabs) {
    const expanded = TAB_TO_COLLECTIONS[tab];
    if (expanded) {
      collections.push(...expanded);
    } else {
      collections.push(tab);
    }
  }
  return collections.join(",");
}

function bffTypeToTabs(typeParam: string): Set<string> {
  if (!typeParam || typeParam === "all") return new Set<string>();
  const collections = typeParam
    .split(",")
    .map((t) => t.trim())
    .filter(Boolean);
  const tabs = new Set<string>();
  for (const col of collections) {
    // If this collection is part of an expanded tab, use the tab name
    let mapped = false;
    for (const [tab, expanded] of Object.entries(TAB_TO_COLLECTIONS)) {
      if (expanded.includes(col)) {
        tabs.add(tab);
        mapped = true;
        break;
      }
    }
    if (!mapped) tabs.add(col);
  }
  return tabs;
}

const COLLECTION_CONFIG: Record<
  string,
  { label: string; icon: typeof BookOpen; color: string }
> = {
  verses: {
    label: "Verse",
    icon: BookOpen,
    color: "bg-primary/10 text-primary",
  },
  prose: {
    label: "Prose",
    icon: BookOpen,
    color: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
  },
  letters: {
    label: "Letter",
    icon: Mail,
    color: "bg-green-500/10 text-green-700 dark:text-green-400",
  },
  transcriptions: {
    label: "Transcript",
    icon: Mic,
    color: "bg-purple-500/10 text-purple-700 dark:text-purple-400",
  },
  glossary: {
    label: "Glossary",
    icon: BookA,
    color: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
  },
  essays: {
    label: "Essay",
    icon: PenLine,
    color: "bg-teal-500/10 text-teal-700 dark:text-teal-400",
  },
  journals: {
    label: "Journal",
    icon: NotebookPen,
    color: "bg-orange-500/10 text-orange-700 dark:text-orange-400",
  },
  magazines: {
    label: "Magazine",
    icon: Newspaper,
    color: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
  },
  other_documents: {
    label: "Document",
    icon: FileStack,
    color: "bg-muted text-muted-foreground",
  },
};

// ---------------------------------------------------------------------------
// Debounce hook
// ---------------------------------------------------------------------------

function useDebouncedValue<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// ---------------------------------------------------------------------------
// Inner search component (uses useSearchParams)
// ---------------------------------------------------------------------------

function SearchInner() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);

  // Read initial state from URL
  const initialQuery = searchParams.get("q") || "";
  const initialType = searchParams.get("type") || "all";
  const initialPage = parseInt(searchParams.get("page") || "1", 10);

  const [inputValue, setInputValue] = useState(initialQuery);
  // selectedTypes holds tab values (e.g., "books", "letters") — not raw collection names.
  const [selectedTypes, setSelectedTypes] = useState<Set<string>>(() =>
    bffTypeToTabs(initialType),
  );
  const [currentPage, setCurrentPage] = useState(initialPage);

  // Convert selected tabs to the BFF type param ("books" → "verses,prose")
  const activeTypeParam = tabsToBffType(selectedTypes);
  // For URL: keep the tab-friendly form ("books") instead of the expanded form
  const urlTypeParam =
    selectedTypes.size === 0 ? "all" : Array.from(selectedTypes).join(",");
  const [data, setData] = useState<SearchResponse | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const debouncedQuery = useDebouncedValue(inputValue, 300);
  const isQueryEmpty = !debouncedQuery.trim();

  // When the query is empty, derive these as "no results" during render
  // instead of setting state inside an effect.
  const effectiveData = isQueryEmpty ? null : data;
  const hasSearched = isQueryEmpty ? false : !!debouncedQuery.trim();

  // Sync URL when state changes
  const pushUrl = useCallback(
    (q: string, typeParam: string, page: number) => {
      const params = new URLSearchParams();
      if (q.trim()) params.set("q", q.trim());
      if (typeParam !== "all") params.set("type", typeParam);
      if (page > 1) params.set("page", String(page));
      const qs = params.toString();
      router.replace(`/search${qs ? `?${qs}` : ""}`, { scroll: false });
    },
    [router],
  );

  // Reset page to 1 when query or type changes.
  // Uses the "compare previous value during render" pattern
  // recommended by React instead of a setState-in-effect.
  const [prevQuery, setPrevQuery] = useState(debouncedQuery);
  const [prevType, setPrevType] = useState(activeTypeParam);
  if (prevQuery !== debouncedQuery || prevType !== activeTypeParam) {
    setPrevQuery(debouncedQuery);
    setPrevType(activeTypeParam);
    setCurrentPage(1);
  }

  // Fetch search results
  useEffect(() => {
    const query = debouncedQuery.trim();
    if (!query) {
      pushUrl("", urlTypeParam, 1);
      return;
    }

    setIsLoading(true);
    pushUrl(query, urlTypeParam, currentPage);

    const controller = new AbortController();

    const params = new URLSearchParams({
      q: query,
      type: activeTypeParam,
      page: String(currentPage),
      limit: "20",
    });

    fetch(`/api/search?${params.toString()}`, { signal: controller.signal })
      .then((res) => res.json())
      .then((json: SearchResponse) => {
        // Defensive: ensure results is always an array (BFF may return null)
        setData({ ...json, results: json.results ?? [] });
        setIsLoading(false);
      })
      .catch((err) => {
        if (err.name !== "AbortError") {
          setIsLoading(false);
          setData({
            query,
            type: activeTypeParam,
            results: [],
            total: 0,
            page: 1,
            limit: 20,
            total_pages: 0,
          });
        }
      });

    return () => controller.abort();
  }, [debouncedQuery, activeTypeParam, urlTypeParam, currentPage, pushUrl]);

  // Auto-focus the input on mount
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleTypeChange = (type: string) => {
    if (type === "all") {
      // "All" clears all individual selections
      setSelectedTypes(new Set());
    } else {
      setSelectedTypes((prev) => {
        const next = new Set(prev);
        if (next.has(type)) {
          // Deselect — if nothing left, goes back to "all"
          next.delete(type);
        } else {
          next.add(type);
        }
        return next;
      });
    }
  };

  const isTypeActive = (type: string): boolean => {
    if (type === "all") return selectedTypes.size === 0;
    return selectedTypes.has(type);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div className="min-h-screen bg-background">
      <PageHeader>
        <Link
          href="/"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; Home
        </Link>
        <h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
        <p className="mt-1 text-muted-foreground">
          Search across all of Śrīla Prabhupāda&apos;s books, letters, lectures,
          and more
        </p>
      </PageHeader>

      <main className="max-w-5xl mx-auto px-6 py-8">
        {/* Search Input */}
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground pointer-events-none" />
          <Input
            ref={inputRef}
            type="search"
            placeholder="Search for verses, letters, lectures, terms..."
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            className="h-14 pl-12 pr-4 text-lg rounded-xl"
          />
          {isLoading && (
            <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground animate-spin" />
          )}
        </div>

        {/* Content Type Tabs */}
        <div className="mt-6 flex flex-wrap gap-2">
          {CONTENT_TABS.map((tab) => {
            const active = isTypeActive(tab.value);
            return (
              <button
                key={tab.value}
                onClick={() => handleTypeChange(tab.value)}
                className={cn(
                  "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
                  active
                    ? "bg-primary text-primary-foreground"
                    : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
                )}
              >
                {tab.label}
                {effectiveData &&
                  active &&
                  selectedTypes.size <= 1 &&
                  effectiveData.total > 0 && (
                    <span
                      className={cn(
                        "ml-1 inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none",
                        "bg-primary-foreground/20 text-primary-foreground",
                      )}
                    >
                      {effectiveData.total.toLocaleString()}
                    </span>
                  )}
              </button>
            );
          })}
        </div>

        {/* Results Area */}
        <div className="mt-8">
          {/* Loading */}
          {isLoading && (
            <div className="flex items-center justify-center gap-2 py-16 text-muted-foreground">
              <Loader2 className="size-5 animate-spin" />
              <span>Searching…</span>
            </div>
          )}

          {/* No query */}
          {!isLoading && !hasSearched && (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <Search className="size-12 text-muted-foreground/40 mb-4" />
              <p className="text-lg text-muted-foreground">
                Search across all of Śrīla Prabhupāda&apos;s books, letters,
                lectures, and more
              </p>
            </div>
          )}

          {/* No results */}
          {!isLoading &&
            hasSearched &&
            effectiveData &&
            effectiveData.results.length === 0 && (
              <div className="flex flex-col items-center justify-center py-16 text-center">
                <Search className="size-12 text-muted-foreground/40 mb-4" />
                <p className="text-lg text-muted-foreground">
                  No results found for &ldquo;{debouncedQuery}&rdquo;.
                  <br />
                  <span className="text-sm">
                    Try a different search term or content type.
                  </span>
                </p>
              </div>
            )}

          {/* Results */}
          {!isLoading && effectiveData && effectiveData.results.length > 0 && (
            <>
              {/* Results count + top pagination */}
              <div className="mb-4 flex items-center justify-between flex-wrap gap-3">
                <p className="text-sm text-muted-foreground">
                  {effectiveData.total.toLocaleString()}{" "}
                  {effectiveData.total === 1 ? "result " : "results "} for &ldquo;
                  {effectiveData.query}&rdquo;
                </p>
                {effectiveData.total_pages > 1 && (
                  <PaginationControls
                    page={effectiveData.page}
                    totalPages={effectiveData.total_pages}
                    onPageChange={handlePageChange}
                    compact
                  />
                )}
              </div>

              {/* Result list */}
              <div className="space-y-3">
                {effectiveData.results.map((result, i) => (
                  <ResultCard
                    key={`${result.collection}-${result.id || i}`}
                    result={result}
                  />
                ))}
              </div>

              {/* Bottom pagination */}
              {effectiveData.total_pages > 1 && (
                <div className="mt-8">
                  <PaginationControls
                    page={effectiveData.page}
                    totalPages={effectiveData.total_pages}
                    total={effectiveData.total}
                    onPageChange={handlePageChange}
                  />
                </div>
              )}
            </>
          )}
        </div>
      </main>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Pagination Controls
// ---------------------------------------------------------------------------

function PaginationControls({
  page,
  totalPages,
  total,
  onPageChange,
  compact = false,
}: {
  page: number;
  totalPages: number;
  total?: number;
  onPageChange: (page: number) => void;
  compact?: boolean;
}) {
  if (compact) {
    return (
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
          aria-label="Previous page"
        >
          <ChevronLeft className="size-4" />
        </Button>
        <span className="text-xs text-muted-foreground tabular-nums">
          {page} / {totalPages}
        </span>
        <Button
          variant="outline"
          size="sm"
          disabled={page >= totalPages}
          onClick={() => onPageChange(page + 1)}
          aria-label="Next page"
        >
          <ChevronRight className="size-4" />
        </Button>
      </div>
    );
  }

  return (
    <div className="flex items-center justify-between">
      <Button
        variant="outline"
        size="default"
        disabled={page <= 1}
        onClick={() => onPageChange(page - 1)}
      >
        <ChevronLeft className="size-4" />
        Previous
      </Button>

      <span className="text-sm text-muted-foreground">
        Page {page} of {totalPages}
        {total != null && ` · ${total.toLocaleString()} results`}
      </span>

      <Button
        variant="outline"
        size="default"
        disabled={page >= totalPages}
        onClick={() => onPageChange(page + 1)}
      >
        Next
        <ChevronRight className="size-4" />
      </Button>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Result Card
// ---------------------------------------------------------------------------

function ResultCard({ result }: { result: SearchResult }) {
  const config = COLLECTION_CONFIG[result.collection] || {
    label: result.collection,
    icon: FileStack,
    color: "bg-muted text-muted-foreground",
  };
  const Icon = config.icon;

  return (
    <Link
      href={result.url}
      className="block group"
      onClick={() => {
        try {
          sessionStorage.setItem("spsays_from_search", "1");
        } catch {
          /* sessionStorage unavailable */
        }
      }}
    >
      <Card className="transition-all group-hover:shadow-md group-hover:ring-foreground/20 cursor-pointer">
        <CardContent className="flex flex-col gap-2">
          {/* Collection badge */}
          <div className="flex items-center gap-2">
            <span
              className={cn(
                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
                config.color,
              )}
            >
              <Icon className="size-3" />
              {config.label}
            </span>
          </div>

          {/* Title */}
          <p className="text-base font-semibold text-foreground group-hover:text-primary transition-colors leading-snug">
            {result.title}
          </p>

          {/* Snippet with highlighted matches */}
          <p
            className="text-sm text-muted-foreground leading-relaxed [&_mark]:bg-yellow-200/80 [&_mark]:text-foreground [&_mark]:rounded-sm [&_mark]:px-0.5 dark:[&_mark]:bg-yellow-500/30"
            dangerouslySetInnerHTML={{ __html: result.snippet }}
          />

          {/* Meta information */}
          <ResultMeta result={result} />
        </CardContent>
      </Card>
    </Link>
  );
}

// ---------------------------------------------------------------------------
// Result Meta — varies by collection
// ---------------------------------------------------------------------------

function ResultMeta({ result }: { result: SearchResult }) {
  const { collection, meta } = result;

  if (!meta || Object.keys(meta).length === 0) return null;

  let items: string[] = [];

  switch (collection) {
    case "verses":
      if (meta.book) items.push(meta.book);
      if (meta.reference) items.push(meta.reference);
      break;
    case "letters":
      if (meta.date) items.push(meta.date);
      if (meta.location) items.push(meta.location);
      break;
    case "transcriptions":
      if (meta.type) items.push(meta.type);
      if (meta.date) items.push(meta.date);
      if (meta.place) items.push(meta.place);
      break;
    case "glossary":
      if (meta.term) items.push(meta.term);
      break;
    case "prose":
    case "essays":
    case "journals":
    case "magazines":
    case "other_documents":
      if (meta.book) items.push(meta.book);
      break;
    default:
      // Show all meta values
      items = Object.values(meta).filter(Boolean) as string[];
  }

  if (items.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {items.map((item, i) => (
        <Badge key={i} variant="secondary" className="text-xs font-normal">
          {item}
        </Badge>
      ))}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Exported wrapper with Suspense boundary
// ---------------------------------------------------------------------------

export function SearchContent() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-background">
          <PageHeader>
            <Link
              href="/"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              &larr; Home
            </Link>
            <h1 className="mt-3 text-3xl font-bold text-foreground">Search</h1>
            <p className="mt-1 text-muted-foreground">
              Search across all of Śrīla Prabhupāda&apos;s books, letters,
              lectures, and more
            </p>
          </PageHeader>
          <main className="max-w-5xl mx-auto px-6 py-8">
            <div className="flex items-center justify-center py-16 text-muted-foreground">
              <Loader2 className="size-5 animate-spin" />
            </div>
          </main>
        </div>
      }
    >
      <SearchInner />
    </Suspense>
  );
}