'use client';

import { querySubscribeList } from '@/services/user/subscribe';
import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import { useState } from 'react';

import { LoginDialogProvider } from '@/app/auth/LoginDialogContext';
import TabContent from '@/components/SubscribePlan/PlanContent/index';
import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';

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') || [];
    },
  });

  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>
          <div className={'m-auto flex w-full sm:w-[362px]'}>
            <PlanTabs tabValue={tabValue} setTabValue={setTabValue} discount={20} />
          </div>
          <TabContent
            tabValue={tabValue}
            subscribeData={data}
            isLoading={isLoading}
            error={error}
            onRetry={refetch}
          />
        </div>
      </LoginDialogProvider>
    </>
  );
}