"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { CommunityTimeline } from "../components/CommunityTimeline";
import { CommunityPageHero } from "../components/CommunityPageHero";
import styles from "../components/memos.module.css";

function getStorage(key: string): string | null {
  if (typeof window === "undefined") {
    return null;
  }
  return localStorage.getItem(key);
}

export default function ExplorePage() {
  const [userId, setUserId] = useState<string | null>(null);
  const [isVip, setIsVip] = useState(false);
  const [showLoginPrompt, setShowLoginPrompt] = useState(false);
  const [query, setQuery] = useState("");

  useEffect(() => {
    const uid = getStorage("userId") || getStorage("memosAccount");
    const type = getStorage("paidType");
    setUserId(uid || null);
    setIsVip(type === "vip");
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }
    const tag = new URLSearchParams(window.location.search).get("tag");
    if (tag) {
      setQuery(`#${tag}`);
    }
  }, []);

  const normalizedQuery = useMemo(() => query.trim(), [query]);

  return (
    <div className={styles.pageStack}>
      <CommunityPageHero
        eyebrow="Explore Topics"
        title="发现高频问题与热门标签"
        description="按关键词或标签搜索整个社群，把分散动态重新整理成可浏览的话题页。"
        chips={["标签聚合", "关键词检索", "按时间流浏览"]}
        actions={[{ href: "/community", label: "返回首页", secondary: true }]}
      />

      <section className={styles.filterPanel}>
        <div className={styles.searchField}>
          <label htmlFor="community-search" className={styles.searchLabel}>
            搜索内容
          </label>
          <input
            id="community-search"
            className={styles.searchInput}
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="例如：AI 工具、远程工作、自动化"
          />
        </div>
        <div className={styles.filterHint}>
          你可以直接输入 `#标签` 或普通关键词，结果会基于当前社群动态实时过滤。
        </div>
      </section>

      {showLoginPrompt ? (
        <section className={styles.vipBanner}>
          <p>发现页仅对会员开放。</p>
          <Link href="/" className={styles.ctaLink}>
            立即加入会员
          </Link>
        </section>
      ) : null}

      {isVip && userId ? (
        <CommunityTimeline
          userId={userId}
          onVipRequired={() => setShowLoginPrompt(true)}
          state="NORMAL"
          query={normalizedQuery}
          emptyText="没有匹配当前关键词的动态，换个标签试试。"
        />
      ) : (
        <section className={styles.lockedPanel}>
          <div className={styles.lockedPanelCopy}>
            <span className={styles.lockedPanelEyebrow}>Members Only</span>
            <h2 className={styles.lockedPanelTitle}>发现页需要会员权限</h2>
            <p className={styles.lockedPanelDesc}>开通后即可按标签、关键词和时间流探索全部动态。</p>
          </div>
          <div className={styles.lockedPanelActions}>
            <Link href="/" className={styles.heroPrimaryAction}>
              立即加入
            </Link>
          </div>
        </section>
      )}
    </div>
  );
}