import { ModelSettings } from "./components/ModelSettings";
import {
  Alert,
  ActionIcon,
  AppShell,
  Box,
  Button,
  CloseButton,
  Container,
  Group,
  MantineProvider,
  Paper,
  SegmentedControl,
  Select,
  Stack,
  Text,
  Title,
  Tooltip,
  createTheme,
  useComputedColorScheme,
  useMantineColorScheme,
} from "@mantine/core";
import { IconArrowLeft, IconSettings, IconAlertTriangle, IconCircleFilled, IconMoon, IconSun } from "@tabler/icons-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  dismissNotification,
  filterTasks,
  manualTransitionExpectedState,
  reconcileManualTransitionResponse,
  reconcileNotifications,
  statusFilterCounts,
  STATUS_FILTERS,
} from "../state.js";
import { connectDashboard, dashboardVersion, manualTransition, openInCodex, taskDetail } from "./api";
import {
  clearNotificationHistory,
  listUsageSignature,
  mergeListTaskIntoDetail,
  notificationClicked,
} from "./overlay-state";
import { usageStillCalculating } from "./presentation";
import type { DashboardSnapshot, NotificationSnapshot, Task } from "./types";
import { NotificationCenter } from "./components/NotificationCenter";
import { TaskCard } from "./components/TaskCard";
import { TaskBoard } from "./components/TaskBoard";
import { TaskDetail } from "./components/TaskDetail";
import { RelativeTimeProvider } from "./components/RelativeTime";

const theme = createTheme({
  primaryColor: "teal",
  colors: {
    teal: [
      "#e6fcf5",
      "#c3fae8",
      "#96f2d7",
      "#63e6be",
      "#38d9a9",
      "#20c997",
      "#087f5b",
      "#067052",
      "#055e46",
      "#044d39",
    ],
  },
  defaultRadius: "md",
  fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",
  headings: { fontFamily: "inherit", fontWeight: "680" },
  components: {
    Button: { defaultProps: { radius: "md" } },
    Paper: { defaultProps: { radius: "md" } },
    Select: { defaultProps: { size: "xs" } },
  },
});
const styleNonce = document.querySelector<HTMLMetaElement>('meta[name="taskchef-style-nonce"]')?.content;
const VIEW_STORAGE_KEY = "taskchef.dashboard.view";

function savedView(): "board" | "list" {
  try { return window.localStorage.getItem(VIEW_STORAGE_KEY) === "board" ? "board" : "list"; }
  catch { return "list"; }
}

interface NotificationState {
  initialized: boolean;
  announcements: NotificationSnapshot[];
  notifications: NotificationSnapshot[];
  seenIds: Set<string>;
  signatures: Map<string, string>;
}

export function TaskResultsSummary({
  totalCount,
  visibleCount,
}: {
  totalCount: number;
  visibleCount: number;
}) {
  return (
    <Text aria-live="polite" className="taskchef-results-summary taskchef-content" id="task-results-summary">
      Tasks: {visibleCount} of {totalCount}
    </Text>
  );
}

export function DashboardApp({
  connect = true,
  initialFilters = {},
  initialTasks = [],
}: {
  connect?: boolean;
  initialFilters?: { project?: string; status?: string };
  initialTasks?: Task[];
}) {
  const [settings, setSettings] = useState(() => window.location.hash === '#settings');
  useEffect(() => {
    const update = () => setSettings(window.location.hash === '#settings');
    window.addEventListener('hashchange', update);
    return () => window.removeEventListener('hashchange', update);
  }, []);
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [projectIndex, setProjectIndex] = useState<DashboardSnapshot["projectIndex"]>();
  const [connected, setConnected] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [version, setVersion] = useState<string | null>(null);
  const [project, setProject] = useState(initialFilters.project ?? "");
  const [status, setStatus] = useState(initialFilters.status ?? "");
  const [date, setDate] = useState("all");
  const [preferredView, setPreferredView] = useState(savedView);
  const [completedLimit, setCompletedLimit] = useState(5);
  const [now, setNow] = useState(() => Date.now());
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
  const [detailOpened, setDetailOpened] = useState(false);
  const [detailBusy, setDetailBusy] = useState(false);
  const [detailError, setDetailError] = useState<string | null>(null);
  const [detailNotice, setDetailNotice] = useState<string | null>(null);
  const [highlightTurnRef, setHighlightTurnRef] = useState<string | null>(null);
  const [notificationState, setNotificationState] = useState<NotificationState>({
    initialized: initialTasks.length > 0,
    announcements: [],
    notifications: [],
    seenIds: new Set(),
    signatures: new Map(),
  });
  const selectedId = selectedTask?.id ?? null;
  const selectedIdRef = useRef<string | null>(selectedId);
  selectedIdRef.current = selectedId;
  const detailGeneration = useRef(0);
  const detailListUpdatedAt = useRef<string | null>(null);
  const detailListUsageSignature = useRef(listUsageSignature(null));

  const applySnapshot = useCallback((snapshot: DashboardSnapshot) => {
    setTasks(snapshot.tasks);
    setProjectIndex(snapshot.projectIndex);
    setNotificationState((current) => {
      const reconciled = reconcileNotifications(current, snapshot.tasks);
      return {
        initialized: true,
        announcements: reconciled.additions,
        notifications: reconciled.notifications,
        seenIds: reconciled.seenIds,
        signatures: reconciled.signatures,
      };
    });
    setMessage(snapshot.healthy === false
      ? "The task log is temporarily unavailable. Showing the last valid snapshot."
      : null);
    const currentSelectedId = selectedIdRef.current;
    if (currentSelectedId) {
      const updated = snapshot.tasks.find((task) => task.id === currentSelectedId);
      if (updated) {
        setSelectedTask((current) => current ? mergeListTaskIntoDetail(current, updated) : updated);
      }
    }
  }, []);

  useEffect(() => {
    const timer = window.setInterval(() => setNow(Date.now()), 30_000);
    return () => window.clearInterval(timer);
  }, []);

  useEffect(() => {
    if (!connect) return;
    void dashboardVersion().then(setVersion).catch(() => setVersion(null));
    const stream = connectDashboard({
      onConnection: setConnected,
      onError: setMessage,
      onSnapshot: applySnapshot,
    });
    return () => stream.close();
  }, [applySnapshot, connect]);

  const loadDetail = useCallback(async (task: Task, focusTurnRef: string | null = null) => {
    const generation = ++detailGeneration.current;
    detailListUpdatedAt.current = task.updatedAt;
    detailListUsageSignature.current = listUsageSignature(task);
    setSelectedTask((current) => current?.id === task.id
      ? mergeListTaskIntoDetail(current, task)
      : task);
    setDetailOpened(true);
    setHighlightTurnRef(focusTurnRef);
    setDetailError(null);
    setDetailNotice(null);
    try {
      for (let attempt = 0; attempt <= 40; attempt += 1) {
        if (generation !== detailGeneration.current) return;
        const detail = await taskDetail(task.id);
        if (generation !== detailGeneration.current) return;
        detailListUpdatedAt.current = detail.updatedAt;
        detailListUsageSignature.current = listUsageSignature(detail);
        setSelectedTask(detail);
        if (!usageStillCalculating(detail) || attempt === 40) return;
        await new Promise((resolve) => window.setTimeout(resolve, 1_500));
      }
    } catch {
      if (generation === detailGeneration.current) {
        setDetailError("Task activity is temporarily unavailable. Showing the latest list snapshot.");
      }
    }
  }, []);

  const selectedListTask = tasks.find((task) => task.id === selectedId) ?? null;
  const selectedListUsageSignature = listUsageSignature(selectedListTask);

  useEffect(() => {
    if (!detailOpened || !selectedId || !connect) return;
    if (!selectedListTask) return;
    if (
      selectedListTask.updatedAt === detailListUpdatedAt.current
      && selectedListUsageSignature === detailListUsageSignature.current
    ) return;
    void loadDetail(selectedListTask, highlightTurnRef);
    // Task or cached usage changes while detail is open refresh the full projection.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedListTask?.updatedAt, selectedListUsageSignature]);

  const projects = useMemo(() => [
    { label: "All projects", value: "" },
    ...[...new Set(tasks.map((task) => task.project.name))].sort().map((value) => ({ label: value, value })),
  ], [tasks]);
  const visible = useMemo(() => filterTasks(tasks, { project, status, date, now }), [tasks, project, status, date, now]);
  const boardTasks = useMemo(() => filterTasks(tasks, { project, date, now }), [tasks, project, date, now]);
  const board = preferredView === "board";
  const listLayout = !board && !settings;
  const counts = useMemo(() => statusFilterCounts(tasks, { project, date, now }), [tasks, project, date, now]);
  const statusData = STATUS_FILTERS.map(({ label, value }: { label: string; value: string }) => ({
    label: counts[value] > 0 ? `${label} ${counts[value]}` : label,
    value,
  }));

  function changeView(value: string) {
    if (value !== "board" && value !== "list") return;
    setPreferredView(value);
    try { window.localStorage.setItem(VIEW_STORAGE_KEY, value); } catch { /* Preference remains in memory. */ }
  }

  async function handleOpenCodex(task: Task) {
    setDetailBusy(true);
    try {
      const result = await openInCodex(task.id);
      if (result) setMessage(result);
    } catch {
      setMessage("Codex could not be opened. Open the project and select the recorded task instead.");
    } finally {
      setDetailBusy(false);
    }
  }

  async function handleTransition(targetStatus: "completed" | "failed", actionId: string) {
    if (!selectedTask) return { ok: false };
    const requestTask = selectedTask;
    const expected = manualTransitionExpectedState(requestTask);
    setDetailBusy(true);
    setDetailError(null);
    const result = await manualTransition(requestTask, targetStatus, actionId);
    setDetailBusy(false);
    if (result.task) {
      setSelectedTask((current) => reconcileManualTransitionResponse({
        requestTask,
        expected,
        responseTask: result.task,
        selectedTask: current,
      }));
      setTasks((current) => current.map((candidate) => candidate.id === requestTask.id
        ? reconcileManualTransitionResponse({
          requestTask,
          expected,
          responseTask: result.task,
          selectedTask: candidate,
        })
        : candidate));
    }
    if (result.ok && result.task) {
      setHighlightTurnRef(result.task.turnRef ?? result.task.turnId);
      return { ok: true };
    } else {
      setDetailError(result.message ?? "Task state could not be changed.");
      return { ok: false, rotateActionId: result.code === "stale_task" };
    }
  }

  function handleNotificationOpen(notification: NotificationSnapshot) {
    const currentTask = tasks.find((task) => task.id === notification.taskId);
    const overlay = notificationClicked({
      detailTaskId: selectedId,
      detailOpened,
      highlightTurnRef,
      notifications: notificationState.notifications,
      refreshGeneration: detailGeneration.current,
    }, notification, Boolean(currentTask));
    setNotificationState((current) => ({ ...current, notifications: overlay.notifications }));
    if (!currentTask) {
      setMessage("This task is no longer present in the current snapshot.");
      return;
    }
    void loadDetail(currentTask, overlay.highlightTurnRef);
  }

  return (
    <MantineProvider
      defaultColorScheme="auto"
      getStyleNonce={styleNonce ? () => styleNonce : undefined}
      theme={theme}
    >
      <RelativeTimeProvider now={now}>
      <AppShell className="taskchef-shell" padding={0}>
        <Box className="taskchef-header-shell" component="header">
          <Container className={`taskchef-header${board ? " taskchef-header-board" : ""}${listLayout ? " taskchef-list-layout" : ""}`} size="100%">
            <Group className="taskchef-header-layout" justify="space-between" wrap="nowrap">
              <Group className="taskchef-header-copy" gap="xs" wrap="nowrap">
                <BrandIcon />
                <Title className="taskchef-brand-title" order={1}>
                  <span>TaskChef Dashboard</span>
                  {version && <span className="taskchef-version">v{version}</span>}
                </Title>
              </Group>
              <Group className="taskchef-header-actions" gap={2} justify="flex-end" wrap="nowrap">
                <Tooltip label="Settings"><ActionIcon className="taskchef-icon-button" component="a" href="#settings" aria-label="Settings" aria-current={settings ? 'page' : undefined} variant="subtle" color="gray" size="lg"><IconSettings size={18} stroke={1.8} /></ActionIcon></Tooltip>
                <ThemeToggle />
                <Group aria-live="polite" className="taskchef-connection" gap={7} role="status" wrap="nowrap">
                  <IconCircleFilled aria-hidden color={connected ? "var(--mantine-color-teal-6)" : "var(--mantine-color-yellow-6)"} size={9} />
                  <Text c="dimmed" size="xs">{connected ? "Live" : connect ? "Connecting…" : "Fixture preview"}</Text>
                </Group>
              </Group>
            </Group>
          </Container>
        </Box>

        <AppShell.Main>
          <Container className={`taskchef-main${board ? " taskchef-main-board" : ""}${listLayout ? " taskchef-list-layout" : ""}`} pb={80} size="100%">
            {projectIndex?.status === "unavailable" && (
              <Alert color="yellow" icon={<IconAlertTriangle size={18} />} mb="md" title="Project index unavailable">
                Task history is still visible. Verify the index and inspect backups before making project changes.
              </Alert>
            )}
            {projectIndex?.status === "available" && projectIndex.missingProjects.length > 0 && (
              <Alert color="yellow" icon={<IconAlertTriangle size={18} />} mb="md" title="Historical projects are missing from the current index">
                {projectIndex.missingProjects.map((item) => (
                  <Text key={item.path} size="sm">
                    {item.snapshotNames.join(", ")}: {item.taskCount} task(s). Run <code>taskchef backup list --json</code> and preview any restore; the dashboard never restores automatically.
                  </Text>
                ))}
              </Alert>
            )}
            {settings ? <Stack className="taskchef-settings-page taskchef-content" gap="sm"><Button component="a" href="#" variant="subtle" size="xs" leftSection={<IconArrowLeft size={14} />} style={{ alignSelf: 'flex-start' }}>Back to tasks</Button><ModelSettings /></Stack> : <>
            <Paper className="taskchef-toolbar" radius={0}>
              <Stack gap="sm">
                <Group className="taskchef-toolbar-view">
                  <SegmentedControl aria-label="View" data={[{ label: "Board", value: "board" }, { label: "List", value: "list" }]} onChange={changeView} size="xs" value={preferredView} withItemsBorders={false} />
                </Group>
                <Group className="taskchef-toolbar-filters" gap="sm" wrap="nowrap">
                  <Select aria-label="Project" data={projects} onChange={(value) => { setProject(value ?? ""); setCompletedLimit(5); }} value={project} />
                  <Select aria-label="Updated" data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]} onChange={(value) => { setDate(value ?? "all"); setCompletedLimit(5); }} value={date} />
                </Group>
                {!board && <Box className="taskchef-toolbar-status">
                  <SegmentedControl aria-label="Status" data={statusData} onChange={setStatus} size="xs" value={status} withItemsBorders={false} />
                </Box>}
              </Stack>
            </Paper>

            {!board && <TaskResultsSummary totalCount={tasks.length} visibleCount={visible.length} />}

            {message && (
              <Alert color="yellow" icon={<IconAlertTriangle aria-hidden size={17} />} mt="md" role="status">
                <Group gap="sm" justify="space-between" wrap="nowrap">
                  <Text size="sm">{message}</Text>
                  <CloseButton aria-label="Dismiss dashboard message" onClick={() => setMessage(null)} size="sm" />
                </Group>
              </Alert>
            )}

            {board ? <TaskBoard
              completedLimit={completedLimit}
              onMoreCompleted={() => setCompletedLimit((limit) => limit + 5)}
              onOpenCodex={handleOpenCodex}
              onOpenDetail={(value) => void loadDetail(value)}
              tasks={boardTasks}
            /> : <Stack aria-describedby="task-results-summary" aria-label="Tasks" className="taskchef-list taskchef-content" component="section" gap="sm" mt="xs">
              {visible.map((task: Task) => (
                <TaskCard key={task.id} onOpenCodex={handleOpenCodex} onOpenDetail={(value) => void loadDetail(value)} task={task} />
              ))}
              {visible.length === 0 && (
                <Paper className="taskchef-empty" p={48} ta="center" withBorder>
                  <Title order={2} size="h4">No tasks match these filters</Title>
                  <Text c="dimmed" mt={4} size="sm">Choose a different project, update window, or status.</Text>
                </Paper>
              )}
            </Stack>}
            </>}
          </Container>
        </AppShell.Main>
      </AppShell>

      <TaskDetail
        busy={detailBusy}
        error={detailError}
        highlightTurnRef={highlightTurnRef}
        onClose={() => {
          if (!detailBusy) {
            detailGeneration.current += 1;
            setDetailOpened(false);
            setHighlightTurnRef(null);
          }
        }}
        onCopy={() => {
          if (!selectedTask) return;
          setDetailNotice(null);
          void navigator.clipboard.writeText(selectedTask.id).then(
            () => setDetailNotice("Task ID copied."),
            () => setDetailNotice("Clipboard access is unavailable. Copy the Task ID from metadata."),
          );
        }}
        onOpenCodex={() => selectedTask && void handleOpenCodex(selectedTask)}
        onTransition={handleTransition}
        opened={detailOpened}
        task={selectedTask}
        notice={detailNotice}
        notifications={detailOpened ? (
          <NotificationCenter
            announcements={notificationState.announcements}
            notifications={notificationState.notifications}
            onClear={() => setNotificationState((current) => ({
              ...current,
              notifications: clearNotificationHistory({
                detailTaskId: selectedId,
                detailOpened,
                highlightTurnRef,
                notifications: current.notifications,
                refreshGeneration: detailGeneration.current,
              }).notifications,
            }))}
            onDismiss={(notification) => setNotificationState((current) => ({ ...current, notifications: dismissNotification(current.notifications, notification.id) }))}
            onOpen={handleNotificationOpen}
            tasks={tasks}
            withinPortal={false}
          />
        ) : null}
      />
      {!detailOpened && (
        <NotificationCenter
          announcements={notificationState.announcements}
          notifications={notificationState.notifications}
          onClear={() => setNotificationState((current) => ({
            ...current,
            notifications: clearNotificationHistory({
              detailTaskId: selectedId,
              detailOpened,
              highlightTurnRef,
              notifications: current.notifications,
              refreshGeneration: detailGeneration.current,
            }).notifications,
          }))}
          onDismiss={(notification) => setNotificationState((current) => ({ ...current, notifications: dismissNotification(current.notifications, notification.id) }))}
          onOpen={handleNotificationOpen}
          tasks={tasks}
        />
      )}
      </RelativeTimeProvider>
    </MantineProvider>
  );
}

function ThemeToggle() {
  const { setColorScheme } = useMantineColorScheme();
  const colorScheme = useComputedColorScheme("light");
  const next = colorScheme === "dark" ? "light" : "dark";
  return (
    <Tooltip label={`Use ${next} theme`}>
      <ActionIcon
        aria-label={`Use ${next} theme`}
        className="taskchef-icon-button"
        color="gray"
        onClick={() => setColorScheme(next)}
        size="lg"
        variant="subtle"
      >
        {colorScheme === "dark" ? <IconSun aria-hidden size={18} stroke={1.8} /> : <IconMoon aria-hidden size={18} stroke={1.8} />}
      </ActionIcon>
    </Tooltip>
  );
}

function BrandIcon() {
  const colorScheme = useComputedColorScheme("light");
  return (
    <img
      alt=""
      aria-hidden
      className="taskchef-brand-icon"
      height="28"
      src={colorScheme === "dark" ? "/assets/taskchef-dark.svg" : "/assets/taskchef.svg"}
      width="28"
    />
  );
}

export default DashboardApp;