import {
  CalendarClock,
  ChevronDown,
  ChevronRight,
  ClipboardList,
  History,
  RefreshCw,
  X,
  XCircle
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { MAP_TOOL_PANEL_SURFACE_CLASS_NAME, showMapNotice } from "@/features/map/core";
import { isGeneratedScheduledConditionSessionId } from "../data/scheduled-conditions";
import type {
  ScheduledConditionItem,
  WorkbenchRuntimeDataSource,
  WorkbenchWorkOrderDataSource
} from "../types";
import { createConditionConversationPrompt } from "../utils/scheduled-condition-prompts";
import type { OperationalTaskDecision } from "../api/operational-task-client";
import type { OperationalTaskDataSnapshot } from "../api/operational-task-client";
import { cn } from "@/shared/ui/cn";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger
} from "@/shared/ui/dropdown-menu";
import { StatusIcon as SemanticStatusIcon } from "@/shared/ui/status";
import { ConditionDetailPanel, StatusPill } from "./scheduled-condition-detail-panel";
import {
  WORKBENCH_TASK_CATEGORIES,
  getWorkbenchTaskCategory,
  groupConditionsByTaskCategory,
  type WorkbenchTaskCategory
} from "./task-category";
import {
  CONDITION_FILTER_ALL,
  createStatusFilterOptions,
  createTaskFilterOptions,
  formatTime,
  getStatusActivity,
  getStatusIcon,
  getStatusTone,
  groupScheduledConditions,
  sortConditionsNewestFirst,
  type ConditionStatusFilterOption,
  type ConditionStatusFilterValue,
  type ConditionTaskFilterOption,
  type ConditionTaskFilterValue
} from "./scheduled-condition-feed-utils";

const CONDITION_CONTENT_SURFACE_CLASS_NAME =
  "surface-reading rounded-xl border border-slate-200/70";
const CONDITION_CONTROL_SURFACE_CLASS_NAME =
  "surface-control rounded-xl border border-slate-200/70";
const MINIMUM_REFRESH_FEEDBACK_MS = 3_000;

export type ScheduledConditionFeedPresentation =
  | "desktop-dock"
  | "desktop-floating"
  | "mobile-sheet";

type ScheduledConditionFeedProps = {
  presentation?: ScheduledConditionFeedPresentation;
  conditions?: ScheduledConditionItem[];
  expanded?: boolean;
  focusRequest?: ScheduledConditionFeedFocusRequest | null;
  loading?: boolean;
  backendLoading?: boolean;
  backendError?: string | null;
  dataSource?: WorkbenchRuntimeDataSource;
  workOrderDataSource?: WorkbenchWorkOrderDataSource;
  visible?: boolean;
  selectedConditionId?: string | null;
  onExpandedChange?: (expanded: boolean) => void;
  onFocusRequestHandled?: (requestId: number) => void;
  onSelectedConditionChange?: (conditionId: string | null) => void;
  onExpandAgent: () => void;
  onClose?: () => void;
  onLoadHistorySession: (sessionId: string) => void | Promise<void>;
  onSubmitPrompt: (prompt: string) => void | Promise<void>;
  onOpenTaskCollaboration?: (taskId: string) => Promise<void>;
  onTaskDecision?: (taskId: string, actionId: string, expectedVersion: number, decision: OperationalTaskDecision, comment?: string) => Promise<unknown>;
  onTaskExecute?: (taskId: string, actionId: string, expectedVersion: number) => Promise<unknown>;
  onTaskDraftUpdate?: (taskId: string, actionId: string, expectedVersion: number, payload: Record<string, unknown>) => Promise<unknown>;
  onTaskConfirmDispatch?: (taskId: string, actionId: string, expectedVersion: number) => Promise<unknown>;
  onTaskAccessDecision?: (taskId: string, accessRequestId: string, expectedVersion: number, decision: "approved" | "rejected", scopes: string[]) => Promise<unknown>;
  onTaskReconcile?: (taskId: string, actionId: string, expectedVersion: number) => Promise<unknown>;
  onLoadTaskEvidenceSnapshot?: (taskId: string, evidenceId: string) => Promise<OperationalTaskDataSnapshot>;
  onTaskRefresh?: () => void;
  onRefresh?: () => void | Promise<void>;
};

type ScheduledConditionFeedFocusRequest = {
  conditionId: string;
  requestId: number;
};

export function ScheduledConditionFeed({
  presentation = "desktop-dock",
  conditions = [],
  expanded: controlledExpanded,
  focusRequest,
  loading = false,
  backendLoading = false,
  backendError = null,
  dataSource = "mock",
  workOrderDataSource = "mock",
  visible = true,
  selectedConditionId: controlledSelectedConditionId,
  onExpandedChange,
  onFocusRequestHandled,
  onSelectedConditionChange,
  onExpandAgent,
  onClose,
  onLoadHistorySession,
  onSubmitPrompt,
  onOpenTaskCollaboration,
  onTaskDecision,
  onTaskExecute,
  onTaskDraftUpdate,
  onTaskConfirmDispatch,
  onTaskAccessDecision,
  onTaskReconcile,
  onLoadTaskEvidenceSnapshot,
  onTaskRefresh,
  onRefresh
}: ScheduledConditionFeedProps) {
  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(false);
  const [uncontrolledSelectedConditionId, setUncontrolledSelectedConditionId] = useState<
    string | null
  >(null);
  const [taskFilter, setTaskFilter] = useState<ConditionTaskFilterValue>(CONDITION_FILTER_ALL);
  const [statusFilter, setStatusFilter] =
    useState<ConditionStatusFilterValue>(CONDITION_FILTER_ALL);
  const [taskCategory, setTaskCategory] = useState<WorkbenchTaskCategory>("scheduled");
  const [refreshing, setRefreshing] = useState(false);
  const refreshingRef = useRef(false);
  const mobileSheet = presentation === "mobile-sheet";
  const desktopDock = presentation === "desktop-dock";
  const compactPresentation = mobileSheet || desktopDock;
  const desktopFloating = presentation === "desktop-floating";
  const expanded = controlledExpanded ?? uncontrolledExpanded;
  const selectedConditionId = controlledSelectedConditionId ?? uncontrolledSelectedConditionId;
  const conditionsByCategory = useMemo(
    () => groupConditionsByTaskCategory(conditions),
    [conditions]
  );
  const categoryConditions = conditionsByCategory[taskCategory];
  const activeLoading = taskCategory === "scheduled" ? loading : backendLoading;
  const { recentConditions: allRecentConditions, futureWorkOrders: allFutureWorkOrders } = useMemo(
    () => groupScheduledConditions(categoryConditions),
    [categoryConditions]
  );
  const taskFilterOptions = useMemo(
    () => createTaskFilterOptions(categoryConditions),
    [categoryConditions]
  );
  const taskFilteredConditions = useMemo(
    () =>
      categoryConditions.filter(
        (condition) => taskFilter === CONDITION_FILTER_ALL || condition.title === taskFilter
      ),
    [categoryConditions, taskFilter]
  );
  const statusFilterOptions = useMemo(
    () => createStatusFilterOptions(taskFilteredConditions),
    [taskFilteredConditions]
  );
  const taskFilteredConditionCount = taskFilteredConditions.length;
  const filteredConditions = useMemo(
    () =>
      taskFilteredConditions.filter(
        (condition) => statusFilter === CONDITION_FILTER_ALL || condition.status === statusFilter
      ),
    [statusFilter, taskFilteredConditions]
  );
  const { recentConditions, futureWorkOrders } = useMemo(
    () => groupScheduledConditions(filteredConditions),
    [filteredConditions]
  );
  const timelineConditions = useMemo(
    () => taskCategory === "appointment"
      ? sortConditionsNewestFirst([...recentConditions, ...futureWorkOrders])
      : [...recentConditions, ...futureWorkOrders],
    [futureWorkOrders, recentConditions, taskCategory]
  );
  const filterActive = taskFilter !== CONDITION_FILTER_ALL || statusFilter !== CONDITION_FILTER_ALL;
  const totalConditionCount = allRecentConditions.length + allFutureWorkOrders.length;
  const filteredConditionCount = recentConditions.length + futureWorkOrders.length;
  const headerSummary = loading && backendLoading
    ? "正在加载工况任务"
    : `定时 ${conditionsByCategory.scheduled.length} · 调查 ${conditionsByCategory.investigation.length} · 预约 ${conditionsByCategory.appointment.length}`;
  const selectedCondition =
    timelineConditions.find((condition) => condition.id === selectedConditionId) ??
    timelineConditions[0] ??
    null;
  const focusConditionId = focusRequest?.conditionId;
  const focusRequestId = focusRequest?.requestId;
  const updateExpanded = useCallback(
    (nextExpanded: boolean) => {
      if (controlledExpanded === undefined) {
        setUncontrolledExpanded(nextExpanded);
      }

      onExpandedChange?.(nextExpanded);
    },
    [controlledExpanded, onExpandedChange]
  );
  const updateSelectedConditionId = useCallback(
    (nextConditionId: string | null) => {
      if (controlledSelectedConditionId === undefined) {
        setUncontrolledSelectedConditionId(nextConditionId);
      }

      onSelectedConditionChange?.(nextConditionId);
    },
    [controlledSelectedConditionId, onSelectedConditionChange]
  );

  useEffect(() => {
    if (taskFilter === CONDITION_FILTER_ALL) {
      return;
    }

    if (!taskFilterOptions.some((option) => option.value === taskFilter)) {
      setTaskFilter(CONDITION_FILTER_ALL);
    }
  }, [taskFilter, taskFilterOptions]);

  useEffect(() => {
    if (!expanded) {
      return;
    }

    const nextSelectedConditionId = selectedCondition?.id ?? null;
    if (selectedConditionId !== nextSelectedConditionId) {
      updateSelectedConditionId(nextSelectedConditionId);
    }
  }, [expanded, selectedCondition?.id, selectedConditionId, updateSelectedConditionId]);

  useEffect(() => {
    if (!focusConditionId || focusRequestId === undefined) {
      return;
    }

    const targetCondition = conditions.find(
      (condition) => condition.id === focusConditionId
    );
    if (!targetCondition) {
      return;
    }

    const targetCategory = getWorkbenchTaskCategory(targetCondition);
    if (!targetCategory) return;

    setTaskCategory(targetCategory);
    setTaskFilter(CONDITION_FILTER_ALL);
    setStatusFilter(CONDITION_FILTER_ALL);
    updateSelectedConditionId(targetCondition.id);
    updateExpanded(true);
    onFocusRequestHandled?.(focusRequestId);
  }, [
    conditions,
    focusConditionId,
    focusRequestId,
    onFocusRequestHandled,
    updateExpanded,
    updateSelectedConditionId
  ]);

  function handleToggleExpanded() {
    updateExpanded(!expanded);
    updateSelectedConditionId(
      selectedConditionId ?? timelineConditions[0]?.id ?? null
    );
  }

  function handleTaskCategoryChange(nextCategory: WorkbenchTaskCategory) {
    setTaskCategory(nextCategory);
    setTaskFilter(CONDITION_FILTER_ALL);
    setStatusFilter(CONDITION_FILTER_ALL);
    updateSelectedConditionId(
      sortConditionsNewestFirst(conditionsByCategory[nextCategory])[0]?.id ?? null
    );
  }

  async function handleRefresh() {
    if (!onRefresh || refreshingRef.current) return;
    refreshingRef.current = true;
    setRefreshing(true);
    const startedAt = Date.now();
    let refreshError: unknown = null;
    try {
      await onRefresh();
    } catch (error) {
      refreshError = error;
    } finally {
      const remainingFeedbackMs = MINIMUM_REFRESH_FEEDBACK_MS - (Date.now() - startedAt);
      if (remainingFeedbackMs > 0) {
        await new Promise((resolve) => window.setTimeout(resolve, remainingFeedbackMs));
      }
      refreshingRef.current = false;
      setRefreshing(false);
    }
    if (refreshError) {
      showMapNotice({
        id: "scheduled-condition-refresh",
        tone: "error",
        title: "工况任务刷新失败",
        message: refreshError instanceof Error
          ? refreshError.message
          : "暂时无法重新获取工况任务。"
      });
    }
  }

  function handleSelectTimelineCondition(conditionId: string) {
    updateSelectedConditionId(conditionId);
    if (!expanded) {
      updateExpanded(true);
    }
  }

  function handleContinueConversation(condition: ScheduledConditionItem) {
    if (condition.kind === "work_order") {
      return;
    }

    if (condition.operationalTask) {
      onExpandAgent();
      void Promise.resolve(onOpenTaskCollaboration?.(condition.operationalTask.task_id))
        .catch((error) => showMapNotice({
          id: "operational-task-collaboration",
          tone: "error",
          title: "Agent 协作打开失败",
          message: error instanceof Error ? error.message : "无法打开这条任务的协作问答。"
        }));
      return;
    }

    onExpandAgent();

    if (!condition.sessionId) {
      showMapNotice({
        id: "scheduled-condition-missing-session",
        tone: "error",
        title: "无法打开历史会话",
        message: "这条工况没有可加载的会话记录。"
      });
      return;
    }

    if (isGeneratedScheduledConditionSessionId(condition.sessionId)) {
      void Promise.resolve(onSubmitPrompt(createConditionConversationPrompt(
        condition,
        condition.dataSource ?? dataSource
      )))
        .then(() => {
          showMapNotice({
            id: "scheduled-condition-generated-session",
            tone: "success",
            title: "已发起工况对话",
            message: "已将当前工况上下文发送到 Agent 面板。"
          });
        })
        .catch((submitError) => {
          showMapNotice({
            id: "scheduled-condition-generated-session",
            tone: "error",
            title: "工况对话发起失败",
            message:
              submitError instanceof Error ? submitError.message : "无法将当前工况发送到 Agent。"
          });
        });
      return;
    }

    void Promise.resolve(onLoadHistorySession(condition.sessionId));
  }

  return (
    <section
      aria-label="工况任务"
      aria-hidden={!visible}
      className={cn(
        "scheduled-feed-panel-shell pointer-events-auto overflow-hidden p-3 motion-reduce:transition-none",
        visible ? "scheduled-feed-shell-enter" : "scheduled-feed-shell-exit",
        mobileSheet
          ? "scheduled-feed-mobile flex h-full w-full max-w-none flex-col border-0 bg-transparent shadow-none"
          : cn(
              MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
              "max-w-[calc(100vw-7rem)]",
              desktopFloating
                ? cn(
                    "rounded-2xl",
                    expanded
                      ? "h-[calc(100dvh-8rem)]"
                      : "max-h-[calc(100dvh-8rem)]"
                  )
                : "h-full rounded-l-2xl rounded-r-none",
              expanded && !desktopDock
                ? "scheduled-feed-panel-expanded flex flex-col"
                : "w-[var(--workbench-condition-width)]"
            )
      )}
    >
      <header
        className={cn(
          "flex items-center gap-2.5 px-2.5 py-2",
          CONDITION_CONTROL_SURFACE_CLASS_NAME
        )}
      >
        <span
          className={cn(
            "grid h-8 w-8 shrink-0 place-items-center bg-blue-50 text-blue-700",
            "rounded-lg"
          )}
        >
          <CalendarClock size={17} aria-hidden="true" />
        </span>
        <div className="min-w-0 flex-1">
          <h2 className="truncate text-sm font-semibold leading-tight text-slate-950">工况任务</h2>
          <p className="mt-0.5 truncate text-xs text-slate-500">{headerSummary}</p>
        </div>
        {onRefresh ? (
          <button
            type="button"
            aria-label={refreshing ? "正在刷新工况任务" : "刷新工况任务"}
            title={refreshing ? "正在刷新" : "刷新工况任务"}
            disabled={refreshing}
            onClick={() => void handleRefresh()}
            className="grid h-10 w-10 shrink-0 place-items-center rounded-lg text-slate-500 transition-colors active:scale-95 disabled:cursor-wait disabled:text-blue-600 [@media(hover:hover)]:hover:bg-blue-50 [@media(hover:hover)]:hover:text-blue-700"
          >
            <RefreshCw
              size={17}
              aria-hidden="true"
              className={cn(refreshing && "animate-spin motion-reduce:animate-none")}
            />
          </button>
        ) : null}
        <button
          type="button"
          aria-expanded={expanded}
          onClick={handleToggleExpanded}
          className={cn(
            "grid h-8 w-8 shrink-0 place-items-center text-slate-500 transition hover:bg-blue-50 hover:text-blue-700",
            "rounded-lg"
          )}
        >
          <ChevronDown
            size={17}
            aria-hidden="true"
            className={cn("transition-transform duration-150", expanded && "rotate-180")}
          />
          <span className="sr-only">{expanded ? "收起工况任务" : "展开工况任务"}</span>
        </button>
        {mobileSheet && onClose ? (
          <button
            type="button"
            aria-label="关闭工况任务"
            title="关闭工况任务"
            onClick={onClose}
            className="agent-panel-icon-button grid h-10 w-10 shrink-0 place-items-center rounded-xl text-slate-600"
          >
            <X size={17} aria-hidden="true" />
          </button>
        ) : null}
      </header>

      {expanded ? (
        <TaskCategorySwitch
          activeCategory={taskCategory}
          counts={{
            scheduled: conditionsByCategory.scheduled.length,
            investigation: conditionsByCategory.investigation.length,
            appointment: conditionsByCategory.appointment.length
          }}
          onChange={handleTaskCategoryChange}
        />
      ) : null}

      <div
        className={cn(
          "scheduled-feed-layout mt-3 grid min-h-0",
          compactPresentation
            ? "flex flex-1"
            : expanded
              ? "scheduled-feed-layout-expanded flex-1"
              : "scheduled-feed-layout-collapsed"
        )}
      >
        <div
          className={cn(
            "relative min-h-0 min-w-0 overflow-hidden",
            compactPresentation
              ? expanded
                ? "scheduled-feed-detail-enter h-full w-full"
                : "hidden"
              : expanded
                ? "scheduled-feed-detail-enter h-full"
                : "pointer-events-none opacity-0"
          )}
          aria-hidden={!expanded}
        >
          {activeLoading && expanded ? (
            <ConditionDetailSkeleton />
          ) : expanded && selectedCondition ? (
            <ConditionDetailPanel
              condition={selectedCondition}
              dataSource={dataSource}
              workOrderDataSource={workOrderDataSource}
              onContinueConversation={() => handleContinueConversation(selectedCondition)}
              onTaskDecision={onTaskDecision}
              onTaskExecute={onTaskExecute}
              onTaskDraftUpdate={onTaskDraftUpdate}
              onTaskConfirmDispatch={onTaskConfirmDispatch}
              onTaskAccessDecision={onTaskAccessDecision}
              onTaskReconcile={onTaskReconcile}
              onLoadTaskEvidenceSnapshot={onLoadTaskEvidenceSnapshot}
              onTaskRefresh={onTaskRefresh}
            />
          ) : null}
        </div>
        <div
          className={cn(
            "min-h-0 min-w-0 overflow-hidden",
            compactPresentation && (expanded ? "hidden" : "h-full w-full")
          )}
        >
          <ConditionTimelinePanel
            expanded={expanded}
            presentation={presentation}
            taskCategory={taskCategory}
            loading={activeLoading}
            emptyTitle={
              backendError && taskCategory !== "scheduled"
                ? `${WORKBENCH_TASK_CATEGORIES.find((item) => item.id === taskCategory)?.label ?? "后端任务"}暂不可用`
                : undefined
            }
            emptyDescription={
              backendError && taskCategory !== "scheduled"
                ? backendError
                : undefined
            }
            recentConditions={recentConditions}
            futureWorkOrders={futureWorkOrders}
            timelineConditions={timelineConditions}
            taskFilter={taskFilter}
            statusFilter={statusFilter}
            taskFilterOptions={taskFilterOptions}
            statusFilterOptions={statusFilterOptions}
            selectedConditionId={expanded ? (selectedCondition?.id ?? null) : null}
            totalConditionCount={totalConditionCount}
            taskFilteredConditionCount={taskFilteredConditionCount}
            filteredConditionCount={filteredConditionCount}
            onTaskFilterChange={setTaskFilter}
            onStatusFilterChange={setStatusFilter}
            onResetFilters={() => {
              setTaskFilter(CONDITION_FILTER_ALL);
              setStatusFilter(CONDITION_FILTER_ALL);
            }}
            onSelectCondition={handleSelectTimelineCondition}
          />
        </div>
      </div>
    </section>
  );
}

function TaskCategorySwitch({
  activeCategory,
  counts,
  onChange
}: {
  activeCategory: WorkbenchTaskCategory;
  counts: Record<WorkbenchTaskCategory, number>;
  onChange: (category: WorkbenchTaskCategory) => void;
}) {
  return (
    <nav
      aria-label="工况任务分类"
      className={cn(CONDITION_CONTROL_SURFACE_CLASS_NAME, "mt-2 grid grid-cols-3 gap-1 p-1")}
    >
      {WORKBENCH_TASK_CATEGORIES.map((category) => {
        const active = category.id === activeCategory;
        return (
          <button
            key={category.id}
            type="button"
            aria-current={active ? "page" : undefined}
            onClick={() => onChange(category.id)}
            className={cn(
              "min-h-12 min-w-0 rounded-lg px-1.5 py-1.5 text-left transition-[background-color,color,box-shadow] duration-150 motion-reduce:transition-none! focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-200",
              active
                ? "bg-white text-slate-900 shadow-[0_1px_3px_rgba(15,23,42,0.1)]"
                : "text-slate-500 [@media(hover:hover)]:hover:bg-white/70 [@media(hover:hover)]:hover:text-slate-800"
            )}
          >
            <span className="flex min-w-0 items-center justify-between gap-1">
              <span className="truncate text-xs font-semibold">{category.label}</span>
              <span className="shrink-0 text-xs tabular-nums text-slate-400">{counts[category.id]}</span>
            </span>
            <span className="mt-0.5 block truncate text-[10px] leading-3 text-slate-400">
              {category.sourceLabel}
            </span>
          </button>
        );
      })}
    </nav>
  );
}

type ConditionTimelinePanelProps = {
  expanded: boolean;
  presentation: ScheduledConditionFeedPresentation;
  taskCategory: WorkbenchTaskCategory;
  loading: boolean;
  recentConditions: ScheduledConditionItem[];
  futureWorkOrders: ScheduledConditionItem[];
  timelineConditions: ScheduledConditionItem[];
  taskFilter: ConditionTaskFilterValue;
  statusFilter: ConditionStatusFilterValue;
  taskFilterOptions: ConditionTaskFilterOption[];
  statusFilterOptions: ConditionStatusFilterOption[];
  selectedConditionId: string | null;
  totalConditionCount: number;
  taskFilteredConditionCount: number;
  filteredConditionCount: number;
  emptyTitle?: string;
  emptyDescription?: string;
  onTaskFilterChange: (value: ConditionTaskFilterValue) => void;
  onStatusFilterChange: (value: ConditionStatusFilterValue) => void;
  onResetFilters: () => void;
  onSelectCondition: (conditionId: string) => void;
};

function ConditionTimelinePanel({
  expanded,
  presentation,
  taskCategory,
  loading,
  recentConditions,
  futureWorkOrders,
  timelineConditions,
  taskFilter,
  statusFilter,
  taskFilterOptions,
  statusFilterOptions,
  selectedConditionId,
  totalConditionCount,
  taskFilteredConditionCount,
  filteredConditionCount,
  emptyTitle,
  emptyDescription,
  onTaskFilterChange,
  onStatusFilterChange,
  onResetFilters,
  onSelectCondition
}: ConditionTimelinePanelProps) {
  const filterActive = taskFilter !== CONDITION_FILTER_ALL || statusFilter !== CONDITION_FILTER_ALL;
  const mainConditions = taskCategory === "appointment" ? timelineConditions : recentConditions;

  return (
    <section
      aria-busy={loading}
      data-testid="scheduled-condition-timeline"
      className={cn(
        "flex min-h-0 flex-col overflow-hidden p-2.5",
        presentation === "mobile-sheet"
          ? "h-full max-h-none"
          : expanded
            ? "h-full max-h-none"
            : "h-[420px] max-h-[420px]",
        CONDITION_CONTENT_SURFACE_CLASS_NAME
      )}
    >
      {expanded && !loading ? (
        <ConditionFilterBar
          taskFilter={taskFilter}
          statusFilter={statusFilter}
          taskFilterOptions={taskFilterOptions}
          statusFilterOptions={statusFilterOptions}
          filteredConditionCount={filteredConditionCount}
          totalConditionCount={totalConditionCount}
          taskFilteredConditionCount={taskFilteredConditionCount}
          onTaskFilterChange={onTaskFilterChange}
          onStatusFilterChange={onStatusFilterChange}
          onResetFilters={onResetFilters}
        />
      ) : null}
      {taskCategory !== "appointment"
        && (expanded || presentation === "mobile-sheet")
        && !loading
        && futureWorkOrders.length > 0 ? (
        <section className="mb-2">
          <ConditionGroupHeader
            icon={ClipboardList}
            title="预约任务"
            count={futureWorkOrders.length}
            compact
          />
          <div className="scheduled-feed-scroll -mr-2 max-h-[132px] overflow-y-auto pl-0.5 pr-2 pt-0.5">
            <ConditionRows
              conditions={futureWorkOrders}
              selectedConditionId={selectedConditionId}
              onSelectCondition={onSelectCondition}
            />
          </div>
        </section>
      ) : null}
      <ConditionGroupHeader
        icon={taskCategory === "appointment" ? ClipboardList : History}
        title="最近工况"
        count={loading ? 0 : mainConditions.length}
      />
      <div className="scheduled-feed-scroll -mr-2 min-h-0 flex-1 overflow-y-auto pb-4 pl-0.5 pr-2 pt-0.5">
        {loading ? (
          <ConditionTimelineSkeleton rows={expanded ? 7 : 6} />
        ) : mainConditions.length > 0 ? (
          <ConditionRows
            conditions={mainConditions}
            selectedConditionId={selectedConditionId}
            onSelectCondition={onSelectCondition}
          />
        ) : (
          <ConditionEmptyState
            title={emptyTitle ?? (filterActive ? "没有符合筛选的任务" : "暂无任务")}
            description={
              emptyDescription ?? (filterActive
                ? "调整任务或状态筛选后查看其他记录。"
                : "新任务进入当前分类后会出现在这里。")
            }
          />
        )}
      </div>
    </section>
  );
}

type ConditionFilterBarProps = {
  taskFilter: ConditionTaskFilterValue;
  statusFilter: ConditionStatusFilterValue;
  taskFilterOptions: ConditionTaskFilterOption[];
  statusFilterOptions: ConditionStatusFilterOption[];
  filteredConditionCount: number;
  totalConditionCount: number;
  taskFilteredConditionCount: number;
  onTaskFilterChange: (value: ConditionTaskFilterValue) => void;
  onStatusFilterChange: (value: ConditionStatusFilterValue) => void;
  onResetFilters: () => void;
};

function ConditionFilterBar({
  taskFilter,
  statusFilter,
  taskFilterOptions,
  statusFilterOptions,
  filteredConditionCount,
  totalConditionCount,
  taskFilteredConditionCount,
  onTaskFilterChange,
  onStatusFilterChange,
  onResetFilters
}: ConditionFilterBarProps) {
  const filterActive = taskFilter !== CONDITION_FILTER_ALL || statusFilter !== CONDITION_FILTER_ALL;

  return (
    <div className={cn(CONDITION_CONTROL_SURFACE_CLASS_NAME, "mb-2 p-2")}>
      <div className="mb-2 flex items-center justify-between gap-2 px-1">
        <span className="text-xs font-semibold text-slate-700">筛选</span>
        <span className="shrink-0 text-xs font-semibold text-slate-400">
          {filteredConditionCount}/{totalConditionCount}
        </span>
      </div>
      <div className="grid grid-cols-2 gap-2">
        <ConditionFilterDropdown
          label="任务"
          value={taskFilter}
          onValueChange={onTaskFilterChange}
          options={[
            { value: CONDITION_FILTER_ALL, label: "全部任务", count: totalConditionCount },
            ...taskFilterOptions
          ]}
        />
        <ConditionFilterDropdown
          label="状态"
          value={statusFilter}
          onValueChange={(value) => onStatusFilterChange(value as ConditionStatusFilterValue)}
          options={[
            { value: CONDITION_FILTER_ALL, label: "全部状态", count: taskFilteredConditionCount },
            ...statusFilterOptions
          ]}
        />
      </div>
      {filterActive ? (
        <button
          type="button"
          onClick={onResetFilters}
          className="surface-control relative mt-2 inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-lg border border-slate-200/70 px-2 text-xs font-semibold text-blue-700 after:absolute after:-inset-1 after:content-[''] hover:bg-blue-50"
        >
          <XCircle size={12} aria-hidden="true" />
          重置筛选
        </button>
      ) : null}
    </div>
  );
}

type ConditionFilterDropdownProps<TValue extends string> = {
  label: string;
  value: TValue;
  options: {
    value: TValue;
    label: string;
    count: number;
  }[];
  onValueChange: (value: TValue) => void;
};

function ConditionFilterDropdown<TValue extends string>({
  label,
  value,
  options,
  onValueChange
}: ConditionFilterDropdownProps<TValue>) {
  const selectedOption = options.find((option) => option.value === value) ?? options[0];

  return (
    <div className="min-w-0">
      <span className="mb-1 block text-xs font-semibold text-slate-400">{label}</span>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            className={cn(
              "surface-reading group flex h-9 w-full min-w-0 items-center gap-2 border border-slate-200/70 px-2 text-left text-xs outline-hidden transition-colors hover:bg-blue-50 focus-visible:border-blue-200 focus-visible:ring-2 focus-visible:ring-blue-100 data-[state=open]:border-blue-200 data-[state=open]:bg-blue-50 data-[state=open]:ring-2 data-[state=open]:ring-blue-100",
              "rounded-xl"
            )}
          >
            <span className="min-w-0 flex-1">
              <span
                className="block truncate font-semibold text-slate-800"
                title={selectedOption?.label}
              >
                {selectedOption?.label ?? "全部"}
              </span>
              <span className="block text-xs leading-3 text-slate-400">
                {selectedOption?.count ?? 0} 条
              </span>
            </span>
            <ChevronDown
              size={13}
              aria-hidden="true"
              className="shrink-0 text-slate-400 transition group-hover:text-blue-600 group-data-[state=open]:rotate-180 group-data-[state=open]:text-blue-600"
            />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          align="start"
          sideOffset={6}
          className="surface-reading scheduled-feed-scroll z-50 max-h-[280px] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto rounded-xl border border-slate-200/70 p-1.5 text-slate-700 shadow-md shadow-slate-900/10"
        >
          <DropdownMenuRadioGroup
            value={value}
            onValueChange={(nextValue) => onValueChange(nextValue as TValue)}
          >
            {options.map((option) => (
              <DropdownMenuRadioItem
                key={option.value}
                value={option.value}
                className={cn(
                  "my-0.5 min-h-9 gap-2 border border-transparent bg-transparent py-1.5 pl-7 pr-2 text-xs transition focus:bg-blue-50 focus:text-blue-800 data-[state=checked]:border-blue-100 data-[state=checked]:bg-blue-50 data-[state=checked]:text-blue-800",
                  "rounded-xl"
                )}
              >
                <span className="min-w-0 flex-1 truncate font-semibold">{option.label}</span>
                <span className="surface-control shrink-0 rounded-full border px-1.5 py-0.5 text-xs font-semibold leading-4 text-slate-500">
                  {option.count}
                </span>
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

function ConditionEmptyState({ title, description }: { title: string; description: string }) {
  return (
    <div className="surface-reading flex min-h-full flex-col items-center justify-center rounded-xl border border-dashed border-slate-200/80 px-4 py-5 text-center">
      <span className="grid h-8 w-8 place-items-center rounded-lg bg-slate-100 text-slate-400">
        <ChevronRight size={15} aria-hidden="true" />
      </span>
      <p className="mt-2 text-xs font-semibold text-slate-700">{title}</p>
      <p className="mt-1 text-xs leading-4 text-slate-500">{description}</p>
    </div>
  );
}

function ConditionTimelineSkeleton({ rows }: { rows: number }) {
  return (
    <div className="space-y-1.5" role="status" aria-label="工况任务加载中">
      {Array.from({ length: rows }).map((_, index) => (
        <div
          key={index}
          className="grid min-h-[60px] grid-cols-[42px_24px_minmax(0,1fr)] gap-2 rounded-xl px-1 py-1"
        >
          <span className="mt-2 h-4 w-9 animate-pulse rounded-lg bg-slate-200/80" />
          <span className="relative flex min-h-12 justify-center pt-1.5">
            {index < rows - 1 ? (
              <span
                className="pointer-events-none absolute bottom-[-0.5rem] top-8 w-px bg-slate-200"
                aria-hidden="true"
              />
            ) : null}
            <span className="relative z-10 h-6 w-6 animate-pulse rounded-full bg-slate-200 ring-4 ring-white" />
          </span>
          <span className="surface-reading min-w-0 rounded-xl border border-slate-200/70 px-2 py-1.5">
            <span className="flex min-w-0 items-center gap-2">
              <span className="min-w-0 flex-1 space-y-1.5">
                <span className="block h-3.5 w-24 animate-pulse rounded-full bg-slate-200/90" />
                <span className="block h-3 w-full max-w-[260px] animate-pulse rounded-full bg-slate-100" />
              </span>
              <span className="h-5 w-12 shrink-0 animate-pulse rounded-full bg-slate-100" />
            </span>
          </span>
        </div>
      ))}
    </div>
  );
}

function ConditionDetailSkeleton() {
  return (
    <DetailScroll>
      <div
        className="relative min-h-[420px] overflow-hidden px-4 py-3"
        role="status"
        aria-label="工况详情加载中"
      >
        <div className="flex gap-2.5">
          <span className={cn("h-9 w-9 shrink-0 animate-pulse bg-slate-100", "rounded-lg")} />
          <div className="min-w-0 flex-1 space-y-2">
            <div className="flex gap-2">
              <span className="h-4 w-12 animate-pulse rounded-full bg-slate-200" />
              <span className="h-5 w-14 animate-pulse rounded-full bg-blue-100" />
            </div>
            <span className="block h-4 w-44 animate-pulse rounded-full bg-slate-200" />
            <span className="block h-3 w-full animate-pulse rounded-full bg-slate-100" />
            <span className="block h-3 w-4/5 animate-pulse rounded-full bg-slate-100" />
          </div>
        </div>
        <div className="mt-4 grid gap-2">
          {Array.from({ length: 5 }).map((_, index) => (
            <div
              key={index}
              className="surface-reading rounded-xl border border-slate-200/70 px-3 py-3"
            >
              <span className="block h-3.5 w-28 animate-pulse rounded-full bg-slate-200" />
              <span className="mt-2 block h-3 w-full animate-pulse rounded-full bg-slate-100" />
              <span className="mt-1.5 block h-3 w-3/4 animate-pulse rounded-full bg-slate-100" />
            </div>
          ))}
        </div>
      </div>
    </DetailScroll>
  );
}

function DetailScroll({ children }: { children: React.ReactNode }) {
  return (
    <section
      className={cn(
        CONDITION_CONTENT_SURFACE_CLASS_NAME,
        "scheduled-feed-detail-viewport absolute inset-0 overflow-hidden"
      )}
    >
      <div
        data-testid="scheduled-condition-detail-scroll"
        className="scheduled-feed-scroll absolute inset-x-0 inset-y-2 overflow-y-auto pb-4 pl-0.5 pr-2 pt-0.5"
      >
        {children}
      </div>
    </section>
  );
}

type ConditionGroupHeaderProps = {
  icon: typeof History;
  title: string;
  count: number;
  compact?: boolean;
};

function ConditionGroupHeader({
  icon: Icon,
  title,
  count,
  compact = false
}: ConditionGroupHeaderProps) {
  return (
    <div
      className={cn(
        "flex items-center justify-between px-1 py-1 text-xs font-semibold text-slate-500",
        compact ? "mb-1" : "mb-2"
      )}
    >
      <span className="flex items-center gap-1.5">
        <Icon size={13} aria-hidden="true" />
        <span>{title}</span>
      </span>
      <span>{count}</span>
    </div>
  );
}

type ConditionRowsProps = {
  conditions: ScheduledConditionItem[];
  selectedConditionId: string | null;
  onSelectCondition: (conditionId: string) => void;
};

function ConditionRows({ conditions, selectedConditionId, onSelectCondition }: ConditionRowsProps) {
  return (
    <div className="space-y-1.5">
      {conditions.map((condition, index) => (
        <ConditionTimelineRow
          key={condition.id}
          condition={condition}
          selected={selectedConditionId === condition.id}
          isLast={index === conditions.length - 1}
          onSelect={() => onSelectCondition(condition.id)}
        />
      ))}
    </div>
  );
}

type ConditionTimelineRowProps = {
  condition: ScheduledConditionItem;
  selected: boolean;
  isLast: boolean;
  onSelect: () => void;
};

function ConditionTimelineRow({
  condition,
  selected,
  isLast,
  onSelect
}: ConditionTimelineRowProps) {
  const Icon = getStatusIcon(condition.status);
  const tone = getStatusTone(condition.status);
  const activity = getStatusActivity(condition.status);

  return (
    <button
      type="button"
      aria-pressed={selected}
      onClick={onSelect}
      className={cn(
        "group grid min-h-[60px] w-full grid-cols-[42px_24px_minmax(0,1fr)] gap-2 rounded-xl border px-1 py-1 text-left outline-hidden transition-colors focus-visible:bg-blue-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-200",
        selected
          ? "surface-reading border-blue-100 text-blue-900"
          : "border-transparent hover:bg-slate-50"
      )}
    >
      <span className="pt-2 font-mono text-xs font-semibold leading-4 text-slate-500">
        {formatTime(condition.scheduledAt)}
      </span>
      <span className="relative flex min-h-12 justify-center pt-1.5">
        {!isLast ? (
          <span
            className="pointer-events-none absolute bottom-[-0.5rem] top-8 w-px bg-slate-200 transition-colors group-hover:bg-blue-200 group-focus-visible:bg-blue-300"
            aria-hidden="true"
          />
        ) : null}
        <SemanticStatusIcon
          tone={tone}
          activity={activity}
          shape="circle"
          data-selected={selected ? "true" : undefined}
          className={cn(
            "relative z-10 ring-4 ring-white",
            selected && "group-focus-visible:ring-blue-100"
          )}
        >
          <Icon size={12} />
        </SemanticStatusIcon>
      </span>
      <span
        className={cn(
          "min-w-0 px-2 py-1.5 transition-colors",
          selected ? "text-blue-900" : "text-slate-700"
        )}
      >
        <span className="flex min-w-0 items-center gap-2">
          <span className="min-w-0 flex-1">
            <span className="block truncate text-xs font-semibold leading-4">
              {condition.title}
            </span>
            <span className="block truncate text-xs leading-4 text-slate-500">
              {condition.summary}
            </span>
          </span>
          <StatusPill condition={condition} className="shrink-0 text-xs" />
        </span>
      </span>
    </button>
  );
}