"use client";

import { useState, useMemo, useEffect } from "react";
import { useTranslation } from "@/i18n/navigation";
import type { ResourceData } from "@/app/lib/theme-data";

const PER_PAGE_MOBILE = 4;
const PER_PAGE_PC = 8;
const BREAKPOINT = 768;

function useIsPC() {
  const [isPC, setIsPC] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
    setIsPC(mq.matches);
    const fn = () => setIsPC(mq.matches);
    mq.addEventListener("change", fn);
    return () => mq.removeEventListener("change", fn);
  }, []);
  return isPC;
}

/** 每页条数：H5=4，PC=8；总数不足则全显 */
function getPerPage(total: number, isPC: boolean): number {
  const cap = isPC ? PER_PAGE_PC : PER_PAGE_MOBILE;
  return total <= cap ? total : cap;
}

type ResourceNavigationProps = {
  data: ResourceData;
};

export default function ResourceNavigation({ data }: ResourceNavigationProps) {
  const { t } = useTranslation("community");
  const isPC = useIsPC();
  const firstCategoryId = data.pan.categories[0]?.id ?? "";
  const [activePanCategory, setActivePanCategory] = useState(firstCategoryId);
  const [booksPage, setBooksPage] = useState(0);
  const [productsPage, setProductsPage] = useState(0);
  const [toast, setToast] = useState(false);

  const showUpdating = () => {
    setToast(true);
    setTimeout(() => setToast(false), 2000);
  };

  const activeCategory = data.pan.categories.find((c) => c.id === activePanCategory);

  const booksPerPage = getPerPage(data.books.length, isPC);
  const productsPerPage = getPerPage(data.products.length, isPC);
  const booksTotalPages = Math.ceil(data.books.length / booksPerPage) || 1;
  const productsTotalPages = Math.ceil(data.products.length / productsPerPage) || 1;

  useEffect(() => {
    setBooksPage((p) => Math.max(0, Math.min(p, booksTotalPages - 1)));
  }, [booksTotalPages]);
  useEffect(() => {
    setProductsPage((p) => Math.max(0, Math.min(p, productsTotalPages - 1)));
  }, [productsTotalPages]);

  const paginatedBooks = useMemo(() => {
    const start = booksPage * booksPerPage;
    return data.books.slice(start, start + booksPerPage);
  }, [data.books, booksPage, booksPerPage]);

  const paginatedProducts = useMemo(() => {
    const start = productsPage * productsPerPage;
    return data.products.slice(start, start + productsPerPage);
  }, [data.products, productsPage, productsPerPage]);

  return (
    <div className="mt-12 space-y-16">
      {/* 图书 - 封面+书名，数量少则大封面，多则分页 */}
      <div>
        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
          <span>📚</span>
          {t("resourceSections.books")}
          {data.books.length > 0 && (
            <span className="text-sm font-normal text-slate-500 dark:text-slate-400">
              （{t("resourceSections.totalBooks").replace("{count}", String(data.books.length))}）
            </span>
          )}
        </h3>
        <div
          className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
        >
          {paginatedBooks.map((book, i) => (
            <button
              key={`book-${booksPage}-${i}`}
              type="button"
              onClick={showUpdating}
              className="group flex cursor-not-allowed flex-col text-left"
            >
              <div
                className="overflow-hidden rounded-lg border border-slate-200 bg-slate-100 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-800"
                style={{ aspectRatio: "2/3" }}
              >
                <img
                  src={book.cover}
                  alt={book.title}
                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
                {book.title}
              </p>
            </button>
          ))}
        </div>
        {booksTotalPages > 1 && (
          <div className="mt-6 flex items-center justify-center gap-2">
            <button
              type="button"
              onClick={() => setBooksPage((p) => Math.max(0, p - 1))}
              disabled={booksPage === 0}
              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
              aria-label="上一页"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <span className="px-4 text-sm text-slate-600 dark:text-slate-400">
              {booksPage + 1} / {booksTotalPages}
            </span>
            <button
              type="button"
              onClick={() => setBooksPage((p) => Math.min(booksTotalPages - 1, p + 1))}
              disabled={booksPage === booksTotalPages - 1}
              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
              aria-label="下一页"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        )}
      </div>

      {/* 商业数码 - 商品图+跳转电商 */}
      <div>
        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
          <span>🛒</span>
          {t("resourceSections.products")}
          {data.products.length > 0 && (
            <span className="text-sm font-normal text-slate-500 dark:text-slate-400">
              （{t("resourceSections.totalProducts").replace("{count}", String(data.products.length))}）
            </span>
          )}
        </h3>
        <div
          className="grid grid-cols-2 gap-3 gap-y-4 sm:gap-4 md:grid-cols-8"
        >
          {paginatedProducts.map((product, i) => (
            <button
              key={`product-${productsPage}-${i}`}
              type="button"
              onClick={showUpdating}
              className="group flex cursor-not-allowed flex-col text-left"
            >
              <div
                className="overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-sm transition-all group-hover:shadow-md dark:border-slate-700 dark:bg-slate-900"
                style={{ aspectRatio: "1/1" }}
              >
                <img
                  src={product.image}
                  alt={product.name}
                  className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <p className="mt-2 line-clamp-2 text-center text-xs font-medium text-slate-700 dark:text-slate-300 sm:text-sm">
                {product.name}
              </p>
            </button>
          ))}
        </div>
        {productsTotalPages > 1 && (
          <div className="mt-6 flex items-center justify-center gap-2">
            <button
              type="button"
              onClick={() => setProductsPage((p) => Math.max(0, p - 1))}
              disabled={productsPage === 0}
              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
              aria-label="上一页"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <span className="px-4 text-sm text-slate-600 dark:text-slate-400">
              {productsPage + 1} / {productsTotalPages}
            </span>
            <button
              type="button"
              onClick={() => setProductsPage((p) => Math.min(productsTotalPages - 1, p + 1))}
              disabled={productsPage === productsTotalPages - 1}
              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
              aria-label="下一页"
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        )}
      </div>

      {/* 网盘 - 分类 Tab */}
      <div>
        <h3 className="mb-4 flex items-center gap-2 text-xl font-bold text-slate-900 dark:text-slate-100">
          <span>☁️</span>
          {t("resourceSections.pan")}
        </h3>
        <div className="rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
          <div className="flex flex-wrap gap-1 border-b border-slate-200 p-2 dark:border-slate-700">
            {data.pan.categories.map((cat) => (
              <button
                key={cat.id}
                type="button"
                onClick={() => setActivePanCategory(cat.id)}
                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
                  activePanCategory === cat.id
                    ? "bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300"
                    : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
                }`}
              >
                <span className="mr-1.5">{cat.icon}</span>
                {cat.title}
              </button>
            ))}
          </div>
          <div className="p-4">
            {activeCategory && (
              <div
                className="grid gap-3"
                style={{
                  gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 260px), 1fr))",
                }}
              >
                {activeCategory.items.map((item, i) => (
                  <a
                    key={i}
                    href={item.href}
                    target="_blank"
                    rel="noopener noreferrer sponsored"
                    className="flex items-center gap-3 rounded-xl border border-slate-100 p-3 transition-colors hover:border-sky-200 hover:bg-sky-50/50 dark:border-slate-700 dark:hover:border-sky-800 dark:hover:bg-sky-900/20"
                  >
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-lg dark:bg-slate-800">
                      {activeCategory.icon}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="font-medium text-slate-900 dark:text-slate-100">{item.name}</div>
                      <div className="text-xs text-slate-500 dark:text-slate-400">{item.desc}</div>
                    </div>
                    <span className="shrink-0 text-sm font-medium text-sky-600">→</span>
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {toast && (
        <div
          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
          role="alert"
        >
          {t("updating")}
        </div>
      )}
    </div>
  );
}