import {
  useEffect,
  useMemo,
  useState,
  type ReactNode,
  type SVGProps,
  type SelectHTMLAttributes,
} from 'react';
import { DEFAULT_AGENT_ID, normalizeAgentId, normalizeChannelType, type AgentSummary } from '@runtime/lib/agents';
import { onGatewayEvent } from '../../lib/gateway-client';
import { hostApiFetch } from '../../lib/host-api';
import type {
  ChannelTargetCatalogItem,
  ChannelTargetsCatalogResponse,
} from '../../lib/channel-types';
import { isRuntimeChangedGatewayEvent, runtimeEventHasTopic } from '../../lib/runtime-events';
import type {
  CronDeliveryChannelAccount,
  CronDeliveryChannelGroup,
  CronJob,
  CronJobCreateInput,
  CronJobDelivery,
} from '../../lib/cron-types';
import { agentsStore, useAgentsStore } from '../../stores';
import { useI18n, type LanguageCode } from '../../i18n';

type FeedbackTone = 'success' | 'error' | 'info' | 'warning';

type FeedbackState = {
  tone: FeedbackTone;
  message: string;
} | null;

type Translate = (path: string, params?: Record<string, string | number>) => string;

type DialogProps = {
  open: boolean;
  job: CronJob | null;
  saving: boolean;
  defaultAgentId: string;
  channelGroups: CronDeliveryChannelGroup[];
  channelsLoading: boolean;
  channelsError: string | null;
  onClose: () => void;
  onSave: (input: CronJobCreateInput) => Promise<void>;
};

type JobCardProps = {
  job: CronJob;
  agentLabel: string;
  agentDetail: string;
  deliverySummary: string;
  busyAction: string | null;
  onToggle: (enabled: boolean) => void;
  onEdit: () => void;
  onDelete: () => void;
  onTrigger: () => void;
};

type StatCardProps = {
  label: string;
  value: number;
  tone: 'neutral' | 'green' | 'amber' | 'red';
  icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
};

type SchedulePreset = {
  key: string;
  value: string;
};

type CronJobsResponse =
  | CronJob[]
  | {
      success?: boolean;
      jobs?: unknown;
      data?: unknown;
      items?: unknown;
      error?: string;
    };

type ChannelAccountsResponse =
  | unknown[]
  | {
      success?: boolean;
      channels?: unknown;
      groups?: unknown;
      accounts?: unknown;
      data?: unknown;
      error?: string;
    };

type ChannelTargetsResponse =
  | unknown[]
  | ChannelTargetsCatalogResponse
  | {
      success?: boolean;
      targets?: unknown;
      items?: unknown;
      data?: unknown;
      error?: string;
    };

type DeliveryChannelGroupLike = Partial<CronDeliveryChannelGroup> & {
  name?: string;
  label?: string;
  channelName?: string;
  accounts?: unknown;
};

type DeliveryChannelAccountLike = Partial<CronDeliveryChannelAccount> & {
  id?: string;
  label?: string;
  channelName?: string;
  channelType?: string;
  name?: string;
  default?: boolean;
};

type DeliveryTargetOptionLike = Partial<ChannelTargetCatalogItem> & {
  name?: string;
  title?: string;
  desc?: string;
};

const SCHEDULE_PRESETS: SchedulePreset[] = [
  { key: 'every-minute', value: '* * * * *' },
  { key: 'every-5-minutes', value: '*/5 * * * *' },
  { key: 'every-15-minutes', value: '*/15 * * * *' },
  { key: 'every-hour', value: '0 * * * *' },
  { key: 'daily-9', value: '0 9 * * *' },
  { key: 'daily-18', value: '0 18 * * *' },
  { key: 'weekly-mon', value: '0 9 * * 1' },
  { key: 'monthly-first', value: '0 9 1 * *' },
];

const CHANNEL_NAME_KEYS: Record<string, string> = {
  douyin: 'cron.channels.douyin',
  feishu: 'cron.channels.feishu',
  fliggy: 'cron.channels.fliggy',
  meituan: 'cron.channels.meituan',
  qqbot: 'cron.channels.qqbot',
  telegram: 'cron.channels.telegram',
  wechat: 'cron.channels.wechat',
  wecom: 'cron.channels.wecom',
};

function buildFallbackCronJobs(t: Translate): CronJob[] {
  return [
    {
      id: 'cron-morning-briefing',
      name: t('cron.fallback.jobs.morningBriefing.name'),
      message: t('cron.fallback.jobs.morningBriefing.message'),
      schedule: '0 9 * * *',
      agentId: 'main',
      delivery: {
        mode: 'announce',
        channel: 'wecom',
        accountId: 'default',
        to: t('cron.fallback.jobs.morningBriefing.target'),
      },
      enabled: true,
      createdAt: '2026-04-10T09:00:00.000Z',
      updatedAt: '2026-04-16T09:00:00.000Z',
      nextRun: new Date(Date.now() + 1000 * 60 * 60 * 7).toISOString(),
      lastRun: {
        time: new Date(Date.now() - 1000 * 60 * 60 * 15).toISOString(),
        success: true,
      },
    },
    {
      id: 'cron-channel-check',
      name: t('cron.fallback.jobs.channelCheck.name'),
      message: t('cron.fallback.jobs.channelCheck.message'),
      schedule: '*/15 * * * *',
      agentId: 'main',
      delivery: { mode: 'none' },
      enabled: true,
      createdAt: '2026-04-11T08:30:00.000Z',
      updatedAt: '2026-04-16T08:30:00.000Z',
      nextRun: new Date(Date.now() + 1000 * 60 * 12).toISOString(),
      lastRun: {
        time: new Date(Date.now() - 1000 * 60 * 6).toISOString(),
        success: true,
      },
    },
    {
      id: 'cron-review-summary',
      name: t('cron.fallback.jobs.reviewSummary.name'),
      message: t('cron.fallback.jobs.reviewSummary.message'),
      schedule: '0 18 * * *',
      agentId: 'main',
      delivery: {
        mode: 'announce',
        channel: 'feishu',
        accountId: 'default',
        to: t('cron.fallback.jobs.reviewSummary.target'),
      },
      enabled: false,
      createdAt: '2026-04-09T18:00:00.000Z',
      updatedAt: '2026-04-15T18:00:00.000Z',
      lastRun: {
        time: new Date(Date.now() - 1000 * 60 * 60 * 30).toISOString(),
        success: false,
        error: t('cron.fallback.jobs.reviewSummary.error'),
      },
    },
  ];
}

function cn(...tokens: Array<string | false | null | undefined>): string {
  return tokens.filter(Boolean).join(' ');
}

function getString(value: unknown): string {
  return typeof value === 'string' ? value.trim() : '';
}

function isRecord(value: unknown): value is Record<string, unknown> {
  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
}

function IconBase({
  children,
  className,
  ...props
}: SVGProps<SVGSVGElement> & { children: ReactNode }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      {...props}
    >
      {children}
    </svg>
  );
}

function RefreshIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M20 12A8 8 0 1 1 17.2 6" />
      <path d="M20 4V9H15" />
    </IconBase>
  );
}

function PlusIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M12 5V19" />
      <path d="M5 12H19" />
    </IconBase>
  );
}

function ClockIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <circle cx="12" cy="12" r="8" />
      <path d="M12 8V12L15 14" />
    </IconBase>
  );
}

function PlayIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M8 6.5V17.5L17 12L8 6.5Z" fill="currentColor" stroke="none" />
    </IconBase>
  );
}

function PauseIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M9 7V17" />
      <path d="M15 7V17" />
    </IconBase>
  );
}

function AlertIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M12 9V13" />
      <path d="M12 17H12.01" />
      <path d="M10.3 4.9L3.8 16.3A1.5 1.5 0 0 0 5.1 18.5H18.9A1.5 1.5 0 0 0 20.2 16.3L13.7 4.9A1.5 1.5 0 0 0 10.3 4.9Z" />
    </IconBase>
  );
}

function MessageIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M6 8.5H18" />
      <path d="M6 12H14" />
      <path d="M5 5.5H19A2 2 0 0 1 21 7.5V13.5A2 2 0 0 1 19 15.5H12L8 18.5V15.5H5A2 2 0 0 1 3 13.5V7.5A2 2 0 0 1 5 5.5Z" />
    </IconBase>
  );
}

function HistoryIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M4 12A8 8 0 1 0 6.3 6.3" />
      <path d="M4 4V9H9" />
      <path d="M12 8V12L15 14" />
    </IconBase>
  );
}

function CalendarIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M7 3V6" />
      <path d="M17 3V6" />
      <path d="M4 9H20" />
      <rect x="4" y="5" width="16" height="15" rx="2" />
    </IconBase>
  );
}

function TrashIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M5 7H19" />
      <path d="M10 11V16" />
      <path d="M14 11V16" />
      <path d="M8 7L9 4H15L16 7" />
      <path d="M18 7L17.2 18.2A2 2 0 0 1 15.2 20H8.8A2 2 0 0 1 6.8 18.2L6 7" />
    </IconBase>
  );
}

function CloseIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M6 6L18 18" />
      <path d="M18 6L6 18" />
    </IconBase>
  );
}

function SpinnerIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M12 4A8 8 0 0 1 20 12" />
      <path d="M20 12A8 8 0 1 1 12 4" opacity="0.2" />
    </IconBase>
  );
}

function BotIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <rect x="5" y="8" width="14" height="10" rx="3" />
      <path d="M12 4V8" />
      <path d="M9.5 13H9.51" />
      <path d="M14.5 13H14.51" />
      <path d="M9 18V20" />
      <path d="M15 18V20" />
    </IconBase>
  );
}

function SendIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M21 3L10 14" />
      <path d="M21 3L14 21L10 14L3 10L21 3Z" />
    </IconBase>
  );
}

function ChevronDownIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <IconBase {...props}>
      <path d="M7 10L12 15L17 10" />
    </IconBase>
  );
}

function getScheduleExpression(schedule: CronJob['schedule']): string {
  if (typeof schedule === 'string') return schedule;
  if (schedule.kind === 'cron') return schedule.expr;
  if (schedule.kind === 'at') return schedule.at;
  if (schedule.kind === 'every') return String(schedule.everyMs);
  return '';
}

function parseCronSchedule(schedule: CronJob['schedule'], t: Translate, locale: LanguageCode): string {
  if (typeof schedule !== 'string') {
    if (schedule.kind === 'at') {
      return t('cron.schedule.once', { time: formatDateTime(schedule.at, locale) });
    }

    if (schedule.kind === 'every') {
      const everyMs = schedule.everyMs;
      if (everyMs < 60_000) return t('cron.schedule.everySeconds', { count: Math.round(everyMs / 1000) });
      if (everyMs < 3_600_000) return t('cron.schedule.everyMinutes', { count: Math.round(everyMs / 60_000) });
      if (everyMs < 86_400_000) return t('cron.schedule.everyHours', { count: Math.round(everyMs / 3_600_000) });
      return t('cron.schedule.everyDays', { count: Math.round(everyMs / 86_400_000) });
    }

    return schedule.expr;
  }

  const preset = SCHEDULE_PRESETS.find((item) => item.value === schedule);
  if (preset) return t(`cron.schedule.presets.${preset.key}`);

  const parts = schedule.trim().split(/\s+/);
  if (parts.length !== 5) return schedule;

  const [minute, hour, dayOfMonth, , dayOfWeek] = parts;
  const time = `${hour}:${minute.padStart(2, '0')}`;

  if (minute === '*' && hour === '*') return t('cron.schedule.everyMinute');
  if (minute.startsWith('*/')) return t('cron.schedule.everyNMinutes', { count: minute.slice(2) });
  if (hour === '*' && minute === '0') return t('cron.schedule.hourly');
  if (dayOfWeek !== '*' && dayOfMonth === '*') return t('cron.schedule.weekly', { weekday: formatWeekday(dayOfWeek, t), time });
  if (dayOfMonth !== '*') return t('cron.schedule.monthly', { day: dayOfMonth, time });
  if (hour !== '*') return t('cron.schedule.daily', { time });
  return schedule;
}

function estimateNextRunDate(scheduleExpr: string): Date | null {
  const now = new Date();
  const next = new Date(now);

  if (scheduleExpr === '* * * * *') {
    next.setSeconds(0, 0);
    next.setMinutes(next.getMinutes() + 1);
    return next;
  }

  if (scheduleExpr === '*/5 * * * *') {
    const remainder = next.getMinutes() % 5;
    next.setSeconds(0, 0);
    next.setMinutes(next.getMinutes() + (remainder === 0 ? 5 : 5 - remainder));
    return next;
  }

  if (scheduleExpr === '*/15 * * * *') {
    const remainder = next.getMinutes() % 15;
    next.setSeconds(0, 0);
    next.setMinutes(next.getMinutes() + (remainder === 0 ? 15 : 15 - remainder));
    return next;
  }

  if (scheduleExpr === '0 * * * *') {
    next.setMinutes(0, 0, 0);
    next.setHours(next.getHours() + 1);
    return next;
  }

  if (scheduleExpr === '0 9 * * *' || scheduleExpr === '0 18 * * *') {
    const targetHour = scheduleExpr === '0 9 * * *' ? 9 : 18;
    next.setHours(targetHour, 0, 0, 0);
    if (next <= now) next.setDate(next.getDate() + 1);
    return next;
  }

  if (scheduleExpr === '0 9 * * 1') {
    next.setHours(9, 0, 0, 0);
    const weekday = next.getDay();
    const daysUntilMonday = weekday === 1 ? 7 : (8 - weekday) % 7;
    next.setDate(next.getDate() + daysUntilMonday);
    return next;
  }

  if (scheduleExpr === '0 9 1 * *') {
    next.setDate(1);
    next.setHours(9, 0, 0, 0);
    if (next <= now) next.setMonth(next.getMonth() + 1);
    return next;
  }

  return null;
}

function estimateNextRun(scheduleExpr: string): string | null {
  const next = estimateNextRunDate(scheduleExpr);
  return next ? next.toISOString() : null;
}

function formatWeekday(weekday: string, t: Translate): string {
  const weekdayMap: Record<string, string> = {
    '0': 'sun',
    '1': 'mon',
    '2': 'tue',
    '3': 'wed',
    '4': 'thu',
    '5': 'fri',
    '6': 'sat',
    '7': 'sun',
  };

  const key = weekdayMap[weekday];
  return key ? t(`cron.weekdays.${key}`) : weekday;
}

function resolveDateLocale(locale: LanguageCode): string {
  if (locale === 'zh') return 'zh-CN';
  if (locale === 'ja') return 'ja-JP';
  return 'en-US';
}

function formatDateTime(value: string, locale: LanguageCode): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;

  return date.toLocaleString(resolveDateLocale(locale), {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function formatRelativeTime(value: string, t: Translate, locale: LanguageCode): string {
  const target = new Date(value).getTime();
  if (Number.isNaN(target)) return value;

  const diff = Date.now() - target;
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (seconds < 10) return t('cron.time.justNow');
  if (seconds < 60) return t('cron.time.secondsAgo', { count: seconds });
  if (minutes < 60) return t('cron.time.minutesAgo', { count: minutes });
  if (hours < 24) return t('cron.time.hoursAgo', { count: hours });
  if (days < 30) return t('cron.time.daysAgo', { count: days });
  return formatDateTime(value, locale);
}

function normalizeCronScheduleValue(value: unknown): CronJob['schedule'] {
  if (typeof value === 'string' && value.trim()) return value.trim();

  if (!isRecord(value)) return '0 9 * * *';

  const kind = getString(value.kind);
  if (kind === 'cron') {
    const expr = getString(value.expr);
    return { kind: 'cron', expr: expr || '0 9 * * *', tz: getString(value.tz) || undefined };
  }

  if (kind === 'at') {
    const at = getString(value.at);
    return { kind: 'at', at: at || new Date().toISOString() };
  }

  if (kind === 'every') {
    const everyMs = typeof value.everyMs === 'number' && Number.isFinite(value.everyMs) ? value.everyMs : 60_000;
    const anchorMs = typeof value.anchorMs === 'number' && Number.isFinite(value.anchorMs) ? value.anchorMs : undefined;
    return { kind: 'every', everyMs, anchorMs };
  }

  return '0 9 * * *';
}

function normalizeCronDelivery(value: unknown): CronJobDelivery {
  if (!isRecord(value)) return { mode: 'none' };

  const mode = getString(value.mode) === 'announce' ? 'announce' : 'none';
  const channel = getString(value.channel) || undefined;
  const to = getString(value.to) || undefined;
  const accountId = getString(value.accountId) || undefined;

  if (mode === 'none') {
    return { mode: 'none' };
  }

  return {
    mode,
    channel,
    to,
    accountId,
  };
}

function normalizeCronJob(value: unknown): CronJob | null {
  if (!isRecord(value)) return null;

  const id = getString(value.id);
  if (!id) return null;

  const name = getString(value.name);
  const message = getString(value.message);
  const schedule = normalizeCronScheduleValue(value.schedule);
  const enabled = value.enabled !== false;
  const createdAt = getString(value.createdAt) || new Date().toISOString();
  const updatedAt = getString(value.updatedAt) || createdAt;
  const agentId = getString(value.agentId) ? normalizeAgentId(value.agentId) : undefined;
  const nextRun = getString(value.nextRun) || undefined;
  const lastRun = isRecord(value.lastRun)
    ? {
        time: getString(value.lastRun.time) || new Date().toISOString(),
        success: value.lastRun.success !== false,
        error: getString(value.lastRun.error) || undefined,
        duration: typeof value.lastRun.duration === 'number' ? value.lastRun.duration : undefined,
      }
    : undefined;

  return {
    id,
    name,
    message,
    schedule,
    agentId,
    delivery: normalizeCronDelivery(value.delivery),
    enabled,
    createdAt,
    updatedAt,
    lastRun,
    nextRun,
  };
}

function normalizeCronJobs(payload: unknown): CronJob[] {
  if (Array.isArray(payload)) {
    return payload.map(normalizeCronJob).filter((job): job is CronJob => Boolean(job));
  }

  if (!isRecord(payload)) return [];

  const collection = Array.isArray(payload.jobs)
    ? payload.jobs
    : Array.isArray(payload.items)
      ? payload.items
      : Array.isArray(payload.data)
        ? payload.data
        : [];

  return collection.map(normalizeCronJob).filter((job): job is CronJob => Boolean(job));
}

function normalizeCronJobResult(payload: unknown): CronJob | null {
  if (isRecord(payload) && 'job' in payload) {
    return normalizeCronJob(payload.job);
  }

  if (isRecord(payload) && 'data' in payload && !Array.isArray(payload.data)) {
    return normalizeCronJob(payload.data);
  }

  return normalizeCronJob(payload);
}

function normalizeDeliveryChannelAccount(
  value: unknown,
  fallbackDefaultAccountId?: string,
): CronDeliveryChannelAccount | null {
  if (!isRecord(value)) return null;

  const account = value as DeliveryChannelAccountLike;
  const accountId = getString(account.accountId) || getString(account.id) || 'default';
  const name =
    getString(account.name)
    || getString(account.label)
    || getString(account.channelName)
    || accountId;

  return {
    accountId,
    name,
    isDefault: Boolean(account.isDefault || account.default || accountId === fallbackDefaultAccountId || accountId === 'default'),
  };
}

function normalizeGroupedChannelEntry(value: unknown): CronDeliveryChannelGroup | null {
  if (!isRecord(value)) return null;

  const group = value as DeliveryChannelGroupLike;
  const channelType = normalizeChannelType(getString(group.channelType));
  if (!channelType) return null;

  const fallbackDefaultAccountId = getString(group.defaultAccountId) || 'default';
  const accounts = Array.isArray(group.accounts)
    ? group.accounts
        .map((account) => normalizeDeliveryChannelAccount(account, fallbackDefaultAccountId))
        .filter((account): account is CronDeliveryChannelAccount => Boolean(account))
    : [];

  const uniqueAccounts = dedupeDeliveryAccounts(accounts);
  const defaultAccountId =
    uniqueAccounts.find((account) => account.isDefault)?.accountId
    || fallbackDefaultAccountId
    || uniqueAccounts[0]?.accountId
    || 'default';

  return {
    channelType,
    defaultAccountId,
    accounts: uniqueAccounts.map((account) =>
      account.accountId === defaultAccountId ? { ...account, isDefault: true } : account,
    ),
  };
}

function dedupeDeliveryAccounts(accounts: CronDeliveryChannelAccount[]): CronDeliveryChannelAccount[] {
  const byId = new Map<string, CronDeliveryChannelAccount>();
  for (const account of accounts) {
    const existing = byId.get(account.accountId);
    if (!existing) {
      byId.set(account.accountId, account);
      continue;
    }

    byId.set(account.accountId, {
      accountId: account.accountId,
      name: existing.name || account.name,
      isDefault: existing.isDefault || account.isDefault,
    });
  }

  return Array.from(byId.values()).sort((left, right) => {
    if (left.isDefault !== right.isDefault) return left.isDefault ? -1 : 1;
    return left.name.localeCompare(right.name, 'zh-CN');
  });
}

function normalizeFlatChannelAccounts(payload: unknown[]): CronDeliveryChannelGroup[] {
  const groupMap = new Map<string, CronDeliveryChannelAccount[]>();

  for (const entry of payload) {
    if (!isRecord(entry)) continue;

    const account = entry as DeliveryChannelAccountLike;
    const channelType = normalizeChannelType(getString(account.channelType));
    if (!channelType) continue;

    const normalizedAccount = normalizeDeliveryChannelAccount(entry);
    if (!normalizedAccount) continue;

    const currentAccounts = groupMap.get(channelType) ?? [];
    currentAccounts.push(normalizedAccount);
    groupMap.set(channelType, currentAccounts);
  }

  return Array.from(groupMap.entries())
    .map(([channelType, accounts]) => {
      const uniqueAccounts = dedupeDeliveryAccounts(accounts);
      const defaultAccountId =
        uniqueAccounts.find((account) => account.isDefault)?.accountId
        || uniqueAccounts[0]?.accountId
        || 'default';

      return {
        channelType,
        defaultAccountId,
        accounts: uniqueAccounts.map((account) =>
          account.accountId === defaultAccountId ? { ...account, isDefault: true } : account,
        ),
      };
    })
    .sort((left, right) => getChannelDisplayName(left.channelType).localeCompare(getChannelDisplayName(right.channelType), 'zh-CN'));
}

function normalizeDeliveryChannelGroups(payload: unknown): CronDeliveryChannelGroup[] {
  if (Array.isArray(payload)) {
    const groupedEntries = payload
      .map(normalizeGroupedChannelEntry)
      .filter((entry): entry is CronDeliveryChannelGroup => Boolean(entry));

    if (groupedEntries.length > 0) {
      return groupedEntries.sort((left, right) =>
        getChannelDisplayName(left.channelType).localeCompare(getChannelDisplayName(right.channelType), 'zh-CN'),
      );
    }

    return normalizeFlatChannelAccounts(payload);
  }

  if (!isRecord(payload)) return [];

  if (Array.isArray(payload.channels)) {
    return normalizeDeliveryChannelGroups(payload.channels);
  }

  if (Array.isArray(payload.groups)) {
    return normalizeDeliveryChannelGroups(payload.groups);
  }

  if (Array.isArray(payload.accounts)) {
    return normalizeDeliveryChannelGroups(payload.accounts);
  }

  if (Array.isArray(payload.data)) {
    return normalizeDeliveryChannelGroups(payload.data);
  }

  return [];
}

function normalizeDeliveryTargetOption(value: unknown): ChannelTargetCatalogItem | null {
  if (!isRecord(value)) return null;

  const option = value as DeliveryTargetOptionLike;
  const targetValue = getString(option.value);
  if (!targetValue) return null;

  const kind = option.kind === 'name'
    || option.kind === 'identifier'
    || option.kind === 'webhook'
    || option.kind === 'url'
    ? option.kind
    : undefined;
  const source = option.source === 'channel-name'
    || option.source === 'account-id'
    || option.source === 'remote'
    || option.source === 'query-param'
    || option.source === 'hash-param'
    || option.source === 'channel-url'
    || option.source === 'fallback'
    ? option.source
    : undefined;

  return {
    value: targetValue,
    label: getString(option.label) || getString(option.title) || getString(option.name) || targetValue,
    description: getString(option.description) || getString(option.desc) || undefined,
    kind,
    source,
    channelType: getString(option.channelType) || undefined,
    accountId: getString(option.accountId) || undefined,
  };
}

function dedupeDeliveryTargetOptions(options: ChannelTargetCatalogItem[]): ChannelTargetCatalogItem[] {
  const byValue = new Map<string, ChannelTargetCatalogItem>();

  for (const option of options) {
    const existing = byValue.get(option.value);
    if (!existing) {
      byValue.set(option.value, option);
      continue;
    }

    byValue.set(option.value, {
      ...existing,
      label: existing.label || option.label,
      description: existing.description || option.description,
      kind: existing.kind || option.kind,
      source: existing.source || option.source,
      channelType: existing.channelType || option.channelType,
      accountId: existing.accountId || option.accountId,
    });
  }

  const kindOrder: Record<NonNullable<ChannelTargetCatalogItem['kind']>, number> = {
    name: 0,
    identifier: 1,
    webhook: 2,
    url: 3,
  };

  return Array.from(byValue.values()).sort((left, right) => {
    const leftOrder = left.kind ? kindOrder[left.kind] : 99;
    const rightOrder = right.kind ? kindOrder[right.kind] : 99;
    if (leftOrder !== rightOrder) return leftOrder - rightOrder;
    return left.label.localeCompare(right.label, 'zh-CN');
  });
}

function normalizeDeliveryTargetOptions(payload: unknown): ChannelTargetCatalogItem[] {
  if (Array.isArray(payload)) {
    return dedupeDeliveryTargetOptions(
      payload
        .map(normalizeDeliveryTargetOption)
        .filter((option): option is ChannelTargetCatalogItem => Boolean(option)),
    );
  }

  if (!isRecord(payload)) return [];

  if (Array.isArray(payload.targets)) {
    return normalizeDeliveryTargetOptions(payload.targets);
  }

  if (Array.isArray(payload.items)) {
    return normalizeDeliveryTargetOptions(payload.items);
  }

  if (Array.isArray(payload.data)) {
    return normalizeDeliveryTargetOptions(payload.data);
  }

  return [];
}

function mergeDeliveryTargetOptions(
  options: ChannelTargetCatalogItem[],
  currentValue: string,
  t: Translate,
): ChannelTargetCatalogItem[] {
  const trimmedValue = currentValue.trim();
  if (!trimmedValue) {
    return options;
  }

  if (options.some((option) => option.value === trimmedValue)) {
    return options;
  }

  return dedupeDeliveryTargetOptions([
    {
      value: trimmedValue,
      label: trimmedValue,
      description: t('cron.deliveryTarget.savedCustom'),
      source: 'fallback',
    },
    ...options,
  ]);
}

function ensureChannelGroupSelection(
  groups: CronDeliveryChannelGroup[],
  channelType: string,
  accountId?: string,
): CronDeliveryChannelGroup[] {
  const normalizedChannelType = normalizeChannelType(channelType);
  if (!normalizedChannelType) return groups;
  if (groups.some((group) => group.channelType === normalizedChannelType)) return groups;

  return [
    ...groups,
    {
      channelType: normalizedChannelType,
      defaultAccountId: accountId || 'default',
      accounts: accountId
        ? [{ accountId, name: accountId, isDefault: true }]
        : [],
    },
  ];
}

function getChannelDisplayName(channelType: string, t: Translate): string {
  const normalized = normalizeChannelType(channelType);
  if (!normalized) return t('cron.channels.unnamed');

  const key = CHANNEL_NAME_KEYS[normalized];
  if (key) {
    const translated = t(key);
    if (translated !== key) return translated;
  }

  return normalized
    .split(/[-_]/)
    .filter(Boolean)
    .map((token) => token.slice(0, 1).toUpperCase() + token.slice(1))
    .join(' ');
}

function getDeliveryAccountDisplayName(account: CronDeliveryChannelAccount | undefined, t: Translate): string {
  if (!account) return t('cron.channels.mainAccount');
  if (account.accountId === 'default' && (account.name === 'default' || !account.name.trim())) return t('cron.channels.mainAccount');
  return account.name;
}

function getAgentLabel(
  agentId: string | null | undefined,
  agentsById: Map<string, AgentSummary>,
  defaultAgentId: string,
  t: Translate,
): string {
  const resolvedId = normalizeAgentId(agentId || defaultAgentId || DEFAULT_AGENT_ID);
  const resolvedAgent = agentsById.get(resolvedId);
  if (resolvedAgent?.name) return resolvedAgent.name;
  if (resolvedId === normalizeAgentId(defaultAgentId || DEFAULT_AGENT_ID)) return t('cron.agent.main');
  return resolvedId;
}

function formatPathTail(value: string): string {
  const normalized = value.replace(/\\/g, '/').trim();
  if (!normalized) return '';

  const parts = normalized.split('/').filter(Boolean);
  if (parts.length <= 2) return normalized;
  return `.../${parts.slice(-2).join('/')}`;
}

function getAgentDetail(
  agentId: string | null | undefined,
  agentsById: Map<string, AgentSummary>,
  defaultAgentId: string,
  t: Translate,
): string {
  const resolvedId = normalizeAgentId(agentId || defaultAgentId || DEFAULT_AGENT_ID);
  const resolvedAgent = agentsById.get(resolvedId);

  if (resolvedAgent?.workspace) {
    return t('cron.agent.workspace', { path: formatPathTail(resolvedAgent.workspace) });
  }

  if (resolvedAgent?.agentDir) {
    return t('cron.agent.dir', { path: formatPathTail(resolvedAgent.agentDir) });
  }

  if (resolvedId === normalizeAgentId(defaultAgentId || DEFAULT_AGENT_ID) || resolvedAgent?.isDefault) {
    return t('cron.agent.sharedMainWorkspace');
  }

  return t('cron.agent.syncPending');
}

function describeDelivery(
  delivery: CronJobDelivery | undefined,
  channelGroups: CronDeliveryChannelGroup[],
  t: Translate,
): string {
  if (!delivery || delivery.mode !== 'announce') {
    return t('cron.delivery.none');
  }

  const channelType = normalizeChannelType(delivery.channel);
  if (!channelType) {
    return t('cron.delivery.pending');
  }

  const channelGroup = channelGroups.find((group) => group.channelType === channelType);
  const accountId = delivery.accountId || channelGroup?.defaultAccountId;
  const account = channelGroup?.accounts.find((item) => item.accountId === accountId) || channelGroup?.accounts[0];
  const target = getString(delivery.to);

  return [
    getChannelDisplayName(channelType, t),
    account ? getDeliveryAccountDisplayName(account, t) : null,
    target || t('cron.delivery.targetPending'),
  ]
    .filter(Boolean)
    .join(' / ');
}

function buildLocalCronJob(input: CronJobCreateInput, current?: CronJob | null): CronJob {
  const schedule = input.schedule.trim();
  const nextRun = estimateNextRunDate(schedule)?.toISOString() ?? current?.nextRun;

  return {
    id: current?.id ?? `cron-${Date.now()}`,
    name: input.name.trim(),
    message: input.message.trim(),
    schedule,
    agentId: input.agentId ? normalizeAgentId(input.agentId) : current?.agentId,
    enabled: input.enabled ?? current?.enabled ?? true,
    delivery: input.delivery ?? current?.delivery ?? { mode: 'none' },
    createdAt: current?.createdAt ?? new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    lastRun: current?.lastRun,
    nextRun,
  };
}

function toneClasses(tone: FeedbackTone): string {
  if (tone === 'success') {
    return 'border-green-200 bg-green-50 text-green-700 dark:border-green-900/70 dark:bg-green-900/20 dark:text-green-300';
  }

  if (tone === 'error') {
    return 'border-red-200 bg-red-50 text-red-700 dark:border-red-900/70 dark:bg-red-900/20 dark:text-red-300';
  }

  if (tone === 'warning') {
    return 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-900/20 dark:text-amber-300';
  }

  return 'border-[#dfeaf6] bg-[#f8fbff] text-[#525866] dark:border-[#2a2a2d] dark:bg-[#232327] dark:text-gray-300';
}

function Notice({
  tone,
  message,
}: {
  tone: FeedbackTone;
  message: string;
}) {
  return (
    <div className={cn('mb-4 flex items-start gap-2 rounded-xl border px-4 py-3 text-sm font-medium', toneClasses(tone))}>
      <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
      <span>{message}</span>
    </div>
  );
}

function SelectField({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement> & { children: ReactNode }) {
  return (
    <div className="relative">
      <select
        className={cn(
          'h-11 w-full appearance-none rounded-xl border border-transparent bg-[#EDECE4] px-4 pr-10 text-[14px] text-[#171717] outline-none transition-colors focus:border-[#3B6DE8] disabled:cursor-not-allowed disabled:opacity-60 dark:bg-[#222225] dark:text-[#f3f4f6]',
          className,
        )}
        {...props}
      >
        {children}
      </select>
      <ChevronDownIcon className="pointer-events-none absolute right-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[#99A0AE] dark:text-gray-500" />
    </div>
  );
}

function StatCard({ label, value, tone, icon: Icon }: StatCardProps) {
  const iconWrapperClass =
    tone === 'green'
      ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400'
      : tone === 'amber'
        ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400'
        : tone === 'red'
          ? 'bg-red-100 text-red-500 dark:bg-red-900/20 dark:text-red-400'
          : 'bg-[#E8E6DE] text-[#7A7668] dark:bg-[#2a2a2d] dark:text-gray-400';

  return (
    <div className="min-h-[130px] rounded-2xl border border-transparent bg-[#eeece3] /30 p-5 transition-colors hover:bg-[#eeece3] /60  dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#222225]">
      <div className="flex items-center justify-between">
        <div className={cn('flex h-11 w-11 items-center justify-center rounded-full', iconWrapperClass)}>
          <Icon className="h-5 w-5" />
        </div>
      </div>
      <div className="mt-4 flex items-baseline gap-3">
        <div className="font-serif text-[40px] leading-none text-[#171717] dark:text-[#f3f4f6]">{value}</div>
        <div className="text-[14px] font-medium text-[#525866] dark:text-gray-400">{label}</div>
      </div>
    </div>
  );
}

function CronJobCard({
  job,
  agentLabel,
  agentDetail,
  deliverySummary,
  busyAction,
  onToggle,
  onEdit,
  onDelete,
  onTrigger,
}: JobCardProps) {
  const { t, locale } = useI18n();
  const disabled = busyAction !== null;
  const isAnnouncement = job.delivery?.mode === 'announce';
  const jobName = job.name.trim() ? job.name : t('cron.common.unnamedJob');

  return (
    <article
      className="group flex cursor-pointer flex-col rounded-2xl border border-transparent bg-transparent p-5 transition-all hover:bg-black/[0.03] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#2a2a2d]"
      onClick={onEdit}
    >
      <div className="mb-4 flex items-start justify-between gap-4">
        <div className="flex min-w-0 items-center gap-4">
          <div className="flex h-[46px] w-[46px] shrink-0 items-center justify-center rounded-full border border-black/5 bg-black/5 text-[#171717] shadow-sm transition-transform group-hover:scale-105 dark:border-white/5 dark:bg-white/5 dark:text-[#f3f4f6]">
            <ClockIcon className={cn('h-5 w-5', job.enabled ? 'text-current' : 'text-[#99A0AE] dark:text-gray-500')} />
          </div>
          <div className="min-w-0">
            <div className="mb-1 flex items-center gap-2">
              <h3 className="truncate text-[16px] font-semibold text-[#171717] dark:text-[#f3f4f6]">{jobName}</h3>
              <span
                className={cn(
                  'h-2 w-2 shrink-0 rounded-full',
                  job.enabled ? 'bg-green-500' : 'bg-[#99A0AE] dark:bg-gray-500',
                )}
                aria-label={job.enabled ? t('cron.card.enabled') : t('cron.card.paused')}
              />
              <span
                className={cn(
                  'rounded-full px-2.5 py-1 text-[11px] font-medium',
                  isAnnouncement
                    ? 'bg-[#E8F1FF] text-[#2B7FFF] dark:bg-[#232b36] dark:text-[#8ab4ff]'
                    : 'bg-[#E8E6DE] text-[#7A7668] dark:bg-[#2a2a2d] dark:text-gray-400',
                )}
              >
                {isAnnouncement ? t('cron.card.modeAnnounce') : t('cron.card.modeNone')}
              </span>
            </div>
            <div className="flex items-center gap-1.5 text-[13px] text-[#525866] dark:text-gray-400">
              <ClockIcon className="h-3.5 w-3.5" />
              <span>{parseCronSchedule(job.schedule, t, locale)}</span>
            </div>
          </div>
        </div>

        <button
          type="button"
          className={cn(
            'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
            job.enabled ? 'bg-[#2B7FFF]' : 'bg-[#d1d5db] dark:bg-[#3b3b40]',
            disabled && 'cursor-not-allowed opacity-60',
          )}
          aria-label={job.enabled ? t('cron.card.pauseTask') : t('cron.card.enableTask')}
          onClick={(event) => {
            event.stopPropagation();
            if (!disabled) {
              onToggle(!job.enabled);
            }
          }}
        >
          <span
            className={cn(
              'absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition-transform',
              job.enabled && 'translate-x-5',
            )}
          />
        </button>
      </div>

      <div className="mt-2 flex flex-1 flex-col justify-end pl-[62px]">
        <div className="mb-3 flex items-start gap-2">
          <MessageIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#99A0AE] dark:text-gray-500" />
          <p className="line-clamp-2 text-[13.5px] leading-[1.5] text-[#525866] dark:text-gray-400">{job.message}</p>
        </div>

        <div className="mb-3 grid gap-2 rounded-2xl bg-white /70 px-3.5 py-3 text-[12.5px] dark:bg-[#222225]">
          <div className="flex items-start gap-2 text-[#525866] dark:text-gray-400">
            <BotIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#99A0AE] dark:text-gray-500" />
            <span className="min-w-0">
              <span className="mr-1 text-[#171717]/75 dark:text-[#f3f4f6]/75">{t('cron.card.agentLabel')}</span>
              <span className="font-medium text-[#171717] dark:text-[#f3f4f6]">{agentLabel}</span>
              <span className="ml-2 text-[#99A0AE] dark:text-gray-500">{agentDetail}</span>
            </span>
          </div>
          <div className="flex items-start gap-2 text-[#525866] dark:text-gray-400">
            <SendIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#99A0AE] dark:text-gray-500" />
            <span className="min-w-0">
              <span className="mr-1 text-[#171717]/75 dark:text-[#f3f4f6]/75">{t('cron.card.deliveryLabel')}</span>
              <span className="font-medium text-[#171717] dark:text-[#f3f4f6]">{deliverySummary}</span>
            </span>
          </div>
        </div>

        <div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] font-medium text-[#99A0AE] dark:text-gray-500">
          {job.lastRun ? (
            <span className="flex items-center gap-1.5">
              <HistoryIcon className="h-3.5 w-3.5" />
              <span>{t('cron.card.lastRun', { time: formatRelativeTime(job.lastRun.time, t, locale) })}</span>
              <span className={job.lastRun.success ? 'text-green-500' : 'text-red-500'}>
                {job.lastRun.success ? t('cron.card.success') : t('cron.card.failed')}
              </span>
            </span>
          ) : null}
          {job.nextRun && job.enabled ? (
            <span className="flex items-center gap-1.5">
              <CalendarIcon className="h-3.5 w-3.5" />
              <span>{t('cron.card.nextRun', { time: formatDateTime(job.nextRun, locale) })}</span>
            </span>
          ) : null}
        </div>

        {job.lastRun && !job.lastRun.success && job.lastRun.error ? (
          <div className="mb-3 flex items-start gap-2 rounded-xl border border-red-500/20 bg-red-500/10 p-2.5 text-[13px] text-red-600 dark:text-red-400">
            <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
            <span className="line-clamp-2">{job.lastRun.error}</span>
          </div>
        ) : null}

        <div className="mt-auto flex justify-end gap-2 opacity-0 transition-opacity group-hover:opacity-100">
          <button
            type="button"
            className="flex h-8 items-center rounded-lg px-3 text-[13px] font-medium text-[#2B7FFF] transition-colors hover:bg-[#EFF6FF] dark:hover:bg-[#232327]"
            onClick={(event) => {
              event.stopPropagation();
              if (!disabled) {
                onTrigger();
              }
            }}
          >
            {busyAction === 'trigger' ? <SpinnerIcon className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : <PlayIcon className="mr-1.5 h-3.5 w-3.5" />}
            {t('cron.actions.runNow')}
          </button>
          <button
            type="button"
            className="flex h-8 items-center rounded-lg px-3 text-[13px] font-medium text-red-500 transition-colors hover:bg-red-50 dark:hover:bg-red-900/20"
            onClick={(event) => {
              event.stopPropagation();
              if (!disabled) {
                onDelete();
              }
            }}
          >
            <TrashIcon className="mr-1.5 h-3.5 w-3.5" />
            {t('cron.actions.delete')}
          </button>
        </div>
      </div>
    </article>
  );
}

function CronTaskDialog({
  open,
  job,
  saving,
  defaultAgentId,
  channelGroups,
  channelsLoading,
  channelsError,
  onClose,
  onSave,
}: DialogProps) {
  const { t, locale } = useI18n();
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [schedule, setSchedule] = useState('0 9 * * *');
  const [enabled, setEnabled] = useState(true);
  const [useCustom, setUseCustom] = useState(false);
  const [customSchedule, setCustomSchedule] = useState('');
  const [deliveryMode, setDeliveryMode] = useState<'none' | 'announce'>('none');
  const [deliveryChannel, setDeliveryChannel] = useState('');
  const [selectedDeliveryAccountId, setSelectedDeliveryAccountId] = useState('');
  const [deliveryTarget, setDeliveryTarget] = useState('');
  const [loadedDeliveryTargetOptions, setLoadedDeliveryTargetOptions] = useState<ChannelTargetCatalogItem[]>([]);
  const [targetsLoading, setTargetsLoading] = useState(false);
  const [targetsError, setTargetsError] = useState<string | null>(null);
  const [deliveryTargetScopeKey, setDeliveryTargetScopeKey] = useState('');
  const [validationError, setValidationError] = useState<string | null>(null);

  useEffect(() => {
    if (!open) return;

    const initialSchedule = job ? getScheduleExpression(job.schedule) || '0 9 * * *' : '0 9 * * *';
    const matchedPreset = SCHEDULE_PRESETS.some((item) => item.value === initialSchedule);

    setName(job?.name ?? '');
    setMessage(job?.message ?? '');
    setSchedule(initialSchedule);
    setEnabled(job?.enabled ?? true);
    setUseCustom(!matchedPreset);
    setCustomSchedule(matchedPreset ? '' : initialSchedule);
    setDeliveryMode(job?.delivery?.mode === 'announce' ? 'announce' : 'none');
    setDeliveryChannel(getString(job?.delivery?.channel));
    setSelectedDeliveryAccountId(getString(job?.delivery?.accountId));
    setDeliveryTarget(getString(job?.delivery?.to));
    setLoadedDeliveryTargetOptions([]);
    setTargetsLoading(false);
    setTargetsError(null);
    setDeliveryTargetScopeKey('');
    setValidationError(null);
  }, [job, open]);

  const availableChannelGroups = useMemo(
    () => ensureChannelGroupSelection(channelGroups, deliveryChannel, selectedDeliveryAccountId),
    [channelGroups, deliveryChannel, selectedDeliveryAccountId],
  );

  const selectedChannelGroup = useMemo(
    () => availableChannelGroups.find((group) => group.channelType === normalizeChannelType(deliveryChannel)),
    [availableChannelGroups, deliveryChannel],
  );

  const deliveryTargetOptions = useMemo(
    () => mergeDeliveryTargetOptions(loadedDeliveryTargetOptions, deliveryTarget, t),
    [deliveryTarget, loadedDeliveryTargetOptions, t],
  );

  const targetListId = useMemo(
    () => `cron-delivery-targets-${job?.id ?? 'draft'}`,
    [job?.id],
  );

  useEffect(() => {
    if (!open || deliveryMode !== 'announce') return;

    if (!deliveryChannel && availableChannelGroups[0]) {
      setDeliveryChannel(availableChannelGroups[0].channelType);
    }
  }, [availableChannelGroups, deliveryChannel, deliveryMode, open]);

  useEffect(() => {
    if (!open || deliveryMode !== 'announce') return;

    const resolvedDefaultAccountId =
      selectedChannelGroup?.defaultAccountId
      || selectedChannelGroup?.accounts[0]?.accountId
      || '';

    if (!resolvedDefaultAccountId) {
      setSelectedDeliveryAccountId('');
      return;
    }

    const hasSelectedAccount = selectedChannelGroup?.accounts.some((account) => account.accountId === selectedDeliveryAccountId);
    if (!selectedDeliveryAccountId || !hasSelectedAccount) {
      setSelectedDeliveryAccountId(resolvedDefaultAccountId);
    }
  }, [deliveryMode, open, selectedChannelGroup, selectedDeliveryAccountId]);

  useEffect(() => {
    if (!open || deliveryMode !== 'announce') {
      setDeliveryTargetScopeKey('');
      return;
    }

    const scopeKey = `${normalizeChannelType(deliveryChannel)}:${getString(selectedDeliveryAccountId || selectedChannelGroup?.defaultAccountId)}`;
    if (!scopeKey || scopeKey === ':') {
      setDeliveryTargetScopeKey('');
      return;
    }

    setDeliveryTargetScopeKey((currentScopeKey) => {
      if (currentScopeKey && currentScopeKey !== scopeKey) {
        setDeliveryTarget('');
      }
      return scopeKey;
    });
  }, [
    deliveryChannel,
    deliveryMode,
    open,
    selectedChannelGroup?.defaultAccountId,
    selectedDeliveryAccountId,
  ]);

  useEffect(() => {
    if (!open || deliveryMode !== 'announce') {
      setLoadedDeliveryTargetOptions([]);
      setTargetsLoading(false);
      setTargetsError(null);
      return;
    }

    const normalizedChannelType = normalizeChannelType(deliveryChannel);
    const normalizedAccountId = getString(selectedDeliveryAccountId || selectedChannelGroup?.defaultAccountId);
    if (!normalizedChannelType) {
      setLoadedDeliveryTargetOptions([]);
      setTargetsLoading(false);
      setTargetsError(null);
      return;
    }

    let cancelled = false;
    const query = new URLSearchParams({ channelType: normalizedChannelType });
    if (normalizedAccountId) {
      query.set('accountId', normalizedAccountId);
    }

    setTargetsLoading(true);
    setTargetsError(null);

    void hostApiFetch<ChannelTargetsResponse>(`/api/channels/targets?${query.toString()}`)
      .then((response) => {
        if (cancelled) return;
        setLoadedDeliveryTargetOptions(normalizeDeliveryTargetOptions(response));
      })
      .catch((requestError) => {
        if (cancelled) return;
        setLoadedDeliveryTargetOptions([]);
        setTargetsError(requestError instanceof Error ? requestError.message : String(requestError));
      })
      .finally(() => {
        if (!cancelled) {
          setTargetsLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [
    deliveryChannel,
    deliveryMode,
    open,
    selectedChannelGroup?.defaultAccountId,
    selectedDeliveryAccountId,
  ]);

  if (!open) return null;

  const finalSchedule = useCustom ? customSchedule.trim() : schedule;
  const nextRunPreview = finalSchedule ? estimateNextRun(finalSchedule) : null;
  const resolvedAgentId = normalizeAgentId(getString(job?.agentId) || defaultAgentId || DEFAULT_AGENT_ID);
  const selectedAccount = selectedChannelGroup?.accounts.find((account) => account.accountId === selectedDeliveryAccountId);
  const deliveryPreview =
    deliveryMode === 'announce'
      ? describeDelivery(
          {
            mode: 'announce',
            channel: deliveryChannel,
            accountId: selectedDeliveryAccountId,
            to: deliveryTarget,
          },
          availableChannelGroups,
          t,
        )
      : t('cron.delivery.none');

  async function handleSubmit(): Promise<void> {
    if (!name.trim()) {
      setValidationError(t('cron.validation.nameRequired'));
      return;
    }

    if (!message.trim()) {
      setValidationError(t('cron.validation.messageRequired'));
      return;
    }

    if (!finalSchedule) {
      setValidationError(t('cron.validation.scheduleRequired'));
      return;
    }

    if (deliveryMode === 'announce') {
      if (!deliveryChannel) {
        setValidationError(t('cron.validation.channelRequired'));
        return;
      }

      if (!deliveryTarget.trim()) {
        setValidationError(t('cron.validation.targetRequired'));
        return;
      }
    }

    setValidationError(null);

    await onSave({
      name: name.trim(),
      agentId: resolvedAgentId,
      message: message.trim(),
      schedule: finalSchedule,
      enabled,
      delivery:
        deliveryMode === 'announce'
          ? {
              mode: 'announce',
              channel: normalizeChannelType(deliveryChannel),
              accountId: selectedDeliveryAccountId || selectedChannelGroup?.defaultAccountId || undefined,
              to: deliveryTarget.trim(),
            }
          : { mode: 'none' },
    });
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4 backdrop-blur-[1px]">
      <div className="max-h-[calc(100vh-48px)] w-full max-w-[720px] overflow-hidden rounded-[20px] bg-white  shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]">
        <div className="flex items-start justify-between border-b border-black/5 bg-white  px-8 py-4 dark:border-[#2a2a2d] dark:bg-[#1f1f22]">
          <div>
            <h2
              className="mb-2 text-[24px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
              style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
            >
              {job ? t('cron.dialog.editTitle') : t('cron.dialog.createTitle')}
            </h2>
            <p className="text-[14px] text-[#99A0AE] dark:text-gray-500">
              {t('cron.dialog.subtitle')}
            </p>
          </div>
          <button
            type="button"
            className="mt-1 rounded-full p-1 text-[#99A0AE] transition-colors hover:text-[#171717] dark:hover:text-[#f3f4f6]"
            onClick={onClose}
          >
            <CloseIcon className="h-5 w-5" />
          </button>
        </div>

        <div className="max-h-[calc(100vh-230px)] overflow-y-auto p-4">
          <div className="space-y-6">
            <div className="grid grid-cols-1 gap-4">
              <div>
                <label className="mb-2.5 block text-[14px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.nameLabel')}</label>
                <input
                  value={name}
                  onChange={(event) => setName(event.target.value)}
                  placeholder={t('cron.dialog.namePlaceholder')}
                  className="h-11 w-full rounded-xl border border-transparent bg-[#EDECE4] px-4 text-[14px] text-[#171717] outline-none transition-colors focus:border-[#3B6DE8] dark:bg-[#222225] dark:text-[#f3f4f6]"
                />
              </div>
            </div>

            <div>
              <label className="mb-2.5 block text-[14px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.messageLabel')}</label>
              <textarea
                value={message}
                onChange={(event) => setMessage(event.target.value)}
                placeholder={t('cron.dialog.messagePlaceholder')}
                rows={4}
                className="w-full resize-none rounded-xl border border-transparent bg-[#EDECE4] px-4 py-3 text-[14px] text-[#171717] outline-none transition-colors focus:border-[#3B6DE8] dark:bg-[#222225] dark:text-[#f3f4f6]"
              />
            </div>

            <div>
              <label className="mb-2.5 block text-[14px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.scheduleLabel')}</label>
              {!useCustom ? (
                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                  {SCHEDULE_PRESETS.map((preset) => {
                    const active = schedule === preset.value;
                    return (
                      <button
                        key={preset.key}
                        type="button"
                        className={cn(
                          'flex h-10 items-center rounded-xl px-3 text-left text-[13px] font-medium transition-colors',
                          active
                            ? 'bg-[#3B6DE8] text-white'
                            : 'bg-[#EDECE4] text-[#4B4B4B] hover:bg-[#E5E4DC] dark:bg-[#222225] dark:text-gray-300 dark:hover:bg-[#2a2a2d]',
                        )}
                        onClick={() => setSchedule(preset.value)}
                      >
                        <ClockIcon className="mr-2 h-4 w-4 opacity-80" />
                        {t(`cron.schedule.presets.${preset.key}`)}
                      </button>
                    );
                  })}
                </div>
              ) : (
                <input
                  value={customSchedule}
                  onChange={(event) => setCustomSchedule(event.target.value)}
                  placeholder={t('cron.dialog.customCronPlaceholder')}
                  className="h-11 w-full rounded-xl border border-transparent bg-[#EDECE4] px-4 text-[14px] text-[#171717] outline-none transition-colors focus:border-[#3B6DE8] dark:bg-[#222225] dark:text-[#f3f4f6]"
                />
              )}

              <div className="mt-2 flex items-center justify-between gap-4">
                <p className="text-[12px] font-medium text-[#99A0AE] dark:text-gray-500">
                  {nextRunPreview
                    ? t('cron.dialog.nextRun', { time: formatDateTime(nextRunPreview, locale) })
                    : t('cron.dialog.scheduleHint')}
                </p>
                <button
                  type="button"
                  className="text-[12px] font-medium text-[#2B7FFF]"
                  onClick={() => {
                    if (useCustom) {
                      const fallbackPreset = SCHEDULE_PRESETS.find((item) => item.value === customSchedule.trim()) ?? SCHEDULE_PRESETS[4];
                      setSchedule(fallbackPreset.value);
                    } else {
                      setCustomSchedule(schedule);
                    }
                    setUseCustom((current) => !current);
                  }}
                >
                  {useCustom ? t('cron.dialog.usePreset') : t('cron.dialog.useCustom')}
                </button>
              </div>
            </div>

            <div>
              <div className="mb-1 block text-[14px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.deliveryTitle')}</div>
              <p className="mb-3 text-[12px] text-[#99A0AE] dark:text-gray-500">{t('cron.dialog.deliverySubtitle')}</p>
              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                {[
                  { key: 'none', title: t('cron.dialog.deliveryOptions.noneTitle'), desc: t('cron.dialog.deliveryOptions.noneDesc') },
                  { key: 'announce', title: t('cron.dialog.deliveryOptions.announceTitle'), desc: t('cron.dialog.deliveryOptions.announceDesc') },
                ].map((item) => {
                  const active = deliveryMode === item.key;
                  return (
                    <button
                      key={item.key}
                      type="button"
                      className={cn(
                        'rounded-xl px-4 py-3 text-left transition-colors',
                        active
                          ? 'bg-[#3B6DE8] text-white'
                          : 'bg-[#EDECE4] text-[#4B4B4B] hover:bg-[#E5E4DC] dark:bg-[#222225] dark:text-gray-300 dark:hover:bg-[#2a2a2d]',
                      )}
                      onClick={() => setDeliveryMode(item.key as 'none' | 'announce')}
                    >
                      <div className="text-[13px] font-semibold">{item.title}</div>
                      <div className={cn('mt-1 text-[11px]', active ? 'text-white/85' : 'text-inherit opacity-80')}>{item.desc}</div>
                    </button>
                  );
                })}
              </div>

              {deliveryMode === 'announce' ? (
                <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                  <div>
                    <label className="mb-2.5 block text-[13px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.channelLabel')}</label>
                    <SelectField
                      value={deliveryChannel}
                      onChange={(event) => setDeliveryChannel(event.target.value)}
                      disabled={channelsLoading || availableChannelGroups.length === 0}
                    >
                      {availableChannelGroups.length > 0 ? (
                        availableChannelGroups.map((group) => (
                          <option key={group.channelType} value={group.channelType}>
                            {getChannelDisplayName(group.channelType, t)}
                          </option>
                        ))
                      ) : (
                        <option value="">{t('cron.dialog.channelEmpty')}</option>
                      )}
                    </SelectField>
                  </div>

                  <div>
                    <label className="mb-2.5 block text-[13px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.accountLabel')}</label>
                    <SelectField
                      value={selectedDeliveryAccountId}
                      onChange={(event) => setSelectedDeliveryAccountId(event.target.value)}
                      disabled={channelsLoading || (selectedChannelGroup?.accounts.length ?? 0) === 0}
                    >
                      {(selectedChannelGroup?.accounts.length ?? 0) > 0 ? (
                        selectedChannelGroup?.accounts.map((account) => (
                          <option key={account.accountId} value={account.accountId}>
                            {getDeliveryAccountDisplayName(account, t)}
                          </option>
                        ))
                      ) : (
                        <option value="">
                          {channelsLoading ? t('cron.dialog.accountLoading') : t('cron.dialog.accountEmpty')}
                        </option>
                      )}
                    </SelectField>
                  </div>

                  <div className="md:col-span-2">
                    <label className="mb-2.5 block text-[13px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.targetLabel')}</label>
                    <input
                      list={deliveryTargetOptions.length > 0 ? targetListId : undefined}
                      value={deliveryTarget}
                      onChange={(event) => setDeliveryTarget(event.target.value)}
                      placeholder={t('cron.dialog.targetPlaceholder')}
                      className="h-11 w-full rounded-xl border border-transparent bg-[#EDECE4] px-4 text-[14px] text-[#171717] outline-none transition-colors focus:border-[#3B6DE8] dark:bg-[#222225] dark:text-[#f3f4f6]"
                    />
                    {deliveryTargetOptions.length > 0 ? (
                      <datalist id={targetListId}>
                        {deliveryTargetOptions.map((option) => (
                          <option key={`${option.value}:${option.label}`} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </datalist>
                    ) : null}
                    <div className="mt-3 flex flex-wrap gap-2">
                      {deliveryTargetOptions.slice(0, 8).map((option) => (
                        <button
                          key={`${option.value}:${option.label}`}
                          type="button"
                          className={cn(
                            'rounded-full border px-3 py-1.5 text-[12px] transition-colors',
                            deliveryTarget === option.value
                              ? 'border-[#2B7FFF] bg-[#EFF6FF] text-[#2B7FFF] dark:border-[#3b82f6] dark:bg-[#1d2633] dark:text-[#93c5fd]'
                              : 'border-[#D9DCE3] bg-white text-[#525866] hover:border-[#2B7FFF] hover:text-[#2B7FFF] dark:border-[#343438] dark:bg-[#17171a] dark:text-gray-300 dark:hover:border-[#3b82f6] dark:hover:text-white',
                          )}
                          onClick={() => setDeliveryTarget(option.value)}
                          title={option.description || option.label}
                        >
                          {option.label}
                        </button>
                      ))}
                    </div>
                    <div className="mt-2 text-[12px] text-[#99A0AE] dark:text-gray-500">
                      {targetsLoading
                        ? t('cron.dialog.targetsLoading')
                        : deliveryTargetOptions.length > 0
                          ? t('cron.dialog.targetsReady')
                          : t('cron.dialog.targetsNone')}
                    </div>
                    <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] font-medium text-[#99A0AE] dark:text-gray-500">
                      <span>{t('cron.dialog.preview', { preview: deliveryPreview })}</span>
                      {selectedAccount ? <span>{t('cron.dialog.currentAccount', { account: getDeliveryAccountDisplayName(selectedAccount, t) })}</span> : null}
                    </div>
                  </div>

                  {channelsError ? <Notice tone="warning" message={t('cron.warnings.channelsCatalogFailed', { error: channelsError })} /> : null}
                  {targetsError ? <Notice tone="warning" message={t('cron.warnings.targetsLoadFailed', { error: targetsError })} /> : null}
                  {!channelsError && !channelsLoading && availableChannelGroups.length === 0 ? (
                    <Notice tone="warning" message={t('cron.warnings.noChannelsAvailable')} />
                  ) : null}
                </div>
              ) : null}
            </div>

            <div className="flex items-center justify-between rounded-2xl border border-black/5 bg-[#E8E6DE]/50 p-4 dark:border-[#2a2a2d] dark:bg-[#222225]">
              <div>
                <div className="text-[14px] font-bold text-[#171717]/80 dark:text-[#f3f4f6]/80">{t('cron.dialog.enableTitle')}</div>
                <div className="mt-0.5 text-[13px] text-[#99A0AE] dark:text-gray-500">{t('cron.dialog.enableDesc')}</div>
              </div>
              <button
                type="button"
                className={cn(
                  'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
                  enabled ? 'bg-[#2B7FFF]' : 'bg-[#d1d5db] dark:bg-[#3b3b40]',
                )}
                onClick={() => setEnabled((current) => !current)}
              >
                <span
                  className={cn(
                    'absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition-transform',
                    enabled && 'translate-x-5',
                  )}
                />
              </button>
            </div>

            {validationError ? (
              <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-900/20 dark:text-red-300">
                {validationError}
              </div>
            ) : null}
          </div>
        </div>

        <div className="flex justify-end gap-3 border-t border-black/5 px-8 py-5 dark:border-[#2a2a2d]">
          <button
            type="button"
            className="h-[42px] rounded-full bg-[#EDECE4] px-6 text-[13px] font-semibold text-[#4B4B4B] transition-colors hover:bg-[#E5E4DC] dark:bg-[#222225] dark:text-gray-300 dark:hover:bg-[#2a2a2d]"
            onClick={onClose}
          >
            {t('dialog.cancel')}
          </button>
          <button
            type="button"
            className="flex h-[42px] items-center rounded-full bg-[#2B7FFF] px-6 text-[13px] font-semibold text-white transition-colors hover:bg-[#2B7FFF]/90 disabled:cursor-not-allowed disabled:opacity-70"
            onClick={() => {
              void handleSubmit();
            }}
            disabled={saving}
          >
            {saving ? <SpinnerIcon className="mr-2 h-4 w-4 animate-spin" /> : <PlusIcon className="mr-2 h-4 w-4" />}
            {saving
              ? t('cron.dialog.saving')
              : job
                ? t('cron.dialog.saveEdit')
                : t('cron.dialog.create')}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function CronPage() {
  const { t } = useI18n();
  const agents = useAgentsStore((state) => state.agents);
  const agentsLoading = useAgentsStore((state) => state.loading);
  const agentsError = useAgentsStore((state) => state.error);
  const agentsWarning = useAgentsStore((state) => state.warning);
  const defaultAgentId = useAgentsStore((state) => state.defaultAgentId);

  const [jobs, setJobs] = useState<CronJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [feedback, setFeedback] = useState<FeedbackState>(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingJob, setEditingJob] = useState<CronJob | null>(null);
  const [dialogSaving, setDialogSaving] = useState(false);
  const [busyJobId, setBusyJobId] = useState<string | null>(null);
  const [busyAction, setBusyAction] = useState<string | null>(null);
  const [channelGroups, setChannelGroups] = useState<CronDeliveryChannelGroup[]>([]);
  const [channelsLoading, setChannelsLoading] = useState(false);
  const [channelsError, setChannelsError] = useState<string | null>(null);

  const activeJobs = useMemo(() => jobs.filter((job) => job.enabled), [jobs]);
  const pausedJobs = useMemo(() => jobs.filter((job) => !job.enabled), [jobs]);
  const failedJobs = useMemo(() => jobs.filter((job) => job.lastRun && !job.lastRun.success), [jobs]);
  const refreshing = loading || channelsLoading || agentsLoading;

  const agentsById = useMemo(
    () => new Map(agents.map((agent) => [normalizeAgentId(agent.id), agent])),
    [agents],
  );

  async function loadJobs(): Promise<void> {
    setLoading(true);
    setError(null);

    try {
      const response = await hostApiFetch<CronJobsResponse>('/api/cron/jobs');
      const normalizedJobs = normalizeCronJobs(response);
      setJobs(normalizedJobs);
    } catch (requestError) {
      setJobs((currentJobs) => (currentJobs.length > 0 ? currentJobs : buildFallbackCronJobs(t)));
      setError(requestError instanceof Error ? requestError.message : String(requestError));
    } finally {
      setLoading(false);
    }
  }

  async function loadDeliveryChannels(): Promise<void> {
    setChannelsLoading(true);
    setChannelsError(null);

    try {
      const response = await hostApiFetch<ChannelAccountsResponse>('/api/channels/accounts');
      setChannelGroups(normalizeDeliveryChannelGroups(response));
    } catch (requestError) {
      setChannelsError(requestError instanceof Error ? requestError.message : String(requestError));
    } finally {
      setChannelsLoading(false);
    }
  }

  useEffect(() => {
    void agentsStore.init();
    void loadJobs();
    void loadDeliveryChannels();
  }, []);

  useEffect(() => {
    return onGatewayEvent((event) => {
      if (!isRuntimeChangedGatewayEvent(event)) return;
      if (!runtimeEventHasTopic(event, 'channels', 'providers', 'agents', 'channel-targets')) return;
      void Promise.allSettled([loadDeliveryChannels(), agentsStore.load()]);
    });
  }, []);

  async function handleRefresh(): Promise<void> {
    setFeedback(null);
    await Promise.allSettled([loadJobs(), loadDeliveryChannels(), agentsStore.load()]);
  }

  async function handleSave(input: CronJobCreateInput): Promise<void> {
    setDialogSaving(true);

    try {
      if (editingJob) {
        try {
          const response = await hostApiFetch<CronJob | { job?: CronJob }>(`/api/cron/jobs/${encodeURIComponent(editingJob.id)}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(input),
          });

          const normalizedJob = normalizeCronJobResult(response);
          setJobs((currentJobs) =>
            currentJobs.map((job) => (job.id === editingJob.id ? normalizedJob ?? buildLocalCronJob(input, editingJob) : job)),
          );
        } catch {
          const fallback = buildLocalCronJob(input, editingJob);
          setJobs((currentJobs) => currentJobs.map((job) => (job.id === editingJob.id ? fallback : job)));
        }

        setFeedback({ tone: 'success', message: t('cron.feedback.updated') });
      } else {
        try {
          const response = await hostApiFetch<CronJob | { job?: CronJob }>('/api/cron/jobs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(input),
          });

          const normalizedJob = normalizeCronJobResult(response);
          setJobs((currentJobs) => [...currentJobs, normalizedJob ?? buildLocalCronJob(input)]);
        } catch {
          setJobs((currentJobs) => [...currentJobs, buildLocalCronJob(input)]);
        }

        setFeedback({ tone: 'success', message: t('cron.feedback.created') });
      }

      setDialogOpen(false);
      setEditingJob(null);
    } catch (saveError) {
      setFeedback({
        tone: 'error',
        message: saveError instanceof Error ? saveError.message : String(saveError),
      });
    } finally {
      setDialogSaving(false);
    }
  }

  async function handleToggle(job: CronJob, enabled: boolean): Promise<void> {
    setBusyJobId(job.id);
    setBusyAction('toggle');

    try {
      try {
        await hostApiFetch('/api/cron/toggle', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: job.id, enabled }),
        });
      } finally {
        setJobs((currentJobs) =>
          currentJobs.map((currentJob) =>
            currentJob.id === job.id
              ? { ...currentJob, enabled, updatedAt: new Date().toISOString() }
              : currentJob,
          ),
        );
      }

      setFeedback({ tone: 'success', message: enabled ? t('cron.feedback.enabled') : t('cron.feedback.paused') });
    } catch (toggleError) {
      setFeedback({
        tone: 'error',
        message: toggleError instanceof Error ? toggleError.message : String(toggleError),
      });
    } finally {
      setBusyJobId(null);
      setBusyAction(null);
    }
  }

  async function handleTrigger(job: CronJob): Promise<void> {
    setBusyJobId(job.id);
    setBusyAction('trigger');

    try {
      try {
        await hostApiFetch('/api/cron/trigger', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: job.id }),
        });
      } finally {
        setJobs((currentJobs) =>
          currentJobs.map((currentJob) =>
            currentJob.id === job.id
              ? {
                  ...currentJob,
                  updatedAt: new Date().toISOString(),
                  lastRun: {
                    time: new Date().toISOString(),
                    success: true,
                  },
                }
              : currentJob,
          ),
        );
      }

      setFeedback({ tone: 'success', message: t('cron.feedback.triggered') });
    } catch (triggerError) {
      setFeedback({
        tone: 'error',
        message: triggerError instanceof Error ? triggerError.message : String(triggerError),
      });
    } finally {
      setBusyJobId(null);
      setBusyAction(null);
    }
  }

  async function handleDelete(job: CronJob): Promise<void> {
    const jobName = job.name.trim() ? job.name : t('cron.common.unnamedJob');
    const confirmed = window.confirm(t('cron.confirmDelete', { name: jobName }));
    if (!confirmed) return;

    setBusyJobId(job.id);
    setBusyAction('delete');

    try {
      try {
        await hostApiFetch(`/api/cron/jobs/${encodeURIComponent(job.id)}`, {
          method: 'DELETE',
        });
      } finally {
        setJobs((currentJobs) => currentJobs.filter((currentJob) => currentJob.id !== job.id));
      }

      setFeedback({ tone: 'success', message: t('cron.feedback.deleted') });
    } catch (deleteError) {
      setFeedback({
        tone: 'error',
        message: deleteError instanceof Error ? deleteError.message : String(deleteError),
      });
    } finally {
      setBusyJobId(null);
      setBusyAction(null);
    }
  }

  return (
    <section className="h-full w-full min-h-0">
      <div className="flex h-full w-full overflow-hidden rounded-[16px] bg-white dark:bg-[#1b1b1d]">
        <div className="flex h-full w-full flex-col p-10 pt-12">
          <div className="mb-6 flex shrink-0 flex-col justify-between gap-4 md:flex-row md:items-start">
            <div>
              <h1
                className="mb-3 text-5xl font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6] md:text-6xl"
                style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
              >
                {t('cron.title')}
              </h1>
              <p className="text-[17px] font-medium text-[#171717]/70 dark:text-[#9ca3af]">
                {t('cron.subtitle')}
              </p>
            </div>

            <div className="flex items-center gap-3 md:mt-2">
              <button
                type="button"
                className="flex h-9 shrink-0 items-center justify-center rounded-full border border-black/10 px-4 text-[13px] font-medium text-[#171717]/80 transition-colors hover:bg-black/5 hover:text-[#171717] dark:border-gray-700 dark:text-[#f3f4f6]/80 dark:hover:bg-white/5 dark:hover:text-[#f3f4f6]"
                onClick={() => {
                  void handleRefresh();
                }}
              >
                <RefreshIcon className={cn('mr-2 h-4 w-4', refreshing && 'animate-spin')} />
                {t('cron.actions.refresh')}
              </button>
              <button
                type="button"
                className="flex h-9 shrink-0 items-center justify-center rounded-full bg-[#2B7FFF] px-4 text-[13px] font-medium text-white transition-colors hover:bg-[#2B7FFF]/90"
                onClick={() => {
                  setEditingJob(null);
                  setDialogOpen(true);
                }}
              >
                <PlusIcon className="mr-2 h-4 w-4" />
                {t('cron.actions.newTask')}
              </button>
            </div>
          </div>

          <div className="-mr-2 min-h-0 flex-1 overflow-y-auto pb-10 pr-2">
            {feedback ? <Notice tone={feedback.tone} message={feedback.message} /> : null}
            {error ? <Notice tone="error" message={error} /> : null}
            {agentsError ? <Notice tone="warning" message={t('cron.warnings.agentsLoadFailed', { error: agentsError })} /> : null}
            {channelsError ? <Notice tone="warning" message={t('cron.warnings.channelsLoadFailed', { error: channelsError })} /> : null}
            {agentsWarning ? <Notice tone="warning" message={agentsWarning} /> : null}

            {loading && jobs.length === 0 ? (
              <div className="flex h-full flex-col items-center justify-center text-[#525866] dark:text-gray-400">
                <SpinnerIcon className="mb-4 h-10 w-10 animate-spin" />
                <p>{t('cron.loading')}</p>
              </div>
            ) : (
              <>
                <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
                  <StatCard label={t('cron.stats.total')} value={jobs.length} tone="neutral" icon={ClockIcon} />
                  <StatCard label={t('cron.stats.active')} value={activeJobs.length} tone="green" icon={PlayIcon} />
                  <StatCard label={t('cron.stats.paused')} value={pausedJobs.length} tone="amber" icon={PauseIcon} />
                  <StatCard label={t('cron.stats.failed')} value={failedJobs.length} tone="red" icon={AlertIcon} />
                </div>

                {jobs.length === 0 ? (
                  <div className="flex flex-col items-center justify-center rounded-2xl border border-transparent bg-white /40 py-20 text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
                    <ClockIcon className="mb-4 h-10 w-10 opacity-50" />
                    <h3 className="mb-2 text-lg font-medium text-[#171717] dark:text-[#f3f4f6]">{t('cron.empty.title')}</h3>
                    <p className="mb-6 max-w-md text-center text-[14px]">
                      {t('cron.empty.description')}
                    </p>
                    <button
                      type="button"
                      className="flex h-10 items-center justify-center rounded-full bg-[#2B7FFF] px-6 text-[13px] font-medium text-white transition-colors hover:bg-[#2B7FFF]/90"
                      onClick={() => {
                        setEditingJob(null);
                        setDialogOpen(true);
                      }}
                    >
                      <PlusIcon className="mr-2 h-4 w-4" />
                      {t('cron.actions.createTask')}
                    </button>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 gap-x-6 gap-y-4 xl:grid-cols-2">
                    {jobs.map((job) => (
                      <CronJobCard
                        key={job.id}
                        job={job}
                        agentLabel={getAgentLabel(job.agentId, agentsById, defaultAgentId, t)}
                        agentDetail={getAgentDetail(job.agentId, agentsById, defaultAgentId, t)}
                        deliverySummary={describeDelivery(job.delivery, channelGroups, t)}
                        busyAction={busyJobId === job.id ? busyAction : null}
                        onToggle={(enabled) => {
                          void handleToggle(job, enabled);
                        }}
                        onEdit={() => {
                          setEditingJob(job);
                          setDialogOpen(true);
                        }}
                        onDelete={() => {
                          void handleDelete(job);
                        }}
                        onTrigger={() => {
                          void handleTrigger(job);
                        }}
                      />
                    ))}
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </div>

      <CronTaskDialog
        open={dialogOpen}
        job={editingJob}
        saving={dialogSaving}
        defaultAgentId={defaultAgentId}
        channelGroups={channelGroups}
        channelsLoading={channelsLoading}
        channelsError={channelsError}
        onClose={() => {
          if (dialogSaving) return;
          setDialogOpen(false);
          setEditingJob(null);
        }}
        onSave={handleSave}
      />
    </section>
  );
}