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

import { Alert, Box, Button, Chip, LinearProgress, Paper, Stack, Typography } from "@mui/material";

import { api, getApiErrorMessage } from "../api";
import { useI18n } from "../i18n/I18nProvider";
import type { TranslationKey } from "../i18n/translations";
import { PageHeader, PageSection } from "../layout/PageLayout";
import { notificationDateLabel, type UserNotification } from "../notifications";
import type { UserOperation } from "../types";

const statusKeys: Record<string, TranslationKey> = {
  queued: "operationsStatusQueued", running: "operationsStatusRunning",
  waiting_for_retry: "operationsStatusWaitingForRetry", waiting_for_external_fallback: "operationsStatusWaitingForFallback",
  succeeded: "operationsStatusSucceeded", failed: "operationsStatusFailed", cancelled: "operationsStatusCancelled",
};
const taskKeys: Record<string, TranslationKey> = { "cv.process": "operationsTaskCv", "strategy.snapshot": "operationsTaskStrategy" };
const buttonSx = { minHeight: { xs: 44, sm: 36 }, whiteSpace: "normal", overflowWrap: "anywhere", "@media (pointer: coarse)": { minHeight: 44 } } as const;
type Failure = { cause: unknown; kind: "load" | "action" | "committed" };
type ActionUpdate = { operation?: UserOperation; readId?: string; dismissId?: string };

export default function OperationsPage() {
  const { language, t } = useI18n();
  const [operations, setOperations] = useState<UserOperation[]>([]);
  const [notifications, setNotifications] = useState<UserNotification[]>([]);
  const [loading, setLoading] = useState(true);
  const [hasLoaded, setHasLoaded] = useState(false);
  const [error, setError] = useState<Failure | null>(null);
  const [busyKey, setBusyKey] = useState<string | null>(null);
  const mounted = useRef(false);
  const sequence = useRef(0);
  const activeLoad = useRef<AbortController | null>(null);
  const pendingAction = useRef(false);
  const refreshRequired = useRef(false);
  const activityRef = useRef<HTMLDivElement>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const actionFocus = useRef<HTMLElement | null>(null);
  const readFocus = useRef<HTMLElement | null>(null);

  const load = useCallback(async (afterWrite = false) => {
    if (!mounted.current || activeLoad.current || pendingAction.current && !afterWrite) return;
    const request = ++sequence.current;
    const controller = new AbortController();
    activeLoad.current = controller;
    setLoading(true);
    try {
      const [operationResponse, notificationResponse] = await Promise.all([
        api.get<UserOperation[]>("/operations?limit=50", { signal: controller.signal }),
        api.get<UserNotification[]>("/notifications?limit=50", { signal: controller.signal }),
      ]);
      if (!mounted.current || controller.signal.aborted || request !== sequence.current) return;
      const active = document.activeElement;
      readFocus.current = active instanceof HTMLElement && activityRef.current?.contains(active) ? active : null;
      setOperations(operationResponse.data ?? []);
      setNotifications(notificationResponse.data ?? []);
      setHasLoaded(true);
      refreshRequired.current = false;
      setError(null);
    } catch (cause) {
      if (mounted.current && !controller.signal.aborted && request === sequence.current) {
        setError({ cause, kind: refreshRequired.current ? "committed" : "load" });
        controller.abort();
      }
    } finally {
      if (mounted.current && request === sequence.current) { activeLoad.current = null; setLoading(false); }
    }
  }, []);

  useEffect(() => {
    mounted.current = true;
    void load();
    const interval = window.setInterval(() => void load(), 15000);
    return () => { mounted.current = false; sequence.current += 1; activeLoad.current?.abort(); activeLoad.current = null; window.clearInterval(interval); };
  }, [load]);

  useEffect(() => {
    if (loading || busyKey || !actionFocus.current) return;
    const target = actionFocus.current;
    actionFocus.current = null;
    if (document.activeElement !== activityRef.current) return;
    if (target.isConnected && !target.matches(":disabled")) target.focus();
    else headingRef.current?.focus();
  }, [busyKey, error, loading, notifications, operations]);

  useEffect(() => {
    const target = readFocus.current;
    readFocus.current = null;
    if (target && !target.isConnected && document.activeElement === document.body) headingRef.current?.focus();
  }, [loading, notifications, operations]);

  const rememberFocus = () => {
    const active = document.activeElement;
    if (active instanceof HTMLElement && active !== activityRef.current && activityRef.current?.contains(active)) {
      actionFocus.current = active;
      activityRef.current.focus();
    }
  };
  const refresh = () => { rememberFocus(); void load(); };
  const runAction = async (key: string, action: () => Promise<ActionUpdate>) => {
    if (!mounted.current || pendingAction.current || refreshRequired.current) return;
    pendingAction.current = true;
    sequence.current += 1;
    activeLoad.current?.abort();
    activeLoad.current = null;
    setLoading(false);
    rememberFocus();
    setBusyKey(key);
    setError(null);
    try {
      const update = await action();
      if (!mounted.current) return;
      if (update.operation) setOperations(items => items.map(item => item.id === update.operation!.id ? update.operation! : item));
      if (update.readId) setNotifications(items => items.map(item => item.id === update.readId ? { ...item, readAtUtc: new Date().toISOString() } : item));
      if (update.dismissId) setNotifications(items => items.filter(item => item.id !== update.dismissId));
      // A failed follow-up read must never invite replay of a committed write.
      refreshRequired.current = true;
      window.dispatchEvent(new Event("notifications-changed"));
      await load(true);
    } catch (cause) {
      if (mounted.current) setError({ cause, kind: "action" });
    } finally {
      if (mounted.current) { pendingAction.current = false; setBusyKey(null); }
    }
  };

  const locked = busyKey !== null || error?.kind === "committed";
  const taskLabel = (task: string) => Object.hasOwn(taskKeys, task) ? t(taskKeys[task]) : task;
  const dateLabel = (value: string) => notificationDateLabel(value, language === "nb" ? "nb-NO" : "en-GB");
  const errorTitle = error ? t(error.kind === "committed" ? "operationsCommittedRefreshFailed" : error.kind === "action" ? "operationsActionFailed" : "operationsLoadFailed") : "";
  const errorDetail = error ? getApiErrorMessage(error.cause, errorTitle) : "";

  return <Stack ref={activityRef} role="region" aria-label={t("operationsActivity")} aria-busy={loading || busyKey !== null} tabIndex={-1} spacing={2} sx={{ minWidth: 0 }}>
    <PageHeader level="h2" title={t("operationsActivity")} titleRef={headingRef} description={t("operationsSubtitle")} actions={<Button variant="outlined" onClick={refresh} disabled={loading || busyKey !== null} sx={buttonSx}>{t("refresh")}</Button>} />
    <Typography variant="body2" color="text.secondary">{t("operationsRecentHelp")}</Typography>
    {error ? <Alert severity="error" sx={{ overflowWrap: "anywhere", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", "& .MuiAlert-message": { minWidth: 0 }, "& .MuiAlert-action": { gridColumn: 2, m: 0, p: 0, justifySelf: "start" } }} action={<Button color="inherit" size="small" onClick={refresh} disabled={loading || busyKey !== null} sx={buttonSx}>{t("retry")}</Button>}>
      <Typography variant="body2">{errorTitle}</Typography>
      {errorDetail !== errorTitle ? <Typography variant="body2">{errorDetail}</Typography> : null}
    </Alert> : null}
    {loading ? <LinearProgress aria-label={t("operationsLoading")} /> : null}
    <PageSection surface title={t("notifications")}>
      {hasLoaded && notifications.length === 0 ? <Typography color="text.secondary">{t("operationsNoNotifications")}</Typography> : null}
      <Stack spacing={1.5}>{notifications.map(notification => <Paper key={notification.id} component="article" aria-label={notification.title} variant="outlined" sx={{ p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0, overflowWrap: "anywhere" }}>
        <Typography component="h3" variant="sectionTitle">{notification.title}</Typography>
        {!notification.readAtUtc ? <Typography variant="caption" color="text.secondary">{t("notificationsUnread")}</Typography> : null}
        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>{notification.message}</Typography>
        <Typography variant="caption" color="text.secondary">{dateLabel(notification.createdAtUtc)}</Typography>
        <Stack direction="row" useFlexGap spacing={1} sx={{ mt: 1, flexWrap: "wrap" }}>
          {!notification.readAtUtc ? <Button size="small" disabled={locked} sx={buttonSx} onClick={() => void runAction("read-" + notification.id, async () => { await api.post("/notifications/" + notification.id + "/read"); return { readId: notification.id }; })}>{t("notificationsMarkRead")}</Button> : null}
          <Button size="small" color="inherit" disabled={locked} sx={buttonSx} onClick={() => void runAction("dismiss-" + notification.id, async () => { await api.delete("/notifications/" + notification.id); return { dismissId: notification.id }; })}>{t("notificationsDismiss")}</Button>
        </Stack>
      </Paper>)}</Stack>
    </PageSection>
    <PageSection surface title={t("operations")}>
      {hasLoaded && operations.length === 0 ? <Typography color="text.secondary">{t("operationsEmpty")}</Typography> : null}
      <Stack spacing={1.5}>{operations.map(operation => <Paper key={operation.id} component="article" aria-label={taskLabel(operation.taskType)} data-operation-id={operation.id} variant="outlined" sx={{ p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0, overflowWrap: "anywhere" }}>
        <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, flexWrap: "wrap", minWidth: 0 }}>
          <Typography component="h3" variant="sectionTitle" sx={{ overflowWrap: "anywhere", minWidth: 0 }}>{taskLabel(operation.taskType)}</Typography>
          <Chip size="small" label={Object.hasOwn(statusKeys, operation.status) ? t(statusKeys[operation.status]) : operation.status.replaceAll("_", " ")} sx={{ maxWidth: "100%", height: "auto", "& .MuiChip-label": { whiteSpace: "normal", py: 0.5, overflowWrap: "anywhere" } }} />
        </Box>
        <Typography variant="caption" color="text.secondary">{t("operationsCreated", { date: dateLabel(operation.createdAtUtc) })}</Typography>
        {operation.progressStage ? <Typography variant="body2" sx={{ mt: 1 }}>{operation.progressStage}</Typography> : null}
        {operation.progressPercent != null ? <LinearProgress variant="determinate" value={operation.progressPercent} aria-label={t("operationsProgress", { task: taskLabel(operation.taskType) })} sx={{ mt: 1 }} /> : null}
        {operation.cancellationRequestedAtUtc ? <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>{t("operationsCancellationRequested")}</Typography> : null}
        {operation.failureCategory ? <Alert severity="error" sx={{ mt: 1, overflowWrap: "anywhere" }}>{t("operationsFailed", { category: operation.failureCategory.replaceAll("_", " ") })}</Alert> : null}
        <Stack direction="row" useFlexGap spacing={1} sx={{ mt: 1, flexWrap: "wrap" }}>
          {operation.canCancel ? <Button size="small" color="error" disabled={locked} sx={buttonSx} onClick={() => void runAction("cancel-" + operation.id, async () => ({ operation: (await api.post<UserOperation>("/operations/" + operation.id + "/cancel")).data }))}>{t("cancel")}</Button> : null}
          {operation.canRetry ? <Button size="small" variant="outlined" disabled={locked} sx={buttonSx} onClick={() => void runAction("retry-" + operation.id, async () => ({ operation: (await api.post<UserOperation>("/operations/" + operation.id + "/retry")).data }))}>{t("retry")}</Button> : null}
        </Stack>
      </Paper>)}</Stack>
    </PageSection>
  </Stack>;
}