"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { EyeOff, Eye, Star } from "lucide-react";
import { setReviewStatus } from "@/features/reviews/actions";
import { toast } from "sonner";

interface AdminReviewRow {
  id: string;
  rating: number;
  title: string | null;
  content: string;
  status: string;
  createdAt: Date;
  toolName: string;
  toolSlug: string;
  authorName: string;
}

/**
 * # 组件 ReviewsAdminTable
 * 说明：评论审核表 —— 隐藏/恢复（隐藏后重算工具聚合评分）。
 */
export function ReviewsAdminTable({ reviews }: { reviews: AdminReviewRow[] }) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const toggle = (id: string, currentStatus: string) => {
    startTransition(async () => {
      try {
        await setReviewStatus(id, currentStatus === "published" ? "hidden" : "published");
        toast.success(currentStatus === "published" ? "Review hidden" : "Review restored");
        router.refresh();
      } catch {
        toast.error("Failed");
      }
    });
  };

  if (reviews.length === 0) {
    return (
      <p className="rounded-xl border border-dashed border-border p-12 text-center text-sm text-muted-foreground">
        No reviews yet.
      </p>
    );
  }

  return (
    <div className="space-y-3">
      {reviews.map((review) => (
        <div
          key={review.id}
          className="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-border p-4"
        >
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2 text-sm">
              <span className="font-semibold text-foreground">{review.authorName}</span>
              <span className="text-xs text-muted-foreground">on</span>
              <span className="font-medium text-foreground">{review.toolName}</span>
              <span className="inline-flex items-center gap-0.5 text-xs font-semibold text-amber-500">
                <Star className="h-3 w-3 fill-current" />
                {review.rating}
              </span>
              <span
                className={
                  review.status === "published"
                    ? "rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
                    : "rounded-full bg-red-500/10 px-2 py-0.5 text-[10px] font-medium text-red-600 dark:text-red-400"
                }
              >
                {review.status}
              </span>
            </div>
            {review.title && (
              <p className="mt-1 text-sm font-medium text-foreground">{review.title}</p>
            )}
            <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
              {review.content}
            </p>
          </div>

          <button
            type="button"
            disabled={isPending}
            onClick={() => toggle(review.id, review.status)}
            className="inline-flex shrink-0 items-center gap-1 rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground disabled:opacity-50"
          >
            {review.status === "published" ? (
              <>
                <EyeOff className="h-3.5 w-3.5" />
                Hide
              </>
            ) : (
              <>
                <Eye className="h-3.5 w-3.5" />
                Restore
              </>
            )}
          </button>
        </div>
      ))}
    </div>
  );
}