import { useState } from 'react';
import Button from '../components/Button';
import Icon from '../components/Icon';
import Table from '../components/Table';
import { PAGE_CONTEXT_LABEL, PageHeader } from './pageListShared';
import { StrategyFilterBar } from './StrategyListPage';

/**
 * RuntimeDataPage — 运行数据（Copilot 顶栏 Tab · 运行数据）
 *
 * 抖音社区-社交-私信场景：会话量、解决率、转人工率等运行指标报表。
 */

export const RUNTIME_DATA_MOCK = [
  {
    id: 'runtime-1',
    title: '抖音社区私信 · 近 7 日运行概况',
    subtitle: '智能会话与人工接管核心指标汇总，含会话量、解决率与均响',
    category: '周期报表',
    updatedAt: '2026-04-21 08:00',
    versions: [
      {
        v: 7,
        title: '0421 周日低峰',
        status: '已发布',
        metrics: [
          { label: '会话量', value: '1,842' },
          { label: '解决率', value: '92.6%' },
          { label: '均响', value: '35s' },
          { label: '转人工', value: '10.8%' },
        ],
      },
      {
        v: 6,
        title: '0420 周六',
        status: '已发布',
        metrics: [
          { label: '会话量', value: '2,156' },
          { label: '解决率', value: '91.3%' },
          { label: '均响', value: '37s' },
          { label: '转人工', value: '11.2%' },
        ],
      },
      {
        v: 5,
        title: '0419 会话峰值日',
        status: '已发布',
        metrics: [
          { label: '会话量', value: '2,846' },
          { label: '解决率', value: '89.8%' },
          { label: '均响', value: '42s' },
          { label: '转人工', value: '13.6%' },
        ],
      },
    ],
  },
  {
    id: 'runtime-2',
    title: '智能 vs 人工 · 私信会话对比',
    subtitle: '对比智能首响、追问完成率与人工二次接起后的满意度差异',
    category: '对比分析',
    updatedAt: '2026-04-20 18:00',
    versions: [
      {
        v: 2,
        title: '智能首响链路',
        status: '已发布',
        metrics: [
          { label: '首响耗时', value: '1.2s' },
          { label: '追问完成', value: '78.4%' },
          { label: '满意度', value: '4.6' },
          { label: '转人工', value: '—' },
        ],
      },
      {
        v: 1,
        title: '人工二次接起',
        status: '已发布',
        metrics: [
          { label: '接起耗时', value: '18s' },
          { label: '一次解决', value: '86.1%' },
          { label: '满意度', value: '4.8' },
          { label: '升级率', value: '3.2%' },
        ],
      },
    ],
  },
  {
    id: 'runtime-3',
    title: '高风险词命中 · 私信监控看板',
    subtitle: '监控辱骂、威胁、自伤等高风险词在私信场景中的命中与处置情况',
    category: '风险监控',
    updatedAt: '2026-04-19 12:30',
    versions: [
      {
        v: 3,
        title: '威胁/自伤词命中',
        status: '实验中',
        metrics: [
          { label: '命中量', value: '47' },
          { label: '拦截率', value: '97.9%' },
          { label: '转人工', value: '100%' },
          { label: '漏报', value: '1' },
        ],
      },
      {
        v: 2,
        title: '辱骂/骚扰词命中',
        status: '已发布',
        metrics: [
          { label: '命中量', value: '312' },
          { label: '拦截率', value: '94.2%' },
          { label: '转人工', value: '68.5%' },
          { label: '漏报', value: '8' },
        ],
      },
      {
        v: 1,
        title: '频控触发统计',
        status: '已发布',
        metrics: [
          { label: '触发量', value: '1,024' },
          { label: '误伤率', value: '2.1%' },
          { label: '申诉通过', value: '86%' },
          { label: '待复核', value: '12' },
        ],
      },
    ],
  },
  {
    id: 'runtime-4',
    title: '社区规则咨询 · 转化漏斗',
    subtitle: '从「规则咨询进线 → 解释完成 → 申诉引导 → 工单创建」的全链路转化',
    category: '漏斗分析',
    updatedAt: '2026-04-18 09:45',
    versions: [
      {
        v: 2,
        title: '账号封禁解释漏斗',
        status: '已发布',
        metrics: [
          { label: '进线量', value: '528' },
          { label: '解释完成', value: '88.3%' },
          { label: '申诉引导', value: '41.6%' },
          { label: '工单创建', value: '23.7%' },
        ],
      },
      {
        v: 1,
        title: '作品下架解释漏斗',
        status: '已发布',
        metrics: [
          { label: '进线量', value: '364' },
          { label: '解释完成', value: '91.2%' },
          { label: '申诉引导', value: '38.5%' },
          { label: '工单创建', value: '19.4%' },
        ],
      },
    ],
  },
  {
    id: 'runtime-5',
    title: '策略 V8 · 灰度运行数据',
    subtitle: '线上策略 V8 灰度 10% 流量下的实时运行指标与异常告警',
    category: '灰度监控',
    updatedAt: '2026-04-17 16:20',
    versions: [
      {
        v: 1,
        title: '0417 灰度首日',
        status: '实验中',
        metrics: [
          { label: '灰度流量', value: '10%' },
          { label: '命中率', value: '93.1%' },
          { label: '异常告警', value: '2' },
          { label: '回滚建议', value: '否' },
        ],
      },
    ],
  },
];

export const RUNTIME_DATA_FILTERS = [
  {
    label: '报表类型',
    options: ['周期报表', '对比分析', '风险监控', '漏斗分析', '灰度监控'],
  },
  {
    label: '时间范围',
    options: ['近 7 日', '近 30 日', '近 90 日', '自定义'],
  },
  {
    label: '数据粒度',
    options: ['按日', '按周', '按月'],
  },
];

export default function RuntimeDataPage({ embedded = false, shellless = false, initialLoading = false } = {}) {
  const [expandedId, setExpandedId] = useState('runtime-1');

  const rootClassName = shellless
    ? 'tfds-page-runtime-data flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden'
    : embedded
      ? 'tfds-page-runtime-data flex w-full min-w-0 flex-col overflow-hidden'
      : 'tfds-page-runtime-data flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden';

  return (
    <div className={rootClassName}>
      <div
        className="flex flex-1 min-h-0 min-w-0 flex-col"
        style={{ padding: shellless ? '16px 24px 24px' : '24px', gap: '16px' }}
      >
        <PageHeader
          title="运行数据"
          contextLabel={shellless ? undefined : PAGE_CONTEXT_LABEL}
          actions={
            <Button variant="outline-black" icon={<Icon name="download-01-stroked" />}>
              导出数据
            </Button>
          }
        />

        <StrategyFilterBar filters={RUNTIME_DATA_FILTERS} />

        <Table
          variant="card-form"
          className="min-h-0 flex-1"
          dataSource={RUNTIME_DATA_MOCK}
          loading={initialLoading}
          rowKey="id"
          expandedRowKeys={expandedId ? [expandedId] : []}
          onExpandedRowKeysChange={(keys) => setExpandedId(keys[keys.length - 1] || null)}
          pagination={{
            current: 1,
            pageSize: 20,
            total: RUNTIME_DATA_MOCK.length,
            pageSizeOptions: [10, 20],
          }}
        />
      </div>
    </div>
  );
}
