import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { Accordion, AccordionDetails, AccordionSummary, Alert, Avatar, Box, Button, Checkbox, Chip, FormControl, FormControlLabel, InputLabel, LinearProgress, MenuItem, Paper, Select, Tab, Tabs, TextField, Typography } from "@mui/material";

import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
import UploadFileOutlinedIcon from "@mui/icons-material/UploadFileOutlined";

import { api, getApiErrorMessage } from "../api";
import CropImageDialog from "../components/CropImageDialog";
import ProfileCompleteness from "./career/ProfileCompleteness";
import CareerWorkspaceOverview from "./career/CareerWorkspaceOverview";
import CareerEvidenceBank from "./career/CareerEvidenceBank";
import {
  EducationSection,
  InterestsSection,
  LanguagesSection,
  LongTailSections,
  OtherSectionsSection,
  PersonalInformationSection,
  ProfessionalSummarySection,
  SkillsSection,
  WorkExperienceSection,
} from "./career/CareerProfileSections";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { useAccountPlan } from "../accountPlan";
import type { TranslationKey } from "../i18n/translations";
import ProFeatureNotice from "../components/ProFeatureNotice";
import { PageSection } from "../layout/PageLayout";
import type { UserOperation } from "../types";
import {
  emptyStructuredCv,
  getStructuredCvFieldMetadata,
  normalizeStructuredCv,
  StructuredCvProfile,
} from "../profileCv";


type ExtractionRun = {
  id: number;
  trigger: string;
  status: string;
  artifactFileName?: string;
  startedAtUtc: string;
  completedAtUtc?: string;
  appliedAtUtc?: string;
  parserVersion: string;
  normalizerVersion: string;
  llmPromptVersion: string;
  errorMessage?: string;
  operation?: UserOperation | null;
};

type CvImportChange = { id: string; label: string; confidence: string; fieldChanges?: Array<{ field: string; oldValue?: string | null; newValue?: string | null }> };
type CvImportDiff = {
  totalAdded: number;
  totalUpdated: number;
  totalLowConfidence: number;
  hasChanges: boolean;
  categories: Array<{
    category: string;
    added: CvImportChange[];
    updated: CvImportChange[];
    unchangedCount: number;
    lowConfidenceCount: number;
  }>;
};

type CvRunDiffResponse = { runId: number; status: string; diff: CvImportDiff };

type QueuedCvRunResponse = {
  queued: boolean;
  extractionRunId: number;
  status: string;
  operation?: UserOperation | null;
  statusUrl?: string | null;
  created: boolean;
};

const activeOperationStatuses = new Set(["queued", "running", "waiting_for_retry", "waiting_for_external_fallback"]);
const activeRunLabels = new Set(["queued", "running", "processing locally", "waiting to retry", "waiting for approved fallback"]);

function cvRunStatus(run: ExtractionRun) {
  const operation = run.operation;
  if (!operation || operation.status === "succeeded") return run.status;
  if (operation.cancellationRequestedAtUtc) return "cancellation requested";
  switch (operation.status) {
    case "running": return "processing locally";
    case "waiting_for_retry": return "waiting to retry";
    case "waiting_for_external_fallback": return "waiting for approved fallback";
    default: return operation.status;
  }
}

const importLabelKeys: Record<string, TranslationKey> = {
  Contact: "careerProfileContactSection", Summary: "profileCvStructuredSummary", "Professional summary": "profileCvStructuredSummary",
  Experience: "cvSectionExperience", Education: "cvSectionEducation", Projects: "cvSectionProjects", Certifications: "cvSectionCertifications",
  Languages: "cvSectionLanguages", Skills: "cvSectionSkills", Interests: "cvSectionInterests", Awards: "cvSectionAwards",
  Publications: "cvSectionPublications", Organisations: "cvSectionOrganisations", References: "cvSectionReferences",
  "Full name": "profileCvContactFullName", Headline: "profileCvContactHeadline", Email: "profileCvContactEmail", Phone: "profileCvContactPhone",
  Location: "profileCvContactLocation", Website: "profileCvContactWebsite", LinkedIn: "profileCvContactLinkedIn", Level: "profileCvLanguageLevel",
  Dates: "careerImportDates", Date: "careerImportDates", Bullets: "careerImportDetails", Details: "careerImportDetails", Issuer: "careerImportIssuer",
  queued: "careerImportQueued", running: "careerImportProcessing", "processing locally": "careerImportProcessing",
  "waiting to retry": "careerImportWaitingRetry", "waiting for approved fallback": "careerImportWaitingFallback",
  "cancellation requested": "operationsCancellationRequested", pending_review: "careerImportPendingReview", applied: "careerImportApplied",
  discarded: "careerImportDiscarded", failed: "careerImportFailed", cancelled: "careerImportCancelled",
  upload: "careerImportUpload", rebuild: "careerImportRebuild", improve: "careerImportImprove", reprocess: "careerImportReprocess",
};

type MeResponse = {
  provider?: "local" | "google" | "external";
  id?: string;
  email?: string;
  userName?: string;
  firstName?: string;
  lastName?: string;
  displayName?: string;
  profileCvText?: string;
  profileCvStructureJson?: string;
  avatarImageDataUrl?: string;
  roles?: string[];
  googleLink?: {
    linked: boolean;
    email?: string | null;
    linkedAt?: string | null;
  } | null;
};

const CV_UPLOAD_ACCEPT = ".pdf,.docx,.txt,.md,image/png,image/jpeg,image/webp,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain,text/markdown";
const AVATAR_UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp";
function initialsFrom(values: Array<string | undefined>) {
  const joined = values.map((x) => (x ?? "").trim()).filter(Boolean);
  if (joined.length === 0) return "?";
  if (joined.length === 1) {
    const parts = joined[0].split(/[\s@._-]+/).filter(Boolean);
    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
    return (parts[0][0] + parts[1][0]).toUpperCase();
  }
  return (joined[0][0] + joined[1][0]).toUpperCase();
}



// Phase 3: the master profile now comes from the relational source of truth via /career/profile.
type CareerSectionStatus = { key: string; label: string; complete: boolean; count: number };
type CareerCompleteness = { percent: number; missing: string[]; sections: CareerSectionStatus[] };
type CareerProfileResponse = { profile: StructuredCvProfile; completeness: CareerCompleteness; cvText?: string | null };
type CareerVersion = { version: number; source: string; createdAtUtc: string; isCurrent: boolean };
type CareerWorkspaceSection = "overview" | "profile" | "evidence" | "import";

function initialWorkspaceSection(): CareerWorkspaceSection {
  if (typeof window === "undefined") return "overview";
  const section = new URLSearchParams(window.location.search).get("section");
  return section === "profile" || section === "evidence" || section === "import" ? section : "overview";
}

// CareerProfilePage backs /career: the master career profile — the single editable source of
// truth for all future generated documents. Split out from ProfilePage in Phase 2.2; wired to the
// relational /career/profile API in Phase 3.
export default function CareerProfilePage() {
  const { canUseAi } = useAccountPlan();
  // Retained so the shared JSX (copied from ProfilePage) reads identically; hardcoded for /career.
  const careerOnly = true;
  const { toast } = useToast();
  const { language, t } = useI18n();
  const translationRef = useRef(t);
  useEffect(() => { translationRef.current = t; }, [t]);
  const cvInputRef = useRef<HTMLInputElement | null>(null);
  const avatarInputRef = useRef<HTMLInputElement | null>(null);
  const [me, setMe] = useState<MeResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  const profileMutationPending = useRef(false);
  const [uploadingCv, setUploadingCv] = useState(false);
  const [improvingCv, setImprovingCv] = useState(false);
  const [rebuildingCv, setRebuildingCv] = useState(false);
  const [uploadingAvatar, setUploadingAvatar] = useState(false);
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
  const [cropOpen, setCropOpen] = useState(false);

  const [headline, setHeadline] = useState("");
  const [profileCvText, setProfileCvText] = useState("");
  const [parsingCvSections, setParsingCvSections] = useState(false);
  const [reprocessingCv, setReprocessingCv] = useState(false);
  const [structuredCv, setStructuredCv] = useState<StructuredCvProfile>(emptyStructuredCv());
  const [profileDirty, setProfileDirty] = useState(false);
  const [completeness, setCompleteness] = useState<CareerCompleteness | null>(null);
  const [versions, setVersions] = useState<CareerVersion[]>([]);
  const [versionsLoading, setVersionsLoading] = useState(true);
  const [versionsError, setVersionsError] = useState<string | null>(null);
  const versionsReadId = useRef(0);
  const [restoreError, setRestoreError] = useState<string | null>(null);
  // The raw import/section parser remains available as an advanced recovery tool.
  const [showAdvancedCvTools, setShowAdvancedCvTools] = useState(false);
  const [workspaceSection, setWorkspaceSection] = useState<CareerWorkspaceSection>(initialWorkspaceSection);
  const [evidenceVisited, setEvidenceVisited] = useState(() => initialWorkspaceSection() === "evidence");

  const navigateWorkspace = useCallback((next: CareerWorkspaceSection) => {
    setWorkspaceSection(next);
    if (next === "evidence") setEvidenceVisited(true);
    if (typeof window === "undefined") return;
    const url = new URL(window.location.href);
    if (next === "overview") url.searchParams.delete("section");
    else url.searchParams.set("section", next);
    window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}${url.hash}`);
  }, []);

  const loadVersions = useCallback(async () => {
    const readId = ++versionsReadId.current;
    setVersionsLoading(true);
    try {
      const r = await api.get<CareerVersion[]>("/career/profile/versions");
      if (readId === versionsReadId.current) {
        setVersions(r.data ?? []);
        setVersionsError(null);
      }
    } catch (error) {
      if (readId === versionsReadId.current) setVersionsError(getApiErrorMessage(error, ""));
    } finally {
      if (readId === versionsReadId.current) setVersionsLoading(false);
    }
  }, []);

  const restoreVersion = useCallback(async (version: number) => {
    if (profileMutationPending.current || me?.provider !== "local" || loading || profileDirty) return;
    profileMutationPending.current = true;
    setLoading(true);
    setRestoreError(null);
    try {
      const r = await api.post<CareerProfileResponse>(`/career/profile/versions/${version}/restore`);
      setStructuredCv(normalizeStructuredCv(r.data?.profile ?? emptyStructuredCv()));
      setCompleteness(r.data?.completeness ?? null);
      setProfileDirty(false);
      invalidateImportComparisons();
      await loadVersions();
      toast(t("profileUpdated"), "success");
    } catch (error) {
      const message = getApiErrorMessage(error, "");
      setRestoreError(message);
      toast(message || translationRef.current("careerRestoreFailed"), "error");
    } finally {
      profileMutationPending.current = false;
      setLoading(false);
    }
  }, [loadVersions, loading, me?.provider, profileDirty, t, toast]);
  const [extractionRuns, setExtractionRuns] = useState<ExtractionRun[]>([]);
  const [runsLoading, setRunsLoading] = useState(true);
  const [runsLoadError, setRunsLoadError] = useState<string | null>(null);
  const runsReadId = useRef(0);
  const [runDiffs, setRunDiffs] = useState<Record<number, CvImportDiff>>({});
  const [runDiffErrors, setRunDiffErrors] = useState<Record<number, string>>({});
  const [runDiffLoading, setRunDiffLoading] = useState<Record<number, boolean>>({});
  const diffReadGeneration = useRef(0);
  const diffReadIds = useRef<Record<number, number>>({});
  const [reviewingRunId, setReviewingRunId] = useState<number | null>(null);
  const [reviewAction, setReviewAction] = useState<"accept" | "discard" | null>(null);
  const reviewPending = useRef(false);
  const [runActionErrors, setRunActionErrors] = useState<Record<number, { key: TranslationKey; message: string }>>({});
  const operationPending = useRef(new Set<string>());
  const [pendingOperations, setPendingOperations] = useState<string[]>([]);
  const [acceptedLowConfidenceIds, setAcceptedLowConfidenceIds] = useState<Record<number, string[]>>({});
  const runStatusRef = useRef<Record<number, string>>({});

  function invalidateImportComparisons() {
    // A comparison and its choices refer to the source that was current when it was read.
    ++diffReadGeneration.current;
    setRunDiffs({});
    setRunDiffErrors({});
    setRunDiffLoading({});
    setAcceptedLowConfidenceIds({});
  }

  const loadRunDiff = useCallback(async (runId: number) => {
    const generation = diffReadGeneration.current;
    const readId = (diffReadIds.current[runId] ?? 0) + 1;
    diffReadIds.current[runId] = readId;
    const isCurrent = () => generation === diffReadGeneration.current && readId === diffReadIds.current[runId];
    setRunDiffLoading((current) => ({ ...current, [runId]: true }));
    setRunDiffErrors((current) => { const next = { ...current }; delete next[runId]; return next; });
    try {
      const response = await api.get<CvRunDiffResponse>(`/profile-cv/runs/${runId}/diff`);
      if (isCurrent()) setRunDiffs((current) => ({ ...current, [runId]: response.data.diff }));
    } catch (error) {
      if (isCurrent()) setRunDiffErrors((current) => ({ ...current, [runId]: getApiErrorMessage(error, "") }));
    } finally {
      if (isCurrent()) setRunDiffLoading((current) => ({ ...current, [runId]: false }));
    }
  }, []);

  const editStructuredCv = useCallback((next: React.SetStateAction<StructuredCvProfile>) => {
    setStructuredCv(next);
    setProfileDirty(true);
  }, []);

  const loadExtractionRuns = useCallback(async () => {
    const readId = ++runsReadId.current;
    setRunsLoading(true);
    try {
      const response = await api.get<ExtractionRun[]>("/profile-cv/runs");
      if (readId === runsReadId.current) {
        setExtractionRuns(response.data ?? []);
        setRunsLoadError(null);
      }
    } catch (error) {
      // Polling failure must not clear existing run state or touch unsaved profile edits.
      if (readId === runsReadId.current) setRunsLoadError(String(error));
    } finally {
      if (readId === runsReadId.current) setRunsLoading(false);
    }
  }, []);

  const queueCvUpload = useCallback(async (file: File) => {
    const formData = new FormData();
    formData.append("file", file);
    setUploadingCv(true);
    try {
      const res = await api.post<QueuedCvRunResponse>("/profile-cv/upload", formData, { headers: { "Content-Type": "multipart/form-data" } });
      await loadExtractionRuns();
      toast(t("profileCvQueuedUpload", { id: res.data.extractionRunId }), "info");
    } catch (error) {
      toast(getApiErrorMessage(error, t("profileCvUploadFailed")), "error");
    } finally {
      setUploadingCv(false);
    }
  }, [loadExtractionRuns, t, toast]);

  const loadProfile = useCallback(async () => {
    setLoading(true);
    try {
      // /career reads the structured profile from the relational source of truth (/career/profile);
      // /auth/me still provides the account row (avatar, provider chips) shown in the header.
      const [careerResponse, meResponse] = await Promise.all([
        api.get<CareerProfileResponse>("/career/profile"),
        api.get<MeResponse>("/auth/me"),
      ]);
      setMe(meResponse.data);
      setProfileCvText(careerResponse.data?.cvText ?? "");
      const profile = normalizeStructuredCv(careerResponse.data?.profile ?? emptyStructuredCv());
      setStructuredCv(profile);
      setCompleteness(careerResponse.data?.completeness ?? null);
      setProfileDirty(false);
      setHeadline(profile.contact.headline ?? "");
      setLoadError(null);
    } catch (error) {
      setMe(null);
      setLoadError(getApiErrorMessage(error, ""));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadProfile();
    void loadExtractionRuns();
    void loadVersions();
  }, [loadExtractionRuns, loadProfile, loadVersions]);

  useEffect(() => {
    const activeRuns = extractionRuns.filter((run) => run.operation
      ? activeOperationStatuses.has(run.operation.status)
      : run.status === "queued" || run.status === "running");
    if (activeRuns.length === 0) return;

    const timer = window.setInterval(() => {
      void loadExtractionRuns();
    }, 4000);

    return () => window.clearInterval(timer);
  }, [extractionRuns, loadExtractionRuns]);

  useEffect(() => {
    for (const run of extractionRuns) {
      if (run.status === "pending_review" && !runDiffs[run.id] && !runDiffLoading[run.id] && runDiffErrors[run.id] === undefined) void loadRunDiff(run.id);
    }
  }, [extractionRuns, loadRunDiff, runDiffErrors, runDiffLoading, runDiffs]);

  const changeRunOperation = async (run: ExtractionRun, action: "cancel" | "retry") => {
    const operation = run.operation;
    if (!isLocal || !operation || operationPending.current.has(operation.id)) return;
    const runRegion = document.getElementById(`career-import-run-${run.id}`);
    if (runRegion?.contains(document.activeElement)) runRegion.focus();
    operationPending.current.add(operation.id);
    setPendingOperations([...operationPending.current]);
    setRunActionErrors((current) => { const next = { ...current }; delete next[run.id]; return next; });
    try {
      await api.post(`/operations/${operation.id}/${action}`);
      await loadExtractionRuns();
      toast(translationRef.current(action === "cancel" ? "profileCvCancelRequested" : "profileCvRetryQueued"), "info");
    } catch (error) {
      const key = action === "cancel" ? "profileCvCancelFailed" : "profileCvRetryFailed";
      const message = getApiErrorMessage(error, "");
      setRunActionErrors((current) => ({ ...current, [run.id]: { key, message } }));
      toast(message || translationRef.current(key), "error");
    } finally {
      operationPending.current.delete(operation.id);
      setPendingOperations([...operationPending.current]);
    }
  };

  const reviewRun = async (runId: number, action: "accept" | "discard") => {
    if (!isLocal || loading || saving || reviewPending.current || profileMutationPending.current || (action === "accept" && (profileDirty || !runDiffs[runId]))) return;
    const runRegion = document.getElementById(`career-import-run-${runId}`);
    if (runRegion?.contains(document.activeElement)) runRegion.focus();
    reviewPending.current = true;
    if (action === "accept") profileMutationPending.current = true;
    setReviewingRunId(runId);
    setReviewAction(action);
    setRunActionErrors((current) => { const next = { ...current }; delete next[runId]; return next; });
    try {
      if (action === "accept") await api.post(`/profile-cv/runs/${runId}/accept`, { acceptedLowConfidenceIds: acceptedLowConfidenceIds[runId] ?? [] });
      else await api.post(`/profile-cv/runs/${runId}/discard`);
      setExtractionRuns((current) => current.map((run) => run.id === runId ? { ...run, status: action === "accept" ? "applied" : "discarded" } : run));
      if (action === "accept") {
        invalidateImportComparisons();
        await Promise.all([loadProfile(), loadExtractionRuns(), loadVersions()]);
      } else await loadExtractionRuns();
      toast(translationRef.current(action === "accept" ? "profileCvChangesApplied" : "profileCvExtractionDiscarded"), action === "accept" ? "success" : "info");
    } catch (error) {
      const key = action === "accept" ? "profileCvApplyChangesFailed" : "profileCvDiscardFailed";
      const message = getApiErrorMessage(error, "");
      setRunActionErrors((current) => ({ ...current, [runId]: { key, message } }));
      toast(message || translationRef.current(key), "error");
    } finally {
      if (action === "accept") profileMutationPending.current = false;
      reviewPending.current = false;
      setReviewingRunId(null);
      setReviewAction(null);
    }
  };

  useEffect(() => {
    const previous = runStatusRef.current;
    for (const run of extractionRuns) {
      const status = cvRunStatus(run);
      const prior = previous[run.id];
      if (activeRunLabels.has(prior) && status === "pending_review") {
        toast(t("profileCvRunReady", { trigger: run.trigger }), "info");
      }
      if (activeRunLabels.has(prior) && status === "failed") {
        toast(run.errorMessage || t("profileCvRunFailed", { trigger: run.trigger }), "error");
      }
      previous[run.id] = status;
    }
  }, [extractionRuns, t, toast]);

  // Field-review lookup passed to the extracted sections. They stay decoupled from the full profile
  // shape; the parent still owns structuredCv and the metadata source.
  const metaFor = useCallback((path: string) => getStructuredCvFieldMetadata(structuredCv, path), [structuredCv]);

  const initials = useMemo(() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]), [me]);
  const isLocal = me?.provider === "local";
  const editorDisabled = !isLocal || loading || saving || parsingCvSections || (reviewingRunId !== null && reviewAction === "accept");
  const loadErrorMessage = loadError === null ? null : loadError || t("profileLoadFailed");
  const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");
  const cvWordCount = profileCvText.trim() ? profileCvText.trim().split(/\s+/).length : 0;

  const providerLabel = me?.provider === "local" ? t("profileLocalAccount") : me?.provider === "google" ? t("profileGoogleSession") : t("profileExternalSession");
  const googleLabel = me?.googleLink?.linked
    ? me.googleLink.email
      ? t("profileGoogleLinkedWithEmail", { email: me.googleLink.email })
      : t("profileGoogleLinked")
    : t("profileGoogleNotLinked");
  const cvLabel = profileCvText.trim() ? t("profileCvReady", { count: cvWordCount }) : t("profileCvMissing");
  const latestRun = extractionRuns[0];
  const activeCvRun = extractionRuns.find((run) => run.operation
    ? activeOperationStatuses.has(run.operation.status)
    : run.status === "queued" || run.status === "running");
  const pendingCvRun = extractionRuns.find((run) => run.status === "pending_review");
  const extractionProgress = activeCvRun?.operation?.progressPercent;
  const importLabel = (value: string) => Object.hasOwn(importLabelKeys, value) ? t(importLabelKeys[value]) : value;
  const importChangeLabel = (change: CvImportChange, category: string) => category === "Professional summary" ? importLabel(category)
    : change.id === "Contact" && change.confidence === "Low" && change.label === "Contact details" ? t("careerImportContactDetails") : change.label;
  return (
    <Box sx={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gap: 2, minWidth: 0, "& .MuiAlert-root": { flexWrap: "wrap" }, "& .MuiAlert-message": { minWidth: 0, flex: "1 1 160px", overflow: "visible", overflowWrap: "anywhere" } }}>
      <Paper component="nav" aria-label={t("careerWorkspaceNavigation")} variant="outlined" sx={{ borderRadius: 1, minWidth: 0, overflow: "hidden" }}>
        <FormControl size="small" fullWidth sx={{ display: { xs: "flex", sm: "none" }, m: 1.25, width: "auto" }}>
          <InputLabel id="career-workspace-section-label">{t("careerWorkspaceNavigation")}</InputLabel>
          <Select
            labelId="career-workspace-section-label"
            value={workspaceSection}
            label={t("careerWorkspaceNavigation")}
            onChange={(event) => navigateWorkspace(event.target.value as CareerWorkspaceSection)}
          >
            <MenuItem value="overview">{t("careerWorkspaceOverviewTab")}</MenuItem>
            <MenuItem value="profile">{t("careerWorkspaceProfileTab")}</MenuItem>
            <MenuItem value="evidence">{t("careerWorkspaceEvidenceTab")}</MenuItem>
            <MenuItem value="import">{t("careerWorkspaceImportTab")}</MenuItem>
          </Select>
        </FormControl>
        <Tabs
          value={workspaceSection}
          onChange={(_, value: CareerWorkspaceSection) => navigateWorkspace(value)}
          aria-label={t("careerWorkspaceNavigation")}
          sx={{ display: { xs: "none", sm: "flex" }, px: 1 }}
        >
          <Tab value="overview" label={t("careerWorkspaceOverviewTab")} />
          <Tab value="profile" label={t("careerWorkspaceProfileTab")} />
          <Tab value="evidence" label={t("careerWorkspaceEvidenceTab")} />
          <Tab value="import" label={t("careerWorkspaceImportTab")} />
        </Tabs>
      </Paper>

      {workspaceSection === "overview" ? (
        <CareerWorkspaceOverview
          completeness={completeness}
          runs={extractionRuns}
          loading={loading || saving || (reviewingRunId !== null && reviewAction === "accept")}
          loadError={loadErrorMessage}
          runsLoading={runsLoading}
          runsLoadError={runsLoadError}
          onRetryRuns={() => void loadExtractionRuns()}
          onRetryProfile={() => { if (!profileDirty && !profileMutationPending.current) void loadProfile(); }}
          profileDirty={profileDirty}
          onNavigate={navigateWorkspace}
        />
      ) : null}

      {evidenceVisited ? <Box hidden={workspaceSection !== "evidence"}><CareerEvidenceBank /></Box> : null}

      {workspaceSection === "profile" || workspaceSection === "import" ? <Paper variant="outlined" id={workspaceSection === "profile" ? "career-profile-editor" : "career-cv-import"} sx={{ mt: 0, p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0, scrollMarginTop: 96, "& .MuiFormHelperText-root.Mui-disabled": { color: "text.secondary" } }}>
      <input
        ref={cvInputRef}
        type="file"
        accept={CV_UPLOAD_ACCEPT}
        style={{ display: "none" }}
        onChange={(event) => {
          const file = event.target.files?.[0];
          event.target.value = "";
          if (file) void queueCvUpload(file);
        }}
      />
      {workspaceSection === "profile" ? <ProfileCompleteness
        completeness={completeness}
        versions={versions}
        loading={editorDisabled}
        onRestore={(version) => void restoreVersion(version)}
        showSummary={false}
        versionsLoading={versionsLoading}
        versionsError={versionsError}
        onRetryVersions={() => void loadVersions()}
        restoreDisabled={profileDirty}
        restoreError={restoreError}
      /> : null}
      {workspaceSection === "profile" ? <CropImageDialog
        open={cropOpen}
        file={avatarFile}
        onClose={() => {
          setCropOpen(false);
          setAvatarFile(null);
        }}
        onSave={async (blob) => {
          const file = new File([blob], "avatar.png", { type: "image/png" });
          const formData = new FormData();
          formData.append("file", file);
          setUploadingAvatar(true);
          try {
            const response = await api.post<{ avatarImageDataUrl?: string }>("/auth/avatar", formData, {
              headers: { "Content-Type": "multipart/form-data" },
            });
            setMe((prev) => (prev ? { ...prev, avatarImageDataUrl: response.data?.avatarImageDataUrl ?? prev.avatarImageDataUrl } : prev));
            setCropOpen(false);
            setAvatarFile(null);
            toast(t("profileImageUpdated"), "success");
          } catch (e: any) {
            toast(String(e?.response?.data || e?.message || t("profileImageUploadFailed")), "error");
          } finally {
            setUploadingAvatar(false);
          }
        }}
      /> : null}

      {loadErrorMessage ? (
        <Alert severity="error" sx={{ mb: 2 }} action={<Button color="inherit" size="small" disabled={profileDirty || editorDisabled} onClick={() => { if (!profileDirty && !profileMutationPending.current) void loadProfile(); }}>{t("retry")}</Button>}>
          {t("profileLoadFailed")}
          {loadError ? <Typography variant="body2" sx={{ mt: 0.5 }}>{loadError}</Typography> : null}
        </Alert>
      ) : null}

      {workspaceSection === "profile" ? <Paper variant="outlined" sx={{ mb: 2.5, p: { xs: 1.5, sm: 2 }, borderRadius: 3 }}>
        <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
          <Box sx={{ minWidth: 0 }}>
            <Typography component="h2" variant="subtitle1" sx={{ fontWeight: 800 }}>{t("careerProfileImportTitle")}</Typography>
            <Typography variant="body2" color="text.secondary">{t("careerProfileImportBody")}</Typography>
          </Box>
          <Button
            variant="outlined"
            startIcon={<UploadFileOutlinedIcon />}
            disabled={!canUseAi || editorDisabled || uploadingCv || Boolean(activeCvRun)}
            onClick={() => cvInputRef.current?.click()}
          >
            {uploadingCv ? t("profileUploading") : t("profileUploadCv")}
          </Button>
        </Box>
        {uploadingCv || activeCvRun ? <Box sx={{ mt: 1.5 }}>
          <LinearProgress
            variant={typeof extractionProgress === "number" ? "determinate" : "indeterminate"}
            value={extractionProgress ?? undefined}
            aria-label={t("careerProfileImportProgress")}
            sx={{ height: 8, borderRadius: 999 }}
          />
          <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 0.75 }}>
            {typeof extractionProgress === "number"
              ? t("careerProfileImportPercent", { percent: extractionProgress })
              : t("careerProfileImportProcessing")}
          </Typography>
        </Box> : null}
        {pendingCvRun ? <Alert severity="success" sx={{ mt: 1.5 }} action={<Button color="inherit" size="small" onClick={() => navigateWorkspace("import")}>{t("careerProfileImportReview")}</Button>}>
          {t("careerProfileImportReady")}
        </Alert> : null}
        {!canUseAi ? <Box sx={{ mt: 1.5 }}><ProFeatureNotice featureKey="career-ai" title={t("profileProImportTitle")}>{t("profileProImportBody")}</ProFeatureNotice></Box> : null}
      </Paper> : null}

      {workspaceSection === "profile" ? <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
          <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
            <Avatar src={me?.avatarImageDataUrl || undefined} sx={{ width: 84, height: 84, fontWeight: 900, fontSize: 28, bgcolor: "primary.main", color: "primary.contrastText" }}>{initials}</Avatar>
            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "center" }}>
              <input
                ref={avatarInputRef}
                type="file"
                accept={AVATAR_UPLOAD_ACCEPT}
                style={{ display: "none" }}
                onChange={(event) => {
                  const file = event.target.files?.[0] ?? null;
                  event.target.value = "";
                  if (!file) return;
                  setAvatarFile(file);
                  setCropOpen(true);
                }}
              />
              <Button variant="outlined" size="small" startIcon={<PhotoCameraOutlinedIcon />} disabled={!isLocal || uploadingAvatar} onClick={() => avatarInputRef.current?.click()}>
                {uploadingAvatar ? t("profileUploading") : t("profileChangeImage")}
              </Button>
              {me?.avatarImageDataUrl ? (
                <Button
                  variant="text"
                  size="small"
                  color="inherit"
                  startIcon={<DeleteOutlineIcon />}
                  disabled={!isLocal || uploadingAvatar}
                  onClick={async () => {
                    setUploadingAvatar(true);
                    try {
                      await api.delete("/auth/avatar");
                      setMe((prev) => (prev ? { ...prev, avatarImageDataUrl: undefined } : prev));
                      toast(t("profileImageRemoved"), "success");
                    } catch (e: any) {
                      toast(String(e?.response?.data || e?.message || t("profileImageRemoveFailed")), "error");
                    } finally {
                      setUploadingAvatar(false);
                    }
                  }}
                >
                  {t("profileRemoveImage")}
                </Button>
              ) : null}
            </Box>
          </Box>
          <Box>
            <Typography component="h2" variant="h5" sx={{ fontWeight: 900 }}>
              {careerOnly ? t("careerWorkspaceProfileTab") : t("profileTitle")}
            </Typography>
            <Typography sx={{ color: "text.secondary" }}>{me?.userName || me?.displayName || fullName || me?.email || "-"}</Typography>
            <Typography variant="body2" sx={{ color: "text.secondary" }}>{headline || t("profileHeadlinePlaceholder")}</Typography>
          </Box>
        </Box>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "flex-start" }}>
          <Chip label={providerLabel} color={me?.provider === "local" ? "primary" : "default"} />
          <Chip label={googleLabel} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
          <Chip label={cvLabel} color={profileCvText.trim() ? "success" : "warning"} variant={profileCvText.trim() ? "filled" : "outlined"} />
        </Box>
      </Box> : null}


      <Box sx={{ mt: 2, display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "minmax(0, 1fr) minmax(0, 1fr)" }, gap: 2, minWidth: 0 }}>


        <Box sx={{ gridColumn: "1 / -1", minWidth: 0, display: careerOnly ? "block" : "none" }}>
          <Box sx={{ display: workspaceSection === "import" ? "block" : "none" }}>
          {!canUseAi && (
            <Box sx={{ mb: 2 }}>
              <ProFeatureNotice featureKey="career-ai" title={t("profileProImportTitle")}>
                {t("profileProImportBody")}
              </ProFeatureNotice>
            </Box>
          )}
          {profileDirty ? <Alert severity="warning" sx={{ mb: 2 }}>{t("profileUnsavedBeforeActions")}</Alert> : null}
          <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center", mb: 1.5 }}>
            <Box>
              <Typography component="h2" variant="h6">{t("profileMasterCv")}</Typography>
              <Typography variant="body2" sx={{ color: "text.secondary" }}>
                {t("profileMasterCvBody")}
              </Typography>
            </Box>
            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
              <Button variant="outlined" disabled={!canUseAi || editorDisabled || uploadingCv || improvingCv || rebuildingCv} onClick={() => cvInputRef.current?.click()}>
                {uploadingCv ? t("profileUploading") : t("profileUploadCv")}
              </Button>
              <Button
                variant="outlined"
                disabled={!canUseAi || editorDisabled || profileDirty || !profileCvText.trim() || uploadingCv || improvingCv || rebuildingCv}
                onClick={async () => {
                  setRebuildingCv(true);
                  try {
                    const res = await api.post<QueuedCvRunResponse>("/profile-cv/rebuild");
                    await loadExtractionRuns();
                    toast(t("profileCvQueuedRebuild", { id: res.data.extractionRunId }), "info");
                  } catch (e: any) {
                    toast(String(e?.response?.data || e?.message || t("profileCvRebuildFailed")), "error");
                  } finally {
                    setRebuildingCv(false);
                  }
                }}
              >
                {rebuildingCv ? t("profileCvRebuilding") : t("profileCvRebuild")}
              </Button>
              <Button
                variant="outlined"
                disabled={!canUseAi || editorDisabled || profileDirty || !profileCvText.trim() || uploadingCv || improvingCv || rebuildingCv}
                onClick={async () => {
                  setImprovingCv(true);
                  try {
                    const res = await api.post<QueuedCvRunResponse>("/profile-cv/improve");
                    await loadExtractionRuns();
                    toast(t("profileCvQueuedImprove", { id: res.data.extractionRunId }), "info");
                  } catch (e: any) {
                    toast(String(e?.response?.data || e?.message || t("profileCvImproveFailed")), "error");
                  } finally {
                    setImprovingCv(false);
                  }
                }}
              >
                {improvingCv ? t("profileCvImproving") : t("profileCvImprove")}
              </Button>
              <Button
                variant="outlined"
                disabled={!canUseAi || editorDisabled || uploadingCv || improvingCv || rebuildingCv || reprocessingCv || !latestRun}
                onClick={async () => {
                  setReprocessingCv(true);
                  try {
                    const res = await api.post<QueuedCvRunResponse>("/profile-cv/reprocess");
                    await loadExtractionRuns();
                    toast(t("profileCvQueuedReprocess", { id: res.data.extractionRunId }), "info");
                  } catch (e: any) {
                    toast(String(e?.response?.data || e?.message || t("profileCvReprocessFailed")), "error");
                  } finally {
                    setReprocessingCv(false);
                  }
                }}
              >
                {reprocessingCv ? t("profileCvReprocessing") : t("profileCvReprocess")}
              </Button>
            </Box>
          </Box>
          {uploadingCv ? <LinearProgress sx={{ mb: 1.5 }} /> : null}
          <Alert severity="info" sx={{ mb: 2, borderRadius: 2.5 }}>
            {t("profileCvStructuredDefaultHint")}
          </Alert>
          <Accordion disableGutters elevation={0} sx={{ mb: 2, borderRadius: 1, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper", "&:before": { display: "none" } }}>
            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
              <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 1.5, alignItems: "center", width: "100%", minWidth: 0, pr: 1 }}>
                <Box>
              <Typography component="span" variant="subtitle1" sx={{ fontWeight: 800 }}>{t("profileCvRawPanelTitle")}</Typography>
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvRawPanelHelp")}</Typography>
                </Box>
                <Chip size="small" label={t("profileCvSectionWordCount", { count: cvWordCount })} />
              </Box>
            </AccordionSummary>
            <AccordionDetails>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>{t("careerImportRawSourceHelp")}</Typography>
              <TextField
                label={t("profileCvTextLabel")}
                value={profileCvText}
                onChange={(e) => { setProfileCvText(e.target.value); setProfileDirty(true); }}
                helperText={t("profileCvTextHelp")}
                multiline
                minRows={12}
                disabled={editorDisabled}
                fullWidth
              />
              <Box sx={{ mt: 1.5, display: "flex", justifyContent: "flex-end" }}>
                <Button variant="text" disabled={!profileCvText.trim()} onClick={() => navigator.clipboard.writeText(profileCvText)}>
                  {t("profileCopyCvText")}
                </Button>
              </Box>
            </AccordionDetails>
          </Accordion>
          <PageSection title={t("profileCvExtractionHistory")} description={t("profileCvExtractionHistoryHelp")} surface>
            {runsLoading ? <LinearProgress aria-label={t("loading")} /> : null}
            {runsLoadError !== null ? <Alert severity="error" action={<Button color="inherit" disabled={runsLoading} onClick={() => void loadExtractionRuns()}>{t("retry")}</Button>}>{t("careerOverviewImportUnavailable")}</Alert> : null}
            {latestRun ? (
              <Box sx={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gap: 1.5, minWidth: 0 }}>
                {extractionRuns.map((run) => (
                  <Box component="article" id={`career-import-run-${run.id}`} tabIndex={-1} aria-label={`${importLabel(run.trigger)} ${run.id}`} key={run.id} sx={{ p: "var(--app-card-padding)", minWidth: 0, overflowWrap: "anywhere", borderRadius: 1, border: "1px solid", borderColor: run.id === structuredCv.metadata.appliedExtractionRunId ? "primary.main" : "divider", backgroundColor: "background.default" }}>
                    <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, flexWrap: "wrap", alignItems: "center", mb: 0.75 }}>
                      <Typography component="h3" variant="subtitle1" sx={{ fontWeight: 600 }}>{importLabel(run.trigger)} · {run.id}</Typography>
                      <Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap" }}>
                        <Chip size="small" label={importLabel(cvRunStatus(run))} color={run.status === "applied" ? "success" : run.operation?.status === "failed" || run.status === "failed" ? "error" : "default"} variant={run.status === "applied" ? "filled" : "outlined"} />
                        {run.id === structuredCv.metadata.appliedExtractionRunId ? <Chip size="small" color="primary" label={t("profileCvCurrentRun")} /> : null}
                      </Box>
                    </Box>
                    <Typography variant="body2" sx={{ color: "text.secondary" }}>{run.artifactFileName || t("profileCvNoStoredArtifact")}</Typography>
                    <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 0.75 }}>
                      {run.parserVersion} · {new Date(run.startedAtUtc).toLocaleString(language === "nb" ? "nb-NO" : "en")}
                    </Typography>
                    {run.errorMessage ? (
                      <Typography variant="caption" sx={{ color: "error.main", display: "block", mt: 0.75 }}>
                        {run.errorMessage}
                      </Typography>
                    ) : null}
                    {run.operation?.canCancel ? (
                      <Button size="small" color="inherit" disabled={!isLocal || pendingOperations.includes(run.operation.id)} sx={{ mt: 0.75 }} onClick={() => void changeRunOperation(run, "cancel")}>{t("profileCvCancelProcessing")}</Button>
                    ) : null}
                    {run.operation?.canRetry ? (
                      <Button size="small" color="inherit" disabled={!isLocal || pendingOperations.includes(run.operation.id)} sx={{ mt: 0.75 }} onClick={() => void changeRunOperation(run, "retry")}>{t("profileCvRetryProcessing")}</Button>
                    ) : null}
                    {runActionErrors[run.id] ? <Alert severity="error" sx={{ mt: 1 }}>
                      <Typography variant="body2" component="p" sx={{ fontWeight: 600 }}>{t(runActionErrors[run.id].key)}</Typography>
                      {runActionErrors[run.id].message ? <Typography variant="body2" component="p">{runActionErrors[run.id].message}</Typography> : null}
                    </Alert> : null}
                    {run.status === "pending_review" ? (
                      <Box sx={{ mt: 1.25 }}>
                        {runDiffs[run.id] ? (
                          <>
                            <Typography variant="body2" sx={{ fontWeight: 700 }}>
                              {t("profileCvDiffSummary", { added: runDiffs[run.id].totalAdded, updated: runDiffs[run.id].totalUpdated })}
                              {runDiffs[run.id].totalLowConfidence ? ` | ${t("profileCvNeedAttention", { count: runDiffs[run.id].totalLowConfidence })}` : ""}
                            </Typography>
                            <Typography variant="body2" color="text.secondary" sx={{ my: 1 }}>{t("careerImportComparisonScope")}</Typography>
                            {!runDiffs[run.id].hasChanges ? <Typography variant="body2" color="text.secondary">{t("careerImportNoComparedChanges")}</Typography> : null}
                            {runDiffs[run.id].categories.filter((category) => category.added.length || category.updated.length).map((category) => (
                              <Box key={category.category} sx={{ mt: 1.5, minWidth: 0 }}>
                                <Typography component="h4" variant="subtitle2">{importLabel(category.category)}</Typography>
                                {[...category.added.map((change) => ({ ...change, added: true })), ...category.updated.map((change) => ({ ...change, added: false }))].map((change) => (
                                  <Box key={change.id} sx={{ py: 1, borderBottom: "1px solid", borderColor: "divider" }}>
                                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{importChangeLabel(change, category.category)} · {t(change.added ? "careerImportAdded" : "careerImportUpdated")}</Typography>
                                    {(change.fieldChanges ?? []).map((field) => <Box key={field.field} sx={{ mt: 0.5, display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "minmax(0, 1fr) minmax(0, 1fr)" }, columnGap: 2 }}>
                                      <Typography variant="caption" color="text.secondary" sx={{ gridColumn: "1 / -1" }}>{importLabel(field.field)}</Typography>
                                      <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>{t("careerImportCurrentValue", { value: field.oldValue || t("careerImportEmptyValue") })}</Typography>
                                      <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>{t("careerImportIncomingValue", { value: field.newValue || t("careerImportEmptyValue") })}</Typography>
                                    </Box>)}
                                  </Box>
                                ))}
                              </Box>
                            ))}
                          </>
                        ) : runDiffErrors[run.id] !== undefined ? <Alert severity="error" action={<Button color="inherit" disabled={runDiffLoading[run.id]} onClick={() => { document.getElementById(`career-import-run-${run.id}`)?.focus(); void loadRunDiff(run.id); }}>{t("retry")}</Button>}>
                          <Typography variant="body2" component="p" sx={{ fontWeight: 600 }}>{t("careerImportComparisonFailed")}</Typography>
                          {runDiffErrors[run.id] ? <Typography variant="body2" component="p">{runDiffErrors[run.id]}</Typography> : null}
                        </Alert> : <LinearProgress aria-label={t("careerImportComparisonLoading")} sx={{ my: 1 }} />}
                        {runDiffs[run.id]?.categories.flatMap((category) => [...category.added, ...category.updated].map((change) => ({ ...change, category: category.category }))).filter((change) => change.confidence === "Low").map((change) => (
                          <FormControlLabel
                            key={change.id}
                            sx={{ display: "flex", mt: 0.5, mr: 0, "& .MuiFormControlLabel-label.Mui-disabled": { color: "text.secondary" } }}
                            control={<Checkbox size="small" disabled={editorDisabled || reviewingRunId !== null} checked={(acceptedLowConfidenceIds[run.id] ?? []).includes(change.id)} onChange={(event) => setAcceptedLowConfidenceIds((current) => ({
                              ...current,
                              [run.id]: event.target.checked
                                ? [...(current[run.id] ?? []), change.id]
                                : (current[run.id] ?? []).filter((id) => id !== change.id),
                            }))} />}
                            label={t("profileCvIncludeLowConfidence", { category: importLabel(change.category), label: importChangeLabel(change, change.category) })}
                          />
                        ))}
                        {profileDirty ? (
                          <Alert severity="warning" sx={{ mt: 1 }}>
                            {t("profileCvSaveBeforeImport")}
                          </Alert>
                        ) : null}
                        <Box sx={{ display: "flex", gap: 1, mt: 1, flexWrap: "wrap" }}>
                          <Button size="small" variant="contained" disabled={editorDisabled || !runDiffs[run.id] || reviewingRunId !== null || profileDirty} onClick={() => void reviewRun(run.id, "accept")}>{reviewingRunId === run.id && reviewAction === "accept" ? t("careerImportApplying") : t("profileCvApplyChanges")}</Button>
                          <Button size="small" color="inherit" disabled={editorDisabled || reviewingRunId !== null} onClick={() => void reviewRun(run.id, "discard")}>{reviewingRunId === run.id && reviewAction === "discard" ? t("careerImportDiscarding") : t("profileCvDiscard")}</Button>
                        </Box>
                      </Box>
                    ) : null}
                  </Box>
                ))}
              </Box>
            ) : !runsLoading && runsLoadError === null ? (
              <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvExtractionHistoryEmpty")}</Typography>
            ) : null}
          </PageSection>
          <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end", mt: 1 }}>
            <Button size="small" variant="text" color="inherit" onClick={() => setShowAdvancedCvTools((v) => !v)}>
              {showAdvancedCvTools ? t("profileCvHideAdvancedTools") : t("profileCvAdvancedTools")}
            </Button>
          </Box>
          <Box sx={{ mt: 2, p: "var(--app-card-padding)", borderRadius: 1, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper", display: showAdvancedCvTools ? "block" : "none" }}>
            <Alert severity="warning" sx={{ mb: 1.5 }}>{t("careerImportParseWarning")}</Alert>
            <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center", mb: 1.5 }}>
              <Box>
                <Typography component="h3" variant="subtitle1" sx={{ fontWeight: 800 }}>{t("profileCvStructureOverview")}</Typography>
                <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvStructureOverviewHelp")}</Typography>
              </Box>
              <Button
                variant="outlined"
                disabled={editorDisabled || profileDirty || !profileCvText.trim() || parsingCvSections}
                onClick={async () => {
                  if (profileMutationPending.current || editorDisabled || profileDirty) return;
                  profileMutationPending.current = true;
                  setParsingCvSections(true);
                  try {
                    const res = await api.post<{ structuredCv?: StructuredCvProfile }>("/profile-cv/parse", { text: profileCvText });
                    editStructuredCv(normalizeStructuredCv(res.data?.structuredCv));
                    invalidateImportComparisons();
                    void loadVersions();
                    toast(t("profileCvStructureParsed"), "success");
                  } catch (e: any) {
                    toast(String(e?.response?.data || e?.message || t("profileCvStructureParseFailed")), "error");
                  } finally {
                    profileMutationPending.current = false;
                    setParsingCvSections(false);
                  }
                }}
              >
                {parsingCvSections ? t("profileCvStructureParsing") : t("profileCvStructureParse")}
              </Button>
            </Box>
            {structuredCv.sections.length > 0 ? (
              <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
                {structuredCv.sections.map((section) => {
                  const safeContent = typeof section.content === "string" ? section.content : "";
                  const safeWordCount = Number.isFinite(Number(section.wordCount)) ? Number(section.wordCount) : (safeContent.trim() ? safeContent.trim().split(/\s+/).length : 0);
                  return (
                    <Box key={section.name} sx={{ p: 1.25, borderRadius: 2.5, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
                      <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, alignItems: "center", mb: 0.75 }}>
                        <Typography variant="overline">{section.name}</Typography>
                        <Chip size="small" label={t("profileCvSectionWordCount", { count: safeWordCount })} />
                      </Box>
                      <Typography variant="body2" sx={{ color: "text.secondary", whiteSpace: "pre-wrap" }}>{safeContent.slice(0, 280)}{safeContent.length > 280 ? "…" : ""}</Typography>
                    </Box>
                  );
                })}
              </Box>
            ) : (
              <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvStructureEmpty")}</Typography>
            )}
          </Box>
          </Box>
          <Box sx={{ mt: workspaceSection === "profile" ? 2 : 0, display: workspaceSection === "profile" ? "block" : "none" }}>
          <PageSection title={t("profileCvStructuredEditor")} description={t("profileCvStructuredEditorHelp")} surface>

            <PersonalInformationSection
              value={structuredCv.contact}
              onChange={(next) => editStructuredCv((prev) => ({ ...prev, contact: next }))}
              getMetadata={metaFor}
              disabled={editorDisabled}
            />

            <Box sx={{ mt: 2, display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
              <ProfessionalSummarySection value={structuredCv.summary} onChange={(next) => editStructuredCv((prev) => ({ ...prev, summary: next }))} getMetadata={metaFor} disabled={editorDisabled} />
              <SkillsSection value={structuredCv.skills} onChange={(next) => editStructuredCv((prev) => ({ ...prev, skills: next }))} getMetadata={metaFor} disabled={editorDisabled} />
              <InterestsSection value={structuredCv.interests} onChange={(next) => editStructuredCv((prev) => ({ ...prev, interests: next }))} getMetadata={metaFor} disabled={editorDisabled} />
            </Box>

            <LongTailSections values={{ awards: structuredCv.awards, publications: structuredCv.publications, organisations: structuredCv.organisations, references: structuredCv.references }} onChange={(key, next) => editStructuredCv((prev) => ({ ...prev, [key]: next }))} disabled={editorDisabled} />

            <LanguagesSection value={structuredCv.languages} onChange={(next) => editStructuredCv((prev) => ({ ...prev, languages: next }))} getMetadata={metaFor} disabled={editorDisabled} />

            <WorkExperienceSection value={structuredCv.jobs} onChange={(next) => editStructuredCv((prev) => ({ ...prev, jobs: next }))} disabled={editorDisabled} />

            <EducationSection value={structuredCv.education} onChange={(next) => editStructuredCv((prev) => ({ ...prev, education: next }))} disabled={editorDisabled} />

            <OtherSectionsSection value={structuredCv.otherSections} onChange={(next) => editStructuredCv((prev) => ({ ...prev, otherSections: next }))} disabled={editorDisabled} />
          </PageSection>
          </Box>
          <Box sx={{ mt: 1, display: workspaceSection === "profile" ? "flex" : "none", justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
            <Typography variant="caption" sx={{ color: "text.secondary" }}>
              {t("profileCvSectionWordCount", { count: cvWordCount })}
            </Typography>
            <Typography variant="caption" sx={{ color: "text.secondary" }}>
              {t("profileCvPreferredUploads")}
            </Typography>
          </Box>
        </Box>

        <Box sx={{ gridColumn: "1 / -1", display: workspaceSection === "profile" ? "flex" : "none", justifyContent: "flex-end", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
          <Typography variant="body2" color="text.secondary" sx={{ width: "100%" }}>{t("profileCvStructuredEditorHelp")}</Typography>
          {saveError !== null ? <Alert severity="error" sx={{ width: "100%" }}>
            {t("profileUpdateFailed")}
            {saveError ? <Typography variant="body2" sx={{ mt: 0.5 }}>{saveError}</Typography> : null}
          </Alert> : null}
          {profileDirty ? <Chip size="small" color="warning" variant="outlined" label={t("assetsUnsavedChanges")} /> : null}
          <Button
            variant="contained"
            disabled={editorDisabled}
            onClick={async () => {
              if (profileMutationPending.current || editorDisabled) return;
              profileMutationPending.current = true;
              setSaving(true);
              setSaveError(null);
              try {
                // Save the master profile through the relational source of truth. The endpoint
                // persists the structured children + version and keeps the legacy blob projection
                // in sync; identity fields are never touched (they belong to /profile).
                const saved = await api.put<CareerProfileResponse>("/career/profile", { profile: structuredCv, cvText: profileCvText });
                setStructuredCv(normalizeStructuredCv(saved.data?.profile ?? structuredCv));
                setCompleteness(saved.data?.completeness ?? null);
                setProfileDirty(false);
                invalidateImportComparisons();
                void loadVersions();
                toast(t("profileUpdated"), "success");
              } catch (error) {
                const message = getApiErrorMessage(error, "");
                setSaveError(message);
                toast(message || translationRef.current("profileUpdateFailed"), "error");
              } finally {
                profileMutationPending.current = false;
                setSaving(false);
              }
            }}
          >
            {saving ? t("saving") : t("profileSaveChanges")}
          </Button>
        </Box>


      </Box>

      </Paper> : null}
    </Box>
  );
}