import {
  CheckCircle2,
  Clock3,
  ListChecks,
  Loader2,
  XCircle,
} from 'lucide-react';
import {
  type WheelEvent as ReactWheelEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import type { ExternalGenerationTaskRecord } from '../../../packages/shared/src/contracts/externalGeneration';
import { listExternalGenerationTasks } from '../../services/external-generation';
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
import type {
  CanvasTaskListItem,
  CanvasTaskStatus,
} from './ImageCanvasEditorTypes';

const COMPLETED_TASK_LIST_LIMIT = 20;
const ACTIVE_TASK_LIST_LIMIT = 100;
const ACTIVE_TASK_POLL_INTERVAL_MS = 4000;

type TaskSidebarTab = 'active' | 'completed';

type TaskSidebarItem = {
  id: string;
  title: string;
  detail: string;
  status: CanvasTaskStatus;
  startedAt?: number;
  finishedAt?: number;
  elapsedMs?: number;
  errorMessage?: string;
  onClick?: () => void;
  sortTime: number;
};

type ImageCanvasTaskSidebarViewProps = {
  projectId?: string | null;
  localTasks?: CanvasTaskListItem[];
  open: boolean;
  onToggleOpen: () => void;
  onFocusExternalTask: (task: ExternalGenerationTaskRecord) => void;
  onFocusLocalTask?: (task: CanvasTaskListItem) => void;
};

function parseTaskTimeMs(value?: string | null) {
  if (!value) {
    return undefined;
  }
  const timestamp = Date.parse(value);
  return Number.isFinite(timestamp) ? timestamp : undefined;
}

function formatElapsedMs(elapsedMs?: number) {
  if (typeof elapsedMs !== 'number' || !Number.isFinite(elapsedMs)) {
    return null;
  }
  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
  if (totalSeconds >= 60) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return seconds > 0 ? `${minutes}分${seconds}秒` : `${minutes}分`;
  }
  return `${Math.max(1, totalSeconds)}秒`;
}

function formatTaskTimeMs(timestampMs?: number) {
  if (typeof timestampMs !== 'number' || !Number.isFinite(timestampMs)) {
    return null;
  }
  const date = new Date(timestampMs);
  const pad = (value: number) => String(value).padStart(2, '0');
  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
    date.getHours(),
  )}:${pad(date.getMinutes())}`;
}

function normalizeTaskPrompt(value?: string | null) {
  const prompt = value?.trim();
  return prompt || null;
}

function externalTaskDetail(
  task: ExternalGenerationTaskRecord,
  status: CanvasTaskStatus,
) {
  if (status === 'failed') {
    return task.error?.trim() || task.phaseDetail || task.updatedAt;
  }
  if (status === 'done') {
    return (
      normalizeTaskPrompt(task.requestPrompt) ||
      task.requestLabel.trim() ||
      task.jobKind
    );
  }
  const phaseLabel = task.phaseLabel.trim();
  const phaseDetail = task.phaseDetail.trim();
  const progressLabel =
    Number.isFinite(task.progress) && task.progress > 0
      ? `总进度 ${Math.min(100, Math.max(0, Math.round(task.progress)))}%`
      : null;
  return [phaseLabel, phaseDetail, progressLabel]
    .filter((value): value is string => Boolean(value))
    .join(' · ');
}

function stopTaskSidebarWheel(event: ReactWheelEvent<HTMLElement>) {
  event.stopPropagation();
}

function canvasTaskStatusFromExternalTask(
  status: ExternalGenerationTaskRecord['status'],
): CanvasTaskStatus {
  if (status === 'running') {
    return 'running';
  }
  if (status === 'queued') {
    return 'pending';
  }
  if (status === 'failed') {
    return 'failed';
  }
  return 'done';
}

function statusLabel(status: CanvasTaskStatus) {
  if (status === 'pending') {
    return '排队中';
  }
  if (status === 'running') {
    return '进行中';
  }
  if (status === 'failed') {
    return '失败';
  }
  return '完成';
}

function statusIcon(status: CanvasTaskStatus) {
  if (status === 'pending') {
    return <Clock3 className="h-3.5 w-3.5" aria-hidden="true" />;
  }
  if (status === 'running') {
    return <Loader2 className="h-3.5 w-3.5" aria-hidden="true" />;
  }
  if (status === 'failed') {
    return <XCircle className="h-3.5 w-3.5" aria-hidden="true" />;
  }
  return <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />;
}

function isActiveTaskStatus(status: CanvasTaskStatus) {
  return status === 'running' || status === 'pending';
}

function activeTaskSortPriority(status: CanvasTaskStatus) {
  if (status === 'running') {
    return 0;
  }
  if (status === 'pending') {
    return 1;
  }
  return 2;
}

function mergeExternalTasks(
  currentTasks: ExternalGenerationTaskRecord[],
  nextTasks: ExternalGenerationTaskRecord[],
) {
  const taskById = new Map(currentTasks.map((task) => [task.jobId, task]));
  for (const task of nextTasks) {
    taskById.set(task.jobId, task);
  }
  return Array.from(taskById.values());
}

function isActiveExternalTask(task: ExternalGenerationTaskRecord) {
  return task.status === 'queued' || task.status === 'running';
}

function isTerminalExternalTask(task: ExternalGenerationTaskRecord) {
  return task.status === 'completed' || task.status === 'failed';
}

function isEditorCanvasTaskForProject(
  task: ExternalGenerationTaskRecord,
  projectId?: string | null,
) {
  const normalizedProjectId = projectId?.trim();
  return (
    task.sourceModule === 'editor-canvas' &&
    Boolean(normalizedProjectId) &&
    task.sourceEntityId.trim() === normalizedProjectId
  );
}

function mergeExternalTaskRefresh(
  currentTasks: ExternalGenerationTaskRecord[],
  refreshedTasks: ExternalGenerationTaskRecord[],
) {
  const refreshedIds = new Set(refreshedTasks.map((task) => task.jobId));
  return mergeExternalTasks(
    currentTasks.filter(
      (task) => !isActiveExternalTask(task) && !refreshedIds.has(task.jobId),
    ),
    refreshedTasks,
  );
}

export function ImageCanvasTaskSidebarView({
  projectId,
  localTasks = [],
  open,
  onToggleOpen,
  onFocusExternalTask,
  onFocusLocalTask,
}: ImageCanvasTaskSidebarViewProps) {
  const [activeTab, setActiveTab] = useState<TaskSidebarTab>('active');
  const [now, setNow] = useState(() => Date.now());
  const [externalTasks, setExternalTasks] = useState<
    ExternalGenerationTaskRecord[]
  >([]);
  const previousActiveItemCountRef = useRef(0);
  const filterVisibleExternalTasks = useCallback(
    (tasks: ExternalGenerationTaskRecord[]) =>
      tasks.filter((task) => isEditorCanvasTaskForProject(task, projectId)),
    [projectId],
  );

  useEffect(() => {
    let disposed = false;
    const controller = new AbortController();
    Promise.all([
      listExternalGenerationTasks({
        limit: ACTIVE_TASK_LIST_LIMIT,
        includeAcknowledgedTerminal: false,
        statuses: ['running', 'queued'],
        signal: controller.signal,
      }),
      listExternalGenerationTasks({
        limit: COMPLETED_TASK_LIST_LIMIT,
        includeAcknowledgedTerminal: true,
        statuses: ['completed', 'failed'],
        signal: controller.signal,
      }),
    ])
      .then(([activeResponse, completedResponse]) => {
        if (disposed) {
          return;
        }
        setExternalTasks(
          mergeExternalTasks(
            filterVisibleExternalTasks(activeResponse.tasks),
            filterVisibleExternalTasks(completedResponse.tasks),
          ),
        );
      })
      .catch(() => {
        if (!disposed) {
          setExternalTasks([]);
        }
      });
    return () => {
      disposed = true;
      controller.abort();
    };
  }, [filterVisibleExternalTasks]);

  const activeExternalTaskIds = useMemo(
    () =>
      externalTasks
        .filter((task) => task.status === 'queued' || task.status === 'running')
        .map((task) => task.jobId),
    [externalTasks],
  );
  const activeExternalTaskKey = activeExternalTaskIds.join('|');

  useEffect(() => {
    if (!activeExternalTaskIds.length) {
      return undefined;
    }
    let disposed = false;
    let timerId: number | null = null;

    const refreshActiveTasks = () => {
      const controller = new AbortController();
      Promise.all([
        listExternalGenerationTasks({
          limit: ACTIVE_TASK_LIST_LIMIT,
          includeAcknowledgedTerminal: false,
          statuses: ['running', 'queued'],
          signal: controller.signal,
        }),
        listExternalGenerationTasks({
          limit: COMPLETED_TASK_LIST_LIMIT,
          includeAcknowledgedTerminal: true,
          statuses: ['completed', 'failed'],
          signal: controller.signal,
        }),
      ])
        .then(([activeResponse, completedResponse]) => {
          if (disposed) {
            return;
          }
          const refreshedTasks = mergeExternalTasks(
            filterVisibleExternalTasks(activeResponse.tasks),
            filterVisibleExternalTasks(completedResponse.tasks),
          );
          setExternalTasks((currentTasks) =>
            mergeExternalTaskRefresh(currentTasks, refreshedTasks),
          );
        })
        .catch(() => {
          // 下轮继续刷新；单次列表读取失败不应该冻结正在生成的任务状态。
        })
        .finally(() => {
          if (disposed) {
            return;
          }
          timerId = window.setTimeout(
            refreshActiveTasks,
            ACTIVE_TASK_POLL_INTERVAL_MS,
          );
        });
    };

    timerId = window.setTimeout(
      refreshActiveTasks,
      ACTIVE_TASK_POLL_INTERVAL_MS,
    );
    return () => {
      disposed = true;
      if (timerId !== null) {
        window.clearTimeout(timerId);
      }
    };
  }, [
    activeExternalTaskIds,
    activeExternalTaskKey,
    filterVisibleExternalTasks,
  ]);

  useEffect(() => {
    const hasRunningTask =
      externalTasks.some((task) => task.status === 'running') ||
      localTasks.some((task) => task.status === 'running');
    if (!hasRunningTask) {
      return undefined;
    }
    const timerId = window.setInterval(() => {
      setNow(Date.now());
    }, 1000);
    return () => window.clearInterval(timerId);
  }, [externalTasks, localTasks]);

  const items = useMemo<TaskSidebarItem[]>(() => {
    const externalVisibleTasks = mergeExternalTasks(
      externalTasks.filter(
        (task) => task.status === 'queued' || task.status === 'running',
      ),
      externalTasks
        .filter(isTerminalExternalTask)
        .sort(
          (left, right) =>
            (parseTaskTimeMs(right.completedAt) ??
              parseTaskTimeMs(right.updatedAt) ??
              0) -
            (parseTaskTimeMs(left.completedAt) ??
              parseTaskTimeMs(left.updatedAt) ??
              0),
        )
        .slice(0, COMPLETED_TASK_LIST_LIMIT),
    );
    const externalItems = externalVisibleTasks.map<TaskSidebarItem>((task) => {
      const status = canvasTaskStatusFromExternalTask(task.status);
      const startedAt =
        parseTaskTimeMs(task.startedAt) ?? parseTaskTimeMs(task.createdAt);
      const finishedAt =
        parseTaskTimeMs(task.completedAt) ?? parseTaskTimeMs(task.updatedAt);
      return {
        id: `external-${task.jobId}`,
        title: task.requestLabel.trim() || task.jobKind,
        detail: externalTaskDetail(task, status),
        status,
        startedAt,
        finishedAt,
        elapsedMs:
          status === 'running' && startedAt
            ? now - startedAt
            : startedAt && finishedAt
              ? finishedAt - startedAt
              : undefined,
        errorMessage: task.error ?? undefined,
        onClick: () => onFocusExternalTask(task),
        sortTime:
          finishedAt ??
          startedAt ??
          parseTaskTimeMs(task.createdAt) ??
          parseTaskTimeMs(task.updatedAt) ??
          0,
      };
    });
    const localItems = localTasks.map<TaskSidebarItem>((task) => ({
      id: `local-${task.id}`,
      title: task.title,
      detail: task.detail,
      status: task.status,
      startedAt: task.startedAt,
      finishedAt: task.finishedAt,
      elapsedMs:
        task.status === 'running'
          ? now - task.startedAt
          : task.elapsedMs ??
            (task.finishedAt ? task.finishedAt - task.startedAt : undefined),
      errorMessage: task.errorMessage,
      onClick:
        task.focusLayerId && onFocusLocalTask
          ? () => onFocusLocalTask(task)
          : undefined,
      sortTime: task.finishedAt ?? task.startedAt,
    }));
    return [...localItems, ...externalItems];
  }, [externalTasks, localTasks, now, onFocusExternalTask, onFocusLocalTask]);

  const activeItems = useMemo(
    () =>
      items
        .filter((item) => isActiveTaskStatus(item.status))
        .sort(
          (left, right) =>
            activeTaskSortPriority(left.status) -
              activeTaskSortPriority(right.status) ||
            right.sortTime - left.sortTime ||
            left.id.localeCompare(right.id),
        ),
    [items],
  );
  const completedItems = useMemo(
    () =>
      items
        .filter((item) => !isActiveTaskStatus(item.status))
        .sort(
          (left, right) =>
            right.sortTime - left.sortTime || left.id.localeCompare(right.id),
        )
        .slice(0, COMPLETED_TASK_LIST_LIMIT),
    [items],
  );

  useEffect(() => {
    const previousActiveItemCount = previousActiveItemCountRef.current;
    if (activeItems.length > previousActiveItemCount) {
      setActiveTab('active');
    }
    previousActiveItemCountRef.current = activeItems.length;
  }, [activeItems.length]);

  const visibleItems = activeTab === 'active' ? activeItems : completedItems;

  if (!open && items.length === 0) {
    return (
      <div className="image-canvas-editor__task-sidebar image-canvas-editor__task-sidebar--closed">
        <EditorIconButton
          className="image-canvas-editor__task-sidebar-toggle"
          label="任务列表"
          title="任务列表"
          icon={ListChecks}
          expanded={false}
          onClick={onToggleOpen}
        />
      </div>
    );
  }

  return (
    <aside
      className={`image-canvas-editor__task-sidebar ${open ? 'image-canvas-editor__task-sidebar--open' : 'image-canvas-editor__task-sidebar--closed'}`}
      aria-label="画布任务列表"
      onWheel={stopTaskSidebarWheel}
      onWheelCapture={stopTaskSidebarWheel}
    >
      <EditorIconButton
        className="image-canvas-editor__task-sidebar-toggle"
        label="任务列表"
        title="任务列表"
        icon={ListChecks}
        expanded={open}
        onClick={onToggleOpen}
      />
      {open ? (
        <div className="image-canvas-editor__task-sidebar-panel">
          <div className="image-canvas-editor__task-sidebar-header">
            <strong>任务列表</strong>
            <span>{items.length}</span>
          </div>
          <div
            className="image-canvas-editor__task-sidebar-tabs"
            role="tablist"
          >
            <button
              type="button"
              role="tab"
              aria-selected={activeTab === 'active'}
              className={
                activeTab === 'active'
                  ? 'image-canvas-editor__task-sidebar-tab image-canvas-editor__task-sidebar-tab--active'
                  : 'image-canvas-editor__task-sidebar-tab'
              }
              onClick={() => setActiveTab('active')}
            >
              排队/生成中
              <span>{activeItems.length}</span>
            </button>
            <button
              type="button"
              role="tab"
              aria-selected={activeTab === 'completed'}
              className={
                activeTab === 'completed'
                  ? 'image-canvas-editor__task-sidebar-tab image-canvas-editor__task-sidebar-tab--active'
                  : 'image-canvas-editor__task-sidebar-tab'
              }
              onClick={() => setActiveTab('completed')}
            >
              已完成
              <span>{completedItems.length}</span>
            </button>
          </div>
          {visibleItems.length > 0 ? (
            <div className="image-canvas-editor__task-sidebar-list">
              {visibleItems.map((item) => {
                const elapsedLabel = formatElapsedMs(item.elapsedMs);
                const finishedLabel =
                  item.status === 'done' || item.status === 'failed'
                    ? formatTaskTimeMs(item.finishedAt)
                    : null;
                const detailText = [
                  item.detail,
                  elapsedLabel
                    ? item.status === 'running'
                      ? `已用时 ${elapsedLabel}`
                      : `耗时 ${elapsedLabel}`
                    : null,
                  finishedLabel
                    ? item.status === 'failed'
                      ? `失败于 ${finishedLabel}`
                      : `完成于 ${finishedLabel}`
                    : null,
                  item.errorMessage && item.detail !== item.errorMessage
                    ? item.errorMessage
                    : null,
                ]
                  .filter((value): value is string => Boolean(value))
                  .join(' · ');
                return (
                  <button
                    key={item.id}
                    type="button"
                    className={`image-canvas-editor__task-sidebar-item image-canvas-editor__task-sidebar-item--${item.status}`}
                    onClick={item.onClick}
                    disabled={!item.onClick}
                  >
                    <span className="image-canvas-editor__task-sidebar-item-icon">
                      {statusIcon(item.status)}
                    </span>
                    <span className="image-canvas-editor__task-sidebar-item-main">
                      <span className="image-canvas-editor__task-sidebar-item-title">
                        {item.title}
                      </span>
                      <span
                        className="image-canvas-editor__task-sidebar-item-detail"
                        title={detailText}
                      >
                        {detailText}
                      </span>
                    </span>
                    <span className="image-canvas-editor__task-sidebar-item-status">
                      {statusLabel(item.status)}
                    </span>
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="image-canvas-editor__task-sidebar-empty">
              暂无任务
            </div>
          )}
        </div>
      ) : null}
    </aside>
  );
}