"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

import { EmptyState } from "@/components/ui/empty-state";
import { MetricChip } from "@/components/ui/metric-chip";
import { StatusBadge } from "@/components/ui/status-badge";
import { ReviewActionPanel } from "@/features/reviews/components/review-action-panel";
import { ReviewImagePanel } from "@/features/reviews/components/review-image-panel";
import { ReviewRevisionPanel } from "@/features/reviews/components/review-revision-panel";
import { ReviewWorkflowSummary } from "@/features/reviews/components/review-workflow-summary";
import type { ReviewDecision } from "@/lib/types/backend";
import type {
  AssetViewModel,
  OrderDetailVM,
  ReviewSubmissionVM,
  RevisionRegistrationVM,
  WorkflowDetailVM,
} from "@/lib/types/view-models";

type ApiEnvelope<T> = {
  data?: T;
  message?: string;
};

type ReviewWorkbenchDetailScreenProps = {
  orderId: number;
};

const REVIEWER_ID = 1;

function isRerunDecision(decision: ReviewDecision) {
  return (
    decision === "rerun_scene" ||
    decision === "rerun_face" ||
    decision === "rerun_fusion"
  );
}

function getPreferredAsset(order: OrderDetailVM) {
  return order.finalAsset ?? order.assets[0] ?? null;
}

async function parseEnvelope<T>(response: Response): Promise<ApiEnvelope<T>> {
  return (await response.json()) as ApiEnvelope<T>;
}

function formatTimestamp(timestamp: string) {
  return timestamp.replace("T", " ").replace("Z", " UTC");
}

export function ReviewWorkbenchDetailScreen({
  orderId,
}: ReviewWorkbenchDetailScreenProps) {
  const router = useRouter();
  const [orderDetail, setOrderDetail] = useState<OrderDetailVM | null>(null);
  const [workflowDetail, setWorkflowDetail] = useState<WorkflowDetailVM | null>(
    null,
  );
  const [selectedAssetId, setSelectedAssetId] = useState<number | null>(null);
  const [contextError, setContextError] = useState<string | null>(null);
  const [submissionError, setSubmissionError] = useState<string | null>(null);
  const [submissionResult, setSubmissionResult] =
    useState<ReviewSubmissionVM | null>(null);
  const [revisionError, setRevisionError] = useState<string | null>(null);
  const [revisionResult, setRevisionResult] =
    useState<RevisionRegistrationVM | null>(null);
  const [isLoadingContext, setIsLoadingContext] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    let active = true;

    async function loadReviewContext() {
      setIsLoadingContext(true);

      try {
        const [orderResponse, workflowResponse] = await Promise.all([
          fetch(`/api/orders/${orderId}`),
          fetch(`/api/workflows/${orderId}`),
        ]);
        const [orderPayload, workflowPayload] = await Promise.all([
          parseEnvelope<OrderDetailVM>(orderResponse),
          parseEnvelope<WorkflowDetailVM>(workflowResponse),
        ]);
        const nextOrder = orderPayload.data;
        const nextWorkflow = workflowPayload.data;

        if (
          !orderResponse.ok ||
          !workflowResponse.ok ||
          !nextOrder ||
          !nextWorkflow
        ) {
          throw new Error("CONTEXT_LOAD_FAILED");
        }

        if (!active) {
          return;
        }

        const preferredAsset = getPreferredAsset(nextOrder);

        setOrderDetail(nextOrder);
        setWorkflowDetail(nextWorkflow);
        setContextError(null);
        setSelectedAssetId((current) => {
          if (
            current &&
            [
              ...(nextOrder.finalAsset ? [nextOrder.finalAsset] : []),
              ...nextOrder.assets,
            ].some((asset) => asset.id === current)
          ) {
            return current;
          }

          return preferredAsset?.id ?? null;
        });
      } catch {
        if (!active) {
          return;
        }

        setOrderDetail(null);
        setWorkflowDetail(null);
        setSelectedAssetId(null);
        setContextError("订单详情或流程摘要加载失败，请稍后重试。");
      } finally {
        if (active) {
          setIsLoadingContext(false);
        }
      }
    }

    void loadReviewContext();

    return () => {
      active = false;
    };
  }, [orderId]);

  const selectedAsset: AssetViewModel | null =
    (orderDetail?.finalAsset?.id === selectedAssetId
      ? orderDetail.finalAsset
      : orderDetail?.assets.find((asset) => asset.id === selectedAssetId)) ??
    orderDetail?.finalAsset ??
    orderDetail?.assets[0] ??
    null;

  const handleSubmit = async (decision: ReviewDecision, comment: string) => {
    if (!orderDetail) {
      return;
    }

    if (isRerunDecision(decision) && !comment.trim()) {
      setSubmissionError("请填写审核备注");
      setSubmissionResult(null);
      return;
    }

    setIsSubmitting(true);
    setSubmissionError(null);
    setSubmissionResult(null);

    try {
      const response = await fetch(`/api/reviews/${orderDetail.orderId}/submit`, {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          decision,
          reviewer_id: REVIEWER_ID,
          selected_asset_id: selectedAsset?.id ?? null,
          comment: comment.trim() ? comment : null,
        }),
      });
      const payload = await parseEnvelope<ReviewSubmissionVM>(response);

      if (!response.ok || !payload.data) {
        setSubmissionError(payload.message ?? "审核动作提交失败，请稍后重试。");
        return;
      }

      setSubmissionResult(payload.data);
      router.push("/reviews/workbench");
    } catch {
      setSubmissionError("审核动作提交失败，请检查网络后重试。");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleRegisterRevision = async (payload: {
    uploadedUri: string;
    comment: string;
  }) => {
    if (!orderDetail || !selectedAsset) {
      return;
    }

    if (!payload.uploadedUri.trim()) {
      setRevisionError("请填写修订稿 URI");
      setRevisionResult(null);
      return;
    }

    setIsSubmitting(true);
    setRevisionError(null);
    setRevisionResult(null);
    setSubmissionResult(null);

    try {
      const response = await fetch(`/api/orders/${orderDetail.orderId}/revisions`, {
        method: "POST",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          parent_asset_id: selectedAsset.id,
          uploaded_uri: payload.uploadedUri.trim(),
          reviewer_id: REVIEWER_ID,
          comment: payload.comment.trim() ? payload.comment : null,
        }),
      });
      const revisionPayload = await parseEnvelope<RevisionRegistrationVM>(response);

      if (!response.ok || !revisionPayload.data) {
        setRevisionError(revisionPayload.message ?? "人工修订稿登记失败，请稍后重试。");
        return;
      }

      const nextRevision = revisionPayload.data;

      setRevisionResult(nextRevision);
      setOrderDetail((current) =>
        current
          ? {
              ...current,
              currentRevisionAssetId: nextRevision.assetId,
              currentRevisionVersion: nextRevision.versionNo,
              latestRevisionAssetId: nextRevision.latestRevisionAssetId,
              latestRevisionVersion: nextRevision.versionNo,
              revisionCount: nextRevision.revisionCount,
              reviewTaskStatus: nextRevision.reviewTaskStatus,
              pendingManualConfirm: true,
            }
          : current,
      );
      setWorkflowDetail((current) =>
        current
          ? {
              ...current,
              currentRevisionAssetId: nextRevision.assetId,
              currentRevisionVersion: nextRevision.versionNo,
              latestRevisionAssetId: nextRevision.latestRevisionAssetId,
              latestRevisionVersion: nextRevision.versionNo,
              revisionCount: nextRevision.revisionCount,
              reviewTaskStatus: nextRevision.reviewTaskStatus,
              pendingManualConfirm: true,
            }
          : current,
      );
    } catch {
      setRevisionError("人工修订稿登记失败，请检查网络后重试。");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleConfirmRevision = async (comment: string) => {
    if (!orderDetail) {
      return;
    }

    setIsSubmitting(true);
    setRevisionError(null);
    setSubmissionError(null);
    setSubmissionResult(null);

    try {
      const response = await fetch(
        `/api/reviews/${orderDetail.orderId}/confirm-revision`,
        {
          method: "POST",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify({
            reviewer_id: REVIEWER_ID,
            comment: comment.trim() ? comment : null,
          }),
        },
      );
      const payload = await parseEnvelope<ReviewSubmissionVM>(response);

      if (!response.ok || !payload.data) {
        setRevisionError(payload.message ?? "确认修订失败，请稍后重试。");
        return;
      }

      setSubmissionResult(payload.data);
      router.push("/reviews/workbench");
    } catch {
      setRevisionError("确认修订失败，请检查网络后重试。");
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isLoadingContext) {
    return (
      <section className="space-y-4">
        <div className="rounded-[28px] border border-dashed border-[var(--border-strong)] bg-[var(--surface-muted)] px-6 py-10 text-sm text-[var(--ink-muted)]">
          正在加载审核详情…
        </div>
      </section>
    );
  }

  if (contextError || !orderDetail || !workflowDetail) {
    return (
      <EmptyState
        eyebrow="Review detail error"
        title="审核详情暂时不可用"
        description={contextError ?? "当前审核详情还无法展示，请稍后重试。"}
        actions={
          <Link
            href="/reviews/workbench"
            className="inline-flex min-h-11 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--surface)] px-4 text-sm font-medium text-[var(--ink-strong)] transition hover:bg-[var(--surface-muted)]"
          >
            返回审核列表
          </Link>
        }
      />
    );
  }

  return (
    <section className="space-y-5">
      <div className="sticky top-0 z-10 -mx-4 border-b border-[var(--border-soft)] bg-[rgba(255,250,242,0.95)] px-4 py-4 backdrop-blur md:-mx-6 md:px-6">
        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
          <div className="space-y-2">
            <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-[var(--ink-faint)]">
              Review detail
            </p>
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="text-2xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
                订单 #{orderDetail.orderId}
              </h1>
              <StatusBadge status={orderDetail.status} />
              <StatusBadge variant="workflowStep" status={orderDetail.currentStep} />
            </div>
            <div className="flex flex-wrap gap-2">
              <MetricChip
                label="workflow"
                value={orderDetail.workflowId ?? "暂未分配"}
              />
              <MetricChip label="step" value={orderDetail.currentStepLabel} />
              <MetricChip
                label="revision"
                value={orderDetail.pendingManualConfirm ? "修订待确认" : "无待确认修订"}
              />
            </div>
          </div>

          <div className="flex flex-col items-start gap-2 xl:items-end">
            <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--ink-faint)]">
              更新于 {formatTimestamp(orderDetail.updatedAt)}
            </p>
            <Link
              href="/reviews/workbench"
              className="inline-flex h-9 items-center justify-center rounded-md border border-[var(--border-strong)] bg-[var(--surface)] px-3 text-sm font-medium text-[var(--ink-strong)] transition hover:bg-[var(--surface-muted)]"
            >
              返回审核列表
            </Link>
          </div>
        </div>
      </div>

      <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
        <ReviewImagePanel
          error={contextError}
          isLoading={isLoadingContext}
          order={orderDetail}
          selectedAssetId={selectedAssetId}
          onSelectAsset={setSelectedAssetId}
        />

        <div className="grid gap-4 xl:sticky xl:top-24 xl:self-start">
          <ReviewActionPanel
            key={`${orderDetail.orderId}-${submissionResult?.decision ?? "idle"}`}
            isSubmitting={isSubmitting}
            order={orderDetail}
            selectedAsset={selectedAsset}
            submissionError={submissionError}
            submissionResult={submissionResult}
            onSubmit={handleSubmit}
          />
          <ReviewRevisionPanel
            isSubmitting={isSubmitting}
            order={orderDetail}
            selectedAsset={selectedAsset}
            workflow={workflowDetail}
            revisionError={revisionError}
            revisionResult={revisionResult}
            confirmResult={submissionResult}
            onRegisterRevision={handleRegisterRevision}
            onConfirmRevision={handleConfirmRevision}
          />
          <ReviewWorkflowSummary
            error={contextError}
            isLoading={isLoadingContext}
            workflow={workflowDetail}
          />
        </div>
      </div>
    </section>
  );
}