import {
  ContainerOutlined,
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  FileTextOutlined,
  FolderOutlined,
  InboxOutlined,
  MailOutlined,
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
  SendOutlined,
  SettingOutlined,
  WarningOutlined
} from '@ant-design/icons';
import {
  Alert,
  App as AntApp,
  Badge,
  Button,
  Card,
  Checkbox,
  Descriptions,
  Drawer,
  Form,
  Grid,
  Input,
  InputNumber,
  List,
  Modal,
  Pagination,
  Select,
  Skeleton,
  Space,
  Table,
  Tabs,
  Tag,
  Typography
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';

import { CodeBlock } from '../components/common/CodeBlock';
import { EmptyState } from '../components/common/EmptyState';
import { PageHeader } from '../components/common/PageHeader';
import { SectionCard } from '../components/common/SectionCard';
import { StatusPill } from '../components/common/StatusPill';
import { useAppContext } from '../frontend/app-context';
import { useI18n } from '../frontend/i18n/react';
import { detailHistoryLocation, detailHistoryState } from '../frontend/navigation-state';
import { api } from '../frontend/services/api';
import type { Domain, InboundFolder, InboundMailbox, InboundMessage, MailboxClientConfig, RuntimeConfig } from '../frontend/types';
import { useMediaQuery } from '../frontend/use-media-query';

type MailMessage = InboundMessage & { folder?: string };

interface MailboxFormValues {
  localPart: string;
  domain: string;
  password: string;
  displayName?: string;
  quotaMb?: number | null;
  aliases?: string;
  forwardTo?: string;
  keepForwarded?: boolean;
  status?: string;
}

const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk', 'Archive'];
type MessageTab = 'text' | 'html' | 'source' | 'raw';
type MailFolder = InboundFolder & { countsAvailable: boolean };
type MailboxSort = 'activity' | 'address' | 'unread' | 'messages';
type RouteSort = 'domain' | 'configured';

export default function Inbox() {
  const { message } = AntApp.useApp();
  const screens = Grid.useBreakpoint();
  const isDesktop = useMediaQuery('(min-width: 1280px)');
  const { locale, t } = useI18n();
  const { config } = useAppContext();
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams<{ messageId?: string }>();
  const [searchParams, setSearchParams] = useSearchParams();
  const [mailboxForm] = Form.useForm<MailboxFormValues>();
  const [catchAllForm] = Form.useForm<{ catchAllAddress?: string }>();
  const [domains, setDomains] = useState<Domain[]>([]);
  const [mailboxes, setMailboxes] = useState<InboundMailbox[]>([]);
  const [folders, setFolders] = useState<MailFolder[]>(fallbackFolders());
  const [messages, setMessages] = useState<MailMessage[]>([]);
  const [total, setTotal] = useState(0);
  const [selectedMessage, setSelectedMessage] = useState<MailMessage | null>(null);
  const [loading, setLoading] = useState(true);
  const [messagesLoading, setMessagesLoading] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [foldersLoading, setFoldersLoading] = useState(false);
  const [loadError, setLoadError] = useState('');
  const [domainsError, setDomainsError] = useState('');
  const [messagesError, setMessagesError] = useState('');
  const [detailError, setDetailError] = useState('');
  const [foldersError, setFoldersError] = useState('');
  const [readMutationError, setReadMutationError] = useState('');
  const [actionKey, setActionKey] = useState('');
  const [searchDraft, setSearchDraft] = useState(searchParams.get('q') || '');
  const [mailboxOpen, setMailboxOpen] = useState(false);
  const [editingMailbox, setEditingMailbox] = useState<InboundMailbox | null>(null);
  const [mailboxListQuery, setMailboxListQuery] = useState('');
  const [mailboxSort, setMailboxSort] = useState<MailboxSort>('activity');
  const [routeListQuery, setRouteListQuery] = useState('');
  const [routeSort, setRouteSort] = useState<RouteSort>('domain');
  const [clientConfig, setClientConfig] = useState<MailboxClientConfig | null>(null);
  const [catchAllDomain, setCatchAllDomain] = useState<Domain | null>(null);
  const pendingDirectClose = useRef<string | null>(null);
  const baseRequestId = useRef(0);
  const foldersRequestId = useRef(0);
  const messagesRequestId = useRef(0);
  const detailRequestId = useRef(0);
  const readMutationRequestId = useRef(0);

  const workspace = searchParams.get('workspace') === 'routing' ? 'routing' : 'messages';
  const selectedMailboxId = Number(searchParams.get('mailboxId') || 0) || null;
  const folder = searchParams.get('folder') || 'INBOX';
  const readFilter = searchParams.get('read') || 'all';
  const query = searchParams.get('q') || '';
  const page = Math.max(1, Number(searchParams.get('page') || 1) || 1);
  const pageSize = 25;
  const routeMessageId = Number(params.messageId || 0) || null;
  const messageTab = normalizeMessageTab(searchParams.get('tab'));

  useEffect(() => {
    setSearchDraft(query);
  }, [query]);

  const mailboxOptions = useMemo(() => mailboxes.map((item) => ({
    value: item.id,
    label: locale.startsWith('en')
      ? `${item.address} · ${item.unreadCount} unread / ${item.messageCount} total`
      : `${item.address} · ${item.unreadCount} 未读 / ${item.messageCount} 封`
  })), [locale, mailboxes]);
  const visibleMailboxes = useMemo(
    () => sortMailboxes(filterMailboxes(mailboxes, mailboxListQuery), mailboxSort),
    [mailboxListQuery, mailboxSort, mailboxes]
  );
  const visibleRoutes = useMemo(
    () => sortRoutes(filterRoutes(domains, routeListQuery), routeSort),
    [domains, routeListQuery, routeSort]
  );

  const loadBase = useCallback(async () => {
    const requestId = ++baseRequestId.current;
    setLoading(true);
    setLoadError('');
    setDomainsError('');
    const [domainResult, mailboxResult] = await Promise.allSettled([
      api.domains(), api.inboundMailboxes()
    ]);
    if (requestId !== baseRequestId.current) return;
    if (domainResult.status === 'fulfilled') setDomains(domainResult.value.domains || []);
    else setDomainsError(domainResult.reason instanceof Error ? domainResult.reason.message : t('common.error'));
    if (mailboxResult.status === 'fulfilled') setMailboxes(mailboxResult.value.mailboxes || []);
    else setLoadError(mailboxResult.reason instanceof Error ? mailboxResult.reason.message : t('common.error'));
    setLoading(false);
  }, [t]);

  useEffect(() => {
    void loadBase();
    return () => { baseRequestId.current += 1; };
  }, [loadBase]);

  useEffect(() => {
    if (!mailboxes.length) return;
    if (routeMessageId && (!searchParams.has('mailboxId') || !searchParams.has('folder'))) return;
    if (selectedMailboxId && mailboxes.some((item) => item.id === selectedMailboxId)) return;
    const preferredId = preferredMailboxId(mailboxes, selectedMailboxId);
    if (!preferredId) return;
    const next = new URLSearchParams(searchParams);
    next.set('mailboxId', String(preferredId));
    next.set('folder', 'INBOX');
    next.set('page', '1');
    setSearchParams(next, { replace: true });
  }, [mailboxes, routeMessageId, searchParams, selectedMailboxId, setSearchParams]);

  const loadFolders = useCallback(async () => {
    const requestId = ++foldersRequestId.current;
    if (!selectedMailboxId) {
      setFolders(fallbackFolders());
      setFoldersError('');
      setFoldersLoading(false);
      return;
    }
    setFoldersLoading(true);
    setFoldersError('');
    setFolders(fallbackFolders());
    try {
      const result = await api.inboundFolders(selectedMailboxId);
      if (requestId !== foldersRequestId.current) return;
      if (!result.folders?.length) throw new Error(locale.startsWith('en') ? 'Folder counts are unavailable.' : '文件夹计数暂不可用。');
      setFolders(result.folders.map((item) => ({ ...item, countsAvailable: true })));
    } catch (error) {
      if (requestId !== foldersRequestId.current) return;
      setFolders(fallbackFolders());
      setFoldersError(error instanceof Error ? error.message : (locale.startsWith('en') ? 'Unable to load folder counts.' : '文件夹计数加载失败。'));
    } finally {
      if (requestId === foldersRequestId.current) setFoldersLoading(false);
    }
  }, [locale, selectedMailboxId]);

  useEffect(() => {
    void loadFolders();
    return () => { foldersRequestId.current += 1; };
  }, [loadFolders]);

  const loadMessages = useCallback(async () => {
    const requestId = ++messagesRequestId.current;
    if (!selectedMailboxId || workspace !== 'messages') {
      setMessages([]);
      setTotal(0);
      setMessagesError('');
      setMessagesLoading(false);
      return;
    }
    setMessagesLoading(true);
    setMessagesError('');
    try {
      const result = await api.inboundMessages({
        mailboxId: selectedMailboxId,
        folder,
        page,
        pageSize,
        q: query || undefined,
        read: readFilter === 'read' ? true : readFilter === 'unread' ? false : undefined
      });
      if (requestId !== messagesRequestId.current) return;
      setMessages(result.messages || []);
      setTotal(result.total ?? result.messages?.length ?? 0);
    } catch (error) {
      if (requestId === messagesRequestId.current) {
        setMessagesError(error instanceof Error ? error.message : t('common.error'));
      }
    } finally {
      if (requestId === messagesRequestId.current) setMessagesLoading(false);
    }
  }, [folder, page, query, readFilter, selectedMailboxId, t, workspace]);

  useEffect(() => {
    void loadMessages();
    return () => { messagesRequestId.current += 1; };
  }, [loadMessages]);

  useEffect(() => {
    const requestId = ++detailRequestId.current;
    readMutationRequestId.current += 1;
    setReadMutationError('');
    if (!routeMessageId) {
      setSelectedMessage(null);
      setDetailError('');
      setDetailLoading(false);
      return;
    }
    setDetailLoading(true);
    setDetailError('');
    void api.inboundMessage(routeMessageId)
      .then((result) => {
        if (requestId !== detailRequestId.current) return;
        const detail = result.message as MailMessage | null;
        if (!detail) {
          setDetailError(t('inbox.messageNotFound'));
          return;
        }
        setSelectedMessage(detail);
        if (!detail.read) {
          const mutationId = ++readMutationRequestId.current;
          void api.markInboundMessageRead(detail.id, true)
            .then(() => {
              if (requestId !== detailRequestId.current || mutationId !== readMutationRequestId.current) return;
              setSelectedMessage((current) => current?.id === detail.id ? { ...current, read: true } : current);
              setMessages((items) => items.map((item) => item.id === detail.id ? { ...item, read: true } : item));
              setMailboxes((items) => items.map((item) => item.id === detail.mailboxId
                ? { ...item, unreadCount: Math.max(0, item.unreadCount - 1) }
                : item));
              void loadFolders();
            })
            .catch((error) => {
              if (requestId !== detailRequestId.current || mutationId !== readMutationRequestId.current) return;
              setReadMutationError(error instanceof Error ? error.message : (locale.startsWith('en') ? 'Unable to mark this message as read.' : '邮件标记已读失败。'));
            });
        }
      })
      .catch((error) => {
        if (requestId === detailRequestId.current) setDetailError(error instanceof Error ? error.message : t('inbox.detailLoadFailed'));
      })
      .finally(() => {
        if (requestId === detailRequestId.current) setDetailLoading(false);
      });
    return () => {
      if (detailRequestId.current === requestId) detailRequestId.current += 1;
      readMutationRequestId.current += 1;
    };
  }, [loadFolders, locale, routeMessageId, t]);

  useEffect(() => {
    if (!routeMessageId || selectedMessage?.id !== routeMessageId) return;
    if (searchParams.has('mailboxId') && searchParams.has('folder')) return;
    const next = new URLSearchParams(searchParams);
    next.set('mailboxId', String(selectedMessage.mailboxId));
    next.set('folder', selectedMessage.folder || 'INBOX');
    setSearchParams(next, { replace: true });
  }, [routeMessageId, searchParams, selectedMessage, setSearchParams]);

  useEffect(() => {
    const target = pendingDirectClose.current;
    if (!target || detailHistoryState(location.state)?.origin === 'direct') return;
    pendingDirectClose.current = null;
    navigate(target, { replace: true });
  }, [location.key, location.state, navigate]);

  function updateSearch(patch: Record<string, string | number | null>) {
    const next = new URLSearchParams(searchParams);
    Object.entries(patch).forEach(([key, value]) => {
      if (value === null || value === '') next.delete(key);
      else next.set(key, String(value));
    });
    setSearchParams(next);
  }

  function switchWorkspace(key: string) {
    const next = new URLSearchParams(searchParams);
    if (key === 'routing') next.set('workspace', 'routing');
    else next.delete('workspace');
    const suffix = next.toString();
    navigate(`/inbox${suffix ? `?${suffix}` : ''}`);
  }

  function selectMailbox(id: number) {
    const next = new URLSearchParams(searchParams);
    next.set('mailboxId', String(id));
    next.set('folder', 'INBOX');
    next.set('page', '1');
    const suffix = next.toString();
    navigate(`/inbox${suffix ? `?${suffix}` : ''}`);
  }

  function selectFolder(name: string) {
    const next = new URLSearchParams(searchParams);
    next.set('folder', name);
    next.set('page', '1');
    const suffix = next.toString();
    navigate(`/inbox${suffix ? `?${suffix}` : ''}`);
  }

  function openMessage(item: MailMessage) {
    setSelectedMessage(item);
    const suffix = searchParams.toString();
    const target = `/inbox/messages/${item.id}${suffix ? `?${suffix}` : ''}`;
    const historyState = detailHistoryState(location.state);
    if (historyState) {
      navigate(target, {
        state: detailHistoryLocation(historyState.listPath, historyState.depth + 1, historyState.origin)
      });
      return;
    }
    if (routeMessageId) {
      navigate(target, { replace: true });
      return;
    }
    navigate(target, {
      state: detailHistoryLocation(`${location.pathname}${location.search}`, 1)
    });
  }

  function closeMessage() {
    const historyState = detailHistoryState(location.state);
    if (historyState?.origin === 'list') {
      navigate(-historyState.depth);
      return;
    }
    const detail = selectedMessage?.id === routeMessageId ? selectedMessage : null;
    const listPath = inboxListPath(searchParams, detail);
    if (historyState?.origin === 'direct') {
      pendingDirectClose.current = listPath;
      navigate(-historyState.depth);
      return;
    }
    navigate(listPath, { replace: true });
  }

  function changeMessageTab(tab: MessageTab) {
    const next = new URLSearchParams(searchParams);
    if (tab === 'text') next.delete('tab');
    else next.set('tab', tab);
    const historyState = detailHistoryState(location.state);
    const detail = selectedMessage?.id === routeMessageId ? selectedMessage : null;
    const search = next.toString();
    navigate(
      { pathname: location.pathname, search: search ? `?${search}` : '' },
      {
        state: detailHistoryLocation(
          historyState?.listPath || inboxListPath(searchParams, detail),
          (historyState?.depth || 0) + 1,
          historyState?.origin || 'direct'
        )
      }
    );
  }

  async function copyValue(value: string) {
    if (!value) return;
    await navigator.clipboard.writeText(value);
    message.success(t('common.copied'));
  }

  function openCreateMailbox() {
    setEditingMailbox(null);
    mailboxForm.resetFields();
    mailboxForm.setFieldsValue({ domain: domains[0]?.domain, password: generateMailboxPassword(), quotaMb: 1024, keepForwarded: true, status: 'active' });
    setMailboxOpen(true);
  }

  function openEditMailbox(mailbox: InboundMailbox) {
    setEditingMailbox(mailbox);
    mailboxForm.resetFields();
    mailboxForm.setFieldsValue({
      localPart: mailbox.localPart,
      domain: mailbox.domain,
      password: '',
      displayName: mailbox.displayName,
      quotaMb: mailbox.quotaMb,
      aliases: mailbox.aliases.join('\n'),
      forwardTo: mailbox.forwardTo.join('\n'),
      keepForwarded: mailbox.keepForwarded,
      status: mailbox.status
    });
    setMailboxOpen(true);
  }

  function closeMailboxDrawer() {
    setMailboxOpen(false);
    setEditingMailbox(null);
    mailboxForm.resetFields();
  }

  async function saveMailbox() {
    const values = await mailboxForm.validateFields();
    const key = editingMailbox ? `mailbox:update:${editingMailbox.id}` : 'mailbox:create';
    setActionKey(key);
    try {
      if (editingMailbox) {
        const password = String(values.password || '').trim();
        const result = await api.updateInboundMailbox(editingMailbox.id, {
          displayName: values.displayName || '',
          aliases: values.aliases || '',
          forwardTo: values.forwardTo || '',
          keepForwarded: Boolean(values.keepForwarded),
          quotaMb: values.quotaMb ?? null,
          status: values.status || editingMailbox.status,
          ...(password ? { password } : {})
        });
        message.success(locale.startsWith('en') ? 'Mailbox updated' : '收信邮箱已更新');
        if (password) {
          setClientConfig(result.clientConfig || buildMailboxClientConfig(result.mailbox, config, password));
        }
      } else {
        const result = await api.createInboundMailbox({
          address: `${values.localPart}@${values.domain}`,
          displayName: values.displayName,
          password: values.password,
          aliases: values.aliases,
          forwardTo: values.forwardTo,
          keepForwarded: values.keepForwarded,
          quotaMb: values.quotaMb
        });
        message.success(t('actions.inboundMailboxCreated'));
        setClientConfig(result.clientConfig || buildMailboxClientConfig(result.mailbox, config, values.password));
      }
      closeMailboxDrawer();
      await loadBase();
    } catch (error) {
      message.error(error instanceof Error ? error.message : t('common.error'));
    } finally {
      setActionKey('');
    }
  }

  function openCatchAll(domain: Domain) {
    setCatchAllDomain(domain);
    catchAllForm.setFieldsValue({ catchAllAddress: domain.catchAllAddress || '' });
  }

  async function saveCatchAll() {
    if (!catchAllDomain) return;
    const values = await catchAllForm.validateFields();
    setActionKey(`catch-all:${catchAllDomain.id}`);
    try {
      const result = await api.patchDomain(catchAllDomain.id, { catchAllAddress: String(values.catchAllAddress || '').trim() });
      setDomains((items) => items.map((item) => item.id === result.domain.id ? result.domain : item));
      setCatchAllDomain(null);
      message.success(t('actions.domainSaved'));
    } catch (error) {
      message.error(error instanceof Error ? error.message : t('common.error'));
    } finally {
      setActionKey('');
    }
  }

  const mailboxColumns: ColumnsType<InboundMailbox> = [
    {
      title: t('inbox.mailboxAddress'), dataIndex: 'address', render: (value: string, item) => <Space direction="vertical" size={0}><Typography.Text strong>{value}</Typography.Text>{item.displayName ? <Typography.Text type="secondary">{item.displayName}</Typography.Text> : null}</Space>
    },
    { title: t('common.status'), dataIndex: 'status', width: 120, render: (value: string) => <StatusPill tone={value === 'active' ? 'success' : 'warning'}>{value}</StatusPill> },
    { title: t('inbox.forwardTo'), dataIndex: 'forwardTo', render: (value: string[], item) => value?.length ? <Space direction="vertical" size={2}><Typography.Text>{value.join(', ')}</Typography.Text><Tag>{item.keepForwarded ? t('inbox.keepForwarded') : t('inbox.forwardOnly')}</Tag></Space> : '—' },
    { title: t('inbox.unread'), dataIndex: 'unreadCount', width: 90 },
    { title: t('inbox.messageCount'), dataIndex: 'messageCount', width: 100 },
    {
      title: t('common.actions'), width: 330, render: (_, item) => <Space wrap><Button icon={<EditOutlined />} onClick={() => openEditMailbox(item)}>{t('common.edit')}</Button><Button icon={<SettingOutlined />} onClick={() => setClientConfig(buildMailboxClientConfig(item, config))}>{t('inbox.clientConfig')}</Button><Button icon={<MailOutlined />} onClick={() => navigate(`/integrations/webhooks?mailboxId=${item.id}`)}>{t('inbox.mailboxWebhooks')}</Button></Space>
    }
  ];

  const routeColumns: ColumnsType<Domain> = [
    { title: t('domains.domain'), dataIndex: 'domain', render: (value: string) => <Typography.Text strong>{value}</Typography.Text> },
    { title: t('inbox.catchAllAddress'), dataIndex: 'catchAllAddress', render: (value?: string) => value ? <Tag color={value === '/dev/null' ? 'default' : 'blue'}>{value}</Tag> : <Tag>{t('inbox.catchAllDisabled')}</Tag> },
    { title: t('common.actions'), width: 130, render: (_, domain) => <Button icon={<SettingOutlined />} onClick={() => openCatchAll(domain)}>{t('common.edit')}</Button> }
  ];

  if (loading) return <SectionCard><Skeleton active paragraph={{ rows: 12 }} /></SectionCard>;

  return (
    <Space direction="vertical" size={20} className="full-width">
      <PageHeader
        title={t('inbox.title')}
        subtitle={t('inbox.subtitle')}
        extra={workspace === 'routing' ? <Button type="primary" icon={<PlusOutlined />} disabled={!domains.length} onClick={openCreateMailbox} style={{ minHeight: 44 }}>{t('inbox.createMailbox')}</Button> : null}
      />
      {loadError ? <Alert type="error" showIcon message={loadError} action={<Button icon={<ReloadOutlined />} onClick={() => void loadBase()}>{t('common.refresh')}</Button>} /> : null}
      {domainsError ? <Alert type="warning" showIcon message={locale.startsWith('en') ? 'Domain and routing options are temporarily unavailable.' : '域名与路由选项暂不可用。'} description={domainsError} action={<Button icon={<ReloadOutlined />} onClick={() => void loadBase()}>{t('common.refresh')}</Button>} /> : null}
      {config?.submission?.inboundEnabled === false ? <Alert type="warning" showIcon message={t('inbox.inboundDisabled')} /> : null}
      <Tabs
        activeKey={workspace}
        onChange={switchWorkspace}
        items={[
          { key: 'messages', label: <Space><MailOutlined />{locale.startsWith('en') ? 'Mail' : '邮件'}</Space> },
          { key: 'routing', label: <Space><SettingOutlined />{locale.startsWith('en') ? 'Mailboxes & routing' : '邮箱与路由'}</Space> }
        ]}
      />
      {workspace === 'messages' ? (
        loadError && !mailboxes.length ? null : mailboxes.length ? (
          <div style={{ display: 'grid', gridTemplateColumns: isDesktop ? '220px minmax(320px, 380px) minmax(0, 1fr)' : screens.md ? '220px minmax(0, 1fr)' : 'minmax(0, 1fr)', gap: 16, minWidth: 0 }}>
            {screens.md ? (
              <FolderPane
                mailboxOptions={mailboxOptions}
                selectedMailboxId={selectedMailboxId}
                folders={folders}
                foldersLoading={foldersLoading}
                foldersError={foldersError}
                activeFolder={folder}
                onMailbox={selectMailbox}
                onFolder={selectFolder}
                onRetryFolders={loadFolders}
                locale={locale}
                mailboxLabel={t('inbox.mailboxFilter')}
                refreshLabel={t('common.refresh')}
              />
            ) : null}
            <Card styles={{ body: { padding: 0, minWidth: 0 } }}>
              <div style={{ padding: 12, borderBottom: '1px solid #EAECF0' }}>
                {!screens.md ? (
                  <Space direction="vertical" size={8} className="full-width" style={{ marginBottom: 8 }}>
                    <Select value={selectedMailboxId || undefined} onChange={selectMailbox} options={mailboxOptions} showSearch optionFilterProp="label" className="full-width" aria-label={t('inbox.mailboxFilter')} />
                    {foldersError ? <Alert type="warning" showIcon message={locale.startsWith('en') ? 'Folder counts are unavailable.' : '文件夹计数暂不可用。'} action={<Button size="small" loading={foldersLoading} onClick={() => void loadFolders()}>{t('common.refresh')}</Button>} /> : null}
                    <Select value={folder} onChange={selectFolder} loading={foldersLoading} options={folders.map((item) => ({ value: item.name, label: folderOptionLabel(item, locale) }))} className="full-width" aria-label={locale.startsWith('en') ? 'Folder' : '文件夹'} />
                  </Space>
                ) : null}
                <Space.Compact block>
                  <Input value={searchDraft} allowClear prefix={<SearchOutlined />} placeholder={t('inbox.searchPlaceholder')} onChange={(event) => setSearchDraft(event.target.value)} onPressEnter={() => updateSearch({ q: searchDraft.trim(), page: 1 })} />
                  <Button aria-label={t('common.refresh')} icon={<ReloadOutlined />} loading={messagesLoading} onClick={() => void loadMessages()} />
                </Space.Compact>
                <Select
                  value={readFilter}
                  onChange={(value) => updateSearch({ read: value === 'all' ? null : value, page: 1 })}
                  style={{ width: '100%', marginTop: 8 }}
                  aria-label={locale.startsWith('en') ? 'Read state' : '阅读状态'}
                  options={[{ value: 'all', label: locale.startsWith('en') ? 'All mail' : '全部邮件' }, { value: 'unread', label: t('inbox.unread') }, { value: 'read', label: t('inbox.read') }]}
                />
              </div>
              {messagesError ? <Alert type="error" showIcon message={messagesError} action={<Button onClick={() => void loadMessages()}>{t('common.refresh')}</Button>} /> : null}
              <MessageList items={messages} loading={messagesLoading} activeId={routeMessageId} onOpen={openMessage} locale={locale} t={t} />
              {total > pageSize ? <div style={{ padding: 12, display: 'flex', justifyContent: 'center' }}><Pagination size="small" current={page} pageSize={pageSize} total={total} showSizeChanger={false} onChange={(value) => updateSearch({ page: value })} /></div> : null}
            </Card>
            {isDesktop ? <Card styles={{ body: { padding: 20, minWidth: 0 } }}><MessageDetail message={selectedMessage} loading={detailLoading} error={detailError} mutationError={readMutationError} activeTab={messageTab} onTabChange={changeMessageTab} onCopy={copyValue} t={t} /></Card> : null}
          </div>
        ) : <EmptyState description={locale.startsWith('en') ? 'No receiving mailbox has been created yet.' : '尚未创建收信邮箱。'} action={<Button icon={<PlusOutlined />} disabled={!domains.length} onClick={() => { switchWorkspace('routing'); openCreateMailbox(); }}>{t('inbox.createMailbox')}</Button>} />
      ) : (
        <Space direction="vertical" size={20} className="full-width">
          <SectionCard title={t('inbox.mailboxes')} extra={<StatusPill tone="neutral">{mailboxes.length}</StatusPill>}>
            {mailboxes.length ? (
              <Space direction="vertical" size={12} className="full-width">
                <Space wrap className="full-width">
                  <Input
                    allowClear
                    aria-label={locale.startsWith('en') ? 'Search mailboxes' : '搜索收信邮箱'}
                    prefix={<SearchOutlined />}
                    placeholder={locale.startsWith('en') ? 'Search address, alias, or forwarding target' : '搜索邮箱、别名或转发地址'}
                    value={mailboxListQuery}
                    onChange={(event) => setMailboxListQuery(event.target.value)}
                    style={{ flex: '1 1 280px' }}
                  />
                  <Select
                    aria-label={locale.startsWith('en') ? 'Sort mailboxes' : '收信邮箱排序'}
                    value={mailboxSort}
                    onChange={setMailboxSort}
                    style={{ minWidth: 180 }}
                    options={mailboxSortOptions(locale)}
                  />
                </Space>
                {screens.md ? (
                  <Table rowKey="id" columns={mailboxColumns} dataSource={visibleMailboxes} scroll={{ x: 1040 }} />
                ) : (
                  <List dataSource={visibleMailboxes} renderItem={(item) => <List.Item><Card size="small" className="full-width" title={item.address}><Space direction="vertical" className="full-width"><Typography.Text type="secondary">{item.messageCount} {t('inbox.messageCount')} · {item.unreadCount} {t('inbox.unread')}</Typography.Text><Space wrap><Button icon={<EditOutlined />} onClick={() => openEditMailbox(item)}>{t('common.edit')}</Button><Button onClick={() => setClientConfig(buildMailboxClientConfig(item, config))}>{t('inbox.clientConfig')}</Button><Button onClick={() => navigate(`/integrations/webhooks?mailboxId=${item.id}`)}>{t('inbox.mailboxWebhooks')}</Button></Space></Space></Card></List.Item>} />
                )}
              </Space>
            ) : loadError ? null : <EmptyState description={t('inbox.noDomain')} action={<Button icon={<PlusOutlined />} disabled={!domains.length} onClick={openCreateMailbox}>{t('inbox.createMailbox')}</Button>} />}
          </SectionCard>
          <SectionCard title={t('inbox.domainRoutes')} extra={<StatusPill tone="neutral">{domains.length}</StatusPill>}>
            {domains.length ? (
              <Space direction="vertical" size={12} className="full-width">
                <Space wrap className="full-width">
                  <Input
                    allowClear
                    aria-label={locale.startsWith('en') ? 'Search receiving routes' : '搜索域名收信路由'}
                    prefix={<SearchOutlined />}
                    placeholder={locale.startsWith('en') ? 'Search domain or catch-all address' : '搜索域名或未知地址收件邮箱'}
                    value={routeListQuery}
                    onChange={(event) => setRouteListQuery(event.target.value)}
                    style={{ flex: '1 1 280px' }}
                  />
                  <Select
                    aria-label={locale.startsWith('en') ? 'Sort receiving routes' : '域名收信路由排序'}
                    value={routeSort}
                    onChange={setRouteSort}
                    style={{ minWidth: 180 }}
                    options={routeSortOptions(locale)}
                  />
                </Space>
                {screens.md ? <Table rowKey="id" columns={routeColumns} dataSource={visibleRoutes} /> : <List dataSource={visibleRoutes} renderItem={(domain) => <List.Item actions={[<Button key="edit" onClick={() => openCatchAll(domain)}>{t('common.edit')}</Button>]}><List.Item.Meta title={domain.domain} description={domain.catchAllAddress || t('inbox.catchAllDisabled')} /></List.Item>} />}
              </Space>
            ) : domainsError ? null : <EmptyState description={t('inbox.noDomain')} action={<Button onClick={() => navigate('/domains?create=1')}>{t('common.addDomain')}</Button>} />}
          </SectionCard>
        </Space>
      )}

      {!isDesktop ? <Drawer title={t('inbox.messageDetail')} width={screens.md ? 680 : '100%'} open={Boolean(routeMessageId)} onClose={closeMessage}><MessageDetail message={selectedMessage} loading={detailLoading} error={detailError} mutationError={readMutationError} activeTab={messageTab} onTabChange={changeMessageTab} onCopy={copyValue} t={t} /></Drawer> : null}

      <Drawer
        title={editingMailbox ? (locale.startsWith('en') ? 'Edit mailbox' : '编辑收信邮箱') : t('inbox.createMailbox')}
        width={560}
        open={mailboxOpen}
        onClose={closeMailboxDrawer}
        destroyOnHidden
        footer={<Space style={{ display: 'flex', justifyContent: 'flex-end' }}><Button onClick={closeMailboxDrawer}>{t('common.cancel')}</Button><Button type="primary" loading={actionKey === 'mailbox:create' || actionKey === `mailbox:update:${editingMailbox?.id}`} onClick={() => void saveMailbox()}>{editingMailbox ? t('common.save') : t('inbox.createMailbox')}</Button></Space>}
      >
        {!domains.length ? <Alert type="warning" showIcon message={t('inbox.noDomain')} /> : (
          <Form form={mailboxForm} layout="vertical">
            {editingMailbox ? (
              <Descriptions bordered column={1} size="small" style={{ marginBottom: 20 }}>
                <Descriptions.Item label={t('inbox.mailboxAddress')}><Typography.Text code>{editingMailbox.address}</Typography.Text></Descriptions.Item>
              </Descriptions>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: screens.sm ? 'minmax(0, 1fr) minmax(220px, 0.8fr)' : 'minmax(0, 1fr)', columnGap: screens.sm ? 0 : 8 }}>
                <Form.Item name="localPart" label={t('inbox.localPart')} rules={[{ required: true, message: t('inbox.localPartRequired') }, { pattern: /^[^@\s]+$/, message: t('inbox.localPartInvalid') }]}><Input autoComplete="off" /></Form.Item>
                <Form.Item name="domain" label={t('domains.domain')} rules={[{ required: true, message: t('inbox.domainRequired') }]}><Select options={domains.map((domain) => ({ value: domain.domain, label: `@${domain.domain}` }))} /></Form.Item>
              </div>
            )}
            <Form.Item name="displayName" label={t('inbox.displayName')}><Input /></Form.Item>
            <Form.Item
              name="password"
              label={editingMailbox ? (locale.startsWith('en') ? 'New password' : '新密码') : t('inbox.password')}
              extra={editingMailbox ? (locale.startsWith('en') ? 'Leave blank to keep the current password.' : '留空表示保留当前密码。') : undefined}
              rules={[{ required: !editingMailbox, message: t('inbox.passwordRequired') }, { min: 8, message: t('inbox.passwordMin') }]}
            ><Input.Password autoComplete="new-password" /></Form.Item>
            <Button onClick={() => mailboxForm.setFieldValue('password', generateMailboxPassword())}>{t('inbox.generatePassword')}</Button>
            <Form.Item name="quotaMb" label={`${t('inbox.quotaMb')} (MB)`} style={{ marginTop: 20 }}><InputNumber min={1} className="full-width" /></Form.Item>
            <Form.Item name="aliases" label={t('inbox.aliases')} extra={t('inbox.aliasesExtra')}><Input.TextArea rows={3} /></Form.Item>
            <Form.Item name="forwardTo" label={t('inbox.forwardTo')} extra={t('inbox.forwardToExtra')}><Input.TextArea rows={3} /></Form.Item>
            <Form.Item name="keepForwarded" valuePropName="checked"><Checkbox>{t('inbox.keepForwarded')}</Checkbox></Form.Item>
            {editingMailbox ? (
              <Form.Item name="status" label={t('common.status')} rules={[{ required: true }]}>
                <Select options={[{ value: 'active', label: locale.startsWith('en') ? 'Active' : '启用' }, { value: 'disabled', label: locale.startsWith('en') ? 'Disabled' : '停用' }]} />
              </Form.Item>
            ) : null}
          </Form>
        )}
      </Drawer>

      <Modal title={t('inbox.catchAllTitle')} open={Boolean(catchAllDomain)} confirmLoading={actionKey.startsWith('catch-all:')} onCancel={() => setCatchAllDomain(null)} onOk={() => void saveCatchAll()}>
        <Form form={catchAllForm} layout="vertical"><Form.Item name="catchAllAddress" label={t('inbox.catchAllAddress')} extra={t('inbox.catchAllExtra')}><Input placeholder="catchall@example.com / /dev/null" /></Form.Item></Form>
      </Modal>

      <Modal title={t('inbox.clientConfig')} open={Boolean(clientConfig)} width={720} footer={<Button type="primary" onClick={() => setClientConfig(null)}>{t('common.confirm')}</Button>} onCancel={() => setClientConfig(null)}>
        {clientConfig ? <ClientConfigView config={clientConfig} onCopy={copyValue} t={t} /> : null}
      </Modal>

    </Space>
  );
}

function FolderPane({ mailboxOptions, selectedMailboxId, folders, foldersLoading, foldersError, activeFolder, onMailbox, onFolder, onRetryFolders, locale, mailboxLabel, refreshLabel }: {
  mailboxOptions: Array<{ value: number; label: string }>;
  selectedMailboxId: number | null;
  folders: MailFolder[];
  foldersLoading: boolean;
  foldersError: string;
  activeFolder: string;
  onMailbox: (id: number) => void;
  onFolder: (name: string) => void;
  onRetryFolders: () => Promise<void>;
  locale: string;
  mailboxLabel: string;
  refreshLabel: string;
}) {
  return (
    <Card styles={{ body: { padding: 8 } }}>
      <Select aria-label={mailboxLabel} value={selectedMailboxId || undefined} onChange={onMailbox} options={mailboxOptions} showSearch optionFilterProp="label" className="full-width" style={{ marginBottom: 12 }} />
      {foldersError ? (
        <Alert
          type="warning"
          showIcon
          message={locale.startsWith('en') ? 'Folder counts are unavailable.' : '文件夹计数暂不可用。'}
          description={foldersError}
          action={<Button size="small" loading={foldersLoading} onClick={() => void onRetryFolders()}>{refreshLabel}</Button>}
          style={{ marginBottom: 8 }}
        />
      ) : null}
      <Space direction="vertical" size={2} className="full-width">
        {folders.map((item) => (
          <Button key={item.name} type={activeFolder === item.name ? 'primary' : 'text'} icon={folderIcon(item.name)} onClick={() => onFolder(item.name)} style={{ width: '100%', minHeight: 44, display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
            <span style={{ flex: 1, textAlign: 'left' }}>{folderLabel(item.name, locale)}</span>
            {item.countsAvailable
              ? (item.unreadCount ? <Badge count={item.unreadCount} size="small" /> : <Typography.Text type="secondary">{item.messageCount}</Typography.Text>)
              : <Typography.Text type="secondary" aria-label={locale.startsWith('en') ? 'Count unavailable' : '计数不可用'}>—</Typography.Text>}
          </Button>
        ))}
      </Space>
    </Card>
  );
}

function MessageList({ items, loading, activeId, onOpen, locale, t }: { items: MailMessage[]; loading: boolean; activeId: number | null; onOpen: (item: MailMessage) => void; locale: string; t: (key: string) => string }) {
  if (loading) return <div style={{ padding: 16 }}><Skeleton active paragraph={{ rows: 8 }} /></div>;
  if (!items.length) return <EmptyState description={locale.startsWith('en') ? 'No messages match this folder and filter.' : '当前文件夹和筛选条件下没有邮件。'} />;
  return (
    <List dataSource={items} split renderItem={(item) => (
      <List.Item style={{ padding: 0 }}>
        <button
          type="button"
          aria-label={`${item.subject || t('inbox.noSubject')} · ${item.sender}`}
          onClick={() => onOpen(item)}
          style={{ width: '100%', minHeight: 88, padding: '12px 16px', border: 0, textAlign: 'left', background: activeId === item.id ? '#EEF2FF' : item.read ? '#FFFFFF' : '#F8FAFF', cursor: 'pointer' }}
        >
          <Space direction="vertical" size={4} style={{ width: '100%' }}>
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Typography.Text strong={!item.read} ellipsis style={{ maxWidth: '65%' }}>{item.sender || '—'}</Typography.Text>
              <Typography.Text type="secondary" style={{ fontSize: 12 }}>{formatCompactTime(item.receivedAt)}</Typography.Text>
            </Space>
            <Typography.Text strong={!item.read} ellipsis>{item.subject || t('inbox.noSubject')}</Typography.Text>
            <Typography.Text type="secondary" ellipsis>{item.preview || '—'}</Typography.Text>
          </Space>
        </button>
      </List.Item>
    )} />
  );
}

function MessageDetail({ message, loading, error, mutationError, activeTab, onTabChange, onCopy, t }: { message: MailMessage | null; loading: boolean; error: string; mutationError: string; activeTab: MessageTab; onTabChange: (tab: MessageTab) => void; onCopy: (value: string) => void; t: (key: string) => string }) {
  if (loading) return <Skeleton active paragraph={{ rows: 12 }} />;
  if (error) return <Alert type="error" showIcon message={error} />;
  if (!message) return <EmptyState description={t('inbox.messageDetail')} />;
  const resolvedTab = activeTab === 'text' && !message.textBody && message.htmlBody ? 'html' : activeTab;
  return (
    <Space direction="vertical" size={20} className="full-width">
      {mutationError ? <Alert type="warning" showIcon message={mutationError} /> : null}
      <div><Typography.Title level={4} style={{ marginBottom: 4 }}>{message.subject || t('inbox.noSubject')}</Typography.Title><Typography.Text type="secondary">{formatOptionalTime(message.receivedAt)}</Typography.Text></div>
      <Descriptions column={1} size="small">
        <Descriptions.Item label={t('inbox.sender')}>{message.sender || '—'}</Descriptions.Item>
        <Descriptions.Item label={t('inbox.recipients')}>{message.recipients.join(', ') || '—'}</Descriptions.Item>
        <Descriptions.Item label={t('logs.messageId')}><Typography.Text code copyable={{ onCopy: () => onCopy(message.messageId) }}>{message.messageId || '—'}</Typography.Text></Descriptions.Item>
      </Descriptions>
      <Tabs activeKey={resolvedTab} onChange={(key) => onTabChange(normalizeMessageTab(key))} items={[
        { key: 'text', label: t('inbox.textBody'), children: message.textBody ? <pre className="inbox-message-body">{message.textBody}</pre> : <EmptyState description={t('inbox.noTextBody')} /> },
        { key: 'html', label: t('inbox.htmlBody'), children: message.htmlBody ? <HtmlMessagePreview html={message.htmlBody} title={t('inbox.htmlBody')} /> : <EmptyState description={t('inbox.noHtmlBody')} /> },
        { key: 'source', label: t('inbox.htmlSource'), children: message.htmlBody ? <CodeBlock value={message.htmlBody} onCopy={onCopy} /> : <EmptyState description={t('inbox.noHtmlBody')} /> },
        { key: 'raw', label: t('inbox.rawMessage'), children: message.rawMessage ? <CodeBlock value={message.rawMessage} onCopy={onCopy} /> : <EmptyState description={t('inbox.noRawMessage')} /> }
      ]} />
    </Space>
  );
}

function normalizeMessageTab(value: string | null): MessageTab {
  return value === 'html' || value === 'source' || value === 'raw' ? value : 'text';
}

function HtmlMessagePreview({ html, title }: { html: string; title: string }) {
  return (
    <iframe
      title={title}
      className="inbox-html-preview"
      sandbox=""
      referrerPolicy="no-referrer"
      srcDoc={htmlPreviewDocument(html)}
    />
  );
}

function htmlPreviewDocument(html: string) {
  const previewHead = [
    '<meta charset="utf-8">',
    '<meta name="viewport" content="width=device-width, initial-scale=1">',
    '<meta http-equiv="Content-Security-Policy" content="default-src \'none\'; img-src data: blob: http: https:; style-src \'unsafe-inline\' http: https:; font-src data: http: https:; script-src \'none\'; connect-src \'none\'; frame-src \'none\'; object-src \'none\'; base-uri \'none\'; form-action \'none\'">',
    '<base target="_blank">',
    '<style>html,body{margin:0;padding:12px;background:#fff;color:#111827;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:anywhere;}img{max-width:100%;height:auto;}table{max-width:100%;}a{color:#4F46E5;}</style>'
  ].join('');
  const source = String(html || '');
  if (/<head(?:\s[^>]*)?>/i.test(source)) return source.replace(/<head(?:\s[^>]*)?>/i, (match) => `${match}${previewHead}`);
  if (/<html(?:\s[^>]*)?>/i.test(source)) return source.replace(/<html(?:\s[^>]*)?>/i, (match) => `${match}<head>${previewHead}</head>`);
  return `<!doctype html><html><head>${previewHead}</head><body>${source}</body></html>`;
}

function inboxListPath(searchParams: URLSearchParams, message: MailMessage | null) {
  const next = new URLSearchParams(searchParams);
  next.delete('tab');
  if (message && (!next.has('mailboxId') || !next.has('folder'))) {
    next.set('mailboxId', String(message.mailboxId));
    next.set('folder', message.folder || 'INBOX');
  }
  const suffix = next.toString();
  return `/inbox${suffix ? `?${suffix}` : ''}`;
}

function ClientConfigView({ config, onCopy, t }: { config: MailboxClientConfig; onCopy: (value: string) => void; t: (key: string) => string }) {
  const sections = [
    { key: 'imap', label: t('inbox.incomingConfig'), value: config.incoming },
    ...(config.pop3 ? [{ key: 'pop3', label: t('inbox.pop3Config'), value: config.pop3 }] : []),
    { key: 'smtp', label: t('inbox.outgoingConfig'), value: config.outgoing }
  ];
  return (
    <Space direction="vertical" size={16} className="full-width">
      <Alert type="info" showIcon message={t('inbox.clientConfigHelpSummary')} />
      <Descriptions bordered column={1} size="small"><Descriptions.Item label={t('inbox.configUsername')}>{configValue(config.username, onCopy)}</Descriptions.Item><Descriptions.Item label={t('inbox.configPassword')}>{config.password ? configValue(config.password, onCopy) : <Typography.Text type="secondary">{t('inbox.passwordNotShown')}</Typography.Text>}</Descriptions.Item></Descriptions>
      <Tabs items={sections.map((section) => ({ key: section.key, label: section.label, children: <Descriptions bordered column={1} size="small"><Descriptions.Item label={t('inbox.configHost')}>{configValue(section.value.host, onCopy)}</Descriptions.Item><Descriptions.Item label={t('inbox.configPort')}>{configValue(section.value.port, onCopy)}</Descriptions.Item><Descriptions.Item label={t('inbox.configSecurity')}>{section.value.security}</Descriptions.Item><Descriptions.Item label={t('inbox.configAuthMethod')}>{section.value.authMethod}</Descriptions.Item></Descriptions> }))} />
    </Space>
  );
}

function configValue(value: string | number, onCopy: (value: string) => void) {
  return <Space><Typography.Text code>{value}</Typography.Text><Button aria-label="Copy" icon={<CopyOutlined />} onClick={() => void onCopy(String(value))} /></Space>;
}

function preferredMailboxId(mailboxes: InboundMailbox[], requestedId: number | null) {
  if (requestedId && mailboxes.some((item) => item.id === requestedId)) return requestedId;
  const lastActive = [...mailboxes]
    .filter((item) => item.lastMessageAt)
    .sort((left, right) => Date.parse(right.lastMessageAt || '') - Date.parse(left.lastMessageAt || ''))[0];
  return lastActive?.id || mailboxes.find((item) => item.messageCount > 0)?.id || mailboxes[0]?.id || null;
}

function filterMailboxes(mailboxes: InboundMailbox[], query: string) {
  const normalized = query.trim().toLocaleLowerCase();
  if (!normalized) return mailboxes;
  return mailboxes.filter((item) => [item.address, item.displayName, ...item.aliases, ...item.forwardTo]
    .some((value) => String(value || '').toLocaleLowerCase().includes(normalized)));
}

function sortMailboxes(mailboxes: InboundMailbox[], sort: MailboxSort) {
  return [...mailboxes].sort((left, right) => {
    if (sort === 'address') return left.address.localeCompare(right.address);
    if (sort === 'unread') return right.unreadCount - left.unreadCount || left.address.localeCompare(right.address);
    if (sort === 'messages') return right.messageCount - left.messageCount || left.address.localeCompare(right.address);
    const leftActivity = Date.parse(left.lastMessageAt || '') || 0;
    const rightActivity = Date.parse(right.lastMessageAt || '') || 0;
    return rightActivity - leftActivity || left.address.localeCompare(right.address);
  });
}

function mailboxSortOptions(locale: string) {
  return locale.startsWith('en')
    ? [{ value: 'activity', label: 'Recent activity' }, { value: 'address', label: 'Address' }, { value: 'unread', label: 'Unread count' }, { value: 'messages', label: 'Message count' }]
    : [{ value: 'activity', label: '最近收信' }, { value: 'address', label: '邮箱地址' }, { value: 'unread', label: '未读数' }, { value: 'messages', label: '邮件数' }];
}

function filterRoutes(domains: Domain[], query: string) {
  const normalized = query.trim().toLocaleLowerCase();
  if (!normalized) return domains;
  return domains.filter((item) => [item.domain, item.catchAllAddress]
    .some((value) => String(value || '').toLocaleLowerCase().includes(normalized)));
}

function sortRoutes(domains: Domain[], sort: RouteSort) {
  return [...domains].sort((left, right) => {
    if (sort === 'configured') {
      const configured = Number(Boolean(right.catchAllAddress)) - Number(Boolean(left.catchAllAddress));
      if (configured) return configured;
    }
    return left.domain.localeCompare(right.domain);
  });
}

function routeSortOptions(locale: string) {
  return locale.startsWith('en')
    ? [{ value: 'domain', label: 'Domain' }, { value: 'configured', label: 'Configured first' }]
    : [{ value: 'domain', label: '域名' }, { value: 'configured', label: '已配置优先' }];
}

function fallbackFolders(): MailFolder[] {
  return standardFolders.map((name) => ({ name, specialUse: folderSpecialUse(name), messageCount: 0, unreadCount: 0, countsAvailable: false }));
}

function folderOptionLabel(folder: MailFolder, locale: string) {
  const count = folder.countsAvailable ? folder.unreadCount : '—';
  return `${folderLabel(folder.name, locale)} (${count})`;
}

function folderSpecialUse(name: string) {
  const values: Record<string, string | null> = {
    INBOX: null,
    Sent: '\\Sent',
    Drafts: '\\Drafts',
    Trash: '\\Trash',
    Junk: '\\Junk',
    Archive: '\\Archive'
  };
  return values[name] ?? null;
}

function folderLabel(name: string, locale: string) {
  if (locale.startsWith('en')) return name;
  return { INBOX: '收件箱', Sent: '已发送', Drafts: '草稿', Trash: '已删除', Junk: '垃圾邮件', Archive: '归档' }[name] || name;
}

function folderIcon(name: string) {
  if (name === 'INBOX') return <InboxOutlined />;
  if (name === 'Sent') return <SendOutlined />;
  if (name === 'Drafts') return <FileTextOutlined />;
  if (name === 'Trash') return <DeleteOutlined />;
  if (name === 'Junk') return <WarningOutlined />;
  if (name === 'Archive') return <ContainerOutlined />;
  return <FolderOutlined />;
}

function buildMailboxClientConfig(mailbox: InboundMailbox, config: RuntimeConfig | null, password = ''): MailboxClientConfig {
  const smtpPort = preferredPort(config?.submission?.ports || [], [587, 465]);
  const imapPort = preferredPort(config?.mailAccess?.imap.ports || [], [993, 143]);
  const pop3Port = preferredPort(config?.mailAccess?.pop3.ports || [], [995, 110]);
  const accessHost = config?.mailAccess?.host || config?.submission?.host || config?.mailHostname || mailbox.domain;
  return {
    username: mailbox.address,
    password,
    incoming: { protocol: 'IMAP', host: accessHost, port: imapPort?.port || 143, security: imapPort?.protocol || 'IMAP + STARTTLS', authMethod: 'Normal password', username: mailbox.address, password },
    pop3: { protocol: 'POP3', host: accessHost, port: pop3Port?.port || 110, security: pop3Port?.protocol || 'POP3 + STLS', authMethod: 'Normal password', username: mailbox.address, password },
    outgoing: { protocol: 'SMTP', host: config?.submission?.host || config?.mailHostname || mailbox.domain, port: smtpPort?.port || 587, security: smtpPort?.protocol || 'SMTP + STARTTLS', authMethod: 'Normal password', username: mailbox.address, password }
  };
}

function preferredPort(ports: Array<{ port: number; protocol: string }>, preferred: number[]) {
  for (const port of preferred) {
    const match = ports.find((item) => item.port === port);
    if (match) return match;
  }
  return ports[0] || null;
}

function generateMailboxPassword() {
  const bytes = new Uint8Array(14);
  globalThis.crypto.getRandomValues(bytes);
  return Array.from(bytes, (value) => (value % 36).toString(36)).join('');
}

function formatCompactTime(value: string) {
  const date = new Date(value);
  const now = new Date();
  return date.toDateString() === now.toDateString() ? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : date.toLocaleDateString();
}

function formatOptionalTime(value?: string | null) {
  return value ? new Date(value).toLocaleString() : '—';
}
