/**
 * Applicant-facing documents workspace: blank slate, history (`GET /api/applications/mine`),
 * and review at `/dashboard/documents/review`. Admin/editor users with `applicationId` are
 * redirected to the staff/council review routes so local submission storage is not overwritten.
 */
import { useCallback, useEffect, useMemo, useState } from "react";
import { Link, Navigate, useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft } from "lucide-react";
import { useAuth, apiClient, Button, Card, Badge } from "@ump/shared";
import { resolveApplicationDraftCaseId } from "@/lib/resolveApplicationDraftCaseId";
import type { ApplicationItem } from "@/data/mockApplications";
import { ReviewFormsPanel } from "@/components/application-review/ReviewFormsPanel";
import { axiosSuccessStatusOnly, getNestedData, normalizeApplicationItem } from "@/lib/applicationReviewApi";
import { useApplicationReviewDetail } from "@/hooks/useApplicationReviewDetail";
import { ApplicantHistoryPanel } from "@/components/applicant/history/ApplicantHistoryPanel";
import { ApplicantHistoryCrudDialog } from "@/components/applicant/history/ApplicantHistoryCrudDialog";
import {
  loadApplicantSubmissionRecord,
  syncApplicantSubmissionFromApplicationItem,
} from "@/lib/applicantSubmissionRecord";
import {
  FRESH_DASHBOARD_SEARCH_PARAM,
  getResumeApplicantDashboardHref,
  prepareFreshApplicantDashboardNavigation,
} from "@ump/shared";
import { createApplicantApplication, updateApplicantApplication } from "@/lib/applicantApplicationsApi";
import { toast } from "sonner";
import {
  FORMS_VIEW_SEARCH_PARAM,
  COUNCIL_APPLICATION_REVIEW_PATH,
  STAFF_APPLICATION_REVIEW_PATH,
  buildApplicationReviewHref,
} from "@/lib/applicationReviewNavigation";

export default function ApplicationReviewPage() {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const applicationId = searchParams.get("applicationId") ?? "";
  const returnToRaw = searchParams.get("returnTo") ?? "/dashboard";
  const returnTo = returnToRaw.startsWith("/dashboard") ? returnToRaw : "/dashboard";
  const pathNorm = location.pathname.replace(/\/$/, "");
  const isDocumentsListRoute = pathNorm === "/dashboard/documents";
  const formsViewOnly = searchParams.get(FORMS_VIEW_SEARCH_PARAM) === "1";

  /** Empty forms + cleared session; set by `?fresh=1` (same flag as dashboard new registration). */
  const [formsBlankSlate, setFormsBlankSlate] = useState(
    () => searchParams.get(FRESH_DASHBOARD_SEARCH_PARAM) === "1",
  );

  const { hasPermission, hasRole, user, isAuthenticated, loading: authLoading } = useAuth();
  const isStaffReviewer = hasRole("admin") || hasRole("editor");
  const staffApplicationReviewPath = hasRole("editor") ? COUNCIL_APPLICATION_REVIEW_PATH : STAFF_APPLICATION_REVIEW_PATH;

  const canViewEvaluation = hasPermission("evaluation.view");
  const canViewChat = hasPermission("chat.view");
  const canInteractChat = hasPermission("chat.interact");
  const canVerify = hasPermission("application.verify");
  const canEditApplication = hasPermission("application.edit");
  const submittedFormsReadOnly = !canEditApplication;
  const reviewFormsReadOnly = submittedFormsReadOnly || formsViewOnly;

  /** frontend_user always talks to the real backend (no demo mode). */
  const useApplicantMine = isAuthenticated;

  const [applicationDialog, setApplicationDialog] = useState<{
    mode: "create" | "edit" | null;
    item: ApplicationItem | null;
  }>({ mode: null, item: null });
  const [applicationDialogSubmitting, setApplicationDialogSubmitting] = useState(false);

  const openApplicationCreateDialog = useCallback(() => {
    setApplicationDialog({ mode: "create", item: null });
  }, []);

  const openApplicationMetadataDialog = useCallback((item: ApplicationItem) => {
    setApplicationDialog({ mode: "edit", item });
  }, []);

  useEffect(() => {
    if (searchParams.get(FRESH_DASHBOARD_SEARCH_PARAM) !== "1") return;
    prepareFreshApplicantDashboardNavigation();
    const next = new URLSearchParams(searchParams);
    next.delete(FRESH_DASHBOARD_SEARCH_PARAM);
    next.delete("applicationId");
    setSearchParams(next, { replace: true });
  }, [searchParams, setSearchParams]);

  const mineQuery = useQuery({
    queryKey: ["applications-mine", user?.id],
    enabled: useApplicantMine,
    queryFn: async (): Promise<ApplicationItem[]> => {
      const raw = await apiClient.get("/api/applications/mine");
      const nested = getNestedData<ApplicationItem[] | undefined>(raw);
      const list = Array.isArray(nested)
        ? nested
        : raw && typeof raw === "object" && "data" in raw && Array.isArray((raw as { data: unknown }).data)
          ? (raw as { data: ApplicationItem[] }).data
          : [];
      return list.map((row) => normalizeApplicationItem(row as ApplicationItem & { draft_case_id?: string }));
    },
    staleTime: 30 * 1000,
  });

  const mineList = mineQuery.data ?? [];
  /** Only show year/app switcher when this page is the applicant’s own submission (not admin reviewing another user). */
  const showApplicantMineSwitcher =
    useApplicantMine &&
    (!applicationId || mineList.some((a) => a.id === applicationId));

  const [verificationRequest, setVerificationRequest] = useState<{ fieldName: string; content: string } | null>(null);
  const handleVerify = useCallback(
    (fieldName: string, content: string) => {
      if (canVerify) setVerificationRequest({ fieldName, content });
    },
    [canVerify],
  );
  const handleVerificationHandled = useCallback(() => setVerificationRequest(null), []);

  const navigateToViewApplication = useCallback(
    (item: ApplicationItem) => {
      setFormsBlankSlate(false);
      void queryClient.invalidateQueries({ queryKey: ["application-detail", item.id] });
      void queryClient.invalidateQueries({ queryKey: ["application-draft-for-documents"] });
      navigate(buildApplicationReviewHref({ applicationId: item.id, returnTo, viewOnly: true }));
    },
    [queryClient, navigate, returnTo],
  );

  const navigateToEditApplicationForms = useCallback(
    async (item: ApplicationItem) => {
      let normalized = normalizeApplicationItem(item as ApplicationItem & { draft_case_id?: string });
      if (!normalized.draftCaseId) {
        try {
          const raw = await apiClient.get(
            `/api/applications/${encodeURIComponent(item.id)}`,
            axiosSuccessStatusOnly,
          );
          const data = getNestedData<ApplicationItem | null>(raw);
          if (data && typeof data === "object" && "id" in data) {
            normalized = normalizeApplicationItem(data as ApplicationItem & { draft_case_id?: string });
          }
        } catch {
          /* list row + resolveApplicationDraftCaseId fallbacks */
        }
      }
      const caseId = resolveApplicationDraftCaseId(normalized);
      if (!caseId) {
        toast.error("Không xác định được mã bản nháp (case) cho hồ sơ này.");
        return;
      }
      syncApplicantSubmissionFromApplicationItem(normalized);
      navigate(getResumeApplicantDashboardHref(caseId));
    },
    [navigate],
  );

  const { detailQuery, draftBundleQuery, detail, draftCaseIdForDetail } = useApplicationReviewDetail(applicationId, {
    enabled: Boolean(applicationId) && !isDocumentsListRoute,
    syncLocalSubmission: !isStaffReviewer,
  });

  const deleteMutation = useMutation({
    mutationFn: async (applicationId: string) => {
      await apiClient.delete(`/api/applications/${applicationId}`);
    },
    onSuccess: async (_, deletedId) => {
      toast.success("Đã xóa hồ sơ.");
      await mineQuery.refetch();
      if (applicationId === deletedId) {
        if (pathNorm.endsWith("/documents/review")) {
          navigate("/dashboard/documents", { replace: true });
        } else {
          const sp = new URLSearchParams(searchParams);
          sp.delete("applicationId");
          setSearchParams(sp);
        }
      }
    },
    onError: (error: unknown) => {
      toast.error(error instanceof Error ? error.message : "Không thể xóa hồ sơ.");
    },
  });

  const handleApplicationDialogSubmit = useCallback(
    async (payload: { name: string; submittedDate: string }) => {
      const { mode, item } = applicationDialog;
      if (mode === "create") {
        setApplicationDialogSubmitting(true);
        try {
          const res = await createApplicantApplication(payload.name);
          const row = res.application;
          if (!row || typeof row !== "object") {
            throw new Error("Máy chủ không trả dữ liệu hồ sơ mới.");
          }
          const normalized = normalizeApplicationItem(row as ApplicationItem & { draft_case_id?: string });
          syncApplicantSubmissionFromApplicationItem(normalized);
          const caseId = resolveApplicationDraftCaseId(normalized);
          if (!caseId) {
            throw new Error("Máy chủ không trả mã bản nháp (case) cho biểu mẫu.");
          }
          await mineQuery.refetch();
          setApplicationDialog({ mode: null, item: null });
          toast.success("Đã tạo hồ sơ. Chuyển tới bước điền biểu mẫu…");
          navigate(getResumeApplicantDashboardHref(caseId));
        } catch (e) {
          toast.error(e instanceof Error ? e.message : "Không tạo được hồ sơ.");
        } finally {
          setApplicationDialogSubmitting(false);
        }
        return;
      }
      if (mode === "edit" && item) {
        setApplicationDialogSubmitting(true);
        try {
          const raw = await updateApplicantApplication(item.id, payload);
          const updated = normalizeApplicationItem(raw as ApplicationItem & { draft_case_id?: string });
          syncApplicantSubmissionFromApplicationItem(updated);
          await mineQuery.refetch();
          await queryClient.invalidateQueries({ queryKey: ["application-detail", item.id] });
          setApplicationDialog({ mode: null, item: null });
          toast.success("Đã cập nhật thông tin hồ sơ.");
        } catch (e) {
          toast.error(e instanceof Error ? e.message : "Không cập nhật được hồ sơ.");
        } finally {
          setApplicationDialogSubmitting(false);
        }
      }
    },
    [applicationDialog, mineQuery, navigate, queryClient],
  );

  const applicantCrudHandlers = useMemo(
    () => ({
      onViewApplication: navigateToViewApplication,
      onEditApplicationForms: canEditApplication ? navigateToEditApplicationForms : undefined,
      onEditApplicationMetadata: canEditApplication ? openApplicationMetadataDialog : undefined,
      onDeleteApplication: async (id: string) => {
        await deleteMutation.mutateAsync(id);
      },
    }),
    [
      navigateToViewApplication,
      navigateToEditApplicationForms,
      openApplicationMetadataDialog,
      canEditApplication,
      deleteMutation,
    ],
  );

  const applicantPrefill = useMemo(
    () =>
      detail
        ? {
            initiativeName: detail.name,
            authorName: detail.author.name,
          }
        : undefined,
    [detail],
  );

  const mainPanelSize = canViewChat ? 70 : 100;
  const chatPanelSize = canViewChat ? 30 : 0;

  if (authLoading) {
    return <div className="text-sm text-muted-foreground">Đang xác thực…</div>;
  }

  if (isDocumentsListRoute && applicationId) {
    if (isStaffReviewer) {
      return <Navigate to={`${staffApplicationReviewPath}?${searchParams.toString()}`} replace />;
    }
    return <Navigate to={`/dashboard/documents/review?${searchParams.toString()}`} replace />;
  }

  if (isStaffReviewer && applicationId && pathNorm.endsWith("/documents/review")) {
    return <Navigate to={`${staffApplicationReviewPath}?${searchParams.toString()}`} replace />;
  }

  const documentsFreshHref = `/dashboard/documents?${FRESH_DASHBOARD_SEARCH_PARAM}=1&returnTo=${encodeURIComponent(returnTo)}`;

  if (!applicationId && formsBlankSlate) {
    if (useApplicantMine && mineQuery.isLoading) {
      return <div className="text-sm text-muted-foreground">Đang tải…</div>;
    }
    return (
      <div className="h-[calc(100vh-4rem)] overflow-hidden animate-fade-in">
        <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
          <div className="space-y-1">
            <Button variant="ghost" size="sm" asChild className="gap-2 -ml-2">
              <Link to={returnTo}>
                <ArrowLeft className="h-4 w-4" />
                Về Dashboard
              </Link>
            </Button>
            <h1 className="text-xl font-semibold tracking-tight">Biểu mẫu trống</h1>
            <p className="text-sm text-muted-foreground max-w-3xl">
              Đã xóa dữ liệu nháp trên trình duyệt (mã hồ sơ, bước báo cáo, lối tắt hồ sơ vừa nộp). Các ô nhập dùng giá trị mặc định rỗng — bạn có thể điền lại từ đầu hoặc chọn một hồ sơ đã nộp bên dưới.
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" asChild>
              <Link to={documentsFreshHref} reloadDocument>
                Làm trống lại
              </Link>
            </Button>
            <Button size="sm" onClick={openApplicationCreateDialog}>
              Đăng kí mới
            </Button>
            <Button variant="outline" size="sm" asChild>
              <Link to={documentsFreshHref} reloadDocument>
                Biểu mẫu trống (làm mới)
              </Link>
            </Button>


          </div>

        </div>

        {showApplicantMineSwitcher ? (
          <ApplicantHistoryPanel
            items={mineList}
            loading={mineQuery.isLoading}
            error={mineQuery.isError}
            mutating={deleteMutation.isPending}
            selectedApplicationId=""
            onViewApplication={applicantCrudHandlers.onViewApplication}
            onCreateApplication={openApplicationCreateDialog}
            onEditApplicationForms={applicantCrudHandlers.onEditApplicationForms}
            onEditApplicationMetadata={applicantCrudHandlers.onEditApplicationMetadata}
            onDeleteApplication={applicantCrudHandlers.onDeleteApplication}
          />
        ) : null}

        <ApplicantHistoryCrudDialog
          open={applicationDialog.mode !== null}
          mode={applicationDialog.mode === "edit" ? "edit" : "create"}
          initialItem={applicationDialog.item ?? undefined}
          submitting={applicationDialogSubmitting}
          onOpenChange={(open) => {
            if (!open) setApplicationDialog({ mode: null, item: null });
          }}
          onSubmit={handleApplicationDialogSubmit}
        />

        <ReviewFormsPanel
          caseKey="blank-slate"
          applicantPrefill={undefined}
          formsReadOnly={false}
          canViewEvaluation={canViewEvaluation}
          canViewChat={canViewChat}
          canInteractChat={canInteractChat}
          canVerify={canVerify}
          mainPanelSize={mainPanelSize}
          chatPanelSize={chatPanelSize}
          verificationRequest={verificationRequest}
          onVerify={handleVerify}
          onVerificationHandled={handleVerificationHandled}
        />
      </div>
    );
  }

  if (!applicationId) {
    if (useApplicantMine && mineQuery.isLoading) {
      return <div className="text-sm text-muted-foreground">Đang tải hồ sơ từ máy chủ…</div>;
    }
    if (useApplicantMine && mineQuery.isError) {
      return (
        <div className="mx-auto max-w-lg space-y-4">
          <p className="text-destructive text-sm">
            Không tải được danh sách hồ sơ. Đăng nhập lại hoặc thử sau.
          </p>
        </div>
      );
    }
    const last = loadApplicantSubmissionRecord();
    const reviewLink =
      last &&
      buildApplicationReviewHref({ applicationId: last.applicationId, returnTo: "/dashboard" });
    return (
      <div className={useApplicantMine ? "space-y-4" : "mx-auto max-w-lg space-y-4"}>
        {showApplicantMineSwitcher ? (
          <ApplicantHistoryPanel
            items={mineList}
            loading={mineQuery.isLoading}
            error={mineQuery.isError}
            mutating={deleteMutation.isPending}
            selectedApplicationId=""
            onViewApplication={applicantCrudHandlers.onViewApplication}
            onCreateApplication={openApplicationCreateDialog}
            onEditApplicationForms={applicantCrudHandlers.onEditApplicationForms}
            onEditApplicationMetadata={applicantCrudHandlers.onEditApplicationMetadata}
            onDeleteApplication={applicantCrudHandlers.onDeleteApplication}
          />
        ) : null}

        <ApplicantHistoryCrudDialog
          open={applicationDialog.mode !== null}
          mode={applicationDialog.mode === "edit" ? "edit" : "create"}
          initialItem={applicationDialog.item ?? undefined}
          submitting={applicationDialogSubmitting}
          onOpenChange={(open) => {
            if (!open) setApplicationDialog({ mode: null, item: null });
          }}
          onSubmit={handleApplicationDialogSubmit}
        />

        <Card>
        </Card>
      </div>
    );
  }

  if (detailQuery.isLoading) {
    return (
      <div className="text-sm text-muted-foreground">
        Đang tải hồ sơ…
      </div>
    );
  }

  if (!detail) {
    return (
      <div className="space-y-4">
        <Button variant="ghost" size="sm" asChild className="gap-2">
          <Link to={returnTo}>
            <ArrowLeft className="h-4 w-4" />
            Về Dashboard
          </Link>
        </Button>
        <p className="text-muted-foreground">Không tìm thấy hồ sơ với mã đã chọn.</p>
      </div>
    );
  }

  const reviewStatusLabel = detail.reviewStatus ?? "—";

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden animate-fade-in">
      <div className="mb-4 flex shrink-0 flex-wrap items-start justify-between gap-3">
        <div className="space-y-1">
          <Button variant="ghost" size="sm" asChild className="gap-2 -ml-2">
            <Link to={`/dashboard/documents?returnTo=${encodeURIComponent(returnTo)}`} reloadDocument>
              <ArrowLeft className="h-4 w-4" />
              Quay lại danh sách
            </Link>
          </Button>
          <h1 className="text-xl font-semibold tracking-tight">Hồ sơ người nộp đơn</h1>
          <p className="text-sm text-muted-foreground max-w-3xl">
            Xem các biểu mẫu đã gửi: Báo cáo mô tả, Đơn đề nghị, Xác nhận đóng góp
            {canViewEvaluation ? ", Phiếu đánh giá (Hội đồng)" : ""}.
          </p>
        </div>
        <div className="flex flex-col items-end gap-2 shrink-0">
          <Badge variant="outline">
            Mã hồ sơ: {detail.id}
          </Badge>
          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            <span>Đánh giá:</span>
            <Badge variant="secondary">{reviewStatusLabel}</Badge>
          </div>
        </div>
      </div>

      <div className="min-h-0 flex-1">
        {draftBundleQuery.isError ? (
          <p className="text-sm text-amber-700 dark:text-amber-500 py-2">
            Không tải được bản nháp đầy đủ (chỉ hiển thị tên hồ sơ từ danh sách). Bạn có thể chỉnh trên Dashboard nếu cần.
          </p>
        ) : null}
        <ReviewFormsPanel
          caseKey={draftCaseIdForDetail || applicationId}
          applicantPrefill={applicantPrefill}
          draftTabs={draftBundleQuery.data?.tabs}
          formsReadOnly={reviewFormsReadOnly}
          canViewEvaluation={canViewEvaluation}
          canViewChat={canViewChat}
          canInteractChat={canInteractChat}
          canVerify={canVerify}
          mainPanelSize={mainPanelSize}
          chatPanelSize={chatPanelSize}
          verificationRequest={verificationRequest}
          onVerify={handleVerify}
          onVerificationHandled={handleVerificationHandled}
        />
      </div>
    </div>
  );
}
