'use client';

import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useSelectedStoreId } from '@/lib/stores/store-context';
import { useSellerReviews, useStoreRatingSummary } from '@/lib/queries/use-reviews';
import { ReviewCard } from '@/components/reviews/review-card';
import { DimensionBreakdownCard } from '@/components/reviews/dimension-breakdown';
import { RatingBadge } from '@/components/reviews/rating-badge';

export function SellerReviewsClient() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const storeId = useSelectedStoreId();

  const page = Math.max(1, Number(searchParams.get('page') ?? '1'));

  const setPage = (next: number) => {
    const params = new URLSearchParams(searchParams.toString());
    if (next <= 1) params.delete('page');
    else params.set('page', String(next));
    const qs = params.toString();
    router.replace(qs ? `${pathname}?${qs}` : pathname);
  };

  const { data: summaryResp } = useStoreRatingSummary(storeId, true);
  const { data, isLoading, isError } = useSellerReviews({ page });

  const summary = summaryResp?.data ?? null;
  const reviews = data?.data ?? [];
  const meta = data?.meta;

  return (
    <div>
      <div>
        <h1 className="text-2xl font-bold text-ink">Reviews</h1>
        <p className="mt-1 text-sm text-ink/60">
          Buyer feedback on your delivered orders.
        </p>
      </div>

      {summary && summary.review_count > 0 && summary.average_rating !== null && (
        <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
          <div className="rounded-md border border-forest/20 bg-white p-4 md:col-span-1">
            <div className="text-xs uppercase tracking-wide text-forest/70">
              Overall
            </div>
            <div className="mt-2">
              <RatingBadge
                averageRating={summary.average_rating}
                reviewCount={summary.review_count}
                size="md"
              />
            </div>
          </div>
          <div className="md:col-span-2">
            <DimensionBreakdownCard dimensions={summary.dimensions} />
          </div>
        </div>
      )}

      <div className="mt-6 space-y-3">
        {isLoading && (
          <div className="space-y-3" data-testid="seller-reviews-loading">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="h-32 animate-pulse rounded-lg bg-slate-100" />
            ))}
          </div>
        )}

        {isError && (
          <div
            className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700"
            data-testid="seller-reviews-error"
          >
            Couldn&apos;t load reviews.
          </div>
        )}

        {!isLoading && !isError && reviews.length === 0 && (
          <div
            data-testid="seller-reviews-empty"
            className="rounded-lg border border-slate-200 bg-white p-8 text-center text-sm text-slate-500"
          >
            No reviews yet. They&apos;ll appear here as buyers leave feedback.
          </div>
        )}

        {!isLoading &&
          !isError &&
          reviews.map((r) => (
            <div key={r.id}>
              <ReviewCard review={r} reportStatus={r.report_status} />
              <div className="mt-1 text-right text-xs">
                <Link
                  href={`/seller/orders/${r.order_id}`}
                  className="text-terracotta hover:underline"
                  data-testid={`seller-review-tx-${r.id}`}
                >
                  View order
                </Link>
              </div>
            </div>
          ))}
      </div>

      {meta && meta.last_page > 1 && (
        <div className="mt-6 flex items-center justify-between text-xs text-ink/60">
          <span>
            Page {meta.current_page} of {meta.last_page} · {meta.total} total
          </span>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setPage(page - 1)}
              disabled={page <= 1}
              className="rounded border border-forest/30 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-bone/50"
            >
              Previous
            </button>
            <button
              type="button"
              onClick={() => setPage(page + 1)}
              disabled={page >= meta.last_page}
              className="rounded border border-forest/30 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-bone/50"
            >
              Next
            </button>
          </div>
        </div>
      )}
    </div>
  );
}