"use client";
import React, { useState, useEffect } from "react";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import styles from "./insightDetail.module.scss";
import { fetchArticleDetail } from "@/lib/cmsForPayment";

interface ArticleType {
  id: number;
  title?: string | null;
  digest?: string | null;
  author?: string | null;
  type: string;
  content?: string | null;
  cover: string;
  payed: boolean;
  order?: number | null;
  status?: string | null;
  createTime?: Date | null;
  updateTime?: Date | null;
}

export default function ArticleDetail({ params }: { params: { slug: string } }) {
  const articleId = params.slug.replace(".html", "");
  const [article, setArticle] = useState<ArticleType | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  useEffect(() => {
    fetchArticleDetail(parseInt(articleId as string)).then((data) => {
      if (data.code == 9001) {
        setMessage("此文章为付费文章，请返回列表页面进行购买！");
      } else if (data.code == 3010) {
        setMessage("此文章为付费文章，请返回登录后在列表页面进行购买！");
      } else {
        setArticle(data.data);
      }
    });
  }, [articleId]);

  return (
    <>
      <div className={styles.container}>
        <Nav title="行业洞察" />
        <div className={styles.content}>
          <div>
            <span className={styles["breadcrumb-item"]}>
              <a href="/home">首页</a>
            </span>
            <span className={styles["breadcrumb-seperator"]}>/</span>
            <span className={styles["breadcrumb-item"]}>
              <a href="/insightList">行业洞察</a>
            </span>
            <span className={styles["breadcrumb-seperator"]}>/</span>
            <span className={styles["breadcrumb-item"]}>
              <span className={styles["breadcrumb-last"]}>{article?.title}</span>
            </span>
          </div>
          <div className={styles.title}>{article?.title}</div>
          <div className={styles.author}>{article?.author}</div>
          <div className={styles.line}></div>
          {article?.content && (
            <div className={styles.articleContent} dangerouslySetInnerHTML={{ __html: article?.content }}></div>
          )}
          <div className={styles.articleContent}>{message}</div>
        </div>
        <Footer />
      </div>
    </>
  );
}
