'use client';
import {
  Select,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Routes } from '@/config/routes';
import { PriceCalculator } from '@/server/modules/payment/services/price-calculator';
import { TierSelectContent } from '@/components/payment/blocks/tier-select-content';

type Props = {
  price: PriceCalculator.Price;
};

export default function SelectForm({
  price: planPrice
}: Props) {
  const [selectedOption, setSelectedOption] = useState((planPrice.tiers || [])[0]?.up_to || 1);
  const router = useRouter();

  const onSelectChange = (value: string) => {
    setSelectedOption(value as unknown as number);
  };

  const handleCheckout = () => {
    // Redirect to checkout page with plan and employee count
    router.push(
      `${Routes.PAYMENTS.BUSINESS}/checkout?price=${planPrice.id}&employees=${selectedOption}`
    );
  };

  return (
    <div className='flex flex-col items-center justify-center gap-5'>
      <div>
        <p className='mb-2 font-bold text-neutral-400'>Vælg antal</p>
        <Select
          value={selectedOption as unknown as string}
          onValueChange={onSelectChange}
        >
          <SelectTrigger className='h-11 w-62 rounded-none bg-white uppercase'>
            <SelectValue />
          </SelectTrigger>

          <TierSelectContent className='rounded-none uppercase' price={planPrice} />
        </Select>
      </div>

      <button
        className='bg-client-red hover:bg-client-red/80 inline-block rounded-md px-6 py-2 text-lg font-bold text-white transition'
        onClick={handleCheckout}
      >
        Ja tak
      </button>
    </div>
  );
}