panel-web/apps/user/app/(main)/(content)/(user)/subscribe/page.tsx

'use client';

import { querySubscribeList } from '@/services/user/subscribe';
import { useQuery } from '@tanstack/react-query';
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { useTranslations } from 'next-intl';
import { useMemo, useRef, useState } from 'react';

import { LoginDialogProvider } from '@/app/auth/LoginDialogContext';
import { TabContent } from '@/components/main/OfferDialog/TabContent';
import { ProcessedPlanData } from '@/components/main/OfferDialog/types';
import Purchase from '@/components/subscribe/purchase';
import { unitConversion } from '@workspace/ui/utils';

export default function Page() {
  const t = useTranslations('subscribe');
  const [tabValue, setTabValue] = useState<'year' | 'month'>('year');

  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['querySubscribeList'],
    queryFn: async () => {
      const { data } = await querySubscribeList();
      return data.data?.list?.filter((v) => v.unit_time === 'Month') || [];
    },
  });

  // 处理套餐数据的工具函数
  const processPlanData = (item: API.Subscribe, isYearly: boolean): ProcessedPlanData => {
    if (isYearly) {
      const discountItem = item.discount?.find((v) => v.quantity === 12);
      return {
        ...item,
        origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
        discount_price: unitConversion(
          'centsToDollars',
          item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
        ).toString(), // 优惠价格
      };
    } else {
      return {
        ...item,
        origin_price: '', // 月付没有原价
        discount_price: unitConversion('centsToDollars', item.unit_price).toString(), // 月付价格
      };
    }
  };

  // 使用 useMemo 优化数据处理性能
  const yearlyPlans: ProcessedPlanData[] = useMemo(
    () => (data || []).map((item) => processPlanData(item, true)),
    [data],
  );

  const monthlyPlans: ProcessedPlanData[] = useMemo(
    () => (data || []).map((item) => processPlanData(item, false)),
    [data],
  );

  // 处理订阅点击
  const handleSubscribe = (plan: ProcessedPlanData) => {
    console.log('用户选择了套餐:', plan);
    // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
    PurchaseRef.current.show(plan, tabValue);
  };

  const PurchaseRef = useRef<{
    show: (subscribe: API.Subscribe, tabValue: string) => void;
    hide: () => void;
  }>(null);

  return (
    <>
      <LoginDialogProvider>
        <div
          className={
            'hidden text-4xl font-bold text-[#0F2C53] sm:block md:mb-4 md:text-center md:text-5xl'
          }
        >
          {t('title')}
        </div>
        <div
          className={
            '-mt-5 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
          }
        >
          {t('description')}
        </div>
        <div>
          <Tabs
            defaultValue='year'
            className={'mt-8 text-center md:mt-16'}
            value={tabValue}
            onValueChange={(value) => setTabValue(value as 'year' | 'month')}
          >
            <TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
              {tabValue === 'year' ? (
                <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
                  -20%
                  {/* 小三角箭头 */}
                  {/* <span className="
                  absolute right-0 top-full
                  block h-0 w-0
                  border-l-[6px] border-r-[6px] border-t-[16px]
                  border-l-transparent border-r-transparent border-t-[#E22C2E]
                " />*/}
                  <span
                    className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
                    style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
                  />
                </span>
              ) : null}
              <TabsTrigger
                className={
                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                }
                value='year'
              >
                {t('yearlyPlan')}
              </TabsTrigger>
              <TabsTrigger
                className={
                  'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
                }
                value='month'
              >
                {t('monthlyPlan')}
              </TabsTrigger>
            </TabsList>
          </Tabs>
          <TabContent
            tabValue={tabValue}
            yearlyPlans={yearlyPlans}
            monthlyPlans={monthlyPlans}
            isLoading={isLoading}
            error={error}
            onRetry={refetch}
            onSubscribe={handleSubscribe}
          />
        </div>
        <Purchase ref={PurchaseRef} />
      </LoginDialogProvider>
    </>
  );
}