"use client";

import { useState } from "react";
import { useRouter, useParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { ArrowLeft } from "lucide-react";

import { reviewApi } from "@/lib/api/client";
import { useTranslation } from "@/lib/hooks/use-translation";
import { AnnotatedPaperUpload } from "@/components/reviewer/AnnotatedPaperUpload";
import { DownloadPaperButton } from "@/components/reviewer/DownloadPaperButton";
import { PaperPreviewPane } from "@/components/reviewer/PaperPreviewPane";
import { ReviewForm } from "@/components/reviewer/ReviewForm";
import type { Review } from "@/types";

/**
 * Reviewer review page. Two-pane layout per Phase 2A §1D.1 + 2B-iii
 * §3.2 integrated placement:
 *
 * <ul>
 *   <li>Left pane (60%): manuscript preview, download-with-agreement,
 *       and gated annotated-PDF upload (visible only after a successful
 *       download, local session state).</li>
 *   <li>Right pane (40%): the existing {@link ReviewForm} — extracted
 *       verbatim from the former inline implementation as part of
 *       Phase 3c-ii. No form logic changes.</li>
 * </ul>
 *
 * <p>{@code hasDownloaded} is intentionally page-local React state —
 * not persisted to storage, not lifted to a store. It resets on every
 * page load and controls only the visibility of the upload component.
 */
export default function ReviewSubmitPage() {
  const router = useRouter();
  const params = useParams();
  const reviewId = params.id as string;
  const { t: cms } = useTranslation(["REVIEWER", "COMMON"]);

  const [hasDownloaded, setHasDownloaded] = useState(false);

  // Top-level fetch. Both panes read from this one result — the left
  // pane needs paperId / paperReferenceNo for the preview, download,
  // and upload filename display; ReviewForm needs the full review for
  // display and submission.
  const { data: pendingReviews } = useQuery<Review[]>({
    queryKey: ["reviewer-pending"],
    queryFn: async () => {
      const res = await reviewApi.pending();
      return res.data;
    },
  });

  const review = pendingReviews?.find((r) => r.id === reviewId);
  const paperId = review?.paperId;
  const paperReferenceNo = review?.paperReferenceNo;

  return (
    <div className="mx-auto max-w-7xl px-4 py-6">
      <button
        onClick={() => router.push("/reviewer")}
        className="mb-4 inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700"
      >
        <ArrowLeft className="h-4 w-4" />
        {cms("COMMON.buttons.back", "Back")}
      </button>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[60%_40%]">
        {/* Left pane — preview, download, annotated upload */}
        <section className="space-y-4">
          {paperId ? (
            <>
              <div className="min-h-[70vh]">
                <PaperPreviewPane paperId={paperId} />
              </div>
              <div className="flex items-center justify-between gap-3">
                <p className="text-sm text-gray-500">
                  For annotations, download and edit in your preferred PDF editor.
                </p>
                {paperReferenceNo ? (
                  <DownloadPaperButton
                    paperId={paperId}
                    paperReferenceNo={paperReferenceNo}
                    onDownloaded={() => setHasDownloaded(true)}
                  />
                ) : null}
              </div>
              {paperReferenceNo ? (
                <AnnotatedPaperUpload
                  reviewId={reviewId}
                  paperReferenceNo={paperReferenceNo}
                  visible={hasDownloaded}
                />
              ) : null}
            </>
          ) : (
            <div className="flex min-h-[70vh] items-center justify-center rounded-lg border border-gray-200 bg-white text-sm text-gray-500 shadow-sm">
              Loading paper…
            </div>
          )}
        </section>

        {/* Right pane — review form (extracted verbatim from the former inline body) */}
        <aside>
          <ReviewForm reviewId={reviewId} review={review} />
        </aside>
      </div>
    </div>
  );
}