"use client"

import { useMemo, useState, useEffect, useRef, useCallback } from "react"
import type { MouseEvent } from "react"
import { ArticleCard } from "./article-card"
import { Sidebar } from "./sidebar"
import { ThoughtPreview, type ThoughtPreviewItem } from "./thought-preview"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"

export type ArticleMeta = {
  slug: string
  title: string
  excerpt?: string
  category: string
  categoryLabel: string
  tags: string[]
  date: string
  wordCount?: number
  readTime?: string
  image?: string
  pinned?: boolean
}

type SidebarCategory = { id: string; name: string; count: number }

type PaginationMeta = {
  currentPage: number
  basePath?: string
  pageSize?: number
}

const HIDDEN = -1
const ADJACENT_DISTANCE = 2
const VISIBLE_PAGES = ADJACENT_DISTANCE * 2 + 1

const normalizeBasePath = (basePath: string) => {
  if (!basePath.startsWith("/")) return `/${basePath}`.replace(/\/+$/, "")
  return basePath === "/" ? "" : basePath.replace(/\/+$/, "")
}

const getPageHref = (pageNumber: number, basePath: string) => {
  const base = normalizeBasePath(basePath)
  if (pageNumber === 1) return base || "/"
  return `${base}/${pageNumber}/`
}

const buildPageRange = (currentPage: number, totalPages: number) => {
  if (totalPages <= 1) return []

  let count = 1
  let left = currentPage
  let right = currentPage

  while (left - 1 > 0 && right + 1 <= totalPages && count + 2 <= VISIBLE_PAGES) {
    count += 2
    left -= 1
    right += 1
  }

  while (left - 1 > 0 && count < VISIBLE_PAGES) {
    count += 1
    left -= 1
  }

  while (right + 1 <= totalPages && count < VISIBLE_PAGES) {
    count += 1
    right += 1
  }

  const pages: number[] = []
  if (left > 1) pages.push(1)
  if (left === 3) pages.push(2)
  if (left > 3) pages.push(HIDDEN)
  for (let page = left; page <= right; page += 1) pages.push(page)
  if (right < totalPages - 2) pages.push(HIDDEN)
  if (right === totalPages - 2) pages.push(totalPages - 1)
  if (right < totalPages) pages.push(totalPages)

  return pages
}

export function ArticleList({
  articles,
  title = "近期文章",
  showViewAll = true,
  pagination,
  sidebarCategories,
  sidebarTags,
  sidebarThoughts,
}: {
  articles: ArticleMeta[]
  title?: string
  showViewAll?: boolean
  pagination?: PaginationMeta
  sidebarCategories?: SidebarCategory[]
  sidebarTags?: string[]
  sidebarThoughts?: ThoughtPreviewItem[]
}) {
  const sectionRef = useRef<HTMLElement | null>(null)
  const [activeCategory, setActiveCategory] = useState("all")
  const [activeTag, setActiveTag] = useState<string | null>(null)
  const [currentPage, setCurrentPage] = useState(pagination?.currentPage ?? 1)
  const [categoriesExpanded, setCategoriesExpanded] = useState(false)
  const basePath = pagination?.basePath ?? "/"

  const computedCategories = useMemo(() => {
    const counts = new Map<string, { id: string; name: string; count: number }>()
    articles.forEach((article) => {
      if (!counts.has(article.category)) {
        counts.set(article.category, { id: article.category, name: article.categoryLabel, count: 0 })
      }
      counts.get(article.category)!.count += 1
    })
    return [
      { id: "all", name: "全部", count: articles.length },
      ...Array.from(counts.values()).sort((a, b) => a.name.localeCompare(b.name)),
    ]
  }, [articles])

  const categories = useMemo(() => {
    if (!sidebarCategories || sidebarCategories.length === 0) {
      return computedCategories
    }
    const hasAll = sidebarCategories.some((category) => category.id === "all")
    if (hasAll) return sidebarCategories
    const total = sidebarCategories.reduce((sum, category) => sum + category.count, 0)
    return [{ id: "all", name: "全部", count: total }, ...sidebarCategories]
  }, [computedCategories, sidebarCategories])

  const computedTags = useMemo(() => {
    const allTags = articles.flatMap((article) => article.tags || [])
    return Array.from(new Set(allTags)).sort((a, b) => a.localeCompare(b))
  }, [articles])

  const tags = sidebarTags && sidebarTags.length > 0 ? sidebarTags : computedTags

  const syncFromLocation = useCallback(() => {
    if (typeof window === "undefined") return
    const params = new URLSearchParams(window.location.search)
    const queryCategory = params.get("category")?.trim()
    const queryTag = params.get("tag")?.trim()

    let nextCategory = "all"
    let nextTag: string | null = null
    let nextExpanded = false

    if (queryTag && tags.includes(queryTag)) {
      nextTag = queryTag
    } else if (queryCategory && categories.some((category) => category.id === queryCategory)) {
      nextCategory = queryCategory
      nextExpanded = true
    }

    setActiveCategory(nextCategory)
    setActiveTag(nextTag)
    setCategoriesExpanded(nextExpanded)

    const shouldResetPage = Boolean(nextTag) || nextCategory !== "all"
    setCurrentPage(shouldResetPage ? 1 : pagination?.currentPage ?? 1)

    if (document.documentElement.hasAttribute("data-prefilter")) {
      requestAnimationFrame(() => {
        document.documentElement.removeAttribute("data-prefilter")
      })
    }
  }, [categories, tags, pagination?.currentPage])

  useEffect(() => {
    if (typeof window === "undefined") return
    syncFromLocation()

    const handleLocationChange = () => {
      syncFromLocation()
    }

    window.addEventListener("popstate", handleLocationChange)
    window.addEventListener("hashchange", handleLocationChange)
    document.addEventListener("astro:page-load", handleLocationChange)
    document.addEventListener("astro:after-swap", handleLocationChange)
    return () => {
      window.removeEventListener("popstate", handleLocationChange)
      window.removeEventListener("hashchange", handleLocationChange)
      document.removeEventListener("astro:page-load", handleLocationChange)
      document.removeEventListener("astro:after-swap", handleLocationChange)
    }
  }, [syncFromLocation])

  const filteredArticles = useMemo(() => {
    return articles.filter((article) => {
      const categoryMatch = activeCategory === "all" || article.category === activeCategory
      const tagMatch = !activeTag || article.tags.includes(activeTag)
      return categoryMatch && tagMatch
    })
  }, [articles, activeCategory, activeTag])

  const headerMeta = useMemo(() => {
    if (activeTag) {
      return {
        eyebrow: "标签",
        heading: activeTag,
      }
    }

    if (activeCategory !== "all") {
      const currentCategory = categories.find((category) => category.id === activeCategory)
      return {
        eyebrow: "分类",
        heading: currentCategory?.name ?? activeCategory,
      }
    }

    return {
      heading: title,
    }
  }, [activeTag, activeCategory, categories, title])

  const headerAnimationKey = activeTag ? `tag:${activeTag}` : `category:${activeCategory}`

  const isFiltering = activeCategory !== "all" || Boolean(activeTag)
  const pageSize = pagination?.pageSize ?? Math.max(1, articles.length)
  const totalPages = pagination ? Math.max(1, Math.ceil(filteredArticles.length / pageSize)) : 1

  useEffect(() => {
    if (!pagination) return
    if (currentPage > totalPages) {
      setCurrentPage(1)
    }
  }, [pagination, currentPage, totalPages])

  const pagedArticles = pagination
    ? filteredArticles.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    : filteredArticles

  const pageRange = useMemo(() => {
    if (!pagination) return []
    return buildPageRange(currentPage, totalPages)
  }, [pagination, currentPage, totalPages])

  const withHomeHash = (href?: string, pageNumber?: number) => {
    if (!href) return undefined
    if (pageNumber === 1) return `${href}#home-main`
    return href
  }
  const previousUrl = pagination && currentPage > 1 ? getPageHref(currentPage - 1, basePath) : undefined
  const nextUrl = pagination && currentPage < totalPages ? getPageHref(currentPage + 1, basePath) : undefined
  const scrollToListTop = () => {
    const target = document.getElementById("home-main") ?? sectionRef.current
    if (!target) return
    target.scrollIntoView({ behavior: "smooth", block: "start" })
  }

  const updateSearchParams = (nextCategory: string, nextTag: string | null) => {
    if (typeof window === "undefined") return
    const url = new URL(window.location.href)
    const targetPath = pagination ? getPageHref(1, basePath) : url.pathname

    if (nextCategory !== "all") {
      url.searchParams.set("category", nextCategory)
    } else {
      url.searchParams.delete("category")
    }

    if (nextTag) {
      url.searchParams.set("tag", nextTag)
    } else {
      url.searchParams.delete("tag")
    }

    const search = url.searchParams.toString()
    window.history.replaceState({}, "", `${targetPath}${search ? `?${search}` : ""}#home-main`)
  }

  const handleCategoryChange = (category: string) => {
    setActiveCategory(category)
    setActiveTag(null)
    setCurrentPage(1)
    setCategoriesExpanded(true)
    updateSearchParams(category, null)
    requestAnimationFrame(scrollToListTop)
  }
  const handleTagChange = (tag: string | null) => {
    setActiveTag(tag)
    setActiveCategory("all")
    setCategoriesExpanded(false)
    setCurrentPage(1)
    updateSearchParams("all", tag)
    requestAnimationFrame(scrollToListTop)
  }
  const handlePageClick =
    (page: number) => (event: MouseEvent<HTMLAnchorElement>) => {
      if (!pagination || !isFiltering) return
      event.preventDefault()
      setCurrentPage(page)
    }

  /* ---------- 移动端分类胶囊条 ---------- */

  // 移动端侧栏被推到文章列表下面（实测第一篇文章 y=999、侧栏 y=3212），
  // 所以手机上看不到分类筛选。这里在页眉下面再挂一条吸附的胶囊条，
  // 复用同一份 categories / activeCategory / handleCategoryChange，不写第二套逻辑。
  const [filterMode, setFilterMode] = useState<"categories" | "tags">(activeTag ? "tags" : "categories")
  const filterBarRef = useRef<HTMLDivElement>(null)
  const [filterEdges, setFilterEdges] = useState({ left: false, right: false })

  const updateFilterEdges = useCallback(() => {
    const el = filterBarRef.current
    if (!el) return
    const max = el.scrollWidth - el.clientWidth
    setFilterEdges({
      left: el.scrollLeft > 4,
      right: max > 4 && el.scrollLeft < max - 4,
    })
  }, [])

  // 把当前项滚到中间，只操作这一条横向滚动容器，不碰页面纵向位置
  useEffect(() => {
    const el = filterBarRef.current
    if (!el) return
    const active = el.querySelector<HTMLElement>('[data-filter-active="true"]')
    if (!active) {
      updateFilterEdges()
      return
    }
    const target = active.offsetLeft - (el.clientWidth - active.offsetWidth) / 2
    el.scrollTo({ left: Math.max(0, target), behavior: "smooth" })
    const timer = window.setTimeout(updateFilterEdges, 350)
    return () => window.clearTimeout(timer)
  }, [activeCategory, activeTag, filterMode, updateFilterEdges])

  useEffect(() => {
    const el = filterBarRef.current
    if (!el) return
    updateFilterEdges()
    el.addEventListener("scroll", updateFilterEdges, { passive: true })
    window.addEventListener("resize", updateFilterEdges)
    return () => {
      el.removeEventListener("scroll", updateFilterEdges)
      window.removeEventListener("resize", updateFilterEdges)
    }
  }, [updateFilterEdges, filterMode, categories.length, tags.length])

  const filterPill =
    "shrink-0 inline-flex items-center h-8 px-3 rounded-full border text-[13px] leading-none transition-colors duration-150"
  const filterPillOn = "bg-primary border-primary text-primary-foreground"
  const filterPillOff = "border-border text-muted-foreground hover:border-primary hover:text-primary"

  const filterBar = (
    <div className="lg:hidden sticky top-[var(--header-h)] z-30 -mx-6 mb-8 border-b border-border/60 bg-surface-subtle">
      <div
        ref={filterBarRef}
        className="no-scrollbar flex items-center gap-2 overflow-x-auto px-6 py-2.5"
      >
        {filterMode === "categories" ? (
          <>
            {categories.map((category) => (
              <button
                key={category.id}
                type="button"
                data-filter-active={activeCategory === category.id ? "true" : undefined}
                onClick={() => handleCategoryChange(category.id)}
                className={cn(filterPill, activeCategory === category.id ? filterPillOn : filterPillOff)}
              >
                {category.name}
                <span className="ml-1 text-[11px] opacity-60">{category.count}</span>
              </button>
            ))}
            <span className="shrink-0 w-px h-4 bg-border" aria-hidden="true" />
            <button
              type="button"
              onClick={() => setFilterMode("tags")}
              className={cn(filterPill, filterPillOff)}
            >
              标签 ›
            </button>
          </>
        ) : (
          <>
            <button
              type="button"
              onClick={() => setFilterMode("categories")}
              className={cn(filterPill, filterPillOff)}
            >
              ‹ 分类
            </button>
            <span className="shrink-0 w-px h-4 bg-border" aria-hidden="true" />
            {tags.map((tag) => (
              <button
                key={tag}
                type="button"
                data-filter-active={activeTag === tag ? "true" : undefined}
                onClick={() => handleTagChange(activeTag === tag ? null : tag)}
                className={cn(filterPill, activeTag === tag ? filterPillOn : filterPillOff)}
              >
                {tag}
              </button>
            ))}
          </>
        )}
      </div>

      {/* 两端渐隐，提示还能横向滑 */}
      <span
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-surface-subtle/90 to-transparent transition-opacity duration-200",
          filterEdges.left ? "opacity-100" : "opacity-0",
        )}
      />
      <span
        aria-hidden="true"
        className={cn(
          "pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-surface-subtle/90 to-transparent transition-opacity duration-200",
          filterEdges.right ? "opacity-100" : "opacity-0",
        )}
      />
    </div>
  )

  return (
    // 手机端（<lg）上方不留内边距：列表的第一个元素是吸顶胶囊条，
    // 让它紧贴 section 顶端，配合 #home-main 的 scroll-margin 正好落在页眉下沿；
    // 桌面端没有吸顶条，保留 py-16 的呼吸位。
    <section
      ref={sectionRef}
      className="article-list-root px-6 pt-0 pb-16 lg:py-16 bg-surface-subtle"
    >
      <div className="max-w-6xl mx-auto">
        {filterBar}
        {/* Section header */}
        <div className="mb-10 onload-animation" style={{ animationDelay: "50ms" }}>
          <div
            key={headerAnimationKey}
            className="max-w-xl lg:max-w-sm"
            style={{ animation: "fade-in-up 220ms ease-out" }}
          >
            {activeCategory === "all" && !activeTag ? (
              <h2 className="font-serif text-[21px] font-bold leading-tight tracking-tight text-foreground sm:text-3xl lg:text-[2.625rem]">
                {headerMeta.heading}
              </h2>
            ) : (
              <h2 className="flex flex-wrap items-end gap-x-2 gap-y-1 font-serif text-[21px] font-bold leading-tight tracking-tight sm:text-3xl lg:text-[2.625rem]">
                <span className="text-foreground/68">{headerMeta.eyebrow}</span>
                <span className="text-foreground/35">/</span>
                <span className="text-primary">{headerMeta.heading}</span>
              </h2>
            )}
          </div>
        </div>

        {/* Main layout: Sidebar + Articles */}
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar */}
          <div className="order-2 lg:order-1 onload-animation" style={{ animationDelay: "100ms" }}>
            <Sidebar
              categories={categories}
              tags={tags}
              activeCategory={activeCategory}
              onCategoryChange={handleCategoryChange}
              activeTag={activeTag}
              onTagChange={handleTagChange}
              categoriesExpanded={categoriesExpanded}
              onCategoriesExpandedChange={setCategoriesExpanded}
              extra={sidebarThoughts && sidebarThoughts.length > 0 ? <ThoughtPreview thoughts={sidebarThoughts} /> : undefined}
            />
          </div>

          {/* Article list - Single column */}
          <div className="order-1 lg:order-2 flex-1 space-y-4">
            {pagedArticles.length > 0 ? (
              pagedArticles.map((article, index) => (
                <ArticleCard
                  key={article.slug}
                  article={article}
                  className="onload-animation"
                  style={{ animationDelay: `calc(var(--content-delay) + ${index * 50}ms)` }}
                />
              ))
            ) : (
              <div className="text-center py-12 text-muted-foreground">暂无符合条件的文章</div>
            )}

            {/* View all link */}
            {showViewAll && (
              <div className="pt-8 text-center">
                <a
                  href="/posts/"
                  className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors duration-200 group"
                >
                  <span>查看全部文章</span>
                  <svg
                    className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                  </svg>
                </a>
              </div>
            )}

            {pagination && totalPages > 1 && (
              <div className="pt-8">
                <Pagination>
                  <PaginationContent>
                    <PaginationItem>
                      <PaginationLink
                        href={withHomeHash(previousUrl, currentPage - 1)}
                        size="default"
                        aria-disabled={!previousUrl}
                        tabIndex={previousUrl ? undefined : -1}
                        className={cn("gap-1 px-2.5", !previousUrl && "pointer-events-none opacity-50")}
                        rel={previousUrl ? "prev" : undefined}
                        onClick={previousUrl ? handlePageClick(currentPage - 1) : undefined}
                      >
                        <ChevronLeft className="size-4" />
                        <span className="hidden sm:block">上一页</span>
                      </PaginationLink>
                    </PaginationItem>

                    {pageRange.map((page, index) => (
                      <PaginationItem key={`${page}-${index}`}>
                        {page === HIDDEN ? (
                          <PaginationEllipsis />
                        ) : (
                          <PaginationLink
                            href={withHomeHash(getPageHref(page, basePath), page)}
                            isActive={currentPage === page}
                            onClick={handlePageClick(page)}
                          >
                            {page}
                          </PaginationLink>
                        )}
                      </PaginationItem>
                    ))}

                    <PaginationItem>
                      <PaginationLink
                        href={withHomeHash(nextUrl, currentPage + 1)}
                        size="default"
                        aria-disabled={!nextUrl}
                        tabIndex={nextUrl ? undefined : -1}
                        className={cn("gap-1 px-2.5", !nextUrl && "pointer-events-none opacity-50")}
                        rel={nextUrl ? "next" : undefined}
                        onClick={nextUrl ? handlePageClick(currentPage + 1) : undefined}
                      >
                        <span className="hidden sm:block">下一页</span>
                        <ChevronRight className="size-4" />
                      </PaginationLink>
                    </PaginationItem>
                  </PaginationContent>
                </Pagination>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}