"use client";

import { Suspense, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  ClipboardCheck,
  Clock,
  Star,
  XCircle,
  AlertCircle,
  CheckCircle2,
} from "lucide-react";
import { toast } from "sonner";
import { tToast } from "@/lib/utils/translated-toast";
import { cn } from "@/lib/utils/cn";
import { useAuthStore } from "@/lib/store/auth-store";
import { useTranslation } from "@/lib/hooks/use-translation";
import { reviewApi } from "@/lib/api/client";
import type { Review } from "@/types";

/* ───── Recommendation badge colors ───── */

const recColors: Record<string, string> = {
  ACCEPT: "bg-green-100 text-green-700",
  MINOR_REVISION: "bg-yellow-100 text-yellow-700",
  MAJOR_REVISION: "bg-orange-100 text-orange-700",
  REJECT: "bg-red-100 text-red-700",
};

/* ───── Page ───── */

function ReviewerPanelInner() {
  const user = useAuthStore((s) => s.user);
  const { t: cms, language } = useTranslation(["REVIEWER", "STATUS_LABELS", "COMMON"]);
  const queryClient = useQueryClient();
  // The sidebar links to ?tab=pending and ?tab=completed. This used to be a
  // plain useState("pending"), so "Completed Reviews" always landed on the
  // pending list — the one place a reviewer goes looking for finished work.
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();
  const tab: "pending" | "completed" =
    searchParams.get("tab") === "completed" ? "completed" : "pending";

  // Kept in the URL rather than in state, so the sidebar's own links, the
  // browser's back button and a shared link all agree on which tab is open.
  const setTab = (next: "pending" | "completed") =>
    router.replace(`${pathname}?tab=${next}`, { scroll: false });

  const {
    data: pendingData,
    isLoading: pendingLoading,
    error: pendingError,
  } = useQuery<Review[]>({
    queryKey: ["reviewer-pending"],
    queryFn: async () => {
      const res = await reviewApi.pending();
      return res.data?.content ?? res.data ?? [];
    },
  });

  const {
    data: completedData,
    isLoading: completedLoading,
    error: completedError,
  } = useQuery<Review[]>({
    queryKey: ["reviewer-completed"],
    queryFn: async () => {
      const res = await reviewApi.completed();
      return res.data?.content ?? res.data ?? [];
    },
  });

  const declineMutation = useMutation({
    mutationFn: (id: string) => reviewApi.decline(id),
    onSuccess: () => {
      tToast("success", "review.declined", "Review declined");
      queryClient.invalidateQueries({ queryKey: ["reviewer-pending"] });
    },
    onError: () => {
      tToast("error", "review.decline_error", "Failed to decline");
    },
  });

  const pending = pendingData ?? [];
  const completed = completedData ?? [];

  const isLoading = tab === "pending" ? pendingLoading : completedLoading;
  const isError = tab === "pending" ? pendingError : completedError;

  const displayName = language === "hi" ? user?.nameHi : user?.nameEn;

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">
          {cms("REVIEWER.reviewer_header.greeting", "Hello")}, {displayName ?? "समीक्षक"} !
        </h1>
        <p className="text-gray-500 text-sm mt-1">{cms("REVIEWER.reviewer_header.subtitle", "Reviewer Dashboard")}</p>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-gray-200 mb-6">
        {(
          [
            { key: "pending", label: cms("REVIEWER.reviewer_tabs.pending_tab", "Pending Reviews"), count: pending.length },
            { key: "completed", label: cms("REVIEWER.reviewer_tabs.completed_tab", "Completed Reviews"), count: completed.length },
          ] as const
        ).map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={cn(
              "pb-3 px-4 text-sm font-medium transition flex items-center gap-2",
              tab === t.key
                ? "border-b-2 border-indigo-600 text-indigo-600"
                : "text-gray-500 hover:text-gray-700"
            )}
          >
            {t.label}
            <span
              className={cn(
                "rounded-full px-2 py-0.5 text-xs font-semibold",
                tab === t.key ? "bg-indigo-100 text-indigo-700" : "bg-gray-100 text-gray-600"
              )}
            >
              {t.count}
            </span>
          </button>
        ))}
      </div>

      {/* Loading / Error */}
      {isLoading && (
        <div className="flex items-center justify-center py-20">
          <p className="text-gray-500 text-lg">{cms("COMMON.labels.loading", "Loading...")}</p>
        </div>
      )}

      {isError && !isLoading && (
        <div className="flex items-center justify-center py-20">
          <div className="text-center">
            <AlertCircle className="mx-auto h-10 w-10 text-red-400 mb-2" />
            <p className="text-red-600">{cms("TOAST.generic.error_loading", "Error loading data")}</p>
          </div>
        </div>
      )}

      {/* ─── Pending Reviews ─── */}
      {!isLoading && !isError && tab === "pending" && (
        <div className="space-y-4">
          {pending.length === 0 ? (
            <div className="text-center py-16 text-gray-500">
              <ClipboardCheck className="mx-auto h-10 w-10 text-gray-300 mb-3" />
              <p>{cms("REVIEWER.reviewer_actions.no_pending", "No pending reviews")}</p>
            </div>
          ) : (
            pending.map((review) => (
              <div
                key={review.id}
                className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
              >
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-gray-900 truncate">
                      {language === "hi" && review.paperTitleHi
                        ? review.paperTitleHi
                        : review.paperTitleEn ?? "Untitled"}
                    </h3>
                    {review.paperReferenceNo && (
                      <p className="text-xs text-gray-400 mt-0.5">
                        Ref: {review.paperReferenceNo}
                      </p>
                    )}
                    <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                      <span className="flex items-center gap-1">
                        <Clock className="h-3.5 w-3.5" />
                        {cms("REVIEWER.reviewer_actions.deadline_label", "Deadline")}:{" "}
                        {review.deadlineAt
                          ? new Date(review.deadlineAt).toLocaleDateString("en-IN")
                          : "—"}
                      </span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    <a
                      href={`/reviewer/review/${review.id}`}
                      className="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-indigo-700 transition"
                    >
                      <ClipboardCheck className="h-4 w-4" />
                      {cms("REVIEWER.reviewer_actions.review_button", "Review")}
                    </a>
                    <button
                      onClick={() => declineMutation.mutate(review.id)}
                      disabled={declineMutation.isPending}
                      className="inline-flex items-center gap-1.5 rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition disabled:opacity-50"
                    >
                      <XCircle className="h-4 w-4" />
                      {cms("REVIEWER.reviewer_actions.decline_button", "Decline")}
                    </button>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      )}

      {/* ─── Completed Reviews ─── */}
      {!isLoading && !isError && tab === "completed" && (
        <div className="space-y-4">
          {completed.length === 0 ? (
            <div className="text-center py-16 text-gray-500">
              <CheckCircle2 className="mx-auto h-10 w-10 text-gray-300 mb-3" />
              <p>{cms("REVIEWER.reviewer_actions.no_completed", "No completed reviews")}</p>
            </div>
          ) : (
            completed.map((review) => (
              <div
                key={review.id}
                className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
              >
                <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-gray-900 truncate">
                      {language === "hi" && review.paperTitleHi
                        ? review.paperTitleHi
                        : review.paperTitleEn ?? "Untitled"}
                    </h3>
                    {review.paperReferenceNo && (
                      <p className="text-xs text-gray-400 mt-0.5">
                        Ref: {review.paperReferenceNo}
                      </p>
                    )}

                    {/* Scores grid */}
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-3">
                      {[
                        { label: cms("REVIEWER.reviewer_scores.originality", "Originality"), val: review.originalityScore },
                        { label: cms("REVIEWER.reviewer_scores.methodology", "Methodology"), val: review.methodologyScore },
                        { label: cms("REVIEWER.reviewer_scores.clarity", "Clarity"), val: review.clarityScore },
                        { label: cms("REVIEWER.reviewer_scores.relevance", "Relevance"), val: review.relevanceScore },
                        { label: cms("REVIEWER.reviewer_scores.references", "References"), val: review.referencesScore },
                        { label: cms("REVIEWER.reviewer_scores.overall", "Overall"), val: review.overallScore },
                      ].map((s) => (
                        <div key={s.label} className="flex items-center gap-1.5 text-xs text-gray-600">
                          <Star className="h-3.5 w-3.5 text-amber-400" />
                          {s.label}: <span className="font-semibold">{s.val ?? "—"}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="flex flex-col items-end gap-2 shrink-0">
                    {review.recommendation && (
                      <span
                        className={cn(
                          "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
                          recColors[review.recommendation] ?? "bg-gray-100 text-gray-700"
                        )}
                      >
                        {cms(`STATUS_LABELS.review.${review.recommendation.toLowerCase()}`, review.recommendation)}
                      </span>
                    )}
                    <span className="text-xs text-gray-400">
                      {review.completedAt
                        ? new Date(review.completedAt).toLocaleDateString("en-IN")
                        : "—"}
                    </span>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      )}
    </div>
  );
}

/**
 * useSearchParams needs a Suspense boundary, or the whole route opts out of
 * static rendering — the same wrapper the password-reset page uses.
 */
export default function ReviewerPanel() {
  return (
    <Suspense fallback={null}>
      <ReviewerPanelInner />
    </Suspense>
  );
}