'use client';

import { observer } from 'mobx-react-lite';
import { useRef } from 'react';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import TitleText from '@/components/title/TitleText';
import {
  useUsagePlanDescriptionsResponse,
  useUsagePlanFaq,
  useUsagePlanTableComparison,
  useUsagePlans,
} from '@/hooks/usePricing';
import { ArrowDownIcon } from '@/icons';
import { CHECKOUT_SOURCE } from '@/lib/checkoutSource';

import { ComparePlansTable } from '../account/AuraSubscriptions/ComparePlansTable';
import { FAQ } from '../account/AuraSubscriptions/FAQ';
import { Plans } from '../account/AuraSubscriptions/Plans';
import { DEFAULT_CURRENCY } from '../account/constants';

export const PricingPage = observer(() => {
  const { data: availablePlans } = useUsagePlans();
  const { data: descriptionsResponse } = useUsagePlanDescriptionsResponse();
  const { data: tableData } = useUsagePlanTableComparison();
  const { data: usagePlanFaqs } = useUsagePlanFaq();

  const comparePlansRef = useRef<HTMLDivElement>(null);
  const faqsRef = useRef<HTMLDivElement>(null);

  const scrollToComparePlans = () => {
    comparePlansRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  const scrollToFaqs = () => {
    faqsRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  return (
    <div className='relative flex min-h-screen w-full flex-col items-center overflow-y-auto bg-[#0E0808]'>
      <div className='absolute top-0 left-0 h-full w-full'>
        <img
          src='https://cdn-o.suno.com/auras-v2/Aura-1-Hero.jpg'
          className='h-full w-full object-cover'
          alt=''
        />
        <div
          className='absolute inset-0'
          style={{
            background:
              'linear-gradient(rgba(14, 8, 8, 0) -69.77%, #0E0808 53.4%)',
          }}
        />
      </div>
      <div className='relative z-10 mb-[120px] flex w-full max-w-[1280px] flex-col items-start gap-6 p-6'>
        <div className='flex flex-col gap-[100px]'>
          <div className='mt-6 flex w-full flex-col gap-10'>
            <div className='flex flex-col items-center'>
              <TitleText
                text='Start making music for free'
                className='leading-[48px] text-white/90'
              />
              <span className='font-sans text-sm text-white/60'>
                Plans for every creator
              </span>
              <Plans
                plans={availablePlans || []}
                currentSubscription={null}
                usagePlanDescriptions={
                  descriptionsResponse?.usage_plan_descriptions || {}
                }
                ctaButtons={descriptionsResponse?.cta_buttons ?? null}
                selectedCurrency={DEFAULT_CURRENCY}
                checkoutSource={CHECKOUT_SOURCE.PRICING_PAGE}
              />
            </div>
            <div className='flex flex-col items-center gap-8'>
              <div className='flex flex-row gap-2'>
                <Button
                  variant={ButtonVariant.Secondary}
                  shape={ButtonShape.Pill}
                  onClick={scrollToFaqs}
                >
                  FAQs <ArrowDownIcon />
                </Button>
                <Button
                  variant={ButtonVariant.Secondary}
                  shape={ButtonShape.Pill}
                  onClick={scrollToComparePlans}
                >
                  Compare plans <ArrowDownIcon />
                </Button>
              </div>
              <div className='flex flex-col items-center gap-2'>
                <h2 className='font-sans text-xs font-bold text-primary/30'>
                  Need More?
                </h2>

                <span className='w-full text-center font-sans text-xs text-primary/30'>
                  Credits included in subscriptions do not carry over from day
                  to day or month to month. Purchased top up credits do not
                  expire, but require an active subscription to use. See the{' '}
                  <a className='underline' href='https://suno.com/legal/terms'>
                    terms of service
                  </a>{' '}
                  for limitations on commercial use. Email us at{' '}
                  <a className='underline' href='mailto:billing@suno.com'>
                    billing@suno.com
                  </a>{' '}
                  with any questions.
                </span>
              </div>
            </div>
          </div>

          <FAQ ref={faqsRef} items={usagePlanFaqs || []} />

          <ComparePlansTable
            ref={comparePlansRef}
            tableComparison={tableData}
            currentPlanKey={null}
            plans={availablePlans}
            usagePlanDescriptions={
              descriptionsResponse?.usage_plan_descriptions
            }
          />
        </div>
      </div>
    </div>
  );
});