import { Navigate, useOutletContext, useParams, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { getApplicationEvidence, type ServerEvidenceKind } from "@/lib/applicationEvidenceApi";
import type { ApplicationEvidenceOutletContext } from "./ApplicationEvidenceLayout";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Loader2 } from "lucide-react";
import { ApplicationEvidenceFilePreview } from "./ApplicationEvidenceFilePreview";

/**
 * Tab « Xem 2.1 » / « Xem 2.2 » — hiển thị minh chứng trong khung (Outlet từ layout trên).
 */
export function ApplicationEvidencePreviewPage() {
  const { slot } = useParams();
  const { caseId } = useOutletContext<ApplicationEvidenceOutletContext>();
  const [searchParams] = useSearchParams();
  const parentSearch = searchParams.toString();
  const evidenceBase = `/dashboard/documents/${encodeURIComponent(caseId)}/evidence${parentSearch ? `?${parentSearch}` : ""}`;

  if (slot !== "research" && slot !== "textbook" && slot !== "technical") {
    return <Navigate to={evidenceBase} replace />;
  }

  const kind: ServerEvidenceKind = slot;

  const q = useQuery({
    queryKey: ["evidence", caseId],
    queryFn: () => getApplicationEvidence(caseId),
  });

  if (q.isLoading) {
    return (
      <div className="flex items-center gap-2 text-muted-foreground py-12">
        <Loader2 className="h-5 w-5 animate-spin" />
        Đang tải…
      </div>
    );
  }

  if (q.isError || !q.data) {
    return (
      <Alert variant="destructive">
        <AlertDescription>Không tải được dữ liệu.</AlertDescription>
      </Alert>
    );
  }

  const meta = q.data[kind];
  const url = meta?.downloadUrl;
  if (!meta || !url) {
    return (
      <Alert>
        <AlertDescription>Chưa có tệp minh chứng cho loại này. Hãy tải lên ở tab Quản lý (nếu bạn là chủ hồ sơ).</AlertDescription>
      </Alert>
    );
  }

  return (
    <div className="h-[min(75vh,720px)] w-full min-h-[320px]">
      <ApplicationEvidenceFilePreview
        meta={meta}
        contentProxy={{ caseId, kind }}
        title={`Minh chứng ${kind}`}
        className="h-full"
        iframeClassName="min-h-[min(75vh,720px)]"
      />
    </div>
  );
}
