import { useMemo } from 'react';
import Button from '../components/Button';
import Icon from '../components/Icon';
import Table from '../components/Table';
import {
  LIST_COLUMNS,
  PAGE_FRAME_CONTENT_MARGIN,
  PageHeader,
  WHITE_CARD_STYLE,
  buildListDataSource,
  useListInitialLoading,
} from './pageListShared';

const PAGE_TITLE = '变量管理';

const VARIABLE_DATA = [
  { name: 'user_id', tag: 'String', desc: '当前对话用户的统一标识，登录态自动注入。' },
  { name: 'merchant_id', tag: 'String', desc: '当前会话所聚焦的商家 ID，用于权限隔离。' },
  { name: 'activity_id', tag: 'String', desc: '关联的营销活动 ID，参与活动数据查询与配置。' },
  { name: 'city_code', tag: 'Number', desc: '城市行政编码，驱动地域化策略与默认筛选。' },
  { name: 'channel', tag: 'Enum', desc: '渠道来源（app / 小程序 / 抖音 / 客服），影响话术分发。' },
  { name: 'order_no', tag: 'String', desc: '当前会话上下文订单号，触发订单类工具调用。' },
];

export default function VariableManagementPage({ onNewVariable }) {
  const loading = useListInitialLoading();
  const dataSource = useMemo(() => buildListDataSource('variable', VARIABLE_DATA), []);

  return (
    <div
      className="tfds-page-variable-management flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
      style={{
        margin: PAGE_FRAME_CONTENT_MARGIN,
        ...WHITE_CARD_STYLE,
      }}
    >
      <div
        className="flex flex-1 min-h-0 min-w-0 flex-col"
        style={{ padding: '24px', gap: '16px' }}
      >
        <PageHeader
          title={PAGE_TITLE}
          actions={
            <Button
              variant="primary"
              icon={<Icon name="plus-stroked" />}
              onClick={onNewVariable}
            >
              新建变量
            </Button>
          }
        />

        <div className="flex flex-1 min-h-0">
          <Table
            className="h-full"
            columns={LIST_COLUMNS}
            dataSource={dataSource}
            loading={loading}
            fixedColumnsMode="last"
            pagination={{
              current: 1,
              pageSize: 10,
              total: dataSource.length,
              pageSizeOptions: [10, 20],
            }}
          />
        </div>
      </div>
    </div>
  );
}
