"use client";

import Link from "next/link";
import type { MouseEvent } from "react";
import styles from "./memos.module.css";

type MemoExplorerProps = {
  userId: string | null;
  isVip: boolean;
  pathname: string;
  onVipRequired?: () => void;
};

const ROUTES = {
  HOME: "/community",
  EXPLORE: "/community/explore",
  ARCHIVED: "/community/archived",
  ATTACHMENTS: "/community/attachments",
} as const;

export function MemoExplorer({ userId, isVip, pathname, onVipRequired }: MemoExplorerProps) {
  const navItems = [
    { href: ROUTES.HOME, label: "星球首页", icon: "主" },
    { href: ROUTES.EXPLORE, label: "发现话题", icon: "搜" },
    { href: ROUTES.ARCHIVED, label: "归档内容", icon: "档" },
    { href: ROUTES.ATTACHMENTS, label: "附件资料", icon: "图" },
  ];

  const handleNavClick = (event: MouseEvent, href: string) => {
    if (!isVip && href !== ROUTES.HOME) {
      event.preventDefault();
      onVipRequired?.();
    }
  };

  return (
    <nav className={styles.explorer}>
      <div className={styles.explorerBrand}>
        <Link href="/" className={styles.brandBackLink}>
          返回主站
        </Link>
        <h2 className={styles.explorerBrandTitle}>异度星球</h2>
        <p className={styles.explorerBrandDesc}>像知识星球一样沉淀动态、讨论和资料。</p>
      </div>

      <div className={styles.explorerSection}>
        <h3 className={styles.explorerTitle}>导航</h3>
        <ul className={styles.explorerList}>
          {navItems.map((item) => {
            const isActive =
              pathname === item.href || (item.href !== ROUTES.HOME && pathname.startsWith(item.href));
            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`${styles.explorerLink} ${isActive ? styles.explorerLinkActive : ""}`}
                  onClick={(event) => handleNavClick(event, item.href)}
                >
                  <span className={styles.explorerIcon}>{item.icon}</span>
                  <span>{item.label}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>

      <div className={styles.explorerSection}>
        <h3 className={styles.explorerTitle}>规则</h3>
        <div className={styles.explorerRules}>
          <span>优先沉淀经验、方法和实操记录。</span>
          <span>发帖尽量带标签，方便后续检索。</span>
          <span>图片会自动进入附件资料库。</span>
        </div>
      </div>

      {userId ? (
        <div className={styles.explorerUser}>
          <span className={styles.userLabel}>当前账号</span>
          <span className={styles.userId}>{userId}</span>
          <span className={styles.userState}>{isVip ? "VIP 已解锁完整社群" : "当前仅可预览社群结构"}</span>
        </div>
      ) : (
        <div className={styles.explorerUser}>
          <span className={styles.userLabel}>当前状态</span>
          <span className={styles.userId}>未登录</span>
          <span className={styles.userState}>登录并开通会员后可查看完整内容</span>
        </div>
      )}
    </nav>
  );
}