"use client";

/**
 * T-163 — the page review banner (T-162/T-163 web surface).
 *
 * A thin, self-contained strip above the page header that shows the page's
 * `reviewState` and the per-role actions. Client-side it only RENDERS — every
 * action is server-authorized (the A-003 reviewer-of-record gate, the
 * transition matrix, membership): a denied action is a toast, never a broken
 * UI. State comes from `GET /pages/:id/review` (`{ state, open, lastReview }`);
 * actions POST to `/pages/:id/review`.
 *
 *   published/draft        → "Request review" (pick members → submit)
 *   in_review              → chip; reviewer-of-record sees Approve / Request
 *                            changes; the requester sees Cancel
 *   changes_requested      → chip + the feedback comment; "Resubmit" (same
 *                            reviewers by default)
 *
 * Always rendered once `GET /pages/:id/review` resolves (every state has a
 * branch) — including fresh pages, which default to `published` with no
 * review history (the "No review yet" row). (An earlier "hide for legacy
 * published" early-return made the workflow unstartable — see the note in
 * the render body, 2026-10-12.)
 */
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, Clock, RotateCcw, Send, Users, XCircle } from "lucide-react";
import { reviewApi, workspaceApi } from "@/lib/api";
import { useAuthStore } from "@/lib/auth-store";
import { toast } from "@/stores/ui-store";

const queryKey = (pageId: string) => ["review", pageId] as const;

export function ReviewBanner({ pageId, workspaceId }: { pageId: string; workspaceId: string }) {
  const me = useAuthStore((s) => s.user?.id ?? null);
  const qc = useQueryClient();
  const [picking, setPicking] = useState(false);
  const [selected, setSelected] = useState<string[]>([]);
  const [comment, setComment] = useState("");

  const review = useQuery({ queryKey: queryKey(pageId), queryFn: () => reviewApi.get(pageId), enabled: !!pageId, retry: false });
  const members = useQuery({
    queryKey: ["workspaces", workspaceId, "members"],
    queryFn: () => workspaceApi.members(workspaceId),
    enabled: !!workspaceId && review.data != null && review.data.state !== "changes_requested",
    retry: false
  });

  const act = useMutation({
    mutationFn: (input: Parameters<typeof reviewApi.act>[1]) => reviewApi.act(pageId, input),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: queryKey(pageId) });
      setPicking(false);
      setComment("");
    },
    onError: (e) => toast("error", "Review action failed", e instanceof Error ? e.message : undefined)
  });

  const data = review.data;
  if (!data) return null;
  // NOTE (2026-10-12): an earlier version early-returned for
  // `published && !review && !lastReview` (the "legacy no-review case"), which
  // also hid the banner on EVERY fresh page (the schema default is
  // `reviewState = "published"`) — making the documented `published/draft →
  // Request review` branch unreachable and the review workflow unstartable
  // from the UI (spec: "Submit a document for review and approve it"). The
  // "No review yet" state now renders; legacy pages gain the same small
  // affordance (additive, no behavior change to any existing state).

  const isReviewer = data.review ? data.review.reviewerIds.includes(me ?? "") : false;
  const isRequester = data.review ? data.review.requestedBy === me : false;

  const startPick = () => {
    // Default the selection to the last review's reviewers (one-click resubmit).
    setSelected(data.lastReview?.reviewerIds ?? []);
    setPicking(true);
  };
  const toggle = (id: string) => setSelected((cur) => (cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]));
  const submit = () => {
    if (!selected.length) return;
    act.mutate({ action: "submit", reviewerIds: selected, comment: comment.trim() || undefined });
  };

  const memberName = (id: string) => members.data?.find((m) => m.userId === id)?.user.name ?? "reviewer";

  return (
    <div className="mb-4" data-testid="review-banner">
      {data.state === "in_review" && data.review ? (
        <div className="flex flex-wrap items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
          <span className="inline-flex items-center gap-1.5 font-medium">
            <Users className="size-3.5" aria-hidden /> In review
          </span>
          {data.review.comment ? <span className="italic text-amber-800">“{data.review.comment}”</span> : null}
          {data.review.deadline ? (
            <span className="inline-flex items-center gap-1 text-amber-700">
              <Clock className="size-3.5" aria-hidden /> Due {new Date(data.review.deadline).toLocaleDateString()}
            </span>
          ) : null}
          <span className="ml-auto flex items-center gap-1.5">
            {isReviewer ? (
              <>
                <button
                  onClick={() => act.mutate({ action: "approve", comment: comment.trim() || undefined })}
                  disabled={act.isPending}
                  className="rounded-md bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-700"
                >
                  <Check className="mr-1 inline size-3.5" /> Approve
                </button>
                <button
                  onClick={() => act.mutate({ action: "request_changes", comment: comment.trim() || undefined })}
                  disabled={act.isPending}
                  className="rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-800 hover:bg-amber-100"
                >
                  <RotateCcw className="mr-1 inline size-3.5" /> Request changes
                </button>
              </>
            ) : null}
            {isRequester ? (
              <button
                onClick={() => act.mutate({ action: "cancel", comment: comment.trim() || undefined })}
                disabled={act.isPending}
                className="rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-800 hover:bg-amber-100"
              >
                <XCircle className="mr-1 inline size-3.5" /> Cancel
              </button>
            ) : null}
            {!isReviewer && !isRequester ? <span className="text-xs text-amber-700">Waiting on {data.review.reviewerIds.map(memberName).join(", ")}</span> : null}
          </span>
          {isReviewer ? (
            <input
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              placeholder="Add a comment (optional)"
              className="w-full rounded-md border border-amber-300 bg-white px-2 py-1 text-xs"
              aria-label="Review comment"
            />
          ) : null}
        </div>
      ) : null}

      {data.state === "changes_requested" && !data.review ? (
        <div className="flex flex-wrap items-center gap-3 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-900">
          <span className="inline-flex items-center gap-1.5 font-medium">
            <RotateCcw className="size-3.5" aria-hidden /> Changes requested
          </span>
          {data.lastReview?.comment ? <span className="italic text-rose-800">“{data.lastReview.comment}”</span> : null}
          {data.lastReview ? (
            <button onClick={startPick} className="ml-auto rounded-md bg-slate-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-slate-700">
              <Send className="mr-1 inline size-3.5" /> Resubmit
            </button>
          ) : null}
        </div>
      ) : null}

      {(data.state === "published" || data.state === "draft") && !data.review ? (
        <div className="flex flex-wrap items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
          <span className="text-xs text-slate-500">{data.lastReview ? "Last review: approved" : "No review yet"}</span>
          {picking ? (
            <span className="flex flex-1 flex-wrap items-center gap-2">
              <span className="flex flex-wrap gap-1.5">
                {(members.data ?? []).map((m) => (
                  <label key={m.userId} className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-slate-300 bg-white px-2 py-1 text-xs">
                    <input type="checkbox" checked={selected.includes(m.userId)} onChange={() => toggle(m.userId)} className="mr-0.5" />
                    {m.user.name}
                  </label>
                ))}
              </span>
              <input
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="Request note (optional)"
                className="min-w-[10rem] flex-1 rounded-md border border-slate-300 px-2 py-1 text-xs"
                aria-label="Request note"
              />
              <button onClick={submit} disabled={!selected.length || act.isPending} className="rounded-md bg-slate-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-slate-700 disabled:opacity-50">
                <Send className="mr-1 inline size-3.5" /> Submit
              </button>
              <button onClick={() => setPicking(false)} className="rounded-md border border-slate-300 px-2.5 py-1 text-xs">
                Cancel
              </button>
            </span>
          ) : (
            <button onClick={startPick} className="ml-auto rounded-md border border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-100">
              <Send className="mr-1 inline size-3.5" /> Request review
            </button>
          )}
        </div>
      ) : null}
    </div>
  );
}