import React from "react";
import Image from "next/image";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import styles from "./partner.module.scss";
import { fetchConsultants, fetchConsultantDetail } from "@/lib/cms";
import { getDescLast } from "@/lib/parser";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const partnerId = (await params).id;
  const { data: info } = await fetchConsultantDetail(parseInt(partnerId as string));
  const cnName = info?.cnName;
  const enName = info?.enName;
  const title = info?.title;
  const desc = info?.desc;
  const description = getDescLast(desc);
  return {
    title: `${cnName}-${title}-助力中国高潜企业加速发展-高潜咨询`,
    description: description,
    keywords: [cnName, enName, ...title.split(/[\u3001\uFF0C]+/)],
  };
}

interface PartnerType {
  id: number;
  cnName?: string | null;
  enName?: string | null;
  title?: string | null;
  desc?: string | null;
  photo?: string;
  order?: number | null;
  createTime?: Date | null;
  updateTime?: Date | null;
  status?: string | null;
}

export default async function Partner({ params }: { params: { id: string } }) {
  const partnerId = params.id;
  if (!partnerId) {
    return <>访问异常</>;
  }

  const { data: info } = await fetchConsultantDetail(parseInt(partnerId as string));
  const { data: list } = await fetchConsultants();

  if (!info) {
    return null;
  }

  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="/caseList">高潜顾问</a>
            </span>
            <span className={styles["breadcrumb-seperator"]}>/</span>
            <span className={styles["breadcrumb-item"]}>
              <span className={styles["breadcrumb-last"]}>{info?.cnName}</span>
            </span>
          </div>
          <div className={styles.info}>
            <div className={styles.left}>
              <div className={styles.imgWrapper}>
                <Image
                  alt="photo"
                  width={275}
                  height={350}
                  src={info?.photo}
                  className={styles.partnerPhoto}
                  priority={true}
                />
                <div className={styles.box}></div>
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.name}>
                <div className={styles.cnName}>{info?.cnName}</div>|{" "}
                <div className={styles.enName}> {info?.enName}</div>
              </div>
              <div className={styles.title}>{info?.title}</div>
              <div className={styles.desc} dangerouslySetInnerHTML={{ __html: info?.desc }}></div>
            </div>
          </div>
          <div className={styles.partnerList}>
            {list?.records?.map((item: PartnerType, index: number) => {
              if (item.id == parseInt(partnerId)) {
                return null;
              } else {
                return (
                  <a href={`/partner/${item.id}`} key={index}>
                    <div className={styles.item}>
                      <div className={styles.cnName}>{item.cnName}</div>|{" "}
                      <div className={styles.enName}>{item.enName}</div>
                    </div>
                  </a>
                );
              }
            })}
          </div>
        </div>
        <Footer />
      </div>
    </>
  );
}
