import { Search } from "lucide-react";
import { type FormEvent, useEffect, useState } from "react";
import { useSearchParams } from "react-router";
import { EmptyState } from "~/components/console/empty-state.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { useQueryState } from "~/components/console/use-query-state.ts";
import { RELEASE_FILTER_KEYS, type ReleaseFilterState, ReleaseResults } from "~/components/search/release-results.tsx";
import { ActionsSection, MediaSection } from "~/components/search/search-sections.tsx";
import { Button } from "~/components/ui/button.tsx";
import { Input } from "~/components/ui/input.tsx";

// 全局搜索结果页(W9-G):/console/search?q= 三段 —— 作品 / 资源 / 操作;q 与资源筛选都写在 URL 里。

export const meta = () => [{ title: "搜索 · UHD 媒体自动化控制台" }];

export default function SearchPage() {
  const [params, setParams] = useSearchParams();
  const q = (params.get("q") ?? "").trim();
  const [input, setInput] = useState(q);
  useEffect(() => setInput(q), [q]);
  const f = useQueryState(RELEASE_FILTER_KEYS);

  const submit = (e: FormEvent) => {
    e.preventDefault();
    const next = input.trim();
    if (!next || next === q) return;
    // 换关键词时筛选随之清空(站点/分辨率分面随结果变化)
    setParams(new URLSearchParams({ q: next }));
  };

  return (
    <>
      <PageHeader title="搜索" description="本地作品、TMDB、各站点资源和控制台页面。" />
      <form onSubmit={submit} className="mb-6 flex gap-2">
        <div className="relative min-w-0 flex-1 sm:max-w-xl">
          <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="作品名、别名或资源标题"
            aria-label="搜索关键词"
            className="pl-9"
          />
        </div>
        <Button type="submit" disabled={!input.trim()}>
          搜索
        </Button>
      </form>

      {!q ? (
        <EmptyState icon={Search} title="输入关键词开始搜索" description="也可以在任意页面按 Ctrl/⌘ K 打开搜索。" />
      ) : (
        <div key={q} className="space-y-8">
          <MediaSection q={q} />
          <ReleaseResults q={q} filters={f.values as ReleaseFilterState} setFilter={f.set} resetFilters={f.reset} />
          <ActionsSection q={q} />
        </div>
      )}
    </>
  );
}