'use client';
import { cn } from '@/lib/utils';
import { AppRouterOutput } from '@/server/trpc/types';

type PollResultItem = NonNullable<
  AppRouterOutput['poll']['get']
>['questions'][number];

type SliderParams = PollResultItem & {
  min: number;
  max: number;
  step?: number;
};

export default function PollLineChart({ item }: { item: PollResultItem }) {
  if (!item.params || !item.stat) return null;

  const { min, max, step = 1 } = item.params as SliderParams;
  const { average, count } = item.stat;

  const steps: number[] = [];
  for (let v = min; v <= max; v += step) {
    steps.push(v);
  }

  const totalRange = max - min;

  const clampedAverage = Math.min(Math.max(average, min), max);
  const averagePercent = ((clampedAverage - min) / totalRange) * 100;
  const isAtStart = averagePercent < 5;
  const isAtEnd = averagePercent > 95;

  return (
    <div className='grid w-full gap-2'>
      <p className='font-lg font-serif italic'>Samlet resultat</p>
      <div className='relative mt-4 mb-8 flex justify-between md:mt-8 md:mb-16'>
        <div className='absolute top-1/2 left-0 h-0.5 w-full -translate-y-1/2 bg-neutral-300 md:h-1' />

        {steps.map((value) => (
          <div
            key={value}
            className='relative h-4 w-0.5 bg-neutral-300 md:h-5 md:w-1'
          />
        ))}

        <div
          className='absolute top-1/2 -translate-y-1/2'
          style={{ left: `${averagePercent}%` }}
        >
          <div
            className={`relative ${isAtStart ? 'translate-x-0' : ''} ${isAtEnd ? '-translate-x-full' : ''} ${!isAtStart && !isAtEnd ? '-translate-x-1/2' : ''} `}
          >
            <div className='bg-client-red size-4 rounded-full ring-2 ring-white md:size-7' />

            <span
              className={cn(
                'absolute top-4 text-xl font-bold break-normal text-neutral-700 md:top-8 md:text-6xl',
                isAtStart && 'left-0 text-left',
                isAtEnd && 'right-0 text-right',
                !isAtStart &&
                  !isAtEnd &&
                  'left-1/2 -translate-x-1/2 text-center'
              )}
            >
              {average.toFixed(2)}
            </span>
          </div>
        </div>
      </div>
      <span className='text-end font-serif text-lg text-neutral-700'>
        {count} stemmer
      </span>
    </div>
  );
}