'use client';

import { useState } from 'react';
import { useAuthStore } from '@/stores/auth';
import { ReportReviewDialog } from './report-review-dialog';

interface Props {
  reviewId: string;
  reviewState: 'visible' | 'hidden';
  /**
   * Optional. When provided, the button is hidden if it matches the current
   * viewer's id (the buyer can't report their own review). On the public
   * store-detail surface this is not available — the API rejects own-report
   * with 422 as a safety net.
   */
  reviewerUserId?: string | null;
}

export function ReportReviewButton({ reviewId, reviewState, reviewerUserId }: Props) {
  const user = useAuthStore((s) => s.user);
  const [open, setOpen] = useState(false);
  const [reported, setReported] = useState(false);

  if (!user) return null;
  if (reviewState !== 'visible') return null;
  if (reviewerUserId && reviewerUserId === user.id) return null;

  if (reported) {
    return (
      <span
        className="text-xs text-slate-400"
        data-testid={`review-reported-marker-${reviewId}`}
      >
        Reported — thanks
      </span>
    );
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="text-xs text-slate-500 hover:text-slate-700 hover:underline"
        data-testid={`report-review-button-${reviewId}`}
      >
        Report
      </button>
      <ReportReviewDialog
        reviewId={reviewId}
        open={open}
        onClose={() => setOpen(false)}
        onReported={() => setReported(true)}
      />
    </>
  );
}