"use client";

import { useState, useMemo, useRef, useEffect } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  Search,
  ChevronLeft,
  ChevronRight,
  ArrowUpDown,
  ArrowDownAZ,
  ArrowUpAZ,
  Hash,
  Check,
  BookOpen,
  MessageCircle,
} from "lucide-react";

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

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

type SortMode = "count" | "asc" | "desc";

// ---------------------------------------------------------------------------
// 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, "");
}

// ---------------------------------------------------------------------------
// Sort Popover
// ---------------------------------------------------------------------------

const SORT_OPTIONS: { key: SortMode; label: string; icon: typeof Hash }[] = [
  { key: "count", label: "Most transcriptions first", icon: Hash },
  { key: "asc", label: "A → Z", icon: ArrowDownAZ },
  { key: "desc", label: "Z → A", icon: ArrowUpAZ },
];

const SORT_OPTIONS_YEAR: { key: SortMode; label: string; icon: typeof Hash }[] =
  [
    { key: "count", label: "Most transcriptions first", icon: Hash },
    { key: "asc", label: "Oldest first", icon: ArrowDownAZ },
    { key: "desc", label: "Newest first", icon: ArrowUpAZ },
  ];

function SortPopover({
  sort,
  onSortChange,
  isYear,
}: {
  sort: SortMode;
  onSortChange: (s: SortMode) => void;
  isYear?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  // Close on outside click
  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);

  const options = isYear ? SORT_OPTIONS_YEAR : SORT_OPTIONS;

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen(!open)}
        className={cn(
          "flex items-center justify-center size-10 rounded-lg border transition-colors",
          open
            ? "bg-primary/10 border-primary/30 text-primary"
            : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
        title="Sort options"
        aria-label="Sort options"
      >
        <ArrowUpDown className="size-4" />
      </button>

      {open && (
        <div className="absolute right-0 top-12 z-50 w-52 rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95">
          {options.map((opt) => {
            const Icon = opt.icon;
            const isActive = sort === opt.key;
            return (
              <button
                key={opt.key}
                onClick={() => {
                  onSortChange(opt.key);
                  setOpen(false);
                }}
                className={cn(
                  "flex items-center gap-3 w-full px-3 py-2.5 text-sm transition-colors text-left",
                  isActive
                    ? "bg-primary/10 text-primary font-medium"
                    : "text-foreground hover:bg-muted",
                )}
              >
                <Icon className="size-4 shrink-0" />
                <span className="flex-1">{opt.label}</span>
                {isActive && <Check className="size-3.5 shrink-0" />}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

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

const PAGE_SIZE_PLACES = 60;
const PAGE_SIZE_YEARS = 100;

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>
  );
}

// ---------------------------------------------------------------------------
// Sorting helpers
// ---------------------------------------------------------------------------

function sortYears(data: YearGroup[], mode: SortMode): YearGroup[] {
  const sorted = [...data];
  switch (mode) {
    case "count":
      return sorted.sort((a, b) => b.count - a.count);
    case "asc":
      return sorted.sort((a, b) => a.year - b.year);
    case "desc":
      return sorted.sort((a, b) => b.year - a.year);
  }
}

function sortPlaces(data: PlaceGroup[], mode: SortMode): PlaceGroup[] {
  const sorted = [...data];
  switch (mode) {
    case "count":
      return sorted.sort((a, b) => b.count - a.count);
    case "asc":
      return sorted.sort((a, b) => a.name.localeCompare(b.name));
    case "desc":
      return sorted.sort((a, b) => b.name.localeCompare(a.name));
  }
}

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

export function TranscriptionsBrowser({
  currentView,
  years,
  places,
  lectureCount,
  conversationCount,
}: {
  currentView: string;
  years: YearGroup[];
  places: PlaceGroup[];
  lectureCount: number;
  conversationCount: number;
}) {
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);
  const [sortYear, setSortYear] = useState<SortMode>("asc");
  const [sortPlace, setSortPlace] = useState<SortMode>("count");

  const handleQueryChange = (q: string) => {
    setQuery(q);
    setPage(1);
  };

  const handleSortChange = (mode: SortMode) => {
    if (currentView === "year") setSortYear(mode);
    else setSortPlace(mode);
    setPage(1);
  };

  const currentSort = currentView === "year" ? sortYear : sortPlace;

  // --- Filtered + sorted data ---

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

  const filteredPlaces = useMemo(() => {
    let data = places;
    if (query.trim()) {
      const q = normalize(query.trim());
      data = data.filter((pg) => normalize(pg.name).includes(q));
    }
    return sortPlaces(data, sortPlace);
  }, [places, query, sortPlace]);

  // --- Paginated data ---

  const activeData =
    currentView === "year" ? filteredYears : filteredPlaces;

  const pageSize =
    currentView === "year" ? PAGE_SIZE_YEARS : PAGE_SIZE_PLACES;

  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..." : "Search places...";

  const resultCount = activeData.length;
  const totalCount =
    currentView === "year" ? years.length : places.length;

  // --- Type view (no search/sort/pagination needed) ---

  if (currentView === "type") {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Link href="/transcriptions/type/lecture">
          <Card className="transition-all hover:shadow-md hover:ring-foreground/20">
            <CardContent className="py-8 px-6 text-center">
              <BookOpen className="size-8 mx-auto mb-3 text-primary" />
              <p className="text-xl font-bold text-foreground">Lectures</p>
              <p className="text-sm text-muted-foreground mt-1">
                {lectureCount.toLocaleString()} transcriptions
              </p>
              <p className="text-xs text-muted-foreground/60 mt-2">
                Bhagavad-gītā, Śrīmad-Bhāgavatam, Caitanya-caritāmṛta &amp;
                more
              </p>
            </CardContent>
          </Card>
        </Link>
        <Link href="/transcriptions/type/conversation">
          <Card className="transition-all hover:shadow-md hover:ring-foreground/20">
            <CardContent className="py-8 px-6 text-center">
              <MessageCircle className="size-8 mx-auto mb-3 text-primary" />
              <p className="text-xl font-bold text-foreground">Conversations</p>
              <p className="text-sm text-muted-foreground mt-1">
                {conversationCount.toLocaleString()} transcriptions
              </p>
              <p className="text-xs text-muted-foreground/60 mt-2">
                Morning walks, room conversations, interviews &amp; more
              </p>
            </CardContent>
          </Card>
        </Link>
      </div>
    );
  }

  // --- Year / Place views ---

  return (
    <div className="space-y-4">
      {/* Search + Sort */}
      <div className="flex gap-2">
        <div className="relative flex-1">
          <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>
        <SortPopover
          sort={currentSort}
          onSortChange={handleSortChange}
          isYear={currentView === "year"}
        />
      </div>

      {/* Result count */}
      {query.trim() && (
        <p className="text-sm text-muted-foreground">
          {resultCount === 0
            ? "No results found"
            : `${resultCount} of ${totalCount} ${currentView === "year" ? "years" : "places"}`}
        </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={`/transcriptions/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 ? "transcription" : "transcriptions"}
                  </p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}

      {/* Place view */}
      {currentView === "place" && (
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {(filteredPlaces.slice(startIdx, endIdx) as PlaceGroup[]).map(
            (pg) => (
              <Link
                key={pg.name}
                href={`/transcriptions/place/${encodeURIComponent(pg.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">{pg.name}</p>
                    <p className="text-xs text-muted-foreground">
                      {pg.count}{" "}
                      {pg.count === 1 ? "transcription" : "transcriptions"}
                    </p>
                  </CardContent>
                </Card>
              </Link>
            ),
          )}
        </div>
      )}

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