import React, { useCallback, useEffect, useId, useRef, useState } from "react";
import { createPortal } from "react-dom";

import {
  Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, IconButton, InputLabel, MenuItem, Paper, Select,
  Stack, Tab, Tabs, TextField, Tooltip, Typography, useMediaQuery, useTheme,
} from "@mui/material";
import RichTextField from "./RichTextField";
import Markdown from "./Markdown";
import { CoverLetterDocumentFields, CoverLetterDocumentPreview } from "./CoverLetterDocument";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import RestoreIcon from "@mui/icons-material/Restore";
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";

import { getApiErrorMessage } from "../api";
import {
  ApplicationCv, CoverLetter, CoverLetterDocumentSettings, SubmittedPackage, SubmittedPackageDetail, TailoringPlan, applicationAssetsApi,
} from "../applicationWorkspace";
import { cvBuilderApi } from "../cvBuilder";
import { aiWorkspaceApi } from "../aiWorkspace";
import { useAccountPlan } from "../accountPlan";
import { useI18n } from "../i18n/I18nProvider";
import type { TranslationKey } from "../i18n/translations";
import type { ViewResourceError } from "../hooks/useViewResource";
import { useConfirm } from "../confirm";
import { PageSection } from "../layout/PageLayout";
import ViewStateNotice from "./ViewStateNotice";
import { extractApplicationAnswerDraft, removeApplicationAnswerDraft } from "../applicationDrafts";

// Phase 5.4 — Application Assets sections for the workspace.
//
// These compose systems that already exist. CV editing, preview, PDF export, themes and version
// history all live in the CV builder at /cv-builder — this section only chooses WHICH variant the
// application uses and links out. The cover letter is the one thing genuinely owned here, because it
// is application-specific by nature. docs/architecture/overview.md.

type AssetError = ViewResourceError & { messageKey: TranslationKey; retry?: () => Promise<void> };

function assetError(error: unknown, messageKey: TranslationKey, retryable = false): AssetError {
  const status = (error as { response?: { status?: number } })?.response?.status;
  const unauthorized = status === 401 || status === 403;
  return { kind: unauthorized ? "unauthorized" : "error", message: status === 409 ? "" : getApiErrorMessage(error, ""), messageKey: status === 409 ? "revisionConflict" : messageKey, retryable: retryable && !unauthorized, status };
}

function useAsset<T>(load: () => Promise<T>, deps: React.DependencyList) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<AssetError | null>(null);
  const [loading, setLoading] = useState(true);
  const request = useRef(0);
  const pending = useRef(false);
  const active = useRef(true);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const run = useCallback(load, deps);

  const reload = useCallback(async () => {
    if (pending.current) return;
    pending.current = true;
    const current = ++request.current;
    setLoading(true);
    try {
      const next = await run();
      if (current !== request.current) return;
      setData(next);
      setError(null);
    } catch (err) {
      if (current === request.current) setError(assetError(err, "assetsLoadFailed", true));
    } finally {
      if (current === request.current) { pending.current = false; setLoading(false); }
    }
  }, [run]);

  useEffect(() => {
    active.current = true;
    setData(null);
    setError(null);
    pending.current = false;
    void reload();
    return () => { active.current = false; request.current += 1; pending.current = false; };
  }, [reload]);

  return { data, error, loading, setData, setError, reload, isCurrent: () => active.current };
}

function Shell({ title, subtitle, loading, error, available = true, onRetry, contentRef, children }: {
  title: string;
  subtitle?: string;
  loading: boolean;
  error: AssetError | null;
  available?: boolean;
  onRetry?: () => void | Promise<void>;
  contentRef?: React.RefObject<HTMLDivElement | null>;
  children: React.ReactNode;
}) {
  const { t } = useI18n();
  const localRef = useRef<HTMLDivElement>(null);
  const bodyRef = contentRef ?? localRef;
  const retry = error?.retry ?? onRetry;
  return (
    <PageSection surface title={title} description={subtitle} level="h3">
      <Box ref={bodyRef} role="group" aria-label={title} tabIndex={-1} sx={{ minWidth: 0 }}>
        <ViewStateNotice title={title} loading={loading} error={error ? { ...error, message: error.message || t(error.messageKey) } : null}
          onRetry={retry ? () => { bodyRef.current?.focus(); return retry(); } : undefined} compact />
        {available && error?.kind !== "unauthorized" && children}
      </Box>
    </PageSection>
  );
}

// ---------- CV ----------

export function ApplicationCvSection({ jobId, includePackages = true }: { jobId: number; includePackages?: boolean }) {
  const { t } = useI18n();
  const { data, error, loading, setData, setError, reload, isCurrent } = useAsset<ApplicationCv>(
    () => applicationAssetsApi.cv(jobId),
    [jobId],
  );
  const [busy, setBusy] = useState(false);
  const busyRef = useRef(false);
  const contentRef = useRef<HTMLDivElement>(null);
  const [createdCopy, setCreatedCopy] = useState<number | null>(null);

  const attach = async (variantId: number | null) => {
    if (busyRef.current || loading || !data) return;
    busyRef.current = true;
    contentRef.current?.focus();
    setBusy(true);
    try {
      const next = await applicationAssetsApi.attachVariant(jobId, variantId);
      if (!isCurrent()) return;
      setData(next);
      setError(null);
    } catch (err) {
      if (isCurrent()) setError(assetError(err, "assetsAttachCvFailed"));
    } finally {
      busyRef.current = false;
      setBusy(false);
    }
  };

  const attached = data?.attachedVariantId ?? "";

  const duplicateForJob = async () => {
    if (busyRef.current || loading || !data?.attachedVariantId) return;
    busyRef.current = true;
    contentRef.current?.focus();
    setBusy(true);
    let copyId = createdCopy;
    try {
      copyId ??= (await cvBuilderApi.duplicate(data.attachedVariantId, t("assetsTailoredCopyName", { name: data.attachedVariantName || "CV" }))).id;
      if (!isCurrent()) return;
      setCreatedCopy(copyId);
      const next = await applicationAssetsApi.attachVariant(jobId, copyId);
      if (!isCurrent()) return;
      setData(next);
      setCreatedCopy(null);
      window.location.assign(`/career/builder/${copyId}`);
    } catch (err) {
      if (isCurrent()) setError(assetError(err, copyId ? "assetsAttachCvFailed" : "assetsDuplicateCvFailed"));
    } finally {
      busyRef.current = false;
      setBusy(false);
    }
  };

  return (
    <Stack spacing={2}>
      <Shell
        title={t("workspaceCv")}
        subtitle={t("assetsCvSubtitle")}
        loading={loading || busy}
        error={error}
        available={data !== null}
        onRetry={reload}
        contentRef={contentRef}
      >
        <Stack spacing={2}>
          {(data?.availableVariants.length ?? 0) === 0 ? (
            <Alert severity="info" sx={{ borderRadius: 2 }}>
              {t("assetsNoCvVariants")}
            </Alert>
          ) : (
            <TextField
              select
              size="small"
              fullWidth
              label={t("assetsAttachedCv")}
              value={attached}
              disabled={busy || loading}
              onChange={(e) => attach(e.target.value === "" ? null : Number(e.target.value))}
              helperText={t("assetsAttachedCvHelp")}
            >
              <MenuItem value="">{t("assetsNone")}</MenuItem>
              {(data?.availableVariants ?? []).map((v) => (
                <MenuItem key={v.id} value={v.id}>
                  {v.name} · {v.themeId} · v{v.version}
                </MenuItem>
              ))}
            </TextField>
          )}

          {data?.attachedVariantId ? (
            <Paper variant="outlined" sx={{ p: 1.5, borderRadius: 2 }}>
              <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap" gap={1}>
                <Box>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>{data.attachedVariantName}</Typography>
                  <Typography variant="caption" color="text.secondary">
                    {t("assetsThemeVersion", { theme: data.attachedThemeId ?? "—", version: data.attachedVersion ?? "—" })}
                    {data.attachedIsPublic ? ` · ${t("assetsPublic")}` : ""}
                  </Typography>
                </Box>
                <Stack direction={{ xs: "column", sm: "row" }} spacing={1} sx={{ minWidth: 0, maxWidth: "100%" }}>
                  <Button
                    size="small"
                    variant="outlined"
                    endIcon={<OpenInNewIcon fontSize="small" />}
                    // The builder's real route. It loads the variant from :id and enforces ownership
                    // server-side, so there is no second CV loading path here.
                    href={`/career/builder/${data.attachedVariantId}`}
                  >
                    {t("assetsEditPreviewExport")}
                  </Button>
                  <Button size="small" variant="contained" disabled={busy || loading} onClick={() => void duplicateForJob()}>
                    {t(createdCopy ? "assetsAttachCreatedCopy" : "assetsDuplicateForJob")}
                  </Button>
                </Stack>
              </Stack>
            </Paper>
          ) : (
            <Typography variant="body2" color="text.secondary">
              {t("assetsNoCvAttached")}
            </Typography>
          )}

          {data?.hasTailoredCvText && (
            <Alert severity="info" sx={{ borderRadius: 2 }}>
              {t("assetsLegacyCvText")}
            </Alert>
          )}
          {createdCopy && <Alert severity="info">{t("assetsCopyCreatedHelp")}</Alert>}
        </Stack>
      </Shell>

      <ApplicationTailoringSection jobId={jobId} />
      {includePackages && <SubmittedPackagesSection jobId={jobId} />}
    </Stack>
  );
}

export function SubmittedPackagesSection({ jobId, allowCapture = true }: { jobId: number; allowCapture?: boolean }) {
  const titleId = useId();
  const viewTrigger = useRef<HTMLButtonElement | null>(null);
  const { language, t } = useI18n();
  const { data, error, loading, setData, setError, reload, isCurrent } = useAsset<SubmittedPackage[]>(
    () => applicationAssetsApi.submittedPackages(jobId),
    [jobId],
  );
  const [busy, setBusy] = useState(false);
  const [detail, setDetail] = useState<SubmittedPackageDetail | null>(null);
  const [detailBusy, setDetailBusy] = useState(false);
  const [downloadBusy, setDownloadBusy] = useState(false);
  const operation = useRef(false);
  const contentRef = useRef<HTMLDivElement>(null);
  const pending = busy || detailBusy || downloadBusy || loading;

  const capture = async () => {
    if (operation.current || loading || !data) return;
    operation.current = true;
    contentRef.current?.focus();
    setBusy(true);
    try {
      const created = await applicationAssetsApi.captureSubmittedPackage(jobId);
      if (!isCurrent()) return;
      setData([created, ...(data ?? [])]);
      setError(null);
    } catch (err) {
      if (isCurrent()) setError(assetError(err, "assetsPackageCaptureFailed"));
    } finally {
      operation.current = false;
      setBusy(false);
    }
  };

  const download = async (item: SubmittedPackage, attachment: SubmittedPackage["attachments"][number]) => {
    if (operation.current || loading || !data) return;
    operation.current = true;
    contentRef.current?.focus();
    setDownloadBusy(true);
    try {
      const blob = await applicationAssetsApi.downloadSubmittedAttachment(jobId, item.id, attachment.id);
      if (!isCurrent()) return;
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = attachment.fileName;
      anchor.click();
      URL.revokeObjectURL(url);
      setError(null);
    } catch (err) {
      if (isCurrent()) setError({ ...assetError(err, "assetsPackageDownloadFailed", true), retry: () => download(item, attachment) });
    } finally {
      operation.current = false;
      setDownloadBusy(false);
    }
  };

  const view = async (item: SubmittedPackage) => {
    if (operation.current || loading || !data) return;
    operation.current = true;
    contentRef.current?.focus();
    setDetailBusy(true);
    try {
      const next = await applicationAssetsApi.submittedPackage(jobId, item.id);
      if (!isCurrent()) return;
      setDetail(next);
      setError(null);
    } catch (err) {
      if (isCurrent()) setError({ ...assetError(err, "assetsPackageLoadFailed", true), retry: () => view(item) });
    } finally {
      operation.current = false;
      setDetailBusy(false);
    }
  };

  const material = (() => {
    if (!detail) return null;
    try { return JSON.parse(detail.applicationMaterialJson) as Record<string, unknown>; } catch { return null; }
  })();

  return (
    <Shell title={t("assetsSubmittedPackages")} subtitle={t("assetsSubmittedPackagesSubtitle")} loading={pending} error={error} available={data !== null} onRetry={reload} contentRef={contentRef}>
      <Stack spacing={1.5}>
        {allowCapture && <Button variant="contained" startIcon={<ArchiveOutlinedIcon />} disabled={pending} onClick={() => void capture()} sx={{ alignSelf: "flex-start" }}>
          {busy ? t("assetsPackageCapturing") : t("assetsPackageCapture")}
        </Button>}
        {(data?.length ?? 0) === 0 ? (
          <Typography variant="body2" color="text.secondary">{t("assetsNoSubmittedPackages")}</Typography>
        ) : data?.map((item) => (
          <Paper key={item.id} variant="outlined" sx={{ p: 1.5, borderRadius: 2 }}>
            <Stack spacing={1} sx={{ minWidth: 0 }}>
              <Stack direction={{ xs: "column", sm: "row" }} justifyContent="space-between" alignItems="flex-start" gap={1}>
                <Box>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>{t("assetsSubmittedPackageVersion", { version: item.version })}</Typography>
                  <Typography variant="caption" color="text.secondary">
                    {new Date(item.createdAtUtc).toLocaleString(language === "nb" ? "nb-NO" : "en")}
                  </Typography>
                </Box>
                <Stack direction="row" gap={0.5} flexWrap="wrap" sx={{ minWidth: 0, maxWidth: "100%", "& .MuiChip-root": { maxWidth: "100%", height: "auto", minHeight: 24 }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }}>
                  <Chip size="small" variant="outlined" color={item.hasCv ? "success" : "default"} label={item.hasCv ? `${item.cvVariantName ?? t("workspaceCv")} · v${item.cvVariantVersion ?? "—"}` : t("assetsPackageNoCv")} />
                  <Chip size="small" variant="outlined" color={item.hasCoverLetter ? "success" : "default"} label={item.hasCoverLetter ? t("workspaceCoverLetter") : t("assetsPackageNoCoverLetter")} />
                </Stack>
              </Stack>
              <Button size="small" variant="outlined" disabled={pending} onClick={(event) => { viewTrigger.current = event.currentTarget; void view(item); }} sx={{ alignSelf: "flex-start" }}>
                {t("assetsPackageView")}
              </Button>
              {item.attachments.map((attachment) => (
                <Button key={attachment.id} size="small" variant="text" disabled={pending} startIcon={<DownloadOutlinedIcon />} onClick={() => void download(item, attachment)} sx={{ alignSelf: "flex-start", maxWidth: "100%", overflowWrap: "anywhere", textAlign: "left" }}>
                  {attachment.fileName} · {(attachment.fileSize / 1024).toFixed(1)} KB
                </Button>
              ))}
            </Stack>
          </Paper>
        ))}
      </Stack>
      <Dialog open={detail !== null} onClose={() => setDetail(null)} fullWidth maxWidth="lg" aria-labelledby={titleId} slotProps={{ transition: { onExited: () => viewTrigger.current?.focus() } }}>
        <DialogTitle id={titleId}>
          {detail ? t("assetsSubmittedPackageVersion", { version: detail.summary.version }) : t("assetsSubmittedPackages")}
        </DialogTitle>
        <DialogContent dividers role="region" tabIndex={0} aria-labelledby={titleId}>
          <Alert severity="info" sx={{ mb: 2 }}>{t("workspaceFrozenHelp")}</Alert>
          <Stack spacing={2.5}>
            {detail?.renderedCvHtml ? (
              <Box>
                <Typography component="h3" variant="subtitle2" gutterBottom>{t("workspaceCv")}</Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 1, overflowWrap: "anywhere" }}>{detail.summary.cvVariantName} · {t("assetsThemeVersion", { theme: detail.summary.cvThemeId ?? "—", version: detail.summary.cvVariantVersion ?? "—" })}</Typography>
                <Box component="iframe" title={t("assetsPackageCvPreview")} srcDoc={detail.renderedCvHtml} sandbox="" sx={{ width: "100%", height: { xs: 520, md: 760 }, border: 1, borderColor: "divider", bgcolor: "white" }} />
              </Box>
            ) : <Alert severity="info">{t("assetsPackageNoCv")}</Alert>}
            <Box>
              <Typography component="h3" variant="subtitle2" gutterBottom>{t("workspaceCoverLetter")}</Typography>
              <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
                {detail?.coverLetterText || t("assetsPackageNoCoverLetter")}
              </Typography>
            </Box>
            {material && ["TailoredCvText", "RecruiterMessageDraft"].map((key) => typeof material[key] === "string" && material[key] ? (
              <Box key={key}>
                <Typography component="h3" variant="subtitle2">{t(`assetsPackage${key}` as "assetsPackageTailoredCvText")}</Typography>
                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{String(material[key])}</Typography>
              </Box>
            ) : null)}
            {material && typeof material.Notes === "string" && [
              [t("workspaceNotes"), removeApplicationAnswerDraft(material.Notes)],
              [t("assetsApplicationAnswer"), extractApplicationAnswerDraft(material.Notes)],
            ].map(([label, content]) => content ? <Box key={label}>
              <Typography component="h3" variant="subtitle2">{label}</Typography>
              <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{content}</Typography>
            </Box> : null)}
          </Stack>
        </DialogContent>
        <DialogActions><Button onClick={() => setDetail(null)}>{t("close")}</Button></DialogActions>
      </Dialog>
    </Shell>
  );
}

// ---------- Tailoring ----------

const tailoringLabels = new Map<string, [TranslationKey, TranslationKey]>([
  ["highlight-skills", ["assetsTailoringHighlightTitle", "assetsTailoringHighlightDetail"]],
  ["prioritise-experience", ["assetsTailoringExperienceTitle", "assetsTailoringExperienceDetail"]],
  ["emphasise-projects", ["assetsTailoringProjectsTitle", "assetsTailoringProjectsDetail"]],
  ["career-evidence", ["assetsTailoringEvidenceTitle", "assetsTailoringEvidenceDetail"]],
  ["include-keywords", ["assetsTailoringKeywordsTitle", "assetsTailoringKeywordsDetail"]],
  ["gaps", ["assetsTailoringGapsTitle", "assetsTailoringGapsDetail"]],
]);

export function ApplicationTailoringSection({ jobId }: { jobId: number }) {
  const { t } = useI18n();
  const { data, error, loading, reload } = useAsset<TailoringPlan>(
    () => applicationAssetsApi.tailoring(jobId),
    [jobId],
  );

  return (
    <Shell
      title={t("assetsTailoring")}
      subtitle={t("assetsTailoringSubtitle")}
      loading={loading}
      error={error}
      available={data !== null}
      onRetry={reload}
    >
      <Stack spacing={2}>
        {data && !data.hasCareerProfile && (
          <Alert severity="info" sx={{ borderRadius: 2 }}>
            {t("assetsBuildProfile")}
          </Alert>
        )}
        {data && !data.hasJobDescription && (
          <Alert severity="info" sx={{ borderRadius: 2 }}>
            {t("assetsAddAdvert")}
          </Alert>
        )}

        {(data?.suggestions.length ?? 0) === 0 ? (
          <Typography variant="body2" color="text.secondary">
            {t("assetsNoSuggestions")}
          </Typography>
        ) : (
          (data?.suggestions ?? []).map((s) => {
            const labels = tailoringLabels.get(s.kind);
            return (
            <Box key={s.kind}>
              <Typography variant="body2" sx={{ fontWeight: 700 }}>{labels ? t(labels[0]) : s.title}</Typography>
              {s.detail && (
                <Typography variant="caption" color="text.secondary">{labels ? t(labels[1]) : s.detail}</Typography>
              )}
              <Stack direction="row" flexWrap="wrap" gap={0.5} sx={{ mt: 0.75 }}>
                {s.items.map((item) => (
                  <Chip key={item} size="small" label={item} variant="outlined" />
                ))}
              </Stack>
            </Box>
          ); })
        )}
      </Stack>
    </Shell>
  );
}

// ---------- Cover letter ----------

const historySources = new Map<string, TranslationKey>([
  ["legacy", "historySourceLegacy"],
  ["manual", "historySourceManual"], ["ai", "historySourceAi"],
  ["template", "historySourceTemplate"], ["restore", "historySourceRestore"],
]);
const historyAiActions = new Map<string, TranslationKey>([
  ["generate", "coverActionGenerate"], ["regenerate", "coverActionRegenerate"],
  ["improve", "coverActionImprove"], ["shorten", "coverActionShorten"],
  ["expand", "coverActionExpand"], ["professional", "coverActionProfessional"],
  ["natural", "coverActionNatural"], ["grammar", "coverActionGrammar"],
  ["tone", "coverAiTone"], ["tailor", "coverActionTailor"],
]);

const COVER_LETTER_TEMPLATES = {
  en: `Dear Hiring Manager,

I am writing to apply for the [role] position at [company]. [One sentence on why this company, specifically.]

In my current role I [the most relevant thing you have done, with a concrete outcome]. [A second example that matches what the advert asks for.]

[Why you want this job, in your own words.]

I would welcome the chance to talk it through.

Kind regards,
[Your name]`,
  nb: `Kjære rekrutteringsansvarlig,

Jeg søker med dette på stillingen som [stilling] hos [selskap]. [Én konkret setning om hvorfor akkurat dette selskapet.]

I min nåværende rolle har jeg [det mest relevante du har gjort, med et konkret resultat]. [Et annet eksempel som samsvarer med det stillingsannonsen etterspør.]

[Hvorfor du ønsker denne stillingen, med egne ord.]

Jeg ser frem til muligheten til å utdype dette i et intervju.

Med vennlig hilsen
[Navnet ditt]`,
} as const;

export function ApplicationCoverLetterSection({ jobId, onDirtyChange }: { jobId: number; onDirtyChange?: (dirty: boolean) => void }) {
  const [aiToolbarHost, setAiToolbarHost] = useState<HTMLDivElement | null>(null);
  const { language, t } = useI18n();
  const workspaceId = useId();
  const wide = useMediaQuery(useTheme().breakpoints.up("md"));
  const [pane, setPane] = useState("write");
  const { confirm } = useConfirm();
  const { data, error, loading, setData, setError, reload, isCurrent } = useAsset<CoverLetter>(
    () => applicationAssetsApi.coverLetter(jobId),
    [jobId],
  );
  const [draft, setDraft] = useState<string | null>(null);
  const [settingsDraft, setSettingsDraft] = useState<CoverLetterDocumentSettings | null>(null);
  const [draftAiAction, setDraftAiAction] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const busyRef = useRef(false);
  const contentRef = useRef<HTMLDivElement>(null);

  // The textarea is only seeded from the server until the user starts typing, so a reload never
  // clobbers unsaved edits.
  const text = draft ?? data?.text ?? "";
  const settings = settingsDraft ?? data?.documentSettings;
  const settingsDirty = settingsDraft !== null && JSON.stringify(settingsDraft) !== JSON.stringify(data?.documentSettings);
  const dirty = (draft !== null && draft !== (data?.text ?? "")) || settingsDirty;

  useEffect(() => {
    onDirtyChange?.(dirty);
    return () => onDirtyChange?.(false);
  }, [dirty, onDirtyChange]);

  const save = async (value: string, source = "manual", aiAction?: string, exportPdf = false) => {
    if (busyRef.current || loading || !data) return;
    busyRef.current = true;
    contentRef.current?.focus();
    setBusy(true);
    try {
      const next = !exportPdf || dirty ? await applicationAssetsApi.saveCoverLetter(jobId, value, data.revision, source, aiAction, settingsDirty ? settings : undefined) : data;
      if (!isCurrent()) return;
      setData(next);
      setDraft(null);
      setSettingsDraft(null);
      setDraftAiAction(null);
      setError(null);
      if (exportPdf) {
        if (!Number.isInteger(next.revision) || next.revision <= 0) throw new Error("Missing committed job revision");
        const blob = await applicationAssetsApi.exportCoverLetter(jobId, next.revision);
        if (!isCurrent()) return;
        const url = URL.createObjectURL(blob);
        const anchor = document.createElement("a");
        anchor.href = url; anchor.download = "cover-letter.pdf"; anchor.click(); URL.revokeObjectURL(url);
      }
    } catch (err) {
      if (isCurrent()) setError(assetError(err, exportPdf ? "letterExportFailed" : "assetsCoverSaveFailed"));
    } finally {
      busyRef.current = false;
      setBusy(false);
    }
  };

  const restore = async (version: number) => {
    if (busyRef.current || loading || !data) return;
    busyRef.current = true;
    try {
      if (dirty) {
        setConfirming(true);
        const accepted = await confirm({
          title: t("assetsRestoreDiscardTitle"), message: t("assetsRestoreDiscardMessage"),
          confirmLabel: t("assetsRestoreConfirm"), cancelLabel: t("cancel"), destructive: true,
        });
        setConfirming(false);
        if (!accepted) return;
      }
      if (!isCurrent()) return;
      contentRef.current?.focus();
      setBusy(true);
      const next = await applicationAssetsApi.restoreCoverLetter(jobId, version, data.revision);
      if (!isCurrent()) return;
      setData(next);
      setDraft(null);
      setSettingsDraft(null);
      setDraftAiAction(null);
      setError(null);
    } catch (err) {
      if (isCurrent()) setError(assetError(err, "assetsCoverRestoreFailed"));
    } finally {
      busyRef.current = false;
      setBusy(false);
      setConfirming(false);
    }
  };

  return (
    <Stack spacing={2}>
      <Shell
        title={t("workspaceCoverLetter")}
        subtitle={t("assetsCoverSubtitle")}
        loading={loading || busy}
        error={error}
        available={data !== null}
        onRetry={reload}
        contentRef={contentRef}
      >
        <Stack spacing={2}>
          {!wide && <Tabs value={pane} onChange={(_, value) => setPane(value)} aria-label={t("assetsLetterWorkspace")} variant="fullWidth">
            <Tab value="write" label={t("assetsLetterWrite")} id={`${workspaceId}-write`} aria-controls={`${workspaceId}-write-panel`} />
            <Tab value="preview" label={t("assetsLetterPreview")} id={`${workspaceId}-preview`} aria-controls={`${workspaceId}-preview-panel`} />
          </Tabs>}
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: 2 }}>
            <Box hidden={!wide && pane !== "write"} id={`${workspaceId}-write-panel`} role={wide ? undefined : "tabpanel"} aria-labelledby={wide ? undefined : `${workspaceId}-write`} sx={{ minWidth: 0 }}>
              {settings && <CoverLetterDocumentFields settings={settings} disabled={busy || confirming || loading} onChange={next => { if (!busyRef.current) setSettingsDraft(next); }} />}
              <RichTextField
                minRows={12}
                label={t("jobDetailsCoverLetter")}
                value={text}
                disabled={busy || confirming || loading}
                onChange={value => { if (!busyRef.current) setDraft(value); }}
                placeholder={t("assetsCoverPlaceholder")}
              />
              <div ref={setAiToolbarHost} />
            </Box>
            <Box hidden={!wide && pane !== "preview"} id={`${workspaceId}-preview-panel`} role={wide ? undefined : "tabpanel"} aria-labelledby={wide ? undefined : `${workspaceId}-preview`} sx={{ minWidth: 0 }}>
              {settings && <Box sx={{ mb: 2 }}><CoverLetterDocumentPreview key={jobId} jobId={jobId} text={text} settings={settings} active={wide || pane === "preview"} /></Box>}
              {!settings && <Paper variant="outlined" role="region" aria-labelledby={`${workspaceId}-preview-title`} sx={{ p: 2, borderRadius: 2, overflowWrap: "anywhere" }}>
                <Typography id={`${workspaceId}-preview-title`} component="h4" variant="subtitle2">{t("assetsLetterTextPreview")}</Typography>
                <Typography variant="caption" color="text.secondary" component="p" sx={{ mb: 2 }}>{t("assetsLetterTextPreviewHelp")}</Typography>
                {text.trim() ? <Markdown text={text} /> : <Typography variant="body2" color="text.secondary">{t("assetsLetterTextPreviewEmpty")}</Typography>}
              </Paper>}
            </Box>
          </Box>

          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
            <Button variant="contained" disabled={busy || confirming || loading || !dirty} onClick={() => save(text, draftAiAction ? "ai" : "manual", draftAiAction ?? undefined)}>
              {t("save")}
            </Button>
            <Button disabled={busy || confirming || loading || !dirty} onClick={() => { setDraft(null); setSettingsDraft(null); setDraftAiAction(null); }}>
              {t("assetsDiscardChanges")}
            </Button>
            {settings && <Button variant="outlined" startIcon={<DownloadOutlinedIcon />} disabled={busy || confirming || loading} onClick={() => void save(text, draftAiAction ? "ai" : "manual", draftAiAction ?? undefined, true)}>{t("letterExportPdf")}</Button>}
            <Button
              disabled={busy || confirming || loading || text.trim().length > 0}
              onClick={() => setDraft(COVER_LETTER_TEMPLATES[language])}
            >
              {t("assetsStartTemplate")}
            </Button>
            {dirty && (
              <Chip size="small" color="warning" variant="outlined" label={t("assetsUnsavedChanges")} />
            )}
          </Stack>
        </Stack>
      </Shell>

      <CoverLetterAiAssistant
        jobId={jobId}
        documentLanguage={settings?.language}
        onDocumentLanguageChange={settings ? next => setSettingsDraft({ ...settings, language: next }) : undefined}
        toolbarHost={aiToolbarHost}
        currentText={text}
        disabled={busy || confirming || loading || !data}
        onApply={(value, aiAction) => { if (!busyRef.current && !loading && data) { setDraft(value); setDraftAiAction(aiAction); } }}
      />

      <Shell title={t("assetsVersionHistory")} loading={loading} error={null} available={data !== null}>
        {(data?.versions.length ?? 0) === 0 ? (
          <Typography variant="body2" color="text.secondary">
            {t("assetsNoVersions")}
          </Typography>
        ) : (
          <Stack spacing={0.5}>
            {(data?.versions ?? []).map((v) => {
              const sourceKey = historySources.get(v.source);
              const actionKey = historyAiActions.get(v.aiAction ?? "");
              const source = sourceKey ? t(sourceKey) : v.source;
              const action = actionKey ? t(actionKey) : v.aiAction;
              return (
              <Stack
                key={v.version}
                direction="row"
                alignItems="center"
                justifyContent="space-between"
                sx={{ py: 0.5 }}
              >
                <Box sx={{ minWidth: 0 }}>
                  <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap">
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>v{v.version}</Typography>
                    <Chip size="small" variant="outlined" label={action ? `${source} · ${action}` : source} />
                    {v.isCurrent && <Chip size="small" color="primary" variant="outlined" label={t("assetsCurrent")} />}
                  </Stack>
                  <Typography variant="caption" color="text.secondary">
                    {new Date(v.createdAtUtc).toLocaleString(language === "nb" ? "nb-NO" : "en")} · {t("assetsCharacterCount", { count: v.length })}
                  </Typography>
                </Box>
                {!v.isCurrent && (
                  <Tooltip describeChild title={t("assetsRestoreVersion")}>
                    <span>
                      <IconButton
                        size="small"
                        disabled={busy || loading}
                        aria-label={t("assetsRestoreVersionNumber", { version: v.version })}
                        onClick={() => restore(v.version)}
                      >
                        <RestoreIcon fontSize="small" />
                      </IconButton>
                    </span>
                  </Tooltip>
                )}
              </Stack>
            ); })}
          </Stack>
        )}
      </Shell>
    </Stack>
  );
}

const COVER_LETTER_ACTIONS = [
  { key: "generate", labelKey: "coverActionGenerate" },
  { key: "regenerate", labelKey: "coverActionRegenerate" },
  { key: "improve", labelKey: "coverActionImprove" },
  { key: "shorten", labelKey: "coverActionShorten" },
  { key: "expand", labelKey: "coverActionExpand" },
  { key: "professional", labelKey: "coverActionProfessional" },
  { key: "natural", labelKey: "coverActionNatural" },
  { key: "grammar", labelKey: "coverActionGrammar" },
  { key: "tailor", labelKey: "coverActionTailor" },
] as const;

function CoverLetterAiAssistant({ jobId, currentText, disabled, onApply, toolbarHost, documentLanguage, onDocumentLanguageChange }: { jobId: number; currentText: string; disabled: boolean; onApply: (text: string, action: string) => void; toolbarHost: HTMLDivElement | null; documentLanguage?: "en" | "nb-NO"; onDocumentLanguageChange?: (language: "en" | "nb-NO") => void }) {
  const labelId = useId();
  const { canUseAi } = useAccountPlan();
  const { language: uiLanguage, t } = useI18n();
  const { data: cv, error: cvError, loading: loadingCv, reload, isCurrent } = useAsset<ApplicationCv>(() => applicationAssetsApi.cv(jobId), [jobId]);
  const [action, setAction] = useState("generate");
  const [mode, setMode] = useState("professional");
  const [language, setLanguage] = useState<"en" | "nb-NO">(() => uiLanguage === "nb" ? "nb-NO" : "en");
  const [instructions, setInstructions] = useState("");
  const [suggestion, setSuggestion] = useState<{ id: number; text: string; action: string } | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<AssetError | null>(null);
  const busyRef = useRef(false);
  const contentRef = useRef<HTMLDivElement>(null);
  const disabledRef = useRef(disabled);
  disabledRef.current = disabled;
  useEffect(() => { if (documentLanguage) setLanguage(documentLanguage); }, [documentLanguage]);

  const requestSequence = useRef(0);
  useEffect(() => {
    requestSequence.current += 1;
    setSuggestion(null);
    busyRef.current = false;
    setBusy(false);
    return () => { requestSequence.current += 1; };
  }, [currentText, jobId, language, cv?.attachedVariantId, cv?.attachedVersion, canUseAi]);

  const generate = async (requestedAction = action) => {
    if (busyRef.current || disabled || loadingCv || !canUseAi || !cv?.attachedVariantId) return;
    const request = ++requestSequence.current;
    busyRef.current = true;
    contentRef.current?.focus();
    setBusy(true);
    setError(null);
    try {
      const result = await aiWorkspaceApi.generate(jobId, {
        module: "cover-letter",
        mode,
        action: requestedAction,
        targetLanguage: language,
        currentText: currentText.trim() || undefined,
        extraContext: instructions.trim() || undefined,
      });
      if (!isCurrent() || request !== requestSequence.current) return;
      const text = result.result.text?.trim() ?? "";
      setSuggestion(text ? { id: result.id, text, action: requestedAction } : null);
    } catch (err) {
      if (isCurrent() && request === requestSequence.current) {
        const sourceRequired = (err as { response?: { data?: unknown } })?.response?.data === "cover_letter_source_required";
        const sourceChanged = (err as { response?: { data?: { code?: string } } })?.response?.data?.code === "cover_letter_source_changed";
        setError(sourceRequired || sourceChanged ? { kind: "error", message: "", messageKey: sourceChanged ? "coverAiSourceChanged" : "coverAiSourceRequired", retryable: false } : assetError(err, "coverAiGenerateFailed"));
      }
    } finally {
      if (request === requestSequence.current) { busyRef.current = false; setBusy(false); }
    }
  };

  const applySuggestion = async () => {
    if (!suggestion || busyRef.current || disabledRef.current || loadingCv) return;
    if (!Number.isSafeInteger(suggestion.id) || suggestion.id <= 0) {
      setSuggestion(null);
      setError({ kind: "error", message: "", messageKey: "coverAiSourceChanged", retryable: false });
      return;
    }
    const request = ++requestSequence.current;
    busyRef.current = true;
    setBusy(true);
    setError(null);
    try {
      await aiWorkspaceApi.validateSource(jobId, suggestion.id);
      if (!isCurrent() || request !== requestSequence.current || disabledRef.current) return;
      onApply(suggestion.text, suggestion.action);
      setSuggestion(null);
    } catch (err) {
      if (isCurrent() && request === requestSequence.current) {
        setSuggestion(null);
        const sourceChanged = (err as { response?: { data?: { code?: string } } })?.response?.data?.code === "cover_letter_source_changed";
        setError(sourceChanged ? { kind: "error", message: "", messageKey: "coverAiSourceChanged", retryable: false } : assetError(err, "coverAiGenerateFailed"));
      }
    } finally {
      if (request === requestSequence.current) { busyRef.current = false; setBusy(false); }
    }
  };

  const hasCv = !!cv?.attachedVariantId;
  const toolbar = <Stack direction="row" gap={0.5} flexWrap="wrap">
    {([['improve', 'cvAiImprove'], ['generate', 'cvAiSuggestContent'], ['grammar', 'cvAiGrammarCheck'], ['shorten', 'cvAiShorter']] as const).map(([key, label]) => (
      <Button key={key} size="small" disabled={!canUseAi || !hasCv || busy || disabled || loadingCv || (key !== 'generate' && !currentText.trim())}
        onClick={() => { setAction(key); void generate(key); }}>{t(label)}</Button>
    ))}
    {busy && <Button size="small" onClick={() => { requestSequence.current += 1; busyRef.current = false; setBusy(false); setSuggestion(null); }}>{t("cancel")}</Button>}
  </Stack>;
  return (
    <Shell
      title={t("coverAiTitle")}
      subtitle={t("coverAiSubtitle")}
      loading={loadingCv || busy}
      error={cvError}
      available={cv !== null}
      onRetry={reload}
      contentRef={contentRef}
    >
      <Stack spacing={2}>
        {toolbarHost ? createPortal(toolbar, toolbarHost) : toolbar}
        {!hasCv ? (
          <Alert severity="info">{t("coverAiSelectCv")}</Alert>
        ) : (
          <Alert severity="success" variant="outlined" sx={{ py: 0.5 }}>
            {t("coverAiUsing", { name: cv?.attachedVariantName ?? "" })}
          </Alert>
        )}
        <Stack direction={{ xs: "column", sm: "row" }} spacing={1.5}>
          <FormControl size="small" sx={{ minWidth: 180 }}>
            <InputLabel id={`${labelId}-coverAiAction`}>{t("coverAiAction")}</InputLabel>
            <Select disabled={busy || disabled || loadingCv} labelId={`${labelId}-coverAiAction`} label={t("coverAiAction")} value={action} onChange={(event) => setAction(event.target.value)}>
              {COVER_LETTER_ACTIONS.map((item) => <MenuItem key={item.key} value={item.key}>{t(item.labelKey)}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 160 }}>
            <InputLabel id={`${labelId}-coverAiTone`}>{t("coverAiTone")}</InputLabel>
            <Select disabled={busy || disabled || loadingCv} labelId={`${labelId}-coverAiTone`} label={t("coverAiTone")} value={mode} onChange={(event) => setMode(event.target.value)}>
              {[
                ["professional", "coverToneProfessional"], ["friendly", "coverToneFriendly"], ["short", "coverToneShort"],
                ["detailed", "coverToneDetailed"], ["modern", "coverToneModern"], ["traditional", "coverToneTraditional"],
              ].map(([value, key]) => <MenuItem key={value} value={value}>{t(key as any)}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 190 }}>
            <InputLabel id={`${labelId}-coverAiDocumentLanguage`}>{t("coverAiDocumentLanguage")}</InputLabel>
            <Select disabled={busy || disabled || loadingCv} labelId={`${labelId}-coverAiDocumentLanguage`} label={t("coverAiDocumentLanguage")} value={language} onChange={(event) => { const next = event.target.value as "en" | "nb-NO"; setLanguage(next); onDocumentLanguageChange?.(next); }}>
              <MenuItem value="en">{t("languageEnglish")}</MenuItem>
              <MenuItem value="nb-NO">{t("languageNorwegianBokmal")}</MenuItem>
            </Select>
          </FormControl>
        </Stack>
        <TextField
          label={t("coverAiAdditionalInstructions")}
          placeholder={t("coverAiInstructionsPlaceholder")}
          value={instructions}
          disabled={busy || disabled || loadingCv}
          onChange={(event) => setInstructions(event.target.value)}
          multiline
          minRows={2}
          fullWidth
        />
        {error && <Alert severity="error" action={<Button color="inherit" size="small" disabled={busy || disabled || loadingCv} onClick={() => void generate()}>{t("retry")}</Button>}>{error.message || t(error.messageKey)}</Alert>}
        <Button
          variant="contained"
          startIcon={<AutoFixHighIcon />}
          disabled={!canUseAi || !hasCv || busy || disabled || loadingCv}
          onClick={() => void generate()}
          sx={{ alignSelf: "flex-start" }}
        >
          {busy ? t("interviewAiGenerating") : canUseAi ? t(COVER_LETTER_ACTIONS.find((item) => item.key === action)?.labelKey ?? "coverActionGenerate") : t("interviewAiProRequired")}
        </Button>

        {suggestion && (
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 1.5 }}>
            <Paper variant="outlined" sx={{ p: 2, minWidth: 0 }}>
              <Typography variant="overline" color="text.secondary">{t("coverAiCurrent")}</Typography>
              <Typography variant="body2" sx={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
                {currentText || t("coverAiNoDraft")}
              </Typography>
            </Paper>
            <Paper variant="outlined" sx={{ p: 2, minWidth: 0, borderColor: "primary.main" }}>
              <Typography variant="overline" color="primary">{t("coverAiSuggestion")}</Typography>
              <TextField label={t("coverAiSuggestion")} fullWidth multiline minRows={3} value={suggestion.text} disabled={busy || disabled}
                onChange={event => setSuggestion({ ...suggestion, text: event.target.value })} />
              <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
                <Button size="small" variant="contained" disabled={busy || disabled || loadingCv || !suggestion.text.trim()} onClick={() => void applySuggestion()}>{t("coverAiApply")}</Button>
                <Button size="small" disabled={busy || disabled || loadingCv} onClick={() => setSuggestion(null)}>{t("coverAiReject")}</Button>
              </Stack>
            </Paper>
          </Box>
        )}
      </Stack>
    </Shell>
  );
}

// ---------- Application answer and recruiter message ----------

type PackageDrafts = { applicationAnswer: string; recruiterMessage: string };

export function ApplicationPackageDraftsSection({
  jobId,
  initialApplicationAnswer,
  initialRecruiterMessage,
  initialRevision,
  onSaved,
  onDirtyChange,
}: {
  jobId: number;
  initialApplicationAnswer: string;
  initialRecruiterMessage: string;
  initialRevision: number;
  onSaved?: () => void;
  onDirtyChange?: (dirty: boolean) => void;
}) {
  const { t } = useI18n();
  const initial = { applicationAnswer: initialApplicationAnswer, recruiterMessage: initialRecruiterMessage };
  const [saved, setSaved] = useState<PackageDrafts>(initial);
  const [revision, setRevision] = useState(initialRevision);
  const [draft, setDraft] = useState<PackageDrafts | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<AssetError | null>(null);
  const busyRef = useRef(false);
  const contentRef = useRef<HTMLDivElement>(null);
  const active = useRef(true);
  useEffect(() => { active.current = true; return () => { active.current = false; }; }, []);

  useEffect(() => {
    if (draft === null) { setSaved(initial); setRevision(initialRevision); }
    // `draft` is deliberately excluded: a parent refresh must never overwrite in-progress edits.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [jobId, initialApplicationAnswer, initialRecruiterMessage, initialRevision]);

  const value = draft ?? saved;
  const dirty = draft !== null && (
    draft.applicationAnswer !== saved.applicationAnswer ||
    draft.recruiterMessage !== saved.recruiterMessage
  );

  useEffect(() => {
    onDirtyChange?.(dirty);
    return () => onDirtyChange?.(false);
  }, [dirty, onDirtyChange]);
  const update = (patch: Partial<PackageDrafts>) => setDraft({ ...value, ...patch });

  const save = async () => {
    if (busyRef.current) return;
    busyRef.current = true;
    contentRef.current?.focus();
    setBusy(true);
    try {
      const nextRevision = await applicationAssetsApi.saveApplicationDrafts(jobId, value.applicationAnswer, value.recruiterMessage, revision);
      if (!active.current) return;
      setRevision(nextRevision);
      setSaved(value);
      setDraft(null);
      setError(null);
      onSaved?.();
    } catch (err) {
      if (active.current) setError(assetError(err, "assetsDraftsSaveFailed"));
    } finally {
      busyRef.current = false;
      setBusy(false);
    }
  };

  return (
    <Shell
      title={t("assetsApplicationDrafts")}
      subtitle={t("assetsApplicationDraftsSubtitle")}
      loading={busy}
      error={error}
      contentRef={contentRef}
    >
      <Stack spacing={2}>
        <RichTextField
          minRows={6}
          label={t("assetsApplicationAnswer")}
          value={value.applicationAnswer}
          disabled={busy}
          onChange={(applicationAnswer) => update({ applicationAnswer })}
          placeholder={t("assetsApplicationAnswerPlaceholder")}
        />
        <RichTextField
          minRows={4}
          label={t("assetsRecruiterMessage")}
          value={value.recruiterMessage}
          disabled={busy}
          onChange={(recruiterMessage) => update({ recruiterMessage })}
          placeholder={t("assetsRecruiterMessagePlaceholder")}
        />
        <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap alignItems="center">
          <Button variant="contained" disabled={busy || !dirty} onClick={save}>
            {t("assetsSaveDrafts")}
          </Button>
          <Button disabled={busy || !dirty} onClick={() => setDraft(null)}>
            {t("assetsDiscardChanges")}
          </Button>
          {dirty && <Chip size="small" color="warning" variant="outlined" label={t("assetsUnsavedChanges")} />}
        </Stack>
      </Stack>
    </Shell>
  );
}