const { Spin } = antd;

function App() {
  const swiperRef = React.useRef(null);
  const [load, $load] = React.useState(false);
  const lang = localStorage.getItem('aili_lang') ? localStorage.getItem('aili_lang') == 'zh' : true;
  const [yuyan, $yuyan] = React.useState(localStorage.getItem('aili_lang') || 'zh');
  const [slideList, $slideList] = React.useState([]);
  // footer 
  const [linkes, $linkes] = React.useState([]);
  const [inquiry, $inquiry] = React.useState({});
  const [products, $products] = React.useState([]);

  const [product, $product] = React.useState({});
  const [productSearchs, $productSearchs] = React.useState([]);
  const [productList, $productList] = React.useState([]);
  const [faqsList, $faqsList] = React.useState([]);
  const [tzglcpList, $tzglcpList] = React.useState([]);


  const t = (key) => {
    const langData = i18n[lang ? 'zh' : 'en'];
    return langData[key] || key;
  };

  React.useEffect(() => {

    ALanimation();

    // window.GetMenuInfo(new URLSearchParams({ siteId: lang ? 1 : 2, menuAlias: lang ? 'product' : 'producten' }));

    // 轮播图
    getSlideList()
    // footer
    getFooter()

    // 产品列表
    getPictureArticleList({ menuAlias: lang ? 'product' : 'producten' })
    // 常见问题tabs
    GetChildMenuList()
  }, []);

  React.useEffect(() => {
    if (slideList.length) {
      const swiper = new Swiper('.swiper', {
        loop: true,               // 循环模式
        autoplay: {
          delay: 3000,          // 3秒切换一次
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }, [slideList])

  const getSlideList = async () => {
    const obj = new URLSearchParams({ siteId: lang ? 1 : 2, count: 999, slideAlias: 'chanpinzhongxin' });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/SlideListApi/GetSlideList?${obj}`);
    if (res.StatusCode == 1) {
      $slideList(res.Result || []);
    }
  }

  const getFooter = () => {
    // 相关产品
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: lang ? 'product' : 'producten', contentType: 'hot' }
    )}`).then(res => $products(res?.Result?.DataList || []));
    // 相关链接
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/MenuApi/GetMenuList?${new URLSearchParams({ siteAlias: lang ? 'cn' : 'en', menuGroupName: 'foot' }
    )}`).then(res => $linkes(res?.Result || []));
    // 购买咨询
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/WebSiteApi/GetSiteByAlias?${new URLSearchParams({ alias: lang ? 'cn' : 'en' }
    )}`).then(res => {
      const inquiry = res?.Result || {};
      if (!inquiry.Address) inquiry.Address = '重庆市高新区金凤镇新州大道5号1-5幢';
      $inquiry(inquiry);
    });
  }

  const getPictureArticleList = async (params = {}) => {
    $load(true);
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: 'product', ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${obj}`);
    $load(false);
    if (params.menuAlias.includes('product')) {
      const list = (res?.Result?.ChildMenuList || []);
      list.forEach(v => {
        if (v.Alias == "quanbuchanpin" || v.Alias == "All Products") {
          v.Alias = lang ? 'product' : 'producten';
          v.state = true;
        }
      })
      $productSearchs(list.sort((a, b) => a.OrderNumber - b.OrderNumber));
    }
    $productList(res?.Result?.DataList || []);
  }

  const GetChildMenuList = async () => {
    const obj = new URLSearchParams({ menuAlias: lang ? 'faqs' : 'faqsen' });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/MenuApi/GetChildMenuList?${obj}`);
    const list = res?.Result || [];
    if (list.length) {
      list[0].state = true;
      getArticleiteList({ menuAlias: list[0].Alias });
    }
    $faqsList(list);
  }

  const getArticleiteList = async (params = {}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 999, ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/ArticleApi/GetArticleiteList?${obj}`);
    $tzglcpList(res?.Result?.DataList || []);
  }


  return (
    <div className="app">
      {/* 导航栏 */}
      <nav class="navbar" id="navbar">
        <div class="nav-container">
          <a href="/" class="nav-logo">
            <img src="/Theme/prototype/images/logo.png" alt={t('艾丽')} />
          </a>
          <button class="nav-toggle" id="navToggle" type="button" aria-label={t('打开菜单')} aria-expanded="false">
            <span></span><span></span><span></span>
          </button>
          <ul class="nav-menu">
            <li><a href="/">{t('首页')}</a></li>
            <li><a href="/About/">{t('关于艾丽')}</a></li>
            {/* <li><a href="/cysl/">{t('产研实力')}</a></li> */}
            <li><a href="/product/" class="active">{t('产品中心')}</a></li>
            <li><a href="/shuziliaofa/">{t('数字疗法')}</a></li>
            <li><a href="/jkkp/">{t('健康科普')}</a></li>
            <li><a href="/dynamic/">{t('公司动态')}</a></li>
            <li><a href="/goumaizixun/" class="nav-cta">{t('购买咨询')}</a></li>
            <li class="lang-switch">
              <button type="button" class={`lang-btn ${yuyan == 'zh' ? 'active' : ''}`} onClick={() => {
                if (yuyan == 'zh') return;
                window.location.href = '/';
                $yuyan('zh');
                localStorage.setItem('aili_lang', 'zh');
              }}>中文</button>
              <button type="button" class={`lang-btn ${yuyan == 'en' ? 'active' : ''}`} onClick={() => {
                if (yuyan == 'en') return;
                window.location.href = '/en/';
                $yuyan('en');
                localStorage.setItem('aili_lang', 'en');
              }}>EN</button>
            </li>
          </ul>
        </div>
      </nav>

      {/* Hero Banner */}
      <div class="swiper page-hero">
        <div class="swiper-wrapper">
          {slideList.map(v => (
            <div class="swiper-slide" key={v.Id}>
              <section class="page-hero" id="hero-about" style={{ backgroundImage: `linear-gradient(160deg, rgba(225, 247, 244, 0.8) 0%, rgba(168, 230, 224, 0.8) 100%),url("${FILE_URL}${v.ImagePath}")`}}>
                <div class="container">
                  <div class="breadcrumb">
                    <a href="/">{t('首页')}</a> &gt; <span>{v.Title}</span>
                  </div>
                  <h1>{v.Title}</h1>
                  <p class="page-hero-subtitle">{v.Note}</p>
                </div>
              </section>
            </div>
          ))}
        </div>
      </div>

      {/* 产品列表 */}
      <section class="section">
        <Spin spinning={load}>
          <div class="container">
            <div class="product-toolbar reveal">
              <div class="filter-group">
                {productSearchs.map(v => (
                  <button key={v.Id} class={`category-btn ${v.state ? 'active' : ''}`} onClick={() => {
                    if (v.state) return;
                    productSearchs.forEach(v => delete v.state);
                    v.state = true;
                    $productSearchs([...productSearchs]);
                    $product(v);
                    getPictureArticleList({ menuAlias: v.Alias });
                  }}>{v.Name}</button>
                ))}
              </div>
            </div>

          <div class="product-grid" id="productGrid">
            {productList.map(v => (
              <div class="product-card" key={v.Id}>
                <div class="product-image" style={{ background: 'transparent', padding: 34 }}>
                  <img src={`${FILE_URL + v.CoverPath}`} style={{ width: '100%', height: '100%' , objectFit: 'contain'}} alt="" srcset="" />
                </div>
                <div class="product-info">
                  <h3 class="product-name">{v.Title}</h3>
                  <p class="product-desc">{v?.ExtendData?.Extend_Pic_Instruction}</p>
                  <div class="product-meta">
                    <span class="product-spec">{t('规格：')}{v?.ExtendData?.Extend_Pic_Specification}</span>
                    <a href={`${v.Id}`+`.html?id=${v.Id}`} class="product-btn">{t('使用说明')}</a>
                  </div>
                </div>
              </div>
            ))}
          </div>

            {/* 合规声明 */}
            <div class="compliance-note reveal">
              <strong>{t('重要提示：')}</strong><span>{t('本站内容仅供参考，不作为诊断及医疗依据。请仔细阅读说明书并按说明使用或在药师指导下购买和使用。产品使用效果因人而异，不构成功效承诺。')}</span>
            </div>
          </div>
        </Spin>

      </section>

      {/* 产品FAQ板块 */}
      <section class="section section-gray" id="faq">
        <div class="container">
          <div class="section-header reveal">
            <h2 class="section-title">{t('产品使用常见问答')}</h2>
            <p class="section-subtitle">{t('关于艾丽产品的使用、购买及注意事项，为你一一解答')}</p>
          </div>

          <div class="faq-tabs reveal" id="faqTabs">
            {faqsList.map(v => (
              <button class={`faq-tab ${v.state ? 'active' : ''}`} key={v.Id} onClick={() => {
                if (v.state) return;
                faqsList.forEach(e => delete e.state);
                v.state = true;
                $faqsList([...faqsList]);
                getArticleiteList({ menuAlias: v.Alias });
              }}>{v.Name}</button>
            ))}
          </div>

          <div class="faq-panels reveal" id="faqPanels">
            <div class="faq-panel active"
              data-faq="weight">
              <div class="faq-accordion">
                {tzglcpList.map(v => (
                  <div class={`faq-acc-item ${v.state ? 'open' : ''}`} key={v.Id} onClick={() => {
                    v.state = !v.state;
                    $tzglcpList([...tzglcpList])
                  }}>
                    <button class="faq-acc-head">
                      {v.Title}
                      <span class="faq-acc-icon">
                        <i class={`fas ${v.state ? 'fa-minus' : 'fa-plus'}`}></i>
                      </span>
                    </button>
                    <div class="faq-acc-body">
                      <div class="faq-acc-body-inner" dangerouslySetInnerHTML={{ __html: v.Content }}>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer - 5列布局：品牌 + 快速导航 + 服务支持 + 联系我们 + 二维码 */}
      <footer class="footer">
        <div class="container">
          <div class="footer-grid">
            {/* 第1列：品牌 */}
            <div class="footer-brand">
              <div class="footer-logo">
                <img src="/Theme/prototype/images/logo.png" alt={t('艾丽')} />
              </div>
              <p class="footer-brand-text">{t('植恩生物旗下女性健康管理品牌，围绕体重管理、营养补充、私密健康、情绪与睡眠等领域，为女性提供科学、安心的产品与服务。')}</p>
            </div>

            {/* 第2列：相关产品 */}
            <div class="footer-links-section">
              <h4 class="footer-title">{t('相关产品')}</h4>
              <ul class="footer-links">
                {products.map(v => (
                  <li key={v.Id}><a href={`/product/cpxq/?id=${v.Id}`}>{v.Title}</a></li>
                ))}
              </ul>
            </div>

            {/* 第3列：相关链接 */}
            <div class="footer-links-section">
              <h4 class="footer-title">{t('相关链接')}</h4>
              <ul class="footer-links">
                {linkes.map(v => (
                  <li key={v.Id}><a href={v.LinkUrl}>{v.Name}</a></li>
                ))}
              </ul>
            </div>

            {/* 第4列：联系我们 */}
            <div class="footer-contact-section">
              <h4 class="footer-title">{t('联系我们')}</h4>
              <div class="footer-contact-item">
                <i class="fas fa-phone footer-contact-icon"></i>
                <span>{inquiry.Tel}</span>
              </div>
              <div class="footer-contact-item">
                <i class="fas fa-envelope footer-contact-icon"></i>
                <span>{inquiry.Email}</span>
              </div>
              <div class="footer-contact-item">
                <i class="fas fa-map-marker-alt footer-contact-icon"></i>
                <span>{t(inquiry.Address)}</span>
              </div>
            </div>

            {/* 第5列：二维码 */}
            <div class="footer-qrcode-section">
              <h4 class="footer-title">{t('关注我们')}</h4>
              <div class="footer-qrcodes">
                <div class="footer-qrcode-item">
                  <div style={{ width: 100, height: 100, background: '#fff', borderRadius: 'var(--radius-md)', padding: 5, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img style={{ width: '100%', height: '100%' }} src={FILE_URL + inquiry.QRCode} alt="" />
                  </div>
                  <span class="footer-qrcode-label">{t('微信公众号')}</span>
                </div>
                <div class="footer-qrcode-item">
                  <div style={{ width: '100px', height: '100px', background: '#fff', borderRadius: 'var(--radius-md)', padding: 5, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img style={{ width: '100%', height: '100%' }} src={FILE_URL + inquiry.QRCodeOne} alt="" />
                  </div>
                  <span class="footer-qrcode-label">{t('微信视频号')}</span>
                </div>
              </div>
            </div>
          </div>

          <div dangerouslySetInnerHTML={{__html: inquiry.Copyright}}></div>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);