"use client";

import { ArrowLeft, MessageSquare, Search, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { type FormEvent, useCallback, useEffect, useState } from "react";
import { VIDEO_CONTENT_TAGS, isVideoContentTag } from "@/lib/video-tags";

// 匹配搜索结果类型（适配后端API）
type SearchResultItem = {
  id: string;
  awemeId: string;
  type: "video" | "image";
  rank: number;
  snippet: string; // 后端返回的高亮片段，已包含<mark>标签
  contentTags: string[];
  video?: {
    aweme_id: string;
    desc: string;
    cover_url: string | null;
    video_url: string | null;
    duration_ms: number;
    author: {
      sec_uid: string;
      nickname: string;
      avatar_url: string | null;
    };
  };
  imagePost?: {
    aweme_id: string;
    desc: string;
    cover_url: string | null;
    author: {
      sec_uid: string;
      nickname: string;
      avatar_url: string | null;
    };
  };
};
export default function SearchClient({
  initialQuery,
}: {
  initialQuery: string;
}) {
  const searchParams = useSearchParams();
  const router = useRouter();

  const [query, setQuery] = useState(initialQuery);
  const [results, setResults] = useState<SearchResultItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);
  const [selectedTag, setSelectedTag] = useState<string | null>(null);

  const buildSearchHref = useCallback((q: string, tag: string | null) => {
    const params = new URLSearchParams();
    const trimmed = q.trim();
    if (trimmed) params.set("q", trimmed);
    if (tag) params.set("tag", tag);
    const queryString = params.toString();
    return queryString ? `/search?${queryString}` : "/search";
  }, []);

  const performSearch = useCallback(async (q: string, tag: string | null) => {
    const trimmed = q.trim();
    if (!trimmed && !tag) {
      setResults([]);
      setSearched(false);
      return;
    }
    setLoading(true);
    setSearched(true);
    try {
      const params = new URLSearchParams({ limit: "60" });
      if (trimmed) params.set("q", trimmed);
      if (tag) params.set("tag", tag);
      const res = await fetch(`/api/search?${params.toString()}`);
      if (!res.ok) throw new Error("Search failed");
      const data = await res.json();
      setResults(data.results || []);
    } catch (err) {
      console.error("Search error:", err);
      setResults([]);
    } finally {
      setLoading(false);
    }
  }, []);

  // 初始 & URL 变化时同步（用 searchParams 订阅 URL 更稳妥）
  useEffect(() => {
    const q = searchParams.get("q") || "";
    const tagParam = searchParams.get("tag") || "";
    const tag = tagParam && isVideoContentTag(tagParam) ? tagParam : null;
    setQuery(q);
    setSelectedTag(tag);
    if (q || tag) {
      performSearch(q, tag);
    } else {
      setResults([]);
      setSearched(false);
    }
  }, [searchParams, performSearch]);

  const handleSearch = (e: FormEvent) => {
    e.preventDefault();
    const trimmed = query.trim();
    if (!trimmed && !selectedTag) return;
    router.push(buildSearchHref(trimmed, selectedTag));
  };

  const handleTagSelect = (tag: string) => {
    const nextTag = selectedTag === tag ? null : tag;
    setSelectedTag(nextTag);
    router.push(buildSearchHref(query, nextTag));
  };

  const handleClear = () => {
    setQuery("");
    setSelectedTag(null);
    setResults([]);
    setSearched(false);
    router.push("/search");
  };

  const renderSnippet = (snippet: string) => {
    let highlighted = false;
    let offset = 0;
    return snippet.split(/(<mark>|<\/mark>)/g).map((part) => {
      offset += part.length;
      if (part === "<mark>") {
        highlighted = true;
        return null;
      }
      if (part === "</mark>") {
        highlighted = false;
        return null;
      }
      if (!part) return null;
      return highlighted ? <mark key={`${offset}-${part}`}>{part}</mark> : part;
    });
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      {/* 顶部搜索栏 */}
      <header className="sticky top-0 z-50 bg-zinc-900/80 backdrop-blur-xl border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
          <button
            type="button"
            onClick={() => router.push("/")}
            className="p-2 rounded-full hover:bg-white/10 transition-colors"
            aria-label="返回首页"
          >
            <ArrowLeft size={24} />
          </button>

          <form
            onSubmit={handleSearch}
            className="flex-1 flex items-center gap-3"
          >
            <div className="relative flex-1">
              <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="搜索视频、图文描述或语音内容..."
                className="w-full bg-white/5 border border-white/10 rounded-full px-5 py-3 pl-12 pr-12 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
              />
              <Search
                size={20}
                className="absolute left-4 top-1/2 -translate-y-1/2 text-white/40"
              />
              {(query || selectedTag) && (
                <button
                  type="button"
                  onClick={handleClear}
                  className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 transition-colors"
                  aria-label="清空"
                >
                  <X size={18} className="text-white/60" />
                </button>
              )}
            </div>
            <button
              type="submit"
              className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              disabled={loading || (!query.trim() && !selectedTag)}
            >
              {loading ? "搜索中..." : "搜索"}
            </button>
          </form>
        </div>
        <div className="max-w-7xl mx-auto px-4 pb-4">
          <div className="flex gap-2 overflow-x-auto">
            {VIDEO_CONTENT_TAGS.map((tag) => (
              <button
                key={tag}
                type="button"
                onClick={() => handleTagSelect(tag)}
                className={`flex-shrink-0 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
                  selectedTag === tag
                    ? "border-blue-400 bg-blue-500/20 text-blue-200"
                    : "border-white/10 bg-white/5 text-white/60 hover:border-white/20 hover:text-white"
                }`}
              >
                {tag}
              </button>
            ))}
          </div>
        </div>
      </header>

      {/* 结果区域 */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        {loading && (
          <div className="flex items-center justify-center py-20">
            <div className="flex flex-col items-center gap-4">
              <div className="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
              <p className="text-white/60">正在搜索...</p>
            </div>
          </div>
        )}

        {!loading && searched && results.length === 0 && (
          <div className="flex flex-col items-center justify-center py-20 text-white/60">
            <Search size={64} className="mb-4 opacity-20" />
            <p className="text-xl">未找到相关内容</p>
            <p className="text-sm mt-2">试试其他关键词</p>
          </div>
        )}

        {!loading && !searched && !query && !selectedTag && (
          <div className="flex flex-col items-center justify-center py-20 text-white/40">
            <Search size={64} className="mb-4 opacity-20" />
            <p className="text-xl">输入关键词开始搜索</p>
            <p className="text-sm mt-2">
              支持搜索视频描述、图文描述及语音转写内容
            </p>
          </div>
        )}

        {!loading && results.length > 0 && (
          <div>
            <div className="mb-6 flex items-center justify-between">
              <h2 className="text-lg text-white/80">
                找到{" "}
                <span className="text-white font-semibold">
                  {results.length}
                </span>{" "}
                个结果
              </h2>
            </div>

            {/* 单列列表布局 */}
            <div className="space-y-4">
              {results.map((item) => {
                const content =
                  item.type === "video" ? item.video : item.imagePost;
                if (!content) return null;

                return (
                  <div
                    key={item.awemeId}
                    className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden hover:border-white/20 transition-all hover:-translate-y-1"
                  >
                    {/* 主内容区 */}
                    <div className="flex gap-4 p-4">
                      {/* 左侧：封面预览 */}
                      <Link
                        href={`/aweme/${content.aweme_id}`}
                        target="_blank"
                        className="flex-shrink-0 w-64 h-80 sm:w-70 sm:h-96 rounded-xl overflow-hidden bg-zinc-900 group"
                      >
                        {content.cover_url ? (
                          <Image
                            src={content.cover_url}
                            alt={content.desc}
                            width={280}
                            height={384}
                            unoptimized
                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                          />
                        ) : (
                          <div className="h-full w-full bg-zinc-800" />
                        )}
                      </Link>

                      {/* 右侧：信息区 */}
                      <div className="flex-1 min-w-0 flex flex-col">
                        {/* 类型标签 */}
                        <div className="flex items-center gap-2 mb-2">
                          <span
                            className={`px-2 py-0.5 text-xs rounded ${
                              item.type === "video"
                                ? "bg-blue-600/20 text-blue-300"
                                : "bg-purple-600/20 text-purple-300"
                            }`}
                          >
                            {item.type === "video" ? "视频" : "图文"}
                          </span>
                          <span className="flex items-center gap-1 px-2 py-0.5 bg-green-600/20 text-green-300 text-xs rounded">
                            <MessageSquare size={12} />
                            匹配度: {(item.rank * 100).toFixed(1)}%
                          </span>
                          {item.contentTags.map((tag) => (
                            <span
                              key={tag}
                              className="px-2 py-0.5 text-xs rounded bg-blue-500/15 text-blue-200"
                            >
                              {tag}
                            </span>
                          ))}
                        </div>

                        {/* 描述 */}
                        <Link
                          href={`/aweme/${content.aweme_id}`}
                          target="_blank"
                        >
                          <p className="text-white/90 text-sm sm:text-base line-clamp-2 mb-3 hover:text-white transition-colors">
                            {content.desc || "无描述"}
                          </p>
                        </Link>

                        {/* 作者信息 */}
                        <div className="flex items-center gap-2 mb-4">
                          {content.author.avatar_url ? (
                            <Image
                              src={content.author.avatar_url}
                              alt={content.author.nickname}
                              width={24}
                              height={24}
                              unoptimized
                              className="w-6 h-6 rounded-full ring-1 ring-white/20"
                            />
                          ) : (
                            <div className="h-6 w-6 rounded-full bg-white/10 ring-1 ring-white/20" />
                          )}
                          <span className="text-xs text-white/60">
                            {content.author.nickname}
                          </span>
                        </div>

                        {/* 匹配详情：展示后端返回的snippet（已包含<mark>标签） */}
                        <div className="space-y-3">
                          <div>
                            <h4 className="flex items-center gap-2 text-xs font-medium text-green-300 mb-1.5">
                              <MessageSquare size={14} />
                              匹配内容
                            </h4>
                            <div
                              className="text-xs text-white/70 bg-white/5 rounded-lg p-2 leading-relaxed"
                              style={{
                                wordBreak: "break-word",
                              }}
                            >
                              {renderSnippet(item.snippet)}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </main>
    </div>
  );
}