"use client";

import Link from "next/link";
import { TOPICS_DISPLAY, EBOOKS_DISPLAY, VIDEO_COURSES_DISPLAY } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

type TopicEbookShowcaseProps = {
  onLockedClick?: () => void;
};

export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
  return (
    <section id="topics" className={`${styles.section} ${styles.topicsSection}`}>
      {/* 模块展示 */}
      <h2 className={styles.sectionTitle}>模块</h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
        {TOPICS_DISPLAY.map((t) => {
          const { id, href } = t;
          const isLocked = "locked" in t && t.locked && onLockedClick;
          const content = (
            <span className={styles.topicCardInner}>
              {isLocked && (
                <span className={styles.topicLock} title="会员专享">🔒</span>
              )}
              <span className={styles.topicIcon}>{t.icon}</span>
              <span className={styles.topicTitle}>{t.title}</span>
              <span className={styles.topicDesc}>{t.desc}</span>
            </span>
          );
          if (isLocked) {
            return (
              <button
                key={id}
                type="button"
                className={styles.topicCard}
                onClick={onLockedClick}
                style={{ cursor: "pointer", border: "none", font: "inherit" }}
              >
                {content}
              </button>
            );
          }
          if (href) {
            return (
              <Link
                key={id}
                href={href}
                className={styles.topicCard}
                target={href.startsWith("http") ? "_blank" : undefined}
                rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
              >
                {content}
              </Link>
            );
          }
          return (
            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
              {content}
            </div>
          );
        })}
      </div>

      {/* 视频教程展示 - 参考 digital 资源导航，至少 4 个 */}
      <h2 id="video-courses" className={styles.sectionTitle}>视频教程</h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
        {VIDEO_COURSES_DISPLAY.map((v) => {
          const { id, href, icon, title, desc } = v;
          return href ? (
            <Link
              key={id}
              href={href}
              className={styles.topicCard}
              target={href.startsWith("http") ? "_blank" : undefined}
              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
            >
              <span className={styles.topicIcon}>{icon}</span>
              <span className={styles.topicTitle}>{title}</span>
              <span className={styles.topicDesc}>{desc}</span>
            </Link>
          ) : (
            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.9 }}>
              <span className={styles.topicIcon}>{icon}</span>
              <span className={styles.topicTitle}>{title}</span>
              <span className={styles.topicDesc}>{desc}</span>
            </div>
          );
        })}
      </div>

      {/* 电子书展示 */}
      <h2 id="ebooks" className={styles.sectionTitle}>电子书</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
          gap: "1rem",
          animationDelay: "0.25s",
          animationFillMode: "both",
        }}
      >
        {EBOOKS_DISPLAY.map((e) => {
          const { id, href } = e;
          const cardContent = (
            <>
              <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
              <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem" }}>
                《{e.title}》
              </div>
              <div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{e.desc}</div>
              <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>
                阅读 →
              </div>
            </>
          );
          return href ? (
            <Link
              key={id}
              href={href}
              className={styles.card}
              style={{
                display: "block",
                padding: "1.25rem",
                textDecoration: "none",
                color: "inherit",
              }}
            >
              {cardContent}
            </Link>
          ) : (
            <div
              key={id}
              className={styles.card}
              style={{
                display: "block",
                padding: "1.25rem",
                cursor: "default",
                opacity: 0.9,
              }}
            >
              {cardContent}
            </div>
          );
        })}
      </div>
    </section>
  );
}