import { useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode } from 'react';
import { Popover as AntPopover } from 'antd';
import { ChevronLeft, ChevronRight, Copy, CreditCard, Eye, KeyRound, ListChecks, Plus, ReceiptText, RotateCcw, Search, ShieldCheck, SlidersHorizontal, Trash2, UserRound } from 'lucide-react';
import type { GatewayAccessRuleBatchRequest, GatewayApiKey, GatewayTask, GatewayTaskParamPreprocessingLog, GatewayWalletAccount, GatewayWalletTransaction, IntegrationPlatform, PlatformModel } from '@easyai-ai-gateway/contracts';
import type { ConsoleData } from '../app-state';
import { EntityTable } from '../components/EntityTable';
import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmDialog, DateTimePicker, DateTimeRangePicker, FormDialog, Input, Label, Select, Table, TableCell, TableFooter, TableHead, TablePageActions, TableRow, TableToolbar, TableViewportLayout, Tabs } from '../components/ui';
import { AccessPermissionEditor, countAccessPermissionRules } from './admin/AccessPermissionEditor';
import type { ApiKeyForm, LoadState, WorkspaceSection, WorkspaceTaskQuery, WorkspaceTransactionQuery } from '../types';
import { listTaskParamPreprocessing } from '../api';

const tabs = [
  { value: 'overview', label: '个人总览', icon: <UserRound size={15} /> },
  { value: 'billing', label: '余额充值', icon: <CreditCard size={15} /> },
  { value: 'apiKeys', label: 'API Key', icon: <KeyRound size={15} /> },
  { value: 'tasks', label: '任务记录', icon: <ListChecks size={15} /> },
  { value: 'transactions', label: '消费记录', icon: <ReceiptText size={15} /> },
] satisfies Array<{ value: WorkspaceSection; label: string; icon: ReactNode }>;

const taskPageSizeOptions = [10, 20, 50];

export function WorkspacePage(props: {
  apiKeyForm: ApiKeyForm;
  apiKeySecret: string;
  apiKeySecretsById: Record<string, string>;
  apiKeyPolicyModels: PlatformModel[];
  data: ConsoleData;
  message: string;
  section: WorkspaceSection;
  state: LoadState;
  token: string;
  taskQuery: WorkspaceTaskQuery;
  taskTotal: number;
  transactionQuery: WorkspaceTransactionQuery;
  transactionTotal: number;
  onBatchAccessRules: (input: GatewayAccessRuleBatchRequest) => Promise<void>;
  onDeleteApiKey: (apiKeyId: string) => Promise<void>;
  onApiKeyFormChange: (value: ApiKeyForm) => void;
  onSectionChange: (value: WorkspaceSection) => void;
  onSubmitApiKey: (event: FormEvent<HTMLFormElement>) => void | Promise<void>;
  onTaskQueryChange: (value: WorkspaceTaskQuery) => void;
  onTransactionQueryChange: (value: WorkspaceTransactionQuery) => void;
  onUseApiKeyForPlayground: (apiKeyId?: string) => void;
}) {
  return (
    <div className="pageStack">
      <div className="subPageLayout">
        <Tabs className="sideTabs" value={props.section} tabs={tabs} onValueChange={props.onSectionChange} />
        <div className="subPageContent">
          {props.section === 'overview' && <WorkspaceOverview data={props.data} />}
          {props.section === 'billing' && <BillingPanel walletAccounts={props.data.walletAccounts} />}
          {props.section === 'apiKeys' && <ApiKeyPanel {...props} />}
          {props.section === 'tasks' && <TaskPanel data={props.data} query={props.taskQuery} token={props.token} total={props.taskTotal} onQueryChange={props.onTaskQueryChange} />}
          {props.section === 'transactions' && <ConsumptionPanel data={props.data} query={props.transactionQuery} total={props.transactionTotal} onQueryChange={props.onTransactionQueryChange} />}
        </div>
      </div>
    </div>
  );
}

function WorkspaceOverview(props: { data: ConsoleData }) {
  const owner = props.data.users[0];
  return (
    <section className="contentGrid two">
      <Card>
        <CardHeader>
          <CardTitle>个人中心总览</CardTitle>
        </CardHeader>
        <CardContent className="profileGrid">
          <InfoItem label="账号" value={owner?.username ?? '-'} />
          <InfoItem label="租户" value={owner?.tenantKey ?? 'default'} />
          <InfoItem label="身份源" value={owner?.source ?? 'gateway'} />
          <InfoItem label="API Key" value={String(props.data.apiKeys.length)} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>用户组策略</CardTitle>
        </CardHeader>
        <CardContent>
          <EntityTable
            columns={['用户组', '优先级', '状态', '来源']}
            empty="暂无用户组"
            rows={props.data.userGroups.map((item) => [item.groupKey, item.priority, item.status, item.source])}
          />
        </CardContent>
      </Card>
    </section>
  );
}

function BillingPanel(props: { walletAccounts: GatewayWalletAccount[] }) {
  const primaryWallet = primaryWalletAccount(props.walletAccounts);
  const availableBalance = primaryWallet ? primaryWallet.balance - primaryWallet.frozenBalance : 0;
  return (
    <section className="contentGrid two">
      <Card>
        <CardHeader>
          <CardTitle>余额</CardTitle>
        </CardHeader>
        <CardContent className="balanceCard">
          <span>{primaryWallet?.currency ?? 'resource'}</span>
          <strong>{formatMoney(primaryWallet?.balance ?? 0)}</strong>
          <Badge variant={primaryWallet?.status === 'active' || !primaryWallet ? 'success' : 'secondary'}>{primaryWallet?.status ?? 'active'}</Badge>
          <div className="walletMetricGrid">
            <InfoItem label="可用余额" value={formatMoney(availableBalance)} />
            <InfoItem label="冻结余额" value={formatMoney(primaryWallet?.frozenBalance ?? 0)} />
            <InfoItem label="累计充值" value={formatMoney(primaryWallet?.totalRecharged ?? 0)} />
            <InfoItem label="累计消费" value={formatMoney(primaryWallet?.totalSpent ?? 0)} />
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>充值</CardTitle>
        </CardHeader>
        <CardContent className="formGrid">
          <Label>
            金额
            <Input value="100" readOnly />
          </Label>
          <Button type="button" variant="secondary">创建充值订单</Button>
        </CardContent>
      </Card>
    </section>
  );
}

function ConsumptionPanel(props: {
  data: ConsoleData;
  query: WorkspaceTransactionQuery;
  total: number;
  onQueryChange: (value: WorkspaceTransactionQuery) => void;
}) {
  const transactions = props.data.walletTransactions;
  const transactionQuery = props.query;
  const [pageJump, setPageJump] = useState(String(transactionQuery.page));
  const pageSizeOptions = useMemo(() => {
    return Array.from(new Set([...taskPageSizeOptions, transactionQuery.pageSize])).sort((a, b) => a - b);
  }, [transactionQuery.pageSize]);
  const totalPages = Math.max(1, Math.ceil(props.total / transactionQuery.pageSize));
  const currentPage = Math.min(transactionQuery.page, totalPages);
  const pageStart = props.total ? Math.min((currentPage - 1) * transactionQuery.pageSize + 1, props.total) : 0;
  const pageEnd = Math.min(currentPage * transactionQuery.pageSize, props.total);
  const hasActiveFilters = Boolean(transactionQuery.query || transactionQuery.createdFrom || transactionQuery.createdTo);

  useEffect(() => {
    if (transactionQuery.page > totalPages) {
      props.onQueryChange({ ...transactionQuery, page: totalPages });
    }
  }, [props.onQueryChange, transactionQuery, totalPages]);

  useEffect(() => {
    setPageJump(String(currentPage));
  }, [currentPage]);

  function updateQuery(value: string) {
    props.onQueryChange({ ...transactionQuery, query: value, page: 1 });
  }

  function updateCreatedRange(value: { from: string; to: string }) {
    props.onQueryChange({ ...transactionQuery, createdFrom: value.from, createdTo: value.to, page: 1 });
  }

  function updatePageSize(value: string) {
    const nextPageSize = Number(value);
    props.onQueryChange({ ...transactionQuery, page: 1, pageSize: Number.isFinite(nextPageSize) ? nextPageSize : 10 });
  }

  function updatePage(page: number) {
    props.onQueryChange({ ...transactionQuery, page });
  }

  function submitPageJump() {
    const parsed = Number(pageJump);
    if (!Number.isFinite(parsed) || parsed <= 0) {
      setPageJump(String(currentPage));
      return;
    }
    updatePage(Math.min(totalPages, Math.max(1, Math.floor(parsed))));
  }

  function resetFilters() {
    props.onQueryChange({
      query: '',
      createdFrom: '',
      createdTo: '',
      page: 1,
      pageSize: transactionQuery.pageSize,
    });
  }

  return (
    <Card className="shTableViewportCard walletTransactionViewport">
      <CardContent className="shTableViewportPanel">
        <TableViewportLayout>
          <TableToolbar className="walletTransactionFilters">
            <Label className="taskRecordSearchLabel">
              搜索
              <span className="taskRecordSearchBox">
                <Search size={15} />
                <Input
                  value={transactionQuery.query}
                  placeholder="搜索任务 / 模型 / 平台 / 类型 / API Key / RequestID"
                  onChange={(event) => updateQuery(event.target.value)}
                />
              </span>
            </Label>
            <Label className="taskRecordRangeLabel">
              消费时间
              <DateTimeRangePicker
                from={transactionQuery.createdFrom}
                fromPlaceholder="开始日期"
                to={transactionQuery.createdTo}
                toPlaceholder="结束日期"
                onChange={updateCreatedRange}
              />
            </Label>
            <Button type="button" variant="outline" size="sm" disabled={!hasActiveFilters} onClick={resetFilters}>
              <RotateCcw size={14} />
              重置
            </Button>
          </TableToolbar>

          {transactions.length ? (
            <Table className="shTableViewport walletTransactionTable" density="compact">
              <TableRow className="shTableHeader">
                <TableHead>消费时间</TableHead>
                <TableHead>模型</TableHead>
                <TableHead>平台</TableHead>
                <TableHead>类型</TableHead>
                <TableHead>API Key</TableHead>
                <TableHead>Token 消耗</TableHead>
                <TableHead>扣费</TableHead>
                <TableHead>余额变化</TableHead>
                <TableHead>任务</TableHead>
              </TableRow>
              {transactions.map((transaction) => (
                <WalletTransactionRecord key={transaction.id} transaction={transaction} />
              ))}
            </Table>
          ) : (
            <div className="emptyState">
              <strong>暂无消费记录</strong>
              <span>完成可计费任务后会生成消费流水。</span>
            </div>
          )}
          <TableFooter>
            <div className="shTableFooterGroup">
              <Label>
                每页
                <Select size="sm" value={String(transactionQuery.pageSize)} onChange={(event) => updatePageSize(event.target.value)}>
                  {pageSizeOptions.map((option) => (
                    <option key={option} value={option}>{option} 条</option>
                  ))}
                </Select>
              </Label>
              <span>共 {props.total} 条 · {pageStart}-{pageEnd}</span>
            </div>
            <form
              className="shTablePageJump"
              onSubmit={(event) => {
                event.preventDefault();
                submitPageJump();
              }}
            >
              <span>第 {currentPage} / {totalPages} 页</span>
              <span>跳至</span>
              <Input
                aria-label="跳转页码"
                inputMode="numeric"
                min={1}
                max={totalPages}
                size="xs"
                type="number"
                value={pageJump}
                onChange={(event) => setPageJump(event.target.value)}
              />
              <span>页</span>
              <Button type="submit" variant="outline" size="xs" disabled={totalPages <= 1}>跳转</Button>
            </form>
            <TablePageActions>
              <Button type="button" variant="outline" size="sm" disabled={currentPage <= 1} onClick={() => updatePage(Math.max(1, currentPage - 1))}>
                <ChevronLeft size={14} />
                上一页
              </Button>
              <Button type="button" variant="outline" size="sm" disabled={currentPage >= totalPages} onClick={() => updatePage(Math.min(totalPages, currentPage + 1))}>
                下一页
                <ChevronRight size={14} />
              </Button>
            </TablePageActions>
          </TableFooter>
        </TableViewportLayout>
      </CardContent>
    </Card>
  );
}

function WalletTransactionRecord(props: { transaction: GatewayWalletTransaction }) {
  const transaction = props.transaction;
  const metadata = transaction.metadata;
  const referenceId = transaction.referenceId || metadataString(transaction.metadata, 'taskId');
  const requestId = metadataString(metadata, 'requestId');
  const model = metadataString(metadata, 'resolvedModel') || metadataString(metadata, 'platformModelAlias') || metadataString(metadata, 'providerModel') || metadataString(metadata, 'model');
  const requestedModel = metadataString(metadata, 'requestedModel');
  const platform = metadataString(metadata, 'platformName') || metadataString(metadata, 'platformKey') || metadataString(metadata, 'provider') || metadataString(metadata, 'clientId');
  const provider = metadataString(metadata, 'provider');
  const taskType = metadataString(metadata, 'modelType') || metadataString(metadata, 'kind');
  const apiKey = metadataString(metadata, 'apiKeyName') || metadataString(metadata, 'apiKeyPrefix') || metadataString(metadata, 'apiKeyId');
  const chargeAmount = transactionChargeAmount(transaction);
  const chargeCurrency = transactionChargeCurrency(transaction);
  return (
    <TableRow>
      <TableCell>{formatDateTime(transaction.createdAt)}</TableCell>
      <TableCell className="walletTransactionModelCell">
        <span className="walletTransactionPrimaryCell">
          <strong>{model || '-'}</strong>
          {requestedModel && requestedModel !== model && <small>{requestedModel}</small>}
        </span>
      </TableCell>
      <TableCell className="walletTransactionPlatformCell">
        <span className="walletTransactionPrimaryCell">
          <strong>{platform || '-'}</strong>
          {provider && provider !== platform && <small>{provider}</small>}
        </span>
      </TableCell>
      <TableCell>
        <span className="walletTransactionPrimaryCell">
          <strong>{taskType || '-'}</strong>
          <small>{transactionTypeLabel(transaction.transactionType)}</small>
        </span>
      </TableCell>
      <TableCell>{apiKey || '-'}</TableCell>
      <TableCell className="walletTransactionTokenCell">{formatTokenUsage(metadataObject(metadata, 'usage'))}</TableCell>
      <TableCell>
        <span className="walletTransactionAmount" data-direction={transaction.direction}>
          {transaction.direction === 'debit' ? '-' : '+'}{formatMoney(chargeAmount)} {chargeCurrency}
        </span>
      </TableCell>
      <TableCell>
        <span className="walletBalanceChange">
          <span>{formatMoney(transaction.balanceBefore)}</span>
          <span>{formatMoney(transaction.balanceAfter)}</span>
        </span>
      </TableCell>
      <TableCell>
        <span className="walletTransactionRef">
          {referenceId ? <code title={referenceId}>{referenceId}</code> : '-'}
          {requestId && <small title={requestId}>RequestID {requestId}</small>}
        </span>
      </TableCell>
    </TableRow>
  );
}

function ApiKeyPanel(props: {
  apiKeyForm: ApiKeyForm;
  apiKeySecret: string;
  apiKeySecretsById: Record<string, string>;
  apiKeyPolicyModels: PlatformModel[];
  data: ConsoleData;
  message: string;
  state: LoadState;
  onBatchAccessRules: (input: GatewayAccessRuleBatchRequest) => Promise<void>;
  onDeleteApiKey: (apiKeyId: string) => Promise<void>;
  onApiKeyFormChange: (value: ApiKeyForm) => void;
  onSubmitApiKey: (event: FormEvent<HTMLFormElement>) => void | Promise<void>;
  onUseApiKeyForPlayground: (apiKeyId?: string) => void;
}) {
  const [createOpen, setCreateOpen] = useState(false);
  const [policyApiKeyId, setPolicyApiKeyId] = useState('');
  const [pendingDelete, setPendingDelete] = useState<GatewayApiKey | null>(null);
  const [localMessage, setLocalMessage] = useState('');
  const selectedPolicyKey = useMemo(
    () => props.data.apiKeys.find((item) => item.id === policyApiKeyId),
    [policyApiKeyId, props.data.apiKeys],
  );
  const permissionPlatforms = useMemo(() => platformsForPermissionTree(props.apiKeyPolicyModels), [props.apiKeyPolicyModels]);

  async function copyApiKey(item: GatewayApiKey) {
    const secret = apiKeySecretFor(item, props.apiKeySecretsById);
    if (!secret) return;
    await navigator.clipboard.writeText(secret);
    setLocalMessage(`已复制 ${item.name || item.keyPrefix}`);
  }

  async function submitCreate(event: FormEvent<HTMLFormElement>) {
    try {
      await props.onSubmitApiKey(event);
      setCreateOpen(false);
    } catch {
      return;
    }
  }

  async function confirmDeleteApiKey() {
    if (!pendingDelete) return;
    await props.onDeleteApiKey(pendingDelete.id);
    setPendingDelete(null);
  }

  return (
    <>
      <Card>
        <CardHeader>
          <div>
            <CardTitle>API Key</CardTitle>
            <p className="mutedText">按 Key 维护调用凭证、最近使用时间和平台/模型权限策略。</p>
          </div>
          <Button type="button" size="sm" onClick={() => setCreateOpen(true)}>
            <Plus size={15} />
            创建 API Key
          </Button>
        </CardHeader>
        <CardContent>
          {(localMessage || props.message) && <p className="formMessage">{localMessage || props.message}</p>}
          <Table className="apiKeyTable">
            <TableRow className="shTableHeader">
              <TableHead>名称</TableHead>
              <TableHead>API Key</TableHead>
              <TableHead>权限策略</TableHead>
              <TableHead>最近使用</TableHead>
              <TableHead>有效期</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
            {props.data.apiKeys.length ? props.data.apiKeys.map((item) => {
              const secret = apiKeySecretFor(item, props.apiKeySecretsById);
              const summary = countAccessPermissionRules(props.data.accessRules, 'api_key', item.id);
              return (
                <TableRow key={item.id}>
                  <TableCell>
                    <span className="apiKeyNameCell">
                      <strong>{item.name}</strong>
                      <small>{item.keyPrefix}</small>
                    </span>
                  </TableCell>
                  <TableCell>
                    <span className="apiKeySecretCell">
                      <code>{secret ? maskApiKey(secret) : item.keyPrefix}</code>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        title={secret ? '复制 API Key' : '暂无可复制的完整 Key'}
                        disabled={!secret}
                        onClick={() => void copyApiKey(item)}
                      >
                        <Copy size={14} />
                      </Button>
                    </span>
                  </TableCell>
                  <TableCell>
                    <button type="button" className="apiKeyPolicyButton" onClick={() => setPolicyApiKeyId(item.id)}>
                      <ShieldCheck size={14} />
                      <span>{permissionSummaryText(summary)}</span>
                    </button>
                  </TableCell>
                  <TableCell>{formatDateTime(item.lastUsedAt)}</TableCell>
                  <TableCell>{formatDateTime(item.expiresAt)}</TableCell>
                  <TableCell><Badge variant={item.status === 'active' ? 'success' : 'secondary'}>{item.status}</Badge></TableCell>
                  <TableCell>{formatDateTime(item.createdAt)}</TableCell>
                  <TableCell>
                    <Button type="button" variant="ghost" size="icon" title="删除 API Key" onClick={() => setPendingDelete(item)}>
                      <Trash2 size={14} />
                    </Button>
                  </TableCell>
                </TableRow>
              );
            }) : (
              <div className="emptyState">
                <strong>暂无 API Key</strong>
                <span>点击右上角创建调用凭证。</span>
              </div>
            )}
          </Table>
        </CardContent>
      </Card>

      <FormDialog
        ariaLabel="创建 API Key"
        bodyClassName="apiKeyCreateDialogBody"
        footer={(
          <>
            <Button type="button" variant="outline" size="sm" disabled={props.state === 'loading'} onClick={() => setCreateOpen(false)}>取消</Button>
            <Button type="submit" size="sm" disabled={props.state === 'loading'}>
              <KeyRound size={15} />
              确认创建
            </Button>
          </>
        )}
        open={createOpen}
        title="创建 API Key"
        onClose={() => setCreateOpen(false)}
        onSubmit={(event) => void submitCreate(event)}
      >
        <Label>
          名称
          <Input value={props.apiKeyForm.name} placeholder="例如：生产调用 Key" onChange={(event) => props.onApiKeyFormChange({ ...props.apiKeyForm, name: event.target.value })} />
        </Label>
        <Label>
          有效期
          <DateTimePicker
            value={props.apiKeyForm.expiresAt}
            placeholder="不设置则长期有效"
            onChange={(expiresAt) => props.onApiKeyFormChange({ ...props.apiKeyForm, expiresAt })}
          />
        </Label>
      </FormDialog>

      <FormDialog
        ariaLabel="维护 API Key 权限策略"
        bodyClassName="apiKeyPolicyDialogBody"
        className="apiKeyPolicyDialog"
        footer={<Button type="button" size="sm" onClick={() => setPolicyApiKeyId('')}>关闭</Button>}
        open={Boolean(selectedPolicyKey)}
        title={selectedPolicyKey ? `权限策略：${selectedPolicyKey.name}` : '权限策略'}
        onClose={() => setPolicyApiKeyId('')}
        onSubmit={(event) => event.preventDefault()}
      >
        <AccessPermissionEditor
          accessRules={props.data.accessRules}
          metadataMode="api_key_permission_tree"
          platformModels={props.apiKeyPolicyModels}
          platforms={permissionPlatforms}
          state={props.state}
          subjectId={selectedPolicyKey?.id ?? ''}
          subjectType="api_key"
          onBatchAccessRules={props.onBatchAccessRules}
        />
      </FormDialog>

      <ConfirmDialog
        confirmLabel="删除 API Key"
        description="删除后该 Key 将无法继续调用，关联的平台/模型权限策略会同步删除。"
        loading={props.state === 'loading'}
        open={Boolean(pendingDelete)}
        title={`确认删除 ${pendingDelete?.name ?? ''}？`}
        onCancel={() => setPendingDelete(null)}
        onConfirm={confirmDeleteApiKey}
      />
    </>
  );
}

function TaskPanel(props: {
  data: ConsoleData;
  query: WorkspaceTaskQuery;
  token: string;
  total: number;
  onQueryChange: (value: WorkspaceTaskQuery) => void;
}) {
  const [localMessage, setLocalMessage] = useState('');
  const [jsonTask, setJsonTask] = useState<GatewayTask | null>(null);
  const [pageJump, setPageJump] = useState(String(props.query.page));
  const taskQuery = props.query;
  const tasks = props.data.tasks;
  const taskTypes = useMemo(() => {
    const knownTypes = ['text_generate', 'image_generate', 'image_edit', 'video_generate', 'image_to_video'];
    const values = [...knownTypes, taskQuery.modelType, ...tasks.map((task) => task.modelType)];
    return Array.from(new Set(values.filter((value): value is string => Boolean(value)))).sort((a, b) => a.localeCompare(b));
  }, [taskQuery.modelType, tasks]);
  const pageSizeOptions = useMemo(() => {
    return Array.from(new Set([...taskPageSizeOptions, taskQuery.pageSize])).sort((a, b) => a - b);
  }, [taskQuery.pageSize]);
  const totalPages = Math.max(1, Math.ceil(props.total / taskQuery.pageSize));
  const currentPage = Math.min(taskQuery.page, totalPages);
  const pageStart = props.total ? Math.min((currentPage - 1) * taskQuery.pageSize + 1, props.total) : 0;
  const pageEnd = Math.min(currentPage * taskQuery.pageSize, props.total);
  const hasActiveFilters = Boolean(taskQuery.query || taskQuery.createdFrom || taskQuery.createdTo || taskQuery.modelType);

  useEffect(() => {
    if (taskQuery.page > totalPages) {
      props.onQueryChange({ ...taskQuery, page: totalPages });
    }
  }, [props.onQueryChange, taskQuery, totalPages]);

  useEffect(() => {
    setPageJump(String(currentPage));
  }, [currentPage]);

  async function copyTaskRequestId(task: GatewayTask) {
    if (!task.requestId) return;
    await navigator.clipboard.writeText(task.requestId);
    setLocalMessage(`已复制 RequestID：${task.requestId}`);
  }

  function resetFilters() {
    props.onQueryChange({
      query: '',
      modelType: '',
      createdFrom: '',
      createdTo: '',
      page: 1,
      pageSize: taskQuery.pageSize,
    });
  }

  function updateQuery(value: string) {
    props.onQueryChange({ ...taskQuery, query: value, page: 1 });
  }

  function updateTypeFilter(value: string) {
    props.onQueryChange({ ...taskQuery, modelType: value === 'all' ? '' : value, page: 1 });
  }

  function updateCreatedRange(value: { from: string; to: string }) {
    props.onQueryChange({ ...taskQuery, createdFrom: value.from, createdTo: value.to, page: 1 });
  }

  function updatePageSize(value: string) {
    const nextPageSize = Number(value);
    props.onQueryChange({ ...taskQuery, page: 1, pageSize: Number.isFinite(nextPageSize) ? nextPageSize : 10 });
  }

  function updatePage(page: number) {
    props.onQueryChange({ ...taskQuery, page });
  }

  function submitPageJump() {
    const parsed = Number(pageJump);
    if (!Number.isFinite(parsed) || parsed <= 0) {
      setPageJump(String(currentPage));
      return;
    }
    updatePage(Math.min(totalPages, Math.max(1, Math.floor(parsed))));
  }

  return (
    <>
      <Card className="shTableViewportCard taskRecordViewport">
        <CardContent className="shTableViewportPanel">
          {localMessage && <p className="formMessage">{localMessage}</p>}
          <TableViewportLayout>
            <TableToolbar className="taskRecordFilters">
              <Label className="taskRecordSearchLabel">
                搜索
                <span className="taskRecordSearchBox">
                  <Search size={15} />
                  <Input
                    value={taskQuery.query}
                    placeholder="搜索 ID / RequestID / 模型 / API Key"
                    onChange={(event) => updateQuery(event.target.value)}
                  />
                </span>
              </Label>
              <Label>
                类型
                <Select value={taskQuery.modelType || 'all'} onChange={(event) => updateTypeFilter(event.target.value)}>
                  <option value="all">全部类型</option>
                  {taskTypes.map((type) => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </Select>
              </Label>
              <Label className="taskRecordRangeLabel">
                创建时间
                <DateTimeRangePicker
                  from={taskQuery.createdFrom}
                  fromPlaceholder="开始日期"
                  to={taskQuery.createdTo}
                  toPlaceholder="结束日期"
                  onChange={updateCreatedRange}
                />
              </Label>
              <Button type="button" variant="outline" size="sm" disabled={!hasActiveFilters} onClick={resetFilters}>
                <RotateCcw size={14} />
                重置
              </Button>
            </TableToolbar>

            {tasks.length ? (
              <Table className="shTableViewport taskRecordTable" density="compact">
                <TableRow className="shTableHeader">
                  <TableHead>任务</TableHead>
                  <TableHead>RequestID</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>模型</TableHead>
                  <TableHead>尝试链路</TableHead>
                  <TableHead>参数转换</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>API Key</TableHead>
                  <TableHead>Token</TableHead>
                  <TableHead>扣费</TableHead>
                  <TableHead>耗时</TableHead>
                  <TableHead>创建时间</TableHead>
                  <TableHead>原始 JSON</TableHead>
                </TableRow>
                {tasks.map((task) => (
                  <TaskRecord key={task.id} task={task} token={props.token} onCopyRequestId={copyTaskRequestId} onOpenJson={setJsonTask} />
                ))}
              </Table>
            ) : (
              <div className="emptyState">
                <strong>{hasActiveFilters ? '没有匹配的任务' : '暂无任务'}</strong>
                {hasActiveFilters && <span>调整关键词、类型或创建时间后再试。</span>}
              </div>
            )}

            <TableFooter>
              <div className="shTableFooterGroup">
                <Label>
                  每页
                  <Select size="sm" value={String(taskQuery.pageSize)} onChange={(event) => updatePageSize(event.target.value)}>
                    {pageSizeOptions.map((option) => (
                      <option key={option} value={option}>{option} 条</option>
                    ))}
                  </Select>
                </Label>
                <span>共 {props.total} 条 · {pageStart}-{pageEnd}</span>
              </div>
              <form
                className="shTablePageJump"
                onSubmit={(event) => {
                  event.preventDefault();
                  submitPageJump();
                }}
              >
                <span>第 {currentPage} / {totalPages} 页</span>
                <span>跳至</span>
                <Input
                  aria-label="跳转页码"
                  inputMode="numeric"
                  min={1}
                  max={totalPages}
                  size="xs"
                  type="number"
                  value={pageJump}
                  onChange={(event) => setPageJump(event.target.value)}
                />
                <span>页</span>
                <Button type="submit" variant="outline" size="xs" disabled={totalPages <= 1}>跳转</Button>
              </form>
              <TablePageActions>
                <Button type="button" variant="outline" size="sm" disabled={currentPage <= 1} onClick={() => updatePage(Math.max(1, currentPage - 1))}>
                  <ChevronLeft size={14} />
                  上一页
                </Button>
                <Button type="button" variant="outline" size="sm" disabled={currentPage >= totalPages} onClick={() => updatePage(Math.min(totalPages, currentPage + 1))}>
                  下一页
                  <ChevronRight size={14} />
                </Button>
              </TablePageActions>
            </TableFooter>
          </TableViewportLayout>
        </CardContent>
      </Card>

      <FormDialog
        ariaLabel="查看任务原始 JSON"
        bodyClassName="taskJsonDialogBody"
        className="taskJsonDialog"
        footer={<Button type="button" size="sm" onClick={() => setJsonTask(null)}>关闭</Button>}
        open={Boolean(jsonTask)}
        title="任务原始 JSON"
        onClose={() => setJsonTask(null)}
        onSubmit={(event) => event.preventDefault()}
      >
        <pre className="taskJsonPreview">{JSON.stringify(jsonTask, null, 2)}</pre>
      </FormDialog>
    </>
  );
}

function TaskRecord(props: { task: GatewayTask; token: string; onCopyRequestId: (task: GatewayTask) => Promise<void>; onOpenJson: (task: GatewayTask) => void }) {
  const usage = props.task.usage ?? {};
  const tokenUsage = formatTokenUsage(usage);
  const chargeText = props.task.finalChargeAmount !== undefined ? formatCellValue(props.task.finalChargeAmount) : '-';
  const resolvedModel = props.task.resolvedModel || props.task.model;
  const badgeVariant = props.task.status === 'succeeded' ? 'success' : props.task.status === 'failed' ? 'destructive' : 'secondary';
  return (
    <TableRow>
      <TableCell>
        <span className="taskRecordPrimaryCell taskRecordIdentityCell">
          <strong>{props.task.kind}</strong>
          <span className="taskRecordIdLine">
            <span>ID</span>
            <code title={props.task.id}>{props.task.id}</code>
          </span>
        </span>
      </TableCell>
      <TableCell>
        <span className="taskRecordRequestLine">
          <code title={props.task.requestId || '-'}>{props.task.requestId || '-'}</code>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            title={props.task.requestId ? '复制 RequestID' : '暂无 RequestID'}
            disabled={!props.task.requestId}
            onClick={() => void props.onCopyRequestId(props.task)}
          >
            <Copy size={14} />
          </Button>
        </span>
      </TableCell>
      <TableCell><Badge variant={badgeVariant}>{props.task.status}</Badge></TableCell>
      <TableCell className="taskRecordModelCell">
        <span className="taskRecordPrimaryCell">
          <strong>{resolvedModel}</strong>
          {props.task.requestedModel && props.task.requestedModel !== resolvedModel && <small>{props.task.requestedModel}</small>}
        </span>
      </TableCell>
      <TableCell className="taskRecordAttemptCell">
        <TaskAttemptChain task={props.task} />
      </TableCell>
      <TableCell className="taskRecordParamCell">
        <TaskParamConversionCell task={props.task} token={props.token} />
      </TableCell>
      <TableCell>{props.task.modelType || '-'}</TableCell>
      <TableCell>{props.task.apiKeyName || props.task.apiKeyPrefix || props.task.apiKeyId || '-'}</TableCell>
      <TableCell className="taskRecordTokenCell">{tokenUsage}</TableCell>
      <TableCell>{chargeText}</TableCell>
      <TableCell>{formatDuration(props.task.responseDurationMs)}</TableCell>
      <TableCell>{formatDateTime(props.task.createdAt)}</TableCell>
      <TableCell>
        <Button type="button" variant="ghost" size="sm" className="taskRecordJsonButton" title={taskErrorText(props.task) || '查看原始 JSON'} onClick={() => props.onOpenJson(props.task)}>
          <Eye size={14} />
          原始 JSON
        </Button>
      </TableCell>
    </TableRow>
  );
}

type TaskParamConversionSummary = {
  changed: boolean;
  changeCount: number;
  actions: string[];
  paths: string[];
  capabilityPaths: string[];
};

function TaskParamConversionCell(props: { task: GatewayTask; token: string }) {
  const summary = taskParamConversionSummary(props.task);
  const [open, setOpen] = useState(false);
  const [logs, setLogs] = useState<GatewayTaskParamPreprocessingLog[] | null>(null);
  const [loadState, setLoadState] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle');
  const [error, setError] = useState('');
  const logsRef = useRef<GatewayTaskParamPreprocessingLog[] | null>(null);
  const loadingRef = useRef(false);

  useEffect(() => {
    logsRef.current = null;
    loadingRef.current = false;
    setLogs(null);
    setLoadState('idle');
    setError('');
  }, [props.task.id]);

  useEffect(() => {
    if (!open || !summary.changed || logsRef.current || loadingRef.current || !props.token) return;
    let cancelled = false;
    loadingRef.current = true;
    setLoadState('loading');
    setError('');
    listTaskParamPreprocessing(props.token, props.task.id)
      .then((response) => {
        if (cancelled) return;
        const items = response.items ?? [];
        logsRef.current = items;
        setLogs(items);
        setLoadState('ready');
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : '参数转换明细加载失败');
        setLoadState('error');
      })
      .finally(() => {
        if (!cancelled) {
          loadingRef.current = false;
        }
      });
    return () => {
      cancelled = true;
      loadingRef.current = false;
    };
  }, [open, props.task.id, props.token, summary.changed]);

  if (!summary.changed) {
    return <span className="taskParamConversionEmpty">无转换</span>;
  }

  return (
    <AntPopover
      align={{ offset: [0, 8] }}
      content={<TaskParamConversionPopover error={error} loadState={loadState} logs={logs} summary={summary} />}
      overlayClassName="taskParamConversionAntPopover"
      placement="bottomLeft"
      trigger={['hover', 'focus']}
      onOpenChange={setOpen}
    >
      <button className="taskParamConversionTrigger" type="button" aria-label={`参数转换 ${summary.changeCount} 项`}>
        <SlidersHorizontal size={14} />
        <span>{summary.changeCount || '有'} 项</span>
      </button>
    </AntPopover>
  );
}

function TaskParamConversionPopover(props: {
  error: string;
  loadState: 'idle' | 'loading' | 'ready' | 'error';
  logs: GatewayTaskParamPreprocessingLog[] | null;
  summary: TaskParamConversionSummary;
}) {
  const logs = props.logs ?? [];
  return (
    <span className="taskParamConversionPopover" role="tooltip">
      <span className="taskParamConversionPopoverHeader">
        <strong>参数转换汇总</strong>
        <small>{taskParamSummaryText(props.summary)}</small>
      </span>
      {props.loadState === 'loading' && <span className="taskParamConversionState">正在加载转换明细...</span>}
      {props.loadState === 'error' && <span className="taskParamConversionState error">{props.error || '参数转换明细加载失败'}</span>}
      {props.loadState === 'ready' && logs.length === 0 && <span className="taskParamConversionState">暂无转换明细。</span>}
      {logs.map((log) => (
        <span key={log.id} className="taskParamConversionLog">
          <span className="taskParamConversionLogHeader">
            <span className="taskParamConversionLogTitleBlock">
              <strong>{taskParamLogTitle(log)}</strong>
              <small title={log.clientId || undefined}>{taskParamLogSubtitle(log)}</small>
            </span>
            <Badge className="taskParamConversionCountBadge" variant={log.changed ? 'secondary' : 'outline'}>{log.changeCount} 项</Badge>
          </span>
          {(log.changes ?? []).slice(0, 8).map((change, index) => (
            <span key={`${log.id}-change-${index}`} className="taskParamConversionChange">
              <span className="taskParamConversionChangeTop">
                <Badge variant="outline">{taskParamActionLabel(objectString(change, 'action'))}</Badge>
                <strong>{objectString(change, 'path') || '-'}</strong>
              </span>
              <span>{objectString(change, 'reason') || '按模型能力配置调整参数。'}</span>
              {objectString(change, 'capabilityPath') && <small>能力配置：{objectString(change, 'capabilityPath')}</small>}
              <code>{taskParamChangePreview(change)}</code>
            </span>
          ))}
          {(log.changes?.length ?? 0) > 8 && <small>还有 {(log.changes?.length ?? 0) - 8} 项转换未展开。</small>}
        </span>
      ))}
      {props.loadState !== 'ready' && props.summary.capabilityPaths.length > 0 && (
        <span className="taskParamConversionSummaryPaths">
          {props.summary.capabilityPaths.slice(0, 4).map((path) => <code key={path}>{path}</code>)}
        </span>
      )}
    </span>
  );
}

function TaskAttemptChain(props: { task: GatewayTask }) {
  const attempts = props.task.attempts ?? [];
  if (!attempts.length) return <span>-</span>;

  return (
    <AntPopover
      align={{ offset: [0, 8] }}
      content={<TaskAttemptPopoverContent task={props.task} />}
      overlayClassName="taskRecordAttemptAntPopover"
      placement="bottomLeft"
      trigger={['hover', 'focus']}
    >
      <button className="taskRecordAttemptCount" type="button" aria-label={attempts.map(taskAttemptTitle).join('\n')}>
        {attempts.length} 次尝试
      </button>
    </AntPopover>
  );
}

function TaskAttemptPopoverContent(props: { task: GatewayTask }) {
  const attempts = props.task.attempts ?? [];
  return (
    <span className="taskRecordAttemptPopover" role="tooltip">
      {attempts.map((attempt) => {
        const trace = taskAttemptTrace(attempt);
        const rateLimitText = taskAttemptRateLimitText(attempt);
        return (
          <span
            key={attempt.id || `${props.task.id}-${attempt.attemptNo}`}
            className={`taskRecordAttemptDetail ${attempt.status === 'failed' ? 'failed' : attempt.status === 'succeeded' ? 'succeeded' : ''}`}
          >
            <span className="taskRecordAttemptDetailHeader">
              <strong>#{attempt.attemptNo} {taskAttemptTarget(attempt)}</strong>
              <Badge variant={attempt.status === 'succeeded' ? 'success' : attempt.status === 'failed' ? 'destructive' : 'secondary'}>{taskAttemptStatusText(attempt.status)}</Badge>
            </span>
            <small>{taskAttemptMeta(attempt)}</small>
            {attempt.status === 'failed' && <span className="taskRecordAttemptError">{taskAttemptFailureReason(attempt)}</span>}
            {(rateLimitText || trace.length > 0) && (
              <span className="taskRecordAttemptTrace">
                {rateLimitText && <span className="taskRecordAttemptTraceItem">{rateLimitText}</span>}
                {trace.map((entry, index) => (
                  <span key={`${attempt.id || attempt.attemptNo}-trace-${index}`} className="taskRecordAttemptTraceItem">
                    {taskAttemptTraceText(entry)}
                  </span>
                ))}
              </span>
            )}
          </span>
        );
      })}
    </span>
  );
}

function taskAttemptTitle(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const parts = [
    `#${attempt.attemptNo}`,
    attempt.platformName || attempt.provider || attempt.clientId || '',
    attempt.status,
    attempt.errorMessage || attempt.errorCode || metadataString(attempt.metrics, 'error') || '',
  ].filter(Boolean);
  return parts.join(' · ');
}

function taskAttemptTarget(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  return attempt.platformName || attempt.provider || attempt.clientId || `尝试 ${attempt.attemptNo}`;
}

function taskAttemptStatusText(status: string) {
  if (status === 'succeeded') return '成功';
  if (status === 'failed') return '失败';
  if (status === 'running') return '运行中';
  return status || '-';
}

function taskAttemptMeta(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const statusCode = taskAttemptStatusCode(attempt);
  const values = [
    attempt.providerModelName || attempt.modelName || attempt.modelAlias,
    attempt.requestId ? `RequestID ${attempt.requestId}` : '',
    statusCode ? `状态码 ${statusCode}` : '',
    attempt.responseDurationMs ? formatDuration(attempt.responseDurationMs) : '',
  ].filter(Boolean);
  return values.join(' · ') || attempt.clientId || '-';
}

function taskAttemptFailureReason(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const detail = firstText(
    attempt.errorMessage,
    metadataString(attempt.metrics, 'error'),
    metadataString(attempt.metrics, 'message'),
  );
  const code = firstText(attempt.errorCode, metadataString(attempt.metrics, 'errorCode'));
  const statusCode = taskAttemptStatusCode(attempt);
  const statusText = statusCode ? `状态码 ${statusCode}` : '';
  const category = taskAttemptFailureCategory(attempt);
  const categoryText = category ? `错误分类 ${category}` : '';
  if (detail && code && detail !== code) return [detail, code, statusText, categoryText].filter(Boolean).join(' · ');
  return [detail || code || '失败', statusText, categoryText].filter(Boolean).join(' · ');
}

function taskAttemptStatusCode(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const value = attempt.statusCode ?? metadataNumber(attempt.metrics, 'statusCode');
  return value && Number.isFinite(value) ? Math.trunc(value) : null;
}

function taskAttemptTrace(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const raw = attempt.metrics?.trace;
  if (!Array.isArray(raw)) return [];
  return raw.filter((item): item is Record<string, unknown> => Boolean(item) && typeof item === 'object' && !Array.isArray(item));
}

function taskAttemptRateLimitText(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const detail = metadataObject(attempt.metrics, 'rateLimit');
  if (!Object.keys(detail).length) return '';
  const scopeName = objectString(detail, 'scopeName') || objectString(detail, 'scopeKey') || '限流对象';
  const metric = objectString(detail, 'metric') || 'rate_limit';
  const current = metadataNumber(detail, 'current');
  const amount = metadataNumber(detail, 'amount');
  const projected = metadataNumber(detail, 'projected');
  const limit = metadataNumber(detail, 'limit');
  const windowSeconds = metadataNumber(detail, 'windowSeconds');
  const retryAfterMs = metadataNumber(detail, 'retryAfterMs');
  const values = [
    `限流 ${scopeName} · ${metric}`,
    current !== null ? `当前 ${formatCellValue(current)}` : '',
    amount !== null ? `本次 ${formatCellValue(amount)}` : '',
    projected !== null ? `预计 ${formatCellValue(projected)}` : '',
    limit !== null ? `限制 ${formatCellValue(limit)}` : '',
    windowSeconds !== null ? `窗口 ${Math.trunc(windowSeconds)} 秒` : '',
    retryAfterMs !== null ? `约 ${formatDuration(Math.trunc(retryAfterMs))} 后可重试` : '',
  ].filter(Boolean);
  return values.join(' · ');
}

function taskAttemptTraceText(entry: Record<string, unknown>) {
  const event = objectString(entry, 'event');
  const action = objectString(entry, 'action');
  const reason = objectString(entry, 'reason');
  const statusCode = metadataNumber(entry, 'statusCode');
  const errorCode = objectString(entry, 'errorCode');
  const category = objectString(entry, 'category');
  const policy = taskAttemptTracePolicy(entry);
  const values = [
    taskAttemptTraceEventLabel(event, action),
    statusCode ? `状态码 ${Math.trunc(statusCode)}` : '',
    errorCode ? `错误 ${errorCode}` : '',
    category ? `错误分类 ${category}` : '',
    policy,
    reason ? `原因 ${taskAttemptTraceReasonLabel(reason)}` : '',
  ].filter(Boolean);
  return values.join(' · ');
}

function taskAttemptFailureCategory(attempt: NonNullable<GatewayTask['attempts']>[number]) {
  const category = firstText(
    metadataString(attempt.metrics, 'errorCategory'),
    metadataString(attempt.metrics, 'category'),
  );
  if (category) return category;
  for (const entry of taskAttemptTrace(attempt)) {
    const traceCategory = objectString(entry, 'category');
    if (traceCategory) return traceCategory;
  }
  return '';
}

function taskAttemptTracePolicy(entry: Record<string, unknown>) {
  const source = objectString(entry, 'policySource');
  const policy = objectString(entry, 'policy');
  const rule = objectString(entry, 'policyRule');
  const matchedValue = objectString(entry, 'matchedValue');
  const sourceLabel = source || policy;
  const policyPath = [sourceLabel, rule].filter(Boolean).join('.');
  if (!policyPath) return '';
  return matchedValue ? `策略 ${policyPath}=${matchedValue}` : `策略 ${policyPath}`;
}

function taskAttemptTraceEventLabel(event: string, action: string) {
  if (event === 'failure') return '失败';
  if (event === 'same_client_retry') return action === 'retry' ? '本平台重试' : '本平台停止重试';
  if (event === 'failover_next') return '切换下个平台';
  if (event === 'failover_stop') return '停止切换平台';
  if (event === 'priority_demoted') return '优先级降级';
  return event || action || '链路事件';
}

function taskAttemptTraceReasonLabel(reason: string) {
  const labels: Record<string, string> = {
    client_call_failed: '客户端调用失败',
    retry_disabled: '模型重试关闭',
    retry_deny_policy: '命中模型拒绝重试规则',
    retry_allow_policy: '命中模型允许重试规则',
    client_retryable: '客户端标记可重试',
    client_non_retryable: '客户端标记不可重试',
    same_client_max_attempts: '达到本平台最大尝试次数',
    request_validation_failed: '请求校验失败',
    candidate_selection_failed: '候选模型选择失败',
    parameter_preprocessing_failed: '参数预处理失败',
    wallet_balance_check_failed: '余额校验失败',
    local_rate_limit_blocked: '本地限流拦截',
    pre_provider_failed: '调用上游前失败',
    local_rate_limit_wait_queue: '本地限流排队等待',
    failover_time_budget_exceeded: '超过全局切换时间预算',
    runner_policy_disabled: '全局调度策略停用',
    hard_stop_policy: '命中硬拒绝规则',
    failover_disabled: '平台切换关闭',
    failover_deny_policy: '命中拒绝切换规则',
    failover_allow_policy: '命中允许切换规则',
    max_platforms_reached: '达到最大平台数',
    no_next_platform: '没有更多候选平台',
    priority_demote_policy: '命中优先级降级规则',
  };
  return labels[reason] ?? reason;
}

function taskParamConversionSummary(task: GatewayTask): TaskParamConversionSummary {
  const summary: TaskParamConversionSummary = {
    changed: false,
    changeCount: 0,
    actions: [],
    paths: [],
    capabilityPaths: [],
  };
  let mergedAttemptSummary = false;
  for (const attempt of task.attempts ?? []) {
    const attemptSummary = metadataObject(attempt.metrics, 'parameterPreprocessingSummary');
    if (Object.keys(attemptSummary).length) {
      mergedAttemptSummary = true;
      mergeTaskParamSummary(summary, attemptSummary);
    }
  }
  if (!mergedAttemptSummary) {
    mergeTaskParamSummary(summary, metadataObject(task.metrics, 'parameterPreprocessingSummary'));
  }
  return summary;
}

function mergeTaskParamSummary(target: TaskParamConversionSummary, raw: Record<string, unknown>) {
  if (!Object.keys(raw).length) return;
  target.changed = target.changed || raw.changed === true;
  const changeCount = metadataNumber(raw, 'changeCount');
  if (changeCount) target.changeCount += Math.max(0, Math.trunc(changeCount));
  for (const action of metadataStringList(raw, 'actions')) appendUniqueText(target.actions, action);
  for (const path of metadataStringList(raw, 'paths')) appendUniqueText(target.paths, path);
  for (const path of metadataStringList(raw, 'capabilityPaths')) appendUniqueText(target.capabilityPaths, path);
}

function taskParamSummaryText(summary: TaskParamConversionSummary) {
  const actionText = summary.actions.map(taskParamActionLabel).join('、');
  const parts = [
    `${summary.changeCount || summary.paths.length || 1} 项转换`,
    actionText ? `动作 ${actionText}` : '',
    summary.capabilityPaths.length ? `涉及 ${summary.capabilityPaths.length} 项能力配置` : '',
  ].filter(Boolean);
  return parts.join(' · ');
}

function taskParamLogTitle(log: GatewayTaskParamPreprocessingLog) {
  const parts = [
    log.attemptNo ? `#${log.attemptNo}` : '',
    log.modelType || '',
  ].filter(Boolean);
  return parts.join(' · ') || '预处理记录';
}

function taskParamLogSubtitle(log: GatewayTaskParamPreprocessingLog) {
  const model = log.model ?? {};
  const modelLabel = firstNonEmptyText(
    objectString(model, 'modelAlias'),
    objectString(model, 'providerModelName'),
    objectString(model, 'modelName'),
  );
  const provider = objectString(model, 'provider');
  const parts = [
    provider,
    modelLabel,
  ].filter(Boolean);
  if (parts.length) return parts.join(' · ');
  return log.clientId || '候选模型';
}

function firstNonEmptyText(...values: string[]) {
  return values.find((value) => value.trim()) ?? '';
}

function taskParamActionLabel(action: string) {
  if (action === 'remove') return '移除';
  if (action === 'adjust') return '调整';
  if (action === 'set') return '补齐';
  return action || '转换';
}

function taskParamChangePreview(change: Record<string, unknown>) {
  const before = previewCompactValue(change.before);
  const after = previewCompactValue(change.after);
  const action = objectString(change, 'action');
  if (action === 'remove') return `原值 ${before}`;
  if (action === 'set') return `新值 ${after}`;
  return `原值 ${before} -> 新值 ${after}`;
}

function previewCompactValue(value: unknown) {
  if (value === undefined || value === null || value === '') return '-';
  const text = typeof value === 'string' ? value : JSON.stringify(value);
  if (!text) return '-';
  return text.length > 150 ? `${text.slice(0, 150)}...` : text;
}

function formatCellValue(value: unknown) {
  if (value === undefined || value === null || value === '') return '-';
  return String(value);
}

function primaryWalletAccount(accounts: GatewayWalletAccount[]) {
  return accounts.find((account) => account.currency === 'resource') ?? accounts[0];
}

function formatMoney(value: unknown) {
  const numericValue = typeof value === 'number' ? value : Number(value);
  if (!Number.isFinite(numericValue)) return '0.00';
  return new Intl.NumberFormat(undefined, {
    maximumFractionDigits: 2,
    minimumFractionDigits: 2,
  }).format(numericValue);
}

function transactionTypeLabel(value: string) {
  if (value === 'task_billing') return '任务扣费';
  if (value === 'admin_adjust') return '余额调整';
  if (value === 'recharge') return '充值';
  if (value === 'refund') return '退款';
  if (value === 'reserve') return '冻结';
  if (value === 'release') return '释放';
  return value || '-';
}

function firstText(...values: Array<unknown>) {
  for (const value of values) {
    if (typeof value === 'string' && value.trim()) return value.trim();
  }
  return '';
}

function metadataString(metadata: Record<string, unknown> | undefined, key: string) {
  const value = metadata?.[key];
  return typeof value === 'string' && value.trim() ? value.trim() : '';
}

function metadataStringList(metadata: Record<string, unknown> | undefined, key: string) {
  const value = metadata?.[key];
  if (!Array.isArray(value)) return [];
  return value.filter((item): item is string => typeof item === 'string' && item.trim() !== '').map((item) => item.trim());
}

function metadataNumber(metadata: Record<string, unknown> | undefined, key: string) {
  const value = metadata?.[key];
  if (value === undefined || value === null || value === '') return null;
  const numericValue = typeof value === 'number' ? value : Number(value);
  return Number.isFinite(numericValue) ? numericValue : null;
}

function metadataObject(metadata: Record<string, unknown> | undefined, key: string): Record<string, unknown> {
  const value = metadata?.[key];
  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
  return value as Record<string, unknown>;
}

function objectString(value: Record<string, unknown>, key: string) {
  const next = value[key];
  return typeof next === 'string' && next.trim() ? next.trim() : '';
}

function appendUniqueText(values: string[], value: string) {
  if (!value || values.includes(value)) return;
  values.push(value);
}

function transactionChargeAmount(transaction: GatewayWalletTransaction) {
  return metadataNumber(transaction.metadata, 'finalChargeAmount') ?? transaction.amount;
}

function transactionChargeCurrency(transaction: GatewayWalletTransaction) {
  const summary = metadataObject(transaction.metadata, 'billingSummary');
  const finalCharge = metadataObject(summary, 'finalCharge');
  return objectString(finalCharge, 'currency') || objectString(summary, 'currency') || transaction.currency || 'resource';
}

function formatTokenUsage(usage: Record<string, unknown>) {
  const input = tokenValue(usage.inputTokens ?? usage.promptTokens ?? usage.input_tokens ?? usage.prompt_tokens);
  const output = tokenValue(usage.outputTokens ?? usage.completionTokens ?? usage.output_tokens ?? usage.completion_tokens);
  const total = tokenValue(usage.totalTokens ?? usage.total_tokens ?? (input !== null && output !== null ? input + output : null));
  if (input === null && output === null && total === null) return '-';
  return (
    <span className="taskRecordTokenUsage">
      <span>输入：{formatCellValue(input)}/输出：{formatCellValue(output)}</span>
      <span>总计：{formatCellValue(total)}</span>
    </span>
  );
}

function tokenValue(value: unknown) {
  if (value === undefined || value === null || value === '') return null;
  const numericValue = typeof value === 'number' ? value : Number(value);
  return Number.isFinite(numericValue) ? numericValue : null;
}

function formatDuration(value?: number) {
  if (value === undefined || value === null) return '-';
  const milliseconds = Math.max(0, Math.round(value));
  if (milliseconds === 0) return '0秒';
  if (milliseconds < 1000) return `${milliseconds}毫秒`;
  const totalSeconds = Math.round(milliseconds / 1000);
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  if (hours > 0) return `${hours}小时${minutes}分${seconds}秒`;
  if (minutes > 0) return `${minutes}分${seconds}秒`;
  return `${seconds}秒`;
}

function taskErrorText(task: GatewayTask) {
  return task.errorCode || task.errorMessage || task.error || '';
}

function InfoItem(props: { label: string; value: string }) {
  return (
    <div className="infoItem">
      <span>{props.label}</span>
      <strong>{props.value}</strong>
    </div>
  );
}

function apiKeySecretFor(item: GatewayApiKey, secretsById: Record<string, string>) {
  return secretsById[item.id] || item.secret || '';
}

function maskApiKey(secret: string) {
  if (secret.length <= 18) return secret;
  return `${secret.slice(0, 12)}...${secret.slice(-4)}`;
}

function permissionSummaryText(summary: ReturnType<typeof countAccessPermissionRules>) {
  const allow = summary.allow.platforms + summary.allow.models;
  const deny = summary.deny.platforms + summary.deny.models;
  if (allow === 0 && deny === 0) return '未配置';
  return `允许 ${allow} / 拒绝 ${deny}`;
}

function formatDateTime(value?: string) {
  if (!value) return '-';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '-';
  return date.toLocaleString();
}

function platformsForPermissionTree(models: PlatformModel[]): IntegrationPlatform[] {
  const byPlatform = new Map<string, IntegrationPlatform>();
  for (const model of models) {
    if (byPlatform.has(model.platformId)) continue;
    const name = model.platformName || model.provider || model.platformId;
    byPlatform.set(model.platformId, {
      id: model.platformId,
      provider: model.provider || '',
      platformKey: model.platformId,
      name,
      authType: '',
      status: 'enabled',
      priority: 100,
      defaultPricingMode: 'inherit',
      defaultDiscountFactor: 1,
      createdAt: '',
      updatedAt: '',
    });
  }
  return Array.from(byPlatform.values()).sort((a, b) => a.name.localeCompare(b.name));
}