'use client';

import Link from 'next/link';
import { useStoreRatingSummary } from '@/lib/queries/use-reviews';
import { DimensionBreakdownCard } from '@/components/reviews/dimension-breakdown';
import { RatingBadge } from '@/components/reviews/rating-badge';

interface Props {
  storeId: string;
}

export function SellerReviewsWidget({ storeId }: Props) {
  const { data, isLoading, isError } = useStoreRatingSummary(storeId, true);

  if (isLoading) {
    return (
      <div
        data-testid="seller-reviews-widget-loading"
        className="rounded-md border border-forest/20 bg-bone p-4"
      >
        <div className="text-xs uppercase tracking-wide text-forest/70">Reviews</div>
        <div className="mt-2 h-5 w-48 animate-pulse rounded bg-forest/10" />
      </div>
    );
  }

  if (isError || !data) {
    return (
      <div className="rounded-md border border-forest/20 bg-bone p-4">
        <div className="text-xs uppercase tracking-wide text-forest/70">Reviews</div>
        <div className="mt-2 text-sm text-terracotta/80">Couldn&apos;t load reviews.</div>
      </div>
    );
  }

  const summary = data.data;

  if (summary.review_count === 0 || summary.average_rating === null) {
    return (
      <div className="rounded-md border border-forest/20 bg-bone p-4">
        <div className="flex items-center justify-between">
          <div className="text-xs uppercase tracking-wide text-forest/70">Reviews</div>
          <Link
            href="/seller/reviews"
            className="text-xs text-terracotta hover:underline"
          >
            See all
          </Link>
        </div>
        <div className="mt-2 text-sm text-ink/60">No reviews yet.</div>
      </div>
    );
  }

  return (
    <div className="rounded-md border border-forest/20 bg-bone p-4">
      <div className="flex items-center justify-between">
        <div className="text-xs uppercase tracking-wide text-forest/70">Reviews</div>
        <Link
          href="/seller/reviews"
          className="text-xs text-terracotta hover:underline"
        >
          See all
        </Link>
      </div>
      <div className="mt-2">
        <RatingBadge
          averageRating={summary.average_rating}
          reviewCount={summary.review_count}
          size="md"
        />
      </div>
      <div className="mt-3">
        <DimensionBreakdownCard dimensions={summary.dimensions} compact />
      </div>
    </div>
  );
}