import React, { useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";

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

import { api, getApiErrorMessage } from "../api";
import ViewStateNotice from "./ViewStateNotice";
import { JobApplication } from "../types";
import { buildWorkflowPath, getReminderGroup, getWorkflowAction } from "../jobWorkflowSignals";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { useViewResource, type ViewResourceError } from "../hooks/useViewResource";
import { PageHeader } from "../layout/PageLayout";
import { statusLabel } from "../pipeline";

type FollowUpFailure = {
  job: Pick<JobApplication, "id" | "jobTitle">;
  days: number | null;
  date: string | null;
  error: ViewResourceError;
};

type ReminderGroups = {
  missingCv: JobApplication[];
  missingInterviewNotes: JobApplication[];
  overdueFollowUp: JobApplication[];
  other: JobApplication[];
};

function groupItems(items: JobApplication[]): ReminderGroups {
  const groups: ReminderGroups = { missingCv: [], missingInterviewNotes: [], overdueFollowUp: [], other: [] };
  items.forEach((item) => {
    const group = getReminderGroup(item);
    groups[group].push(item);
  });
  return groups;
}

function ReminderSection({ title, items, disabled, onOpen, onSetFollowUp }: { title: string; items: JobApplication[]; disabled: boolean; onOpen: (job: JobApplication) => void; onSetFollowUp: (job: JobApplication, days: number | null) => void }) {
  const { language, t } = useI18n();
  if (items.length === 0) return null;

  return (
    <Box component="section" aria-label={title} sx={{ display: "flex", flexDirection: "column", gap: 1.25, minWidth: 0 }}>
      <Stack direction="row" alignItems="center" spacing={1}>
        <Typography component="h3" variant="sectionTitle">{title}</Typography>
        <Chip size="small" label={items.length} />
      </Stack>
      {items.map((j) => {
        const action = getWorkflowAction(j, {
          packageWork: t("jobTablePackageWork"),
          followUp: t("jobTableFollowUp"),
          interviewPrep: t("jobTableInterviewStage"),
          readiness: t("jobTableReadiness"),
        });

        return (
          <Paper key={j.id} component="article" aria-label={j.jobTitle} variant="outlined" sx={{ p: "var(--app-card-padding)", minWidth: 0, display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "minmax(0, 1fr) auto" }, gap: 1.5, alignItems: "center" }}>
            <Box sx={{ minWidth: 0 }}>
              <Typography component="h4" variant="body1" sx={{ fontWeight: 700, lineHeight: 1.4, overflowWrap: "anywhere" }}>
                {j.company?.name ?? ""} <span style={{ fontWeight: 700, opacity: 0.7 }}>•</span> {j.jobTitle}
              </Typography>
              <Box sx={{ display: "flex", gap: 1, mt: 0.5, flexWrap: "wrap", minWidth: 0, "& .MuiChip-root": { maxWidth: "100%", height: "auto", minHeight: 24 }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere", py: 0.5 } }}>
                {j.needsFollowUp ? <Chip size="small" color="warning" label={t("remindersFollowUpLabel")} /> : null}
                {(j.workflowSignal?.reason ?? j.followUpReason) ? <Chip size="small" label={j.workflowSignal?.reason ?? j.followUpReason} variant="outlined" /> : null}
                {j.followUpAt ? <Chip size="small" label={t("remindersFollowUpDate", { date: new Date(j.followUpAt).toLocaleDateString(language === "nb" ? "nb-NO" : "en") })} variant="outlined" /> : null}
                <Chip size="small" label={statusLabel(t, j.status)} variant="outlined" />
              </Box>
            </Box>
            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", minWidth: 0, justifyContent: { xs: "flex-start", md: "flex-end" }, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
              <Button size="small" variant="outlined" disabled={disabled} aria-label={`${action?.label ?? t("remindersOpen")}: ${j.jobTitle}`} onClick={() => onOpen(j)}>{action?.label ?? t("remindersOpen")}</Button>
              {[3, 7].map(days => <Button key={days} size="small" variant="outlined" disabled={disabled} aria-label={t("remindersSnoozeForJob", { days, job: j.jobTitle })} onClick={() => onSetFollowUp(j, days)}>{t("remindersSnoozeDays", { days })}</Button>)}
              <Button size="small" disabled={disabled} aria-label={t("remindersClearForJob", { job: j.jobTitle })} onClick={() => onSetFollowUp(j, null)}>{t("remindersClear")}</Button>
            </Box>
          </Paper>
        );
      })}
    </Box>
  );
}

export default function RemindersView() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const { t } = useI18n();
  const pending = useRef(false);
  const [busy, setBusy] = useState(false);
  const [failure, setFailure] = useState<FollowUpFailure | null>(null);
  const resultsRef = useRef<HTMLDivElement>(null);

  const remindersResource = useViewResource(
    async () => {
      const res = await api.get<JobApplication[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } });
      return Array.isArray(res.data) ? res.data : [];
    },
    {
      initialData: [],
      errorMessage: "",
    },
  );

  const items = remindersResource.data;
  const grouped = useMemo(() => groupItems(items), [items]);
  const loading = busy || remindersResource.loading || remindersResource.refreshing;
  const disabled = loading || !!remindersResource.error;

  const openJob = (job: JobApplication) => {
    if (pending.current || disabled) return;
    navigate(buildWorkflowPath(job));
  };

  const setFollowUp = async (job: Pick<JobApplication, "id" | "jobTitle">, daysFromNow: number | null,
    date = daysFromNow === null ? null : new Date(Date.now() + daysFromNow * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)) => {
    if (pending.current || disabled) return;
    pending.current = true;
    resultsRef.current?.focus();
    setBusy(true);
    setFailure(null);
    try {
      await api.patch(`/jobapplications/${job.id}/followup`, { followUpAt: date });
      toast(daysFromNow === null ? t("remindersFollowUpCleared") : t("remindersFollowUpSet"), "success");
      await remindersResource.reload();
    } catch (error) {
      const status = (error as { response?: { status?: number } })?.response?.status;
      const unauthorized = status === 401 || status === 403;
      setFailure({ job: { id: job.id, jobTitle: job.jobTitle }, days: daysFromNow, date,
        error: { kind: unauthorized ? "unauthorized" : "error", message: getApiErrorMessage(error, ""), retryable: !unauthorized, status } });
      toast(t("remindersFollowUpFailed"), "error");
    } finally {
      pending.current = false;
      setBusy(false);
    }
  };

  const retryRead = async () => {
    if (pending.current || loading) return;
    pending.current = true;
    resultsRef.current?.focus();
    setBusy(true);
    try { await remindersResource.reload(); }
    finally { pending.current = false; setBusy(false); }
  };

  return (
    <Stack spacing={2} sx={{ minWidth: 0 }}>
      <PageHeader level="h2" title={t("remindersTitle")} description={t("remindersSubtitle")} />

      <Box ref={resultsRef} role="region" aria-label={t("remindersTitle")} tabIndex={-1} aria-busy={loading} sx={{ minWidth: 0 }}>
      <ViewStateNotice
        compact loading={loading}
        error={failure?.error ?? (remindersResource.error ? { ...remindersResource.error, message: remindersResource.error.message || t("remindersLoadFailed") } : null)}
        title={failure ? t("remindersMutationFailedForJob", { job: failure.job.jobTitle }) : t("remindersLoadFailed")}
        description={failure ? undefined : t("remindersLoadFailedBody")}
        onRetry={failure ? () => setFollowUp(failure.job, failure.days, failure.date) : retryRead}
      />

      {!remindersResource.loading && remindersResource.error?.kind !== "unauthorized" ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <ReminderSection title={t("remindersMissingTailoredCv")} items={grouped.missingCv} disabled={disabled} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersMissingInterviewPrep")} items={grouped.missingInterviewNotes} disabled={disabled} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersFollowUpDue")} items={grouped.overdueFollowUp} disabled={disabled} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersOther")} items={grouped.other} disabled={disabled} onOpen={openJob} onSetFollowUp={setFollowUp} />

          {!loading && !remindersResource.error && items.length === 0 ? <Typography sx={{ color: "text.secondary", textAlign: "center", py: 3 }}>{t("remindersNothing")}</Typography> : null}
        </Box>
      ) : null}
      </Box>

      <Divider sx={{ my: 2 }} />
      <Typography variant="caption" sx={{ color: "text.secondary" }}>
        {t("remindersTip")}
      </Typography>
    </Stack>
  );
}