'use client';

import { AlignInfoFillIcon as IconInfoCustomFill } from '@/components/misc/alignui-icons';
import * as React from 'react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { type ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
import { Star } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Checkbox from '@/components/ui/checkbox';
import * as Divider from '@/components/ui/divider';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import { SVGStarFill } from '@/components/ui/svg-rating-icons';
import * as Textarea from '@/components/ui/textarea';
import * as Tooltip from '@/components/ui/tooltip';
import { cn } from '@/utils/cn';

const StarRatingCells = React.forwardRef<
  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
  Omit<ToggleGroupSingleProps, 'type'>
>(({ className, ...rest }, forwardedRef) => {
  return (
    <ToggleGroupPrimitive.Root
      type='single'
      ref={forwardedRef}
      className={cn('flex w-full gap-2', className)}
      {...rest}
    >
      {Array.from({ length: 5 }, (_, i) => (
        <ToggleGroupPrimitive.Item
          key={i}
          value={`${i + 1}`}
          className={cn(
            'group rounded-10 ring-stroke-soft-200 flex h-14 w-full items-center justify-center ring-1 ring-inset',
            'transition duration-200 ease-out',
            // hover
            'hover:bg-bg-weak-50 hover:ring-transparent',
          )}
        >
          <SVGStarFill
            className={cn(
              'text-stroke-sub-300 size-8 transition duration-200 ease-out',
              // checked
              'group-has-[~[data-state=on]]:text-yellow-500 group-data-[state=on]:text-yellow-500',
            )}
          />
        </ToggleGroupPrimitive.Item>
      ))}
    </ToggleGroupPrimitive.Root>
  );
});
StarRatingCells.displayName = 'StarRatingCells';

export default function ProductReviewFormCard() {
  const [star, setStar] = React.useState('3');
  const [productName, setProductName] = React.useState('');
  const [productReview, setProductReview] = React.useState('');

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md ring-stroke-soft-200 w-full max-w-[400px] ring-1 ring-inset'>
      <div className='flex items-center gap-3.5 px-5 py-4'>
        <div className='bg-bg-white-0 ring-stroke-soft-200 flex size-10 shrink-0 items-center justify-center rounded-full ring-1 ring-inset'>
          <Star className='text-text-sub-600 size-5' />
        </div>
        <div>
          <div className='text-label-sm text-text-strong-950'>
            Rate Our Product
          </div>
          <div className='text-paragraph-xs text-text-sub-600 mt-1'>
            Provide us with feedback for the product.
          </div>
        </div>
      </div>

      <Divider.Root />

      <div className='flex flex-col gap-4 p-5'>
        <div className='flex flex-col gap-2.5'>
          <div className='flex items-center'>
            <Label.Root>Your Rating</Label.Root>
            <Tooltip.Provider>
              <Tooltip.Root>
                <Tooltip.Trigger className='focus:outline-none'>
                  <IconInfoCustomFill className='text-text-disabled-300 size-5' />
                </Tooltip.Trigger>
                <Tooltip.Content size='small' className='max-w-72'>
                  Rate your experience from 1 to 5 stars. Your feedback helps us
                  improve our services.
                </Tooltip.Content>
              </Tooltip.Root>
            </Tooltip.Provider>
          </div>
          <StarRatingCells value={star} onValueChange={setStar} />
        </div>

        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='product-name'>
            Product Name <Label.Asterisk />
          </Label.Root>
          <Input.Root>
            <Input.Wrapper>
              <Input.Input
                type='text'
                id='product-name'
                placeholder='Macbook Air M1'
                value={productName}
                onChange={(e) => setProductName(e.target.value)}
              />
            </Input.Wrapper>
          </Input.Root>
        </div>

        <div className='flex flex-col gap-1'>
          <Label.Root htmlFor='product-review'>
            Product Review <Label.Sub>(Optional)</Label.Sub>
          </Label.Root>
          <Textarea.Root
            placeholder='Jot down your thoughts...'
            id='product-review'
            value={productReview}
            onChange={(e) => setProductReview(e.target.value)}
            className='min-h-[78px]'
          >
            <Textarea.CharCounter current={productReview.length} max={200} />
          </Textarea.Root>
        </div>

        <div className='flex items-center gap-2'>
          <Checkbox.Root id='c1' />
          <Label.Root className='text-paragraph-sm' htmlFor='c1'>
            Remain ananymous
          </Label.Root>
        </div>
      </div>

      <Divider.Root />

      <div className='grid grid-cols-2 gap-3 px-5 py-4'>
        <Button.Root variant='neutral' mode='stroke' size='small'>
          Cancel
        </Button.Root>
        <Button.Root size='small'>Submit</Button.Root>
      </div>
    </div>
  );
}