'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, useState } from 'react';

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 [subscribe, setSubscribe] = useState<API.Subscribe | undefined>();
  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);
    // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
    setSubscribe(plan);
  };

  return (
    <>
      <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
        选择套餐
      </div>
      <div className={'text-lg font-medium text-[#666666] md:text-center'}>
        选择最适合您的服务套餐
      </div>
      <div>
        <Tabs
          defaultValue='year'
          className={'mt-8 text-center md:mt-16'}
          value={tabValue}
          onValueChange={(value) => setTabValue(value as 'year' | 'month')}
        >
          <TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
            <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'
            >
              年付套餐
            </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'
            >
              月付套餐
            </TabsTrigger>
          </TabsList>
        </Tabs>
        <TabContent
          tabValue={tabValue}
          yearlyPlans={yearlyPlans}
          monthlyPlans={monthlyPlans}
          isLoading={isLoading}
          error={error}
          onRetry={refetch}
          onSubscribe={handleSubscribe}
        />
      </div>
      <Purchase subscribe={subscribe} setSubscribe={setSubscribe} />
    </>
  );
}
