'use client';

import React from 'react';
import {
  ArrowUpRight,
  BarChart2,
  Clock,
  DollarSign,
  Search,
  Settings,
  Tag,
} from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as Divider from '@/components/ui/divider';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Switch from '@/components/ui/switch';
import { cn } from '@/utils/cn';
const userCounts = [50, 100, 200, 400, 800, 1200];

const basePrices: Record<number, number> = {
  50: 29,
  100: 49,
  200: 79,
  400: 99,
  800: 149,
  1200: 249,
};

const SWITCH_COST = 15;

const switchItems = [
  {
    name: 'Engagement tools',
    icon: BarChart2,
    defaultActive: true,
    iconColor: 'text-information-base',
  },
  {
    name: 'Review system',
    icon: Settings,
    defaultActive: true,
    iconColor: 'text-highlighted-base',
  },
  {
    name: 'Hiring kit',
    icon: Search,
    defaultActive: false,
    iconColor: 'text-away-base',
  },
  {
    name: 'Time tracker',
    icon: Clock,
    defaultActive: false,
    iconColor: 'text-success-base',
  },
  {
    name: 'Payroll suite',
    icon: DollarSign,
    defaultActive: false,
    iconColor: 'text-error-base',
  },
];

const pricingFeatures = [
  'Unlimited seats',
  'Role-based control',
  'Performance dashboard',
  'Payroll automation',
  'Priority support',
];

function CheckCircleIcon({ className }: { className?: string }) {
  return (
    <svg viewBox='0 0 12 12' fill='none' className={className}>
      <path
        d='M6 12C2.6862 12 0 9.3138 0 6C0 2.6862 2.6862 0 6 0C9.3138 0 12 2.6862 12 6C12 9.3138 9.3138 12 6 12ZM5.4018 8.4L9.6438 4.1574L8.7954 3.309L5.4018 6.7032L3.7044 5.0058L2.856 5.8542L5.4018 8.4Z'
        fill='currentColor'
      />
    </svg>
  );
}

export default function WorkforcePricingCalculator() {
  const [activeUserCount, setActiveUserCount] = React.useState(400);
  const [switchStates, setSwitchStates] = React.useState(
    switchItems.map((item) => item.defaultActive),
  );
  const uniqueId = React.useId();

  const activeSwitchCount = switchStates.filter(Boolean).length;
  const price = basePrices[activeUserCount] + activeSwitchCount * SWITCH_COST;

  const handleSwitchChange = (index: number, checked: boolean) => {
    setSwitchStates((prev) => {
      const next = [...prev];
      next[index] = checked;
      return next;
    });
  };

  return (
    <div className='bg-bg-white-0 w-full'>
      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 md:px-7 lg:items-center lg:gap-12 lg:py-24'>
        <div className='flex flex-col gap-4 lg:items-center'>
          <div className='flex flex-col gap-3 lg:items-center'>
            <Badge.Root
              variant='stroke'
              className='text-label-sm text-text-sub-600 bg-bg-weak-50 h-7 w-fit !gap-1.5 rounded-[9px] pr-[10px] pl-2 normal-case ring-transparent'
            >
              <Badge.Icon as={Tag} className='text-text-soft-400 mx-0 size-4' />
              Designed for growing finance teams
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
              Flexible plans, clear benefits
            </h2>
          </div>
          <p className='text-paragraph-md text-text-sub-600 lg:max-w-[528px] lg:text-center'>
            No hidden costs, no rigid terms — just adaptive pricing and support
            <br className='hidden lg:block' />
            <span className='text-label-md'> for your evolving HR goals.</span>
          </p>
        </div>

        <div className='flex flex-col gap-6 lg:flex-row'>
          <div className='border-stroke-soft-200 bg-bg-white-0 flex h-fit w-full flex-col gap-6 rounded-[28px] border p-6 lg:w-[392px] lg:gap-7 lg:p-7'>
            <div className='flex flex-col gap-4'>
              <p className='text-label-sm text-text-sub-600'>
                Monthly active users
              </p>
              <div className='-mx-6 lg:mx-0'>
                <div
                  className='flex items-center gap-2 overflow-x-auto px-6 lg:justify-between lg:gap-0 lg:overflow-visible lg:px-0'
                  style={{ scrollbarWidth: 'none' }}
                >
                  {userCounts.map((count) => {
                    const isActive = count === activeUserCount;
                    return (
                      <button
                        key={count}
                        type='button'
                        onClick={() => setActiveUserCount(count)}
                        className={cn(
                          'flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2.5',
                          isActive
                            ? 'bg-primary-base/[0.10] text-primary-base'
                            : 'border-stroke-soft-200 shadow-regular-xs text-text-sub-600 bg-bg-white-0 border',
                        )}
                      >
                        {isActive && (
                          <CheckCircleIcon className='text-primary-base size-3 shrink-0' />
                        )}
                        <span className='text-label-sm'>{count}</span>
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>

            <Divider.Root />

            <div className='flex flex-col gap-5'>
              {switchItems.map((item, index) => (
                <div key={item.name} className='flex items-center gap-2.5'>
                  <item.icon
                    className={cn('size-6 shrink-0', item.iconColor)}
                  />
                  <span className='text-label-md text-text-sub-600 flex-1'>
                    {item.name}
                  </span>
                  <Switch.Root
                    id={`${uniqueId}-switch-${index}`}
                    checked={switchStates[index]}
                    onCheckedChange={(checked: boolean) =>
                      handleSwitchChange(index, checked)
                    }
                    className='cursor-pointer'
                  />
                </div>
              ))}
            </div>
          </div>

          <div className='bg-bg-weak-50 flex h-fit w-full flex-col gap-6 rounded-[28px] p-6 lg:w-[392px] lg:gap-8 lg:p-7'>
            <div className='flex flex-col gap-6'>
              <div className='flex flex-col gap-2'>
                <h3 className='text-label-md text-text-strong-950'>
                  Workforce plan
                </h3>
                <p className='text-label-sm text-text-sub-600'>
                  For HR teams simplifying recruitment, onboarding, payroll, and
                  team growth.
                </p>
              </div>

              <div className='flex items-center gap-2.5'>
                <span className='text-title-h2 text-text-strong-950 font-[550]'>
                  ${price}
                </span>
                <span className='text-label-md text-text-sub-600'>/mo</span>
              </div>

              <Divider.Root />

              <div className='flex flex-col gap-4'>
                {pricingFeatures.map((feature) => (
                  <div key={feature} className='flex items-center gap-2.5'>
                    <CheckCircleIcon className='text-text-soft-400 size-[13px] shrink-0' />
                    <span className='text-label-sm text-text-sub-600'>
                      {feature}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <FancyButton.Root
              variant='primary'
              className='!bg-primary-base w-full cursor-pointer gap-1 rounded-xl'
            >
              <span className='relative z-10 px-1'>Start free trial</span>
              <FancyButton.Icon
                as={ArrowUpRight}
                className='text-static-white/[0.64] mx-0'
              />
            </FancyButton.Root>
          </div>
        </div>
      </div>
    </div>
  );
}