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

import {
  Autocomplete,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  List,
  ListItemButton,
  ListItemText,
  Paper,
  Tab,
  Tabs,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
import MailOutlineIcon from "@mui/icons-material/MailOutline";
import SearchIcon from "@mui/icons-material/Search";
import { IconButton } from "@mui/material";

import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import {
  CorrespondenceMessage,
  GmailImportMessageResult,
  GmailImportThreadResult,
  GmailJobMatchesResponse,
  GmailRelinkResult,
  GmailStatus,
  GmailThreadRefreshResult,
  GmailUnlinkResult,
} from "../types";
import { useDialogActions } from "../dialogs";
import { useI18n } from "../i18n/I18nProvider";
import ViewStateNotice from "./ViewStateNotice";

function parseRawEmail(raw: string): { subject?: string; date?: string; from?: string; to?: string; body: string } {
  const lines = raw.replace(/\r\n/g, "\n").split("\n");
  const headers: Record<string, string> = {};
  let i = 0;

  for (; i < lines.length; i++) {
    const line = lines[i];
    if (line.trim() === "") {
      i++;
      break;
    }

    const idx = line.indexOf(":");
    if (idx <= 0) continue;
    const k = line.slice(0, idx).trim().toLowerCase();
    const v = line.slice(idx + 1).trim();
    headers[k] = headers[k] ? `${headers[k]} ${v}` : v;
  }

  const body = lines.slice(i).join("\n").trim();
  const dateRaw = headers["date"];
  let iso: string | undefined;
  if (dateRaw) {
    const d = new Date(dateRaw);
    if (!Number.isNaN(+d)) iso = d.toISOString();
  }

  return { subject: headers["subject"], from: headers["from"], to: headers["to"], date: iso, body };
}

type JobChoice = { id: number; jobTitle: string; companyName: string };

export type CorrespondenceJobContext = {
  companyName?: string | null;
  recruiterEmail?: string | null;
  jobTitle?: string | null;
};

export function buildSuggestedCorrespondenceQueries(
  context: CorrespondenceJobContext,
  subjects: Array<string | null | undefined>,
  labels: { recruiterMailbox: string; companyAndRole: string; companyMail: string; subject: string } = {
    recruiterMailbox: "Recruiter mailbox",
    companyAndRole: "Company + role",
    companyMail: "Company mail",
    subject: "Subject",
  },
) {
  const uniqueSubjects = Array.from(new Set(subjects.filter(Boolean) as string[])).slice(0, 2);
  const companyName = context.companyName?.trim();
  const recruiterEmail = context.recruiterEmail?.trim();
  const jobTitle = context.jobTitle?.trim();

  return [
    recruiterEmail ? { label: labels.recruiterMailbox, value: `(from:${recruiterEmail} OR to:${recruiterEmail}) newer_than:365d` } : null,
    companyName && jobTitle ? { label: labels.companyAndRole, value: `"${companyName}" "${jobTitle}" newer_than:365d` } : null,
    companyName ? { label: labels.companyMail, value: `"${companyName}" (application OR interview OR recruiter) newer_than:365d` } : null,
    ...uniqueSubjects.map((subject) => ({ label: `${labels.subject}: ${subject}`, value: `subject:"${subject}" newer_than:365d` })),
  ].filter(Boolean).slice(0, 6) as Array<{ label: string; value: string }>;
}

export default function Correspondence({ jobId, jobContext }: { jobId: number; jobContext: CorrespondenceJobContext }) {
  const theme = useTheme();
  const { toast } = useToast();
  const { language, t } = useI18n();
  const { confirmAction } = useDialogActions();
  const formatConfidence = (value: string) => {
    if (value === "high") return t("correspondenceConfidenceHigh");
    if (value === "medium") return t("correspondenceConfidenceMedium");
    if (value === "low") return t("correspondenceConfidenceLow");
    return t("correspondenceConfidenceUnknown");
  };
  const formatReasonLabel = (label: string) => {
    if (label === "company") return t("company");
    if (label === "recruiterEmail") return t("correspondenceRecruiterEmail");
    if (label === "recruiter") return t("correspondenceRecruiter");
    if (label === "jobTitle") return t("correspondenceJobTitle");
    if (label === "existingSubject") return t("correspondenceExistingSubject");
    if (label === "recency") return t("correspondenceRecent");
    if (label === "status") return t("correspondenceStatus");
    return label;
  };
  const [messages, setMessages] = useState<CorrespondenceMessage[]>([]);
  const [messagesLoading, setMessagesLoading] = useState(true);
  const [messagesError, setMessagesError] = useState<string | null>(null);
  const [from, setFrom] = useState<"Me" | "Company">("Me");
  const [text, setText] = useState("");
  const scrollRef = useRef<HTMLDivElement | null>(null);

  const [importOpen, setImportOpen] = useState(false);
  const [importTab, setImportTab] = useState(0);
  const [rawEmail, setRawEmail] = useState("");

  const [gmailStatus, setGmailStatus] = useState<GmailStatus | null>(null);
  const [gmailLoading, setGmailLoading] = useState(false);
  const [gmailQuery, setGmailQuery] = useState("");
  const [gmailMatches, setGmailMatches] = useState<GmailJobMatchesResponse | null>(null);
  const [gmailMatchesLoading, setGmailMatchesLoading] = useState(false);
  const [linkedThreadRefresh, setLinkedThreadRefresh] = useState<GmailThreadRefreshResult | null>(null);
  const [linkedThreadRefreshLoading, setLinkedThreadRefreshLoading] = useState(false);
  const [importingMessageId, setImportingMessageId] = useState<string | null>(null);
  const [importingThreadId, setImportingThreadId] = useState<string | null>(null);
  const [availableJobs, setAvailableJobs] = useState<JobChoice[]>([]);
  const [jobChoiceQuery, setJobChoiceQuery] = useState("");
  const [jobChoicesLoading, setJobChoicesLoading] = useState(false);
  const [manageThreadId, setManageThreadId] = useState<string | null>(null);
  const [manageTargetJobId, setManageTargetJobId] = useState<number>(jobId);
  const [manageNote, setManageNote] = useState("");
  const [manageSaving, setManageSaving] = useState(false);
  const autoRefreshKeyRef = useRef<string | null>(null);

  const load = useCallback(async () => {
    setMessagesLoading(true);
    try {
      const res = await api.get<CorrespondenceMessage[]>(`/correspondence/${jobId}`);
      setMessages(res.data);
      setMessagesError(null);
    } catch (error) {
      setMessagesError(getApiErrorMessage(error, t("correspondenceLoadFailed")));
      throw error; // Existing mutation callers still handle their own operation failure.
    } finally {
      setMessagesLoading(false);
    }
  }, [jobId, t]);

  const loadGmailStatus = useCallback(async () => {
    try {
      setGmailLoading(true);
      const res = await api.get<GmailStatus>("/gmail/status");
      setGmailStatus(res.data);
    } catch {
      setGmailStatus({ connected: false });
    } finally {
      setGmailLoading(false);
    }
  }, []);

  const loadGmailMatches = useCallback(async (queryOverride?: string) => {
    try {
      setGmailMatchesLoading(true);
      const res = await api.get<GmailJobMatchesResponse>("/gmail/job-candidates", {
        params: {
          jobApplicationId: jobId,
          queryOverride: queryOverride?.trim() || undefined,
          maxResultsPerQuery: 6,
        },
      });
      setGmailMatches(res.data);
    } catch (error: any) {
      toast(getApiErrorMessage(error, t("correspondenceLoadSuggestionsFailed")), "error");
    } finally {
      setGmailMatchesLoading(false);
    }
  }, [jobId, t, toast]);

  const loadAvailableJobs = useCallback(async (query?: string) => {
    try {
      setJobChoicesLoading(true);
      const res = await api.get<JobChoice[]>("/jobapplications/choices", { params: { q: query?.trim() || undefined, limit: 50 } });
      setAvailableJobs((res.data ?? []).filter((item) => item.id !== jobId));
    } catch {
      setAvailableJobs([]);
    } finally {
      setJobChoicesLoading(false);
    }
  }, [jobId]);

  const linkedThreadIds = useMemo(
    () => Array.from(new Set(messages.map((message) => message.externalThreadId).filter(Boolean) as string[])).sort(),
    [messages],
  );

  const refreshLinkedThreads = useCallback(async (mode: "auto" | "manual" = "manual") => {
    if (!gmailStatus?.connected || linkedThreadIds.length === 0) return null;

    try {
      setLinkedThreadRefreshLoading(true);
      const res = await api.post<GmailThreadRefreshResult>("/gmail/refresh-linked-threads", { jobApplicationId: jobId });
      setLinkedThreadRefresh(res.data);
      await load();
      await loadGmailStatus();
      if (importOpen && importTab === 1) {
        await loadGmailMatches(gmailQuery);
      }

      if (mode === "manual") {
        if (res.data.imported > 0) {
          toast(t(res.data.imported === 1 ? "correspondenceImportedNewMessage" : "correspondenceImportedNewMessages", { count: res.data.imported }), "success");
        } else if (res.data.hasLinkedThreads) {
          toast(t("correspondenceLinkedThreadsCurrent"), "success");
        } else {
          toast(t("correspondenceNoLinkedThreadsForJob"), "success");
        }
      } else if (res.data.imported > 0) {
        toast(t(res.data.imported === 1 ? "correspondenceLinkedImportedMessage" : "correspondenceLinkedImportedMessages", { count: res.data.imported }), "success");
      }

      return res.data;
    } catch (error: any) {
      if (mode === "manual") {
        toast(getApiErrorMessage(error, t("correspondenceRefreshLinkedFailed")), "error");
      }
      return null;
    } finally {
      setLinkedThreadRefreshLoading(false);
    }
  }, [gmailQuery, gmailStatus?.connected, importOpen, importTab, jobId, linkedThreadIds.length, load, loadGmailMatches, loadGmailStatus, t, toast]);

  useEffect(() => {
    void load().catch(() => undefined);
  }, [load]);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [messages.length]);

  useEffect(() => {
    void loadGmailStatus();
  }, [loadGmailStatus]);

  useEffect(() => {
    if (!manageThreadId) return;
    const timer = window.setTimeout(() => void loadAvailableJobs(jobChoiceQuery), jobChoiceQuery.trim() ? 250 : 0);
    return () => window.clearTimeout(timer);
  }, [jobChoiceQuery, loadAvailableJobs, manageThreadId]);

  useEffect(() => {
    if (!gmailStatus?.connected || linkedThreadIds.length === 0) {
      autoRefreshKeyRef.current = null;
      return;
    }

    const refreshKey = `${jobId}:${linkedThreadIds.join("|")}`;
    if (autoRefreshKeyRef.current === refreshKey) return;
    autoRefreshKeyRef.current = refreshKey;
    void refreshLinkedThreads("auto");
  }, [gmailStatus?.connected, jobId, linkedThreadIds, refreshLinkedThreads]);

  useEffect(() => {
    if (!importOpen || importTab !== 1 || !gmailStatus?.connected) return;
    void loadGmailMatches(gmailQuery);
  }, [importOpen, importTab, gmailStatus?.connected, gmailQuery, loadGmailMatches]);

  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      const data = event.data as { source?: string; status?: string; message?: string };
      if (data?.source !== "jobtracker-gmail-oauth") return;
      if (data.status === "connected") {
        toast(data.message || t("googleLinkedSuccess"), "success");
        void loadGmailStatus();
        setImportTab(1);
        void loadGmailMatches(gmailQuery);
      } else {
        toast(data.message || t("googleAuthFailed"), "error");
      }
    };

    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [gmailQuery, loadGmailMatches, loadGmailStatus, t, toast]);

  const canSend = useMemo(() => text.trim().length > 0, [text]);

  const suggestedQueries = buildSuggestedCorrespondenceQueries(jobContext, messages.map((message) => message.subject), {
    recruiterMailbox: t("correspondenceRecruiterMailbox"),
    companyAndRole: t("correspondenceCompanyAndRole"),
    companyMail: t("correspondenceCompanyMail"),
    subject: t("correspondenceSubject"),
  });

  const send = async () => {
    if (!canSend) return;
    try {
      await api.post("/correspondence", { jobApplicationId: jobId, from, content: text });
      setText("");
      await load();
    } catch (error) {
      toast(getApiErrorMessage(error, t("correspondenceAddFailed")), "error");
    }
  };

  const importEmail = async () => {
    const parsed = parseRawEmail(rawEmail);
    if (!parsed.body && !parsed.subject && !rawEmail.trim()) {
      toast(t("addJobModalPasteUrlFirst"), "error");
      return;
    }

    try {
      await api.post("/correspondence", {
        jobApplicationId: jobId,
        from,
        channel: "Email",
        subject: parsed.subject ?? null,
        content: parsed.body || rawEmail,
        date: parsed.date ?? null,
        externalFrom: parsed.from ?? null,
        externalTo: parsed.to ?? null,
      });
      setImportOpen(false);
      setRawEmail("");
      await load();
      toast(t("correspondenceLogEmail"), "success");
    } catch (error) {
      toast(getApiErrorMessage(error, t("addJobModalImportFailed")), "error");
    }
  };

  const connectGmail = async () => {
    try {
      const res = await api.get<{ url: string }>("/gmail/connect-url");
      const popup = window.open(res.data.url, "jobtracker-gmail-connect", "width=620,height=760,resizable=yes,scrollbars=yes");
      if (!popup) toast(t("correspondenceBlockedPopup"), "error");
    } catch (error) {
      toast(getApiErrorMessage(error, t("correspondenceStartGmailFailed")), "error");
    }
  };

  const disconnectGmail = async () => {
    try {
      await api.delete("/gmail/connection");
      setGmailStatus({ connected: false });
      setGmailMatches(null);
      setLinkedThreadRefresh(null);
      toast(t("googleUnlinked"), "success");
    } catch (error) {
      toast(getApiErrorMessage(error, t("correspondenceDisconnectFailed")), "error");
    }
  };

  const deleteMessage = async (messageId: number) => {
    if (!(await confirmAction(t("correspondenceDeleteConfirm"), { title: t("correspondenceDeleteTitle"), confirmLabel: t("adminUsersDelete"), destructive: true }))) return;
    try {
      await api.delete(`/correspondence/${messageId}`);
      await load();
      toast(t("correspondenceDeleted"), "success");
    } catch (error) {
      toast(getApiErrorMessage(error, t("correspondenceDeleteFailed")), "error");
    }
  };

  const importGmailMessage = async (messageId: string) => {
    try {
      setImportingMessageId(messageId);
      const res = await api.post<GmailImportMessageResult>("/gmail/import", { jobApplicationId: jobId, messageId });
      await load();
      await loadGmailMatches(gmailQuery);
      if (res.data.imported > 0) {
        toast(t("correspondenceImportEmail"), "success");
      } else {
        toast(t("correspondenceAlreadyLinkedToJob"), "success");
      }
    } catch (error: any) {
      toast(getApiErrorMessage(error, t("correspondenceImportGmailFailed")), "error");
    } finally {
      setImportingMessageId(null);
    }
  };

  const importGmailThread = async (threadId: string, messageIds: string[]) => {
    try {
      setImportingThreadId(threadId);
      const res = await api.post<GmailImportThreadResult>("/gmail/import-thread", { jobApplicationId: jobId, threadId, messageIds });
      await load();
      await loadGmailMatches(gmailQuery);
      toast(t("correspondenceImportThreadResult", { imported: res.data.imported, skippedText: res.data.skipped ? t("correspondenceImportThreadSkipped", { count: res.data.skipped }) : "" }), "success");
    } catch (error: any) {
      toast(getApiErrorMessage(error, t("correspondenceImportThreadFailed")), "error");
    } finally {
      setImportingThreadId(null);
    }
  };

  const openManageThread = (threadId: string) => {
    setManageThreadId(threadId);
    setManageTargetJobId(jobId);
    setJobChoiceQuery("");
    setManageNote("");
  };

  const unlinkThread = async () => {
    if (!manageThreadId) return;
    setManageSaving(true);
    try {
      const res = await api.post<GmailUnlinkResult>("/gmail/unlink-thread", {
        jobApplicationId: jobId,
        threadId: manageThreadId,
        note: manageNote.trim() || null,
        nextDecision: "review",
      });
      await load();
      await loadGmailMatches(gmailQuery);
      setManageThreadId(null);
      toast(t(res.data.removedMessages === 1 ? "correspondenceUnlinkedMessage" : "correspondenceUnlinkedMessages", { count: res.data.removedMessages }), "success");
    } catch (error: any) {
      toast(getApiErrorMessage(error, t("correspondenceUnlinkThreadFailed")), "error");
    } finally {
      setManageSaving(false);
    }
  };

  const relinkThread = async () => {
    if (!manageThreadId || manageTargetJobId <= 0 || manageTargetJobId === jobId) return;
    setManageSaving(true);
    try {
      const res = await api.post<GmailRelinkResult>("/gmail/relink-thread", {
        jobApplicationId: manageTargetJobId,
        threadId: manageThreadId,
        removeFromOtherJobs: true,
        note: manageNote.trim() || null,
      });
      await load();
      await loadGmailMatches(gmailQuery);
      setManageThreadId(null);
      const targetJob = availableJobs.find((item) => item.id === manageTargetJobId);
      toast(t("correspondenceMovedThread", { job: targetJob?.companyName || targetJob?.jobTitle || t("correspondenceJobNumber", { id: res.data.jobApplicationId }) }), "success");
    } catch (error: any) {
      toast(getApiErrorMessage(error, t("correspondenceMoveThreadFailed")), "error");
    } finally {
      setManageSaving(false);
    }
  };

  return (
    <Box>
      <ViewStateNotice title={t("correspondenceLoadFailed")} loading={messagesLoading} error={messagesError ? { kind: "error", message: messagesError, retryable: true } : null} onRetry={() => load().catch(() => undefined)} compact />
      <Paper variant="outlined" ref={scrollRef} sx={{ p: 1.5, maxHeight: 360, overflowY: "auto", bgcolor: "background.paper", borderRadius: 1 }}>
        {messages.length === 0 && !messagesLoading && !messagesError ? (
          <Typography sx={{ color: "text.secondary", py: 2, textAlign: "center" }}>{t("correspondenceNoMessages")}</Typography>
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {messages.map((m) => {
              const isMe = (m.from || "").toLowerCase() === "me";
              const accent = isMe ? theme.palette.primary.main : theme.palette.warning.main;
              return (
                <Box key={m.id} sx={{ display: "flex", justifyContent: isMe ? "flex-end" : "flex-start" }}>
                  <Box sx={{ maxWidth: { xs: "100%", sm: "85%" }, minWidth: 0, overflowWrap: "anywhere", borderRadius: 1, p: 1.25, border: "1px solid", borderColor: "divider", borderLeft: `3px solid ${accent}`, bgcolor: "background.default", color: "text.primary", "& .MuiChip-root": { maxWidth: "100%", height: "auto", minHeight: 24 }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }}>
                    {m.subject ? <Typography sx={{ fontWeight: 800, mb: 0.5 }}>{m.subject}</Typography> : null}
                    <Typography sx={{ whiteSpace: "pre-wrap", lineHeight: 1.35 }}>{m.content}</Typography>
                    {(m.externalThreadId || m.externalFrom || m.externalTo || m.externalLabelsJson || m.attachmentMetadataJson) ? (
                      <Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1 }}>
                        {m.externalThreadId ? <Chip size="small" label={t("correspondenceThread", { id: m.externalThreadId })} variant="outlined" /> : null}
                        {m.externalFrom ? <Chip size="small" label={t("correspondenceFrom", { value: m.externalFrom })} variant="outlined" /> : null}
                        {m.externalTo ? <Chip size="small" label={t("correspondenceTo", { value: m.externalTo })} variant="outlined" /> : null}
                        {m.externalLabelsJson ? <Chip size="small" label={t(JSON.parse(m.externalLabelsJson).length === 1 ? "correspondenceGmailLabel" : "correspondenceGmailLabels", { count: JSON.parse(m.externalLabelsJson).length })} variant="outlined" /> : null}
                        {m.attachmentMetadataJson ? <Chip size="small" label={t(JSON.parse(m.attachmentMetadataJson).length === 1 ? "correspondenceAttachment" : "correspondenceAttachments", { count: JSON.parse(m.attachmentMetadataJson).length })} variant="outlined" /> : null}
                      </Box>
                    ) : null}
                    <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, alignItems: "flex-end", mt: 0.75 }}>
                      <Typography variant="caption" sx={{ color: "text.secondary" }}>
                        {isMe ? t("correspondenceMe") : t("correspondenceCompany")}{m.channel ? ` - ${m.channel}` : ""}{m.date ? ` - ${new Date(m.date).toLocaleString(language === "nb" ? "nb-NO" : "en")}` : ""}
                      </Typography>
                      <IconButton size="small" aria-label={t("correspondenceDeleteTitle")} onClick={() => void deleteMessage(m.id)} sx={{ color: "text.secondary" }}>
                        <DeleteOutlineIcon fontSize="small" />
                      </IconButton>
                    </Box>
                  </Box>
                </Box>
              );
            })}
          </Box>
        )}
      </Paper>

      <Box sx={{ mt: 1.5, p: 1.5, borderRadius: 1, border: 1, borderColor: "divider", bgcolor: "background.default", "& .MuiChip-root": { maxWidth: "100%", height: "auto", minHeight: 24 }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }}>
        <Typography variant="overline">{t("correspondenceLinkedContinuity")}</Typography>
        <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.25 }}>
          {t("correspondenceLinkedContinuityHelp")}
        </Typography>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
          <Chip size="small" color={gmailStatus?.connected ? "success" : "default"} variant="outlined" label={gmailStatus?.connected ? t("correspondenceGmailConnected") : t("correspondenceGmailNotConnected")} />
          <Chip size="small" color={linkedThreadIds.length > 0 ? "success" : "default"} variant="outlined" label={linkedThreadIds.length > 0 ? t("correspondenceLinkedThreads", { count: linkedThreadIds.length }) : t("correspondenceNoLinkedThreads")} />
          {linkedThreadIds.slice(0, 6).map((threadId) => (
            <Button key={threadId} size="small" variant="text" onClick={() => openManageThread(threadId)}>
              {t("correspondenceManageThread", { id: threadId })}
            </Button>
          ))}
          {gmailStatus?.lastSyncStatus ? (
            <Chip
              size="small"
              color={gmailStatus.lastSyncStatus === "success" ? "success" : "warning"}
              variant="outlined"
              label={gmailStatus.lastSyncStatus === "success"
                ? t("correspondenceLastSyncOk", { mode: gmailStatus.lastSyncMode || t("correspondenceSync") })
                : t("correspondenceLastSyncFailed", { mode: gmailStatus.lastSyncMode || t("correspondenceSync") })}
            />
          ) : null}
          {linkedThreadRefresh ? (
            <Chip
              size="small"
              variant="outlined"
              label={linkedThreadRefresh.imported > 0
                ? t(linkedThreadRefresh.imported === 1 ? "correspondenceLastRefreshImportedMessage" : "correspondenceLastRefreshImportedMessages", { count: linkedThreadRefresh.imported })
                : linkedThreadRefresh.hasLinkedThreads
                  ? t(linkedThreadRefresh.threadsChecked === 1 ? "correspondenceLastRefreshCheckedThread" : "correspondenceLastRefreshCheckedThreads", { count: linkedThreadRefresh.threadsChecked })
                  : t("correspondenceNoRefreshHistory")}
            />
          ) : null}
        </Box>
        {gmailStatus?.lastSyncError ? (
          <Typography variant="body2" sx={{ color: "warning.main", mt: 1 }}>
            {t("correspondenceLatestSyncIssue", { error: gmailStatus.lastSyncError })}
          </Typography>
        ) : null}
      </Box>

      <Box sx={{ display: "flex", gap: 1, alignItems: "flex-start", mt: 1.5, flexWrap: "wrap" }}>
        <ToggleButtonGroup exclusive value={from} onChange={(_, v) => v && setFrom(v)} size="small">
          <ToggleButton value="Me">{t("correspondenceMe")}</ToggleButton>
          <ToggleButton value="Company">{t("correspondenceCompany")}</ToggleButton>
        </ToggleButtonGroup>

        <Button variant="outlined" size="small" onClick={() => setImportOpen(true)}>{t("correspondenceImportEmail")}</Button>

        <TextField label={t("correspondenceLogNoteOrMessage")} value={text} onChange={(e) => setText(e.target.value)} multiline minRows={3} sx={{ flex: { xs: "1 1 100%", sm: "1 1 320px" }, minWidth: 0 }} helperText={t("correspondenceCharacters", { count: text.length })} />

        <Button variant="contained" onClick={send} disabled={!canSend}>{t("correspondenceAdd")}</Button>
      </Box>

      <Dialog open={Boolean(manageThreadId)} onClose={() => setManageThreadId(null)} fullWidth maxWidth="sm">
        <DialogTitle>{t("correspondenceManageLinkedThread")}</DialogTitle>
        <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 2, pt: 1 }}>
          <Typography variant="body2" sx={{ color: "text.secondary" }}>
            {t("correspondenceManageLinkedThreadHelp")}
          </Typography>
          {manageThreadId ? <Chip label={t("correspondenceThread", { id: manageThreadId })} variant="outlined" sx={{ width: "fit-content" }} /> : null}
          <TextField
            label={t("correspondenceReviewNote")}
            value={manageNote}
            onChange={(event) => setManageNote(event.target.value)}
            multiline
            minRows={2}
            placeholder={t("correspondenceReviewNotePlaceholder")}
          />
          <Autocomplete
            options={availableJobs}
            loading={jobChoicesLoading}
            value={availableJobs.find((item) => item.id === manageTargetJobId) ?? null}
            onInputChange={(_, value, reason) => {
              if (reason === "input" || reason === "clear") setJobChoiceQuery(value);
            }}
            onChange={(_, value) => setManageTargetJobId(value?.id ?? jobId)}
            isOptionEqualToValue={(option, value) => option.id === value.id}
            getOptionLabel={(item) => `${item.companyName || t("correspondenceUnknownCompany")} • ${item.jobTitle}`}
            renderInput={(params) => <TextField {...params} label={t("correspondenceMoveToJob")} placeholder={t("correspondenceSearchEveryJob")} />}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setManageThreadId(null)} disabled={manageSaving}>{t("close")}</Button>
          <Button color="warning" variant="outlined" onClick={() => void unlinkThread()} disabled={manageSaving || !manageThreadId}>{t("correspondenceUnlinkFromJob")}</Button>
          <Button variant="contained" onClick={() => void relinkThread()} disabled={manageSaving || !manageThreadId || manageTargetJobId === jobId}>{t("correspondenceMoveThread")}</Button>
        </DialogActions>
      </Dialog>

      <Dialog open={importOpen} onClose={() => setImportOpen(false)} fullWidth maxWidth="md">
        <DialogTitle>{t("correspondenceImportTitle")}</DialogTitle>
        <DialogContent>
          <Tabs value={importTab} onChange={(_, v) => setImportTab(v)} sx={{ mb: 2 }}>
            <Tab label={t("correspondencePasteEmail")} />
            <Tab label={t("google")} />
          </Tabs>

          {importTab === 0 ? (
            <>
              <Typography sx={{ color: "text.secondary", mb: 1 }}>{t("correspondencePasteEmailHelp")}</Typography>
              <TextField multiline minRows={10} fullWidth value={rawEmail} onChange={(e) => setRawEmail(e.target.value)} placeholder={t("correspondencePasteEmailPlaceholder")} />
            </>
          ) : (
            <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
              <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
                <Box>
                  <Typography sx={{ fontWeight: 800 }}>{t("correspondenceGoogleGmail")}</Typography>
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>
                    {gmailLoading ? t("correspondenceCheckingConnection") : gmailStatus?.connected ? t("correspondenceConnectedAs", { email: gmailStatus.gmailAddress || "" }) : t("correspondenceConnectGmailHint")}
                  </Typography>
                  {jobContext.companyName || jobContext.jobTitle ? (
                    <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
                      {t("correspondenceMatchingAgainst", { company: jobContext.companyName || t("correspondenceThisCompany"), role: jobContext.jobTitle || t("correspondenceThisRole") })}
                    </Typography>
                  ) : null}
                </Box>
                <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                  {gmailStatus?.connected ? (
                    <>
                      {linkedThreadIds.length > 0 ? (
                        <Button variant="outlined" onClick={() => void refreshLinkedThreads("manual")} disabled={linkedThreadRefreshLoading}>
                          {linkedThreadRefreshLoading ? t("correspondenceRefreshingLinkedThreads") : t("correspondenceRefreshLinkedThreads")}
                        </Button>
                      ) : null}
                      <Button variant="outlined" onClick={() => void loadGmailMatches(gmailQuery)} disabled={gmailMatchesLoading}>{t("correspondenceRefresh")}</Button>
                      <Button variant="outlined" color="error" onClick={() => void disconnectGmail()}>{t("correspondenceDisconnect")}</Button>
                    </>
                  ) : (
                    <Button variant="contained" onClick={() => void connectGmail()}>{t("correspondenceConnectGmail")}</Button>
                  )}
                </Box>
              </Box>

              {gmailStatus?.connected ? (
                <>
                  <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                    {suggestedQueries.map((item) => (
                      <Chip key={item.label} icon={<AutoAwesomeIcon />} label={item.label} clickable variant="outlined" onClick={() => setGmailQuery(item.value)} />
                    ))}
                  </Box>
                  <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
                    <TextField label={t("correspondenceSearchGmail")} value={gmailQuery} onChange={(e) => setGmailQuery(e.target.value)} placeholder={t("correspondenceSearchGmailPlaceholder")} size="small" fullWidth />
                    <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => void loadGmailMatches(gmailQuery)} disabled={gmailMatchesLoading}>{t("correspondenceSearch")}</Button>
                  </Box>
                  {gmailMatches?.queries?.length ? (
                    <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                      {gmailMatches.queries.slice(0, 4).map((query) => (
                        <Chip key={query} size="small" label={query} variant="outlined" />
                      ))}
                    </Box>
                  ) : null}
                  {gmailStatus.lastSyncedAt ? <Chip label={t("correspondenceLastSynced", { date: new Date(gmailStatus.lastSyncedAt).toLocaleString(language === "nb" ? "nb-NO" : "en") })} size="small" /> : null}
                  {gmailStatus.lastSyncAttemptedAt ? <Chip label={t("correspondenceSyncChecked", { date: new Date(gmailStatus.lastSyncAttemptedAt).toLocaleString(language === "nb" ? "nb-NO" : "en") })} size="small" variant="outlined" /> : null}
                  {gmailStatus.lastSyncStatus === "error" && gmailStatus.lastSyncError ? <Chip label={t("correspondenceSyncIssue", { error: gmailStatus.lastSyncError })} size="small" color="warning" variant="outlined" /> : null}
                  {linkedThreadIds.length > 0 ? (
                    <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                      <Chip size="small" color="success" variant="outlined" label={t("correspondenceLinkedThreads", { count: linkedThreadIds.length })} />
                      {linkedThreadRefresh ? (
                        <Chip
                          size="small"
                          variant="outlined"
                          label={linkedThreadRefresh.imported > 0
                            ? t(linkedThreadRefresh.imported === 1 ? "correspondenceLastRefreshImportedMessage" : "correspondenceLastRefreshImportedMessages", { count: linkedThreadRefresh.imported })
                            : linkedThreadRefresh.hasLinkedThreads
                              ? t(linkedThreadRefresh.threadsChecked === 1 ? "correspondenceLastRefreshCheckedThread" : "correspondenceLastRefreshCheckedThreads", { count: linkedThreadRefresh.threadsChecked })
                              : t("correspondenceNoLinkedThreadsForJob")}
                        />
                      ) : null}
                    </Box>
                  ) : null}
                  <Paper variant="outlined" sx={{ maxHeight: 420, overflowY: "auto" }}>
                    {gmailMatchesLoading ? (
                      <Box sx={{ py: 5, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box>
                    ) : !gmailMatches || gmailMatches.threads.length === 0 ? (
                      <Typography sx={{ color: "text.secondary", p: 2 }}>
                        {gmailQuery.trim() ? t("correspondenceNoMatchesForOverride") : t("correspondenceNoGmailMessages")}
                      </Typography>
                    ) : (
                      <List disablePadding>
                        {gmailMatches.threads.map((thread, threadIndex) => (
                          <React.Fragment key={thread.threadId}>
                            {threadIndex > 0 ? <Divider /> : null}
                            <Box sx={{ p: 1.5, backgroundColor: alpha(theme.palette.primary.main, 0.04) }}>
                              <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center", mb: 1 }}>
                                <Box>
                                  <Typography sx={{ fontWeight: 800 }}>{thread.subject || t("correspondenceNoSubject")}</Typography>
                                  <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 0.75 }}>
                                    <Chip size="small" label={t("correspondenceConfidenceScore", { confidence: formatConfidence(thread.confidence), score: thread.score })} color={thread.confidence === "high" ? "success" : thread.confidence === "medium" ? "warning" : "default"} />
                                    <Chip size="small" label={t(thread.messageCount === 1 ? "correspondenceMessageCount" : "correspondenceMessagesCount", { count: thread.messageCount })} variant="outlined" />
                                    {thread.hasImportedMessages ? <Chip size="small" label={t("correspondenceAlreadyLinked")} variant="outlined" color="success" /> : null}
                                  </Box>
                                  <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1 }}>
                                    {thread.matchReasons.map((reason) => (
                                      <Chip key={`${thread.threadId}-${reason.label}-${reason.value}`} size="small" label={`${formatReasonLabel(reason.label)}: ${reason.value}`} variant="outlined" />
                                    ))}
                                  </Box>
                                </Box>
                                <Button startIcon={<MailOutlineIcon />} variant="outlined" size="small" disabled={importingThreadId === thread.threadId} onClick={() => void importGmailThread(thread.threadId, thread.messages.map((x) => x.id))}>
                                  {importingThreadId === thread.threadId ? t("correspondenceImporting") : t("correspondenceImportThread")}
                                </Button>
                              </Box>
                              {thread.messages.map((message, index) => (
                                <React.Fragment key={message.id}>
                                  {index > 0 ? <Divider sx={{ my: 1 }} /> : null}
                                  <ListItemButton sx={{ alignItems: "flex-start", px: 0, py: 1 }}>
                                    <ListItemText
                                      secondaryTypographyProps={{ component: "div" }}
                                      primary={<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}><Typography sx={{ fontWeight: 700 }}>{message.subject || t("correspondenceNoSubject")}</Typography><Typography variant="caption" sx={{ color: "text.secondary" }}>{message.date ? new Date(message.date).toLocaleString(language === "nb" ? "nb-NO" : "en") : ""}</Typography></Box>}
                                      secondary={<Box component="span" sx={{ mt: 0.5, display: "block" }}>
                                        <Typography component="span" variant="body2" sx={{ color: "text.primary", display: "block" }}>{t("correspondenceFromLabel", { value: message.from || t("correspondenceUnknown") })}</Typography>
                                        <Typography component="span" variant="body2" sx={{ color: "text.secondary", mt: 0.25, display: "block" }}>{message.snippet}</Typography>
                                        <Box component="span" sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1 }}>
                                          <Chip size="small" label={t("correspondenceConfidenceScore", { confidence: formatConfidence(message.confidence), score: message.score })} variant="outlined" />
                                          {message.alreadyImported ? <Chip size="small" label={t("correspondenceAlreadyLinked")} color="success" variant="outlined" /> : null}
                                          {message.matchReasons.map((reason) => (
                                            <Chip key={`${message.id}-${reason.label}-${reason.value}`} size="small" label={`${formatReasonLabel(reason.label)}: ${reason.value}`} variant="outlined" />
                                          ))}
                                        </Box>
                                      </Box>}
                                    />
                                    <Button variant="contained" size="small" disabled={importingMessageId === message.id} onClick={() => void importGmailMessage(message.id)}>
                                      {importingMessageId === message.id ? t("correspondenceImporting") : t("correspondenceImportEmail")}
                                    </Button>
                                  </ListItemButton>
                                </React.Fragment>
                              ))}
                            </Box>
                          </React.Fragment>
                        ))}
                      </List>
                    )}
                  </Paper>
                </>
              ) : null}
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setImportOpen(false)}>{t("correspondenceClose")}</Button>
          {importTab === 0 ? <Button variant="contained" onClick={importEmail}>{t("correspondenceLogEmail")}</Button> : null}
        </DialogActions>
      </Dialog>
    </Box>
  );
}