'use client';

import * as React from 'react';
import { Pencil, Star } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as LinkButton from '@/components/ui/link-button';
import { StarRating, SVGStarFill } from '@/components/ui/svg-rating-icons';
type RatingData = {
  ratingCounts: Record<number, number>;
};

const DUMMY_RATING_DATA: RatingData = {
  ratingCounts: {
    5: 8600,
    4: 3820,
    3: 1300,
    2: 2580,
    1: 1120,
  },
};

function calculateRatingStats(data: RatingData) {
  const totalRatings = Object.values(data.ratingCounts).reduce(
    (a, b) => a + b,
    0,
  );
  const weightedSum = Object.entries(data.ratingCounts).reduce(
    (sum, [rating, count]) => sum + Number(rating) * count,
    0,
  );

  const averageRating =
    totalRatings > 0 ? Number((weightedSum / totalRatings).toFixed(1)) : 0;

  const distribution = Object.fromEntries(
    Object.entries(data.ratingCounts).map(([rating, count]) => [
      rating,
      {
        count,
        percentage: (count / totalRatings) * 100,
      },
    ]),
  );

  return { averageRating, totalRatings, distribution };
}

function RatingBar({
  rating,
  percentage,
}: {
  rating: number;
  percentage: number;
}) {
  return (
    <div className='flex items-center gap-2.5'>
      <div className='bg-bg-weak-50 h-3 flex-1 rounded-sm'>
        <div
          className='bg-away-base h-3 rounded-sm'
          style={{ width: `${Math.round(percentage)}%` }}
        />
      </div>
      <div className='flex items-center gap-1'>
        <div className='text-paragraph-sm text-text-sub-600'>{rating}.0</div>
        <SVGStarFill className='size-4 shrink-0 text-yellow-500' />
      </div>
    </div>
  );
}

function formatNumber(num: number): string {
  return num >= 1000 ? `${(num / 1000).toFixed(1)}K` : num.toString();
}

export default function ProductRatingSummaryCard() {
  const stats = React.useMemo(
    () => calculateRatingStats(DUMMY_RATING_DATA),
    [],
  );
  const { averageRating, totalRatings, distribution } = stats;

  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-5 p-5'>
        <div className='flex items-center gap-4'>
          <div className='text-title-h3 text-text-strong-950'>
            {averageRating}
          </div>
          <div className='border-stroke-soft-200 h-12 w-0 border-l' />
          <div className='flex flex-col gap-2'>
            <StarRating rating={averageRating} />
            <div className='flex gap-1'>
              <span className='text-paragraph-sm text-text-strong-950'>
                {averageRating} ∙ {formatNumber(totalRatings)} Ratings
              </span>
              <LinkButton.Root size='medium' variant='gray' underline>
                567 reviews
              </LinkButton.Root>
            </div>
          </div>
        </div>

        <Divider.Root variant='line-spacing' />

        <div className='flex flex-col gap-3'>
          {[5, 4, 3, 2, 1].map((rating) => (
            <RatingBar
              key={rating}
              rating={rating}
              percentage={distribution[rating]?.percentage || 0}
            />
          ))}
        </div>
      </div>

      <Divider.Root />

      <div className='px-5 py-4'>
        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='w-full'
        >
          <Button.Icon as={Pencil} className='size-4' />
          Write a Review
        </Button.Root>
      </div>
    </div>
  );
}