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

import {
  Alert,
  Box,
  Card,
  CardContent,
  Chip,
  IconButton,
  ListSubheader,
  Menu,
  MenuItem,
  Paper,
  Typography,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import { useLocation, useNavigate } from "react-router-dom";

import { api, getApiErrorMessage } from "../api";
import ViewStateNotice from "./ViewStateNotice";
import { JobApplication } from "../types";
import { useI18n } from "../i18n/I18nProvider";
import { useViewResource } from "../hooks/useViewResource";
import { jobsQueryFromSearch } from "../jobsQuery";
import { useDebouncedValue } from "../hooks/useDebouncedValue";
import {
  GROUP_ENTRY_STATUS,
  PIPELINE_GROUPS,
  PIPELINE_STATUSES,
  PipelineGroup,
  PipelineStatus,
  groupOf,
  normalizeStatus,
  statusLabel,
  statusTone,
} from "../pipeline";

type Status = PipelineStatus;

// The board shows one column per group rather than one per stage: ten columns is unreadable, and
// the stage detail is preserved on each card's chip. "Other" collects custom statuses, which
// belong to no group, and only appears when something is actually in it.
type ColumnKey = PipelineGroup | "Other";

// Mockup's Applied-column cards carry small skill-tag pills ("React", "TS") sourced from the
// job's own `tags` field (JSON array string) -- no new data, just parsed for display.
function parseTags(raw?: string): string[] {
  if (!raw) return [];
  try {
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed.filter((x) => typeof x === "string").slice(0, 2) : [];
  } catch {
    return [];
  }
}

type PillTone = "error" | "warning" | "success" | "info";

// Mockup's single status pill per card ("Reply due in 2d", "Tomorrow 14:00", "720k NOK / yr").
// Built entirely from fields the board already fetches (needsFollowUp/followUpAt/salary/deadline)
// -- there's no interview-datetime field on the board's JobApplication shape, so an "Interview
// tomorrow 14:00"-style pill isn't reproducible; deadline is used as the closest real fallback.
function cardPill(job: JobApplication, t: (key: any, params?: any) => string, language: string): { text: string; tone: PillTone } | null {
  if (job.needsFollowUp) {
    const due = job.followUpAt ? new Date(job.followUpAt) : null;
    if (!due || due.getTime() <= Date.now()) return { text: t("kanbanFollowUpNow"), tone: "error" };
    const days = Math.max(1, Math.ceil((due.getTime() - Date.now()) / 86400000));
    return { text: t("kanbanReplyDueIn", { days }), tone: "warning" };
  }
  if (job.salary) return { text: job.salary, tone: "success" };
  if (job.deadline) return { text: t("jobDiscoveryDeadline", { date: new Date(job.deadline).toLocaleDateString(language === "nb" ? "nb-NO" : "en") }), tone: "info" };
  return null;
}

export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refreshToken?: number; onResultCount?: (count: number | null) => void }) {
  const theme = useTheme();
  const palette = theme.vars?.palette ?? theme.palette;
  const { t, language } = useI18n();
  const location = useLocation();
  const query = useMemo(() => jobsQueryFromSearch(location.search), [location.search]);
  const params = useDebouncedValue(query, 250);
  const boardRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const [focusAfterMoveId, setFocusAfterMoveId] = useState<number | null>(null);
  const restoredFocusRef = useRef<number | null>(null);
  const [dragJobId, setDragJobId] = useState<number | null>(null);
  const [dragOverColumn, setDragOverColumn] = useState<ColumnKey | null>(null);
  const [moveError, setMoveError] = useState("");
  const [announcement, setAnnouncement] = useState("");
  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
  const [menuJobId, setMenuJobId] = useState<number | null>(null);

  const jobsResource = useViewResource(
    async () => {
      const response = await api.get<JobApplication[]>("/jobapplications/board", { params });
      return response.data;
    },
    {
      initialData: [],
      errorMessage: t("kanbanLoadFailed"),
      deps: [t, params, refreshToken],
    },
  );

  const jobs = jobsResource.data;
  useEffect(() => {
    onResultCount?.(jobsResource.loading || jobsResource.refreshing || jobsResource.error ? null : jobs.length);
  }, [onResultCount, jobs.length, jobsResource.loading, jobsResource.refreshing, jobsResource.error]);

  useEffect(() => {
    if (jobsResource.loading || jobsResource.refreshing || jobsResource.error) return;
    const returnId = window.history.state?.jobBoardFocusId ?? (location.state as { focusJobId?: unknown } | null)?.focusJobId;
    const targetId = focusAfterMoveId ?? (typeof returnId === "number" && restoredFocusRef.current !== returnId ? returnId : null);
    if (targetId == null) return;
    const card = document.querySelector<HTMLElement>(`[data-kanban-card-id="${targetId}"] [role="button"]`);
    // A successful move may leave the filtered population. Keep keyboard context in the board.
    const target = card ?? (focusAfterMoveId != null ? boardRef.current?.querySelector<HTMLElement>('[role="group"]') : null);
    if (!target) return;
    target.focus();
    setFocusAfterMoveId(null);
    restoredFocusRef.current = targetId;
  }, [jobs, jobsResource.loading, jobsResource.refreshing, jobsResource.error, location.state, focusAfterMoveId]);

  const openJob = (id: number) => {
    window.history.replaceState({ ...window.history.state, jobBoardFocusId: id }, "");
    navigate(`/jobs/${id}`, { state: { from: `${location.pathname}${location.search}`, focusJobId: id } });
  };

  const groups = useMemo(() => {
    const map = new Map<ColumnKey, JobApplication[]>();
    PIPELINE_GROUPS.forEach((g) => map.set(g.key, []));
    map.set("Other", []);
    for (const j of jobs) {
      map.get(groupOf(j.status) ?? "Other")!.push(j);
    }
    map.forEach((arr, k) => {
      // Sort by stage first so a column reads in pipeline order (Saved before Preparing), then by
      // recency. Fall back to savedAt: unapplied jobs have no dateApplied, and treating that as
      // the epoch would sink them to the bottom.
      arr.sort((a, b) => {
        const stageDelta = PIPELINE_STATUSES.indexOf(normalizeStatus(a.status) as Status)
          - PIPELINE_STATUSES.indexOf(normalizeStatus(b.status) as Status);
        if (stageDelta !== 0) return stageDelta;
        return +new Date(b.dateApplied ?? b.savedAt) - +new Date(a.dateApplied ?? a.savedAt);
      });
      map.set(k, arr);
    });
    return map;
  }, [jobs]);

  // A group is not a status, so dropping onto a column applies that group's entry stage. Precise
  // stages stay on the card menu.
  const onDropTo = async (group: PipelineGroup) => {
    if (!dragJobId) return;
    const movingJobId = dragJobId;
    const status = GROUP_ENTRY_STATUS[group];
    setDragJobId(null);
    setDragOverColumn(null);
    setMoveError("");
    try {
      await api.patch(`/jobapplications/${movingJobId}/status`, { status });
      await jobsResource.reload();
      setFocusAfterMoveId(movingJobId);
      setAnnouncement(t("kanbanMoveSucceeded", { status: statusLabel(t, status) }));
    } catch (error: any) {
      setMoveError(getApiErrorMessage(error, t("kanbanMoveFailed")));
      setAnnouncement(t("kanbanMoveFailedAnnouncement"));
      document.querySelector<HTMLElement>(`[data-kanban-card-id="${movingJobId}"] [role="button"]`)?.focus();
    }
  };

  const setStatus = async (id: number, status: Status) => {
    setMoveError("");
    try {
      await api.patch(`/jobapplications/${id}/status`, { status });
      await jobsResource.reload();
      setFocusAfterMoveId(id);
      setAnnouncement(t("kanbanMoveSucceeded", { status: statusLabel(t, status) }));
    } catch (error: any) {
      setMoveError(getApiErrorMessage(error, t("kanbanMoveFailed")));
      setAnnouncement(t("kanbanMoveFailedAnnouncement"));
      document.querySelector<HTMLElement>(`[data-kanban-card-id="${id}"] [role="button"]`)?.focus();
    }
  };

  const currentMenuStatus = menuJobId == null ? null : normalizeStatus(jobs.find((j) => j.id === menuJobId)?.status ?? "");

  // "Other" (custom statuses) only earns a column when something is in it, and is not a drop
  // target — there is no single custom status to assign.
  const columns = useMemo(() => {
    const base: { key: ColumnKey; label: string; droppable: boolean }[] = PIPELINE_GROUPS.map((g) => ({
      key: g.key,
      label: t(g.labelKey as any),
      droppable: true,
    }));
    if ((groups.get("Other") ?? []).length > 0) {
      base.push({ key: "Other", label: t("kanbanGroupOther"), droppable: false });
    }
    return base;
  }, [groups, t]);

  return (
    <Box ref={boardRef} sx={{ mt: 2, width: "100%", minWidth: 0, maxWidth: "100%", overflowX: "clip", contain: "inline-size" }}>
      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>{t("kanbanHint")}</Typography>

      <ViewStateNotice
        loading={jobsResource.loading || jobsResource.refreshing}
        error={jobsResource.error}
        title={t("kanbanLoadFailed")}
        description={t("kanbanLoadFailedBody")}
        onRetry={jobsResource.reload}
      />

      {!jobsResource.loading && !jobsResource.refreshing && !jobsResource.error ? (
        <Box
          sx={{
            display: { xs: "flex", lg: "grid" },
            width: "100%",
            maxWidth: "100%",
            minWidth: 0,
            gridTemplateColumns: { lg: `repeat(${columns.length}, minmax(0, 1fr))` },
            gap: 1.5,
            alignItems: "start",
            overflowX: { xs: "auto", lg: "visible" },
            scrollSnapType: { xs: "x mandatory", lg: "none" },
            pb: { xs: 1, lg: 0 },
            WebkitOverflowScrolling: "touch",
          }}
        >
          {columns.map(({ key, label, droppable }) => {
            const list = groups.get(key) ?? [];
            const tone = droppable ? statusTone(GROUP_ENTRY_STATUS[key as PipelineGroup]) : "default";
            const c = tone === "default" ? palette.text.secondary : palette[tone].main;
            const isDragActive = dragJobId !== null;
            const isActiveTarget = dragOverColumn === key;
            return (
              <Paper
                key={key}
                component="section"
                role="group"
                aria-label={t(droppable ? "kanbanColumnLabel" : "kanbanColumnNotDropTarget", { label })}
                aria-disabled={isDragActive && !droppable ? true : undefined}
                tabIndex={isDragActive ? 0 : -1}
                data-drop-state={isActiveTarget ? (droppable ? "active" : "invalid") : isDragActive ? (droppable ? "valid" : "invalid") : "idle"}
                onFocus={() => { if (isDragActive) setDragOverColumn(key); }}
                onBlur={() => { if (dragOverColumn === key) setDragOverColumn(null); }}
                onKeyDown={(event) => {
                  if (event.key === "Escape" && isDragActive) {
                    event.preventDefault(); setDragJobId(null); setDragOverColumn(null); setAnnouncement(t("kanbanKeyboardMoveCancelled"));
                  } else if ((event.key === "Enter" || event.key === " ") && isDragActive) {
                    event.preventDefault();
                    if (droppable) void onDropTo(key as PipelineGroup);
                    else setAnnouncement(t("kanbanInvalidDropTarget", { status: label }));
                  }
                }}
                onDragEnter={() => { if (isDragActive) setDragOverColumn(key); }}
                onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragOverColumn(null); }}
                onDragOver={(e) => { if (droppable) e.preventDefault(); }}
                onDrop={() => { if (droppable) void onDropTo(key as PipelineGroup); }}
                sx={{
                  p: 1.25,
                  borderRadius: 2.5,
                  minHeight: 220,
                  flex: { xs: "0 0 min(85vw, 340px)", lg: "none" },
                  scrollSnapAlign: { xs: "start", lg: "none" },
                  border: "1px solid",
                  borderColor: isActiveTarget ? (droppable ? "primary.main" : "error.main") : "divider",
                  outline: isActiveTarget ? "2px solid" : "none",
                  outlineColor: droppable ? "primary.main" : "error.main",
                  outlineOffset: 2,
                  backgroundColor: isActiveTarget && droppable ? "action.hover" : "background.paper",
                  transition: "background-color .15s, border-color .15s, outline-color .15s",
                  "&:focus-visible": { outline: "3px solid", outlineColor: "focus.main", outlineOffset: 2 },
                }}
              >
                <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.25, px: 0.25, gap: 1 }}>
                  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                    <Box sx={{ width: 9, height: 9, borderRadius: "50%", backgroundColor: c, flexShrink: 0 }} />
                    <Typography component="h2" variant="sectionTitle" sx={{ overflowWrap: "anywhere" }}>
                      {label}
                    </Typography>
                  </Box>
                  <Box
                    sx={{
                      minWidth: 22,
                      textAlign: "center",
                      px: 0.75,
                      py: 0.15,
                      borderRadius: 999,
                      backgroundColor: "action.hover",
                    }}
                  >
                    <Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700 }}>
                      {list.length}
                    </Typography>
                  </Box>
                </Box>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {list.map((j) => {
                    const pill = cardPill(j, t, language);
                    const tags = parseTags(j.tags);
                    // The column is a group, so each card names its own stage — grouping collapses
                    // the columns, not the information.
                    const cardStatus = normalizeStatus(j.status);
                    const cardTone = statusTone(cardStatus);
                    const cardColor = cardTone === "default" ? palette.text.secondary : palette[cardTone].main;
                    return (
                      <Card
                        key={j.id}
                        component="article"
                        data-kanban-card-id={j.id}
                        draggable
                        onDragStart={() => { setDragJobId(j.id); setAnnouncement(t("kanbanDragStartedAnnouncement", { title: j.jobTitle })); }}
                        onDragEnd={() => { setDragJobId(null); setDragOverColumn(null); }}
                        sx={{
                          cursor: "grab",
                          borderRadius: 2,
                          border: "1px solid",
                          borderColor: "divider",
                          borderLeft: `3px solid ${cardColor}`,
                          backgroundColor: "background.elevated",
                          boxShadow: "none",
                          transition: "border-color .15s, background-color .15s",
                          outline: dragJobId === j.id ? "2px solid" : "none",
                          outlineColor: "primary.main",
                          outlineOffset: 2,
                          "&:hover": { borderColor: "border.strong", backgroundColor: "action.hover" },
                          "&:active": { cursor: "grabbing" },
                        }}
                      >
                        <CardContent sx={{ position: "relative", p: 1.25, "&:last-child": { pb: 1.25 } }}>
                          <Box
                            role="button"
                            tabIndex={0}
                            aria-pressed={dragJobId === j.id}
                            aria-label={t(dragJobId === j.id ? "kanbanCardPickedUpLabel" : "kanbanCardPickUpLabel", { title: j.jobTitle, status: statusLabel(t, j.status) })}
                            onKeyDown={(event) => {
                              if (event.key === "Escape" && dragJobId === j.id) {
                                event.preventDefault(); setDragJobId(null); setDragOverColumn(null); setAnnouncement(t("kanbanKeyboardMoveCancelled"));
                              } else if (event.key === " ") {
                                event.preventDefault();
                                const pickingUp = dragJobId !== j.id;
                                setDragJobId(pickingUp ? j.id : null);
                                setDragOverColumn(null);
                                setAnnouncement(pickingUp ? t("kanbanPickedUpAnnouncement", { title: j.jobTitle }) : t("kanbanKeyboardMoveCancelled"));
                              } else if (event.key === "Enter" && dragJobId == null) {
                                event.preventDefault(); openJob(j.id);
                              }
                            }}
                            onClick={() => { if (dragJobId == null) openJob(j.id); }}
                            sx={{ cursor: "pointer", borderRadius: 1, "&:focus-visible": { outline: "3px solid", outlineColor: "focus.main", outlineOffset: 3 } }}
                          >
                            <Typography sx={{ pr: 4.5, fontWeight: 700, lineHeight: 1.3, overflowWrap: "anywhere" }}>
                              {j.jobTitle}
                            </Typography>
                            <Typography variant="body2" sx={{ color: "text.secondary" }}>
                              {[j.company?.name, j.location].filter(Boolean).join(" · ")}
                            </Typography>

                          <Box sx={{ mt: 0.75 }}>
                            <Chip
                              size="small"
                              label={statusLabel(t, j.status)}
                              variant="outlined"
                              sx={{
                                height: 22,
                                fontWeight: 700,
                                borderColor: cardTone === "default" ? "divider" : cardColor,
                                color: cardTone === "default" ? "text.primary" : cardColor,
                              }}
                            />
                          </Box>

                          {tags.length > 0 && (
                            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.75 }}>
                              {tags.map((tag) => (
                                <Chip
                                  key={tag}
                                  size="small"
                                  label={tag}
                                  sx={{ height: 22, backgroundColor: "action.hover", color: "text.secondary", fontWeight: 600 }}
                                />
                              ))}
                            </Box>
                          )}

                          {pill && (
                            <Box sx={{ mt: 0.75 }}>
                              <Chip
                                size="small"
                                label={pill.text}
                                sx={{
                                  height: 24,
                                  fontWeight: 700,
                                  backgroundColor: "action.hover",
                                  color: palette[pill.tone].main,
                                }}
                              />
                            </Box>
                          )}

                            {j.daysSince != null ? (
                              <Typography variant="caption" sx={{ display: "block", color: "text.secondary", mt: 0.75 }}>
                                {t("kanbanAppliedAgo", { days: j.daysSince })}
                              </Typography>
                            ) : null}
                          </Box>
                          <IconButton
                            size="small"
                            aria-label={`${t("jobTableQuickStatus")}: ${j.jobTitle}`}
                            onClick={(e) => { setMenuJobId(j.id); setMenuAnchor(e.currentTarget); }}
                            sx={{ position: "absolute", top: 5, right: 5, minWidth: { xs: 44, sm: 36 }, minHeight: { xs: 44, sm: 36 } }}
                          >
                            <MoreHorizIcon fontSize="small" />
                          </IconButton>
                        </CardContent>
                      </Card>
                    );
                  })}
                  {list.length === 0 && (
                    <Typography variant="body2" sx={{ color: "text.secondary", py: 2, px: 0.5 }}>
                      {dragJobId !== null && droppable ? t("kanbanDropHere") : t("kanbanEmptyColumn")}
                    </Typography>
                  )}
                </Box>
              </Paper>
            );
          })}
        </Box>
      ) : null}

      {moveError ? <Alert severity="error" variant="outlined" sx={{ mt: 2, color: "text.primary" }} onClose={() => setMoveError("")}>{moveError}</Alert> : null}
      <Box component="span" sx={{ position: "absolute", width: "1px", height: "1px", p: 0, m: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }} aria-live="polite">
        {announcement}
      </Box>

      {/* Dragging is coarse (group entry stage only), so the menu carries every precise stage. */}
      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => { setMenuAnchor(null); setMenuJobId(null); }}>
        {PIPELINE_GROUPS.flatMap((g) => {
          const options = g.statuses.filter((s) => s !== currentMenuStatus);
          if (options.length === 0) return [];
          return [
            <ListSubheader key={`${g.key}-header`} sx={{ lineHeight: "32px", backgroundColor: "transparent" }}>
              {t(g.labelKey as any)}
            </ListSubheader>,
            ...options.map((s) => (
              <MenuItem key={s} onClick={() => { if (menuJobId) void setStatus(menuJobId, s); setMenuAnchor(null); setMenuJobId(null); }}>
                {t("jobTableSetStatus", { status: statusLabel(t, s) })}
              </MenuItem>
            )),
          ];
        })}
      </Menu>
    </Box>
  );
}