"use client";

import { useMemo, useState } from "react";
import { AppGrid, CategoryTabs } from "@/components/sections";
import { AppResource } from "@/lib/types";

export function AppsExplorer({ apps }: { apps: AppResource[] }) {
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("all");
  const [sort, setSort] = useState("latest");
  const [count, setCount] = useState(6);

  const filtered = useMemo(() => {
    let list = [...apps].filter((a) =>
      [a.name, a.subtitle, ...a.tags].join(" ").toLowerCase().includes(query.toLowerCase())
    );
    if (category !== "all") list = list.filter((a) => a.category === category);
    list.sort((a, b) => {
      if (sort === "hot") return b.downloads - a.downloads;
      if (sort === "update") return b.updatedAt.localeCompare(a.updatedAt);
      return b.uploadedAt.localeCompare(a.uploadedAt);
    });
    return list;
  }, [apps, query, category, sort]);

  return (
    <section className="space-y-4">
      <div className="card-glass space-y-3">
        <input
          className="w-full rounded-xl border border-white/15 bg-slate-900/50 px-3 py-2 text-sm outline-none"
          placeholder="搜索资源、标签或名称"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <CategoryTabs active={category} onChange={setCategory} />
        <div className="flex items-center gap-2 text-sm">
          <span>排序：</span>
          {[
            { id: "latest", label: "最新" },
            { id: "hot", label: "最热" },
            { id: "update", label: "更新日期" },
          ].map((s) => (
            <button key={s.id} className={`pill ${sort === s.id ? "pill-active" : ""}`} onClick={() => setSort(s.id)}>
              {s.label}
            </button>
          ))}
        </div>
      </div>
      <AppGrid apps={filtered.slice(0, count)} />
      {count < filtered.length && (
        <button onClick={() => setCount((c) => c + 6)} className="mx-auto block rounded-xl border border-white/20 px-4 py-2 text-sm">
          加载更多
        </button>
      )}
    </section>
  );
}