'use client';

import * as FancyButton from '@/components/ui/fancy-button';
import * as Hint from '@/components/ui/hint';
import * as SegmentedControl from '@/components/ui/segmented-control';
import ShineBorder from '@/components/animation/shine-border';
import { cn } from '@/utils/cn';
import NumberFlow, { continuous } from '@number-flow/react';
import { Check, InfoIcon } from 'lucide-react';
import Link from 'next/link';
import { useState } from 'react';

interface PlanProps {
  title: string;
  popular: boolean;
  price: number | { monthly: number; yearly: number };
  description: string;
  buttonText: string;
  benefitList: string[];
}

export enum PlanType {
  Free = 'Free',
  Pro = 'Pro',
  ProPlus = 'Pro+',
}

const PRICING_PLANS: PlanProps[] = [
  {
    title: PlanType.Free,
    popular: false,
    price: 0,
    description:
      'For personal note-taking, writing, and creative work with minimal AI features.',
    buttonText: 'Get started for free',
    benefitList: [
      'Unlimited Docs saving',
      '100 Basic AI models requests per month',
      '100 AI Credits per month',
      '1 month expiry - renews monthly',
      '5MB file upload, 200 MB storage',
      '2 Knowledge assets',
      'Basic AI Writing Tools',
      '1 user seat',
      'Community support',
    ],
  },
  {
    title: PlanType.Pro,
    popular: false,
    price: {
      monthly: 19,
      yearly: 190,
    },
    description:
      'Perfect for growing teams that need more power and flexibility.',
    buttonText: 'Start free trial',
    benefitList: [
      'Unlimited Basic AI models requests',
      '2000 AI Credits per month',
      '1 month expiry - renews monthly',
      '50MB file upload, 2 GB storage',
      '10 Knowledge assets',
      'Unlock all AI Writing Agents',
      '2 members',
      'Browser extension access (coming soon)',
      'Priority support',
    ],
  },
  {
    title: PlanType.ProPlus,
    popular: true,
    price: {
      monthly: 39,
      yearly: 390,
    },
    description:
      'For those need much higher AI usage limits, priority support.',
    buttonText: 'Start free trial',
    benefitList: [
      'Unlimited Premium AI Models',
      'Unlimited AI Chat requests',
      'Unlimited files upload, 10 GB storage',
      'Unlimited Knowledge assets',
      'Unlock all AI Writing Tools',
      '1 month expiry - renews monthly',
      '5 members',
      'Browser extension access (coming soon)',
      'Priority support',
    ],
  },
];

const PRICING_RATE = 0.75;

export const AIProductPricingCards = ({
  className,
  showHeader = true,
}: {
  className?: string;
  showHeader?: boolean;
}) => {
  const [selectedPlan, setSelectedPlan] = useState('Yearly');

  return (
    <section
      id='pricing'
      className={cn(
        'container mx-auto max-w-screen-sm px-4 py-24 sm:py-38 xl:max-w-5xl xl:px-0',
        className,
      )}
    >
      {showHeader && (
        <>
          <h2 className='text-label-lg text-primary-base mb-2 text-center tracking-wider'>
            PRICING
          </h2>

          <h2 className='text-white-to-orange-lighter text-title-h3 md:text-title-h2 mb-4 text-center font-serif'>
            Simple, transparent pricing
          </h2>

          <h3 className='text-text-sub-600 mx-auto pb-14 text-center text-xl md:w-1/2'>
            No credit card required, cancel anytime
          </h3>
        </>
      )}

      <div className='mx-auto mb-12 w-fit'>
        <SegmentedControl.Root
          defaultValue='Yearly'
          value={selectedPlan}
          onValueChange={setSelectedPlan}
        >
          <SegmentedControl.List>
            <SegmentedControl.Trigger value='Yearly' className='w-24'>
              Yearly
            </SegmentedControl.Trigger>
            <SegmentedControl.Trigger value='Monthly' className='w-24'>
              Monthly
            </SegmentedControl.Trigger>
          </SegmentedControl.List>
        </SegmentedControl.Root>
      </div>

      <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-4'>
        {PRICING_PLANS.map(
          ({ title, popular, price, description, buttonText, benefitList }) => (
            <div
              key={title}
              className='border-stroke-soft-200 bg-bg-white-0 relative inline-flex flex-col items-start justify-start overflow-hidden rounded-2xl border p-5'
            >
              {popular ? (
                <ShineBorder
                  shineColor={[
                    'var(--color-sky-400)',
                    'var(--color-primary-base)',
                    'var(--color-sky-700)',
                  ]}
                />
              ) : (
                <></>
              )}
              <div className='absolute inset-0 z-0 h-full w-full overflow-hidden'></div>
              <div className='relative z-10 flex h-full w-full flex-col items-start justify-start'>
                <div className='flex flex-col items-start justify-start gap-4'>
                  <h3
                    className={cn(
                      'text-label-lg font-semibold',
                      popular ? 'text-primary-neon' : 'text-text-strong-950',
                    )}
                  >
                    {title}
                  </h3>
                  <p className='text-label-md text-text-sub-600'>
                    {description}
                  </p>
                </div>

                <div className='my-5 inline-flex items-end justify-start gap-1 self-stretch'>
                  <div className='text-text-strong-950 justify-center font-serif font-bold'>
                    <span className='text-title-h2 mr-0.5'>$</span>
                    <NumberFlow
                      value={
                        selectedPlan === 'Yearly'
                          ? typeof price === 'object' && price?.yearly
                            ? Math.round(price.yearly / 12)
                            : typeof price === 'number'
                              ? price * PRICING_RATE
                              : 0
                          : typeof price === 'object' && price?.monthly
                            ? price.monthly
                            : typeof price === 'number'
                              ? price
                              : 0
                      }
                      className='text-title-h2'
                      locales='en-US'
                      transformTiming={{
                        duration: 600,
                        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
                      }}
                      plugins={[continuous]}
                    />
                  </div>
                  <div className='flex items-center justify-center gap-2.5 pb-3'>
                    <div className='text-paragraph-sm text-text-sub-600 justify-center leading-tight font-medium'>
                      /MONTH
                    </div>
                    {selectedPlan === 'Yearly' && title !== 'Free' && (
                      <div className='text-paragraph-sm text-text-sub-600 leading-tight font-medium'>
                        (Save 25%)
                      </div>
                    )}
                  </div>
                </div>

                <Link
                  href='https://app.typepulse.ai/auth/sign-in'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='w-full'
                >
                  <FancyButton.Root
                    asChild
                    variant={popular ? 'primary' : 'neutral'}
                    className='w-full'
                  >
                    <span>{buttonText}</span>
                  </FancyButton.Root>
                </Link>

                <div className='my-5 h-0 self-stretch outline-1 outline-offset-[-0.50px] outline-white/10'></div>

                <div className='my-5 flex flex-col items-start justify-start gap-2.5 self-stretch'>
                  <div className='mb-2 flex flex-col items-start justify-start gap-2.5 self-stretch'>
                    {title !== 'Free'
                      ? `Everything in ${title === 'Premium' ? 'Free' : 'Free'}, plus:`
                      : 'Free plan includes:'}
                  </div>
                  {benefitList.map((benefit) => (
                    <div
                      className='inline-flex items-center justify-start gap-2.5'
                      key={benefit}
                    >
                      <div
                        className={cn(
                          'flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] p-[5px]',
                          title === 'Free'
                            ? 'bg-white/10'
                            : 'bg-primary-alpha/10',
                        )}
                      >
                        <Check
                          className={cn(
                            'relative size-3',
                            title !== 'Free' &&
                              'text-primary-base font-semibold',
                          )}
                        />
                      </div>
                      <div className='text-text-strong-950 justify-center text-sm leading-normal font-normal lg:text-base'>
                        {benefit}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ),
        )}
      </div>

      <div className='mt-12 flex justify-center'>
        <Hint.Root>
          <Hint.Icon as={InfoIcon} />
          Pricing in USD. Local currency available in app.
        </Hint.Root>
      </div>
    </section>
  );
};

export default AIProductPricingCards;