/**
 * pageListShared — B 端"列表页"模板共享工具
 *
 * 把所有列表型页面（变量管理、MCP 管理等）复用的 UI 子组件、列定义、
 * 数据装配函数集中在这里，方便每个独立模板页直接 import 使用，
 * 业务接入时只需替换数据源（list）和文案配置（标题/筛选项/按钮）。
 */

import { useEffect, useState } from 'react';
import Filter from '../components/Filter';
import FormTitle from '../components/FormTitle';
import Icon from '../components/Icon';
import Input from '../components/Input';
import { TEAM_MEMBERS } from '../teamMembers';

/** 列表页标题后缀业务上下文胶囊文案（仅业务显式传 `PageHeader contextLabel` 时展示，模板默认不传） */
export const PAGE_CONTEXT_LABEL = '抖音主端-在线客服&网络呼入';
export const WHITE_CARD_STYLE = {
  background: 'var(--color-white, #FFFFFF)',
  borderRadius: '12px',
};
/* 基础页面框架：右侧内容区与左侧 NavBar 的横向间距统一参考页面示例3，左侧不再额外加 16px 灰底间隔 */
export const PAGE_FRAME_CONTENT_MARGIN = '16px 16px 16px 0';
export const PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = '0 16px 16px 0';
export const PAGE_FRAME_PANEL_GAP = '8px';

/* ── 表格列定义（所有列表型模板共用：名称 / 类型 / 描述 / 创建人 / 状态 / 更新时间 / 操作） ── */
export const LIST_COLUMNS = [
  { key: 'name', dataIndex: 'name', title: '工具名称', type: 'text', width: 220 },
  { key: 'tag', dataIndex: 'tag', title: '类型', type: 'tag', width: 120 },
  { key: 'desc', dataIndex: 'desc', title: '描述', type: 'text', width: 320 },
  { key: 'creator', dataIndex: 'creator', title: '创建人', type: 'avatar', width: 152 },
  { key: 'status', dataIndex: 'status', title: '状态', type: 'status', width: 120 },
  { key: 'updatedAt', dataIndex: 'updatedAt', title: '更新时间', type: 'datetime', width: 180 },
  { key: 'actions', dataIndex: 'actions', title: '操作', type: 'actions' },
];

const ACTION_BUTTONS = [
  { key: 'edit', label: '编辑' },
  { key: 'detail', label: '详情' },
  { key: 'more', kind: 'more' },
];

const CREATOR_POOL = TEAM_MEMBERS;

const STATUS_OPTIONS = [
  { label: '已启用', tone: 'success' },
  { label: '调试中', tone: 'warning' },
  { label: '已停用', tone: 'danger' },
  { label: '审核中', tone: 'warning' },
];

const DEFAULT_FILTER_OPTIONS = {
  创建人: TEAM_MEMBERS.slice(0, 4).map((member) => ({ label: member.name, value: member.name })),
  状态: STATUS_OPTIONS.map((item) => ({ label: item.label, value: item.label })),
  '我创建的': [
    { label: '是', value: 'yes' },
    { label: '否', value: 'no' },
  ],
};

const UPDATED_AT_POOL = [
  '2026-04-21 10:30:00',
  '2026-04-20 18:45:00',
  '2026-04-19 14:12:00',
  '2026-04-18 09:20:00',
  '2026-04-17 16:05:00',
  '2026-04-16 11:08:00',
];

function makeCreator(index) {
  const base = CREATOR_POOL[index % CREATOR_POOL.length];
  return {
    name: base.name,
    avatarType: 'image',
    avatarSrc: base.avatarSrc,
    avatarAlt: `${base.name}头像`,
  };
}

function makeStatus(index) {
  return STATUS_OPTIONS[index % STATUS_OPTIONS.length];
}

function fallbackFilterOptions(label) {
  return ['选项一', '选项二', '选项三'].map((suffix) => ({
    label: `${label}${suffix}`,
    value: `${label}-${suffix}`,
  }));
}

function getFilterOptions(label, options) {
  if (Array.isArray(options) && options.length > 0) return options;
  return DEFAULT_FILTER_OPTIONS[label] || fallbackFilterOptions(label);
}

function normalizeFilterItem(item) {
  if (typeof item === 'string') {
    return {
      label: item,
      options: getFilterOptions(item),
    };
  }

  if (!item || typeof item !== 'object') return null;
  const label = item.label;
  if (!label) return null;

  return {
    ...item,
    options: getFilterOptions(label, item.options),
  };
}

/**
 * 把"业务原始数据"批量套上 mock 的创建人 / 状态 / 更新时间 / 操作按钮，
 * 形成 Table 可直接消费的 dataSource。
 *
 * @param {string} keyPrefix — 行 id 前缀（建议跟模板 key 一致，便于 React diff）
 * @param {Array<{name: string, tag: string, desc: string}>} list — 业务原始数据
 */
export function buildListDataSource(keyPrefix, list) {
  if (!Array.isArray(list)) return [];
  return list.map((item, index) => ({
    id: `${keyPrefix}-${index}`,
    name: item.name,
    tag: [{ label: item.tag, variant: 'white' }],
    desc: item.desc,
    creator: makeCreator(index),
    status: makeStatus(index),
    updatedAt: UPDATED_AT_POOL[index % UPDATED_AT_POOL.length],
    actions: ACTION_BUTTONS.map((action) => ({ ...action, onClick: () => {} })),
  }));
}

/**
 * 页面标题栏（白卡内、子 Tab 之下）
 * 结构：左侧 FormTitle level-1（默认无 titleSuffix）；右侧可选 actions。
 * 业务上下文胶囊仅当显式传入 `contextLabel` 时展示，基础页面框架示例默认不传。
 */
export function PageHeader({ title, contextLabel, actions }) {
  const suffix = contextLabel ? (
    <span
      className="inline-flex shrink-0 items-center justify-center rounded-full text-blueGrey-700 whitespace-nowrap"
      style={{
        background: 'var(--color-fill, rgba(45,66,107,0.06))',
        padding: '6px 12px',
        fontSize: '12px',
        lineHeight: '16px',
      }}
    >
      {contextLabel}
    </span>
  ) : null;

  return (
    <div className="flex min-w-0 shrink-0 items-center justify-between gap-3" style={{ minHeight: '36px' }}>
      <FormTitle
        variant="level-1"
        title={title}
        titleSuffix={suffix}
        className="min-w-[120px] flex-1"
      />
      {actions && (
        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
          {actions}
        </div>
      )}
    </div>
  );
}

/**
 * 筛选栏（白卡内、标题栏之下）
 * 结构：左侧固定 240px 搜索框 + 一组标准 Filter 基础组件
 *       + 1 个标准 Filter"我创建的"。
 *
 * @param {Array<string|{label:string,options?:Array}>} filters — 下拉筛选项配置
 * @param {string} [checkboxLabel='我创建的'] — 末尾"我创建的"筛选项文案；传 null 则隐藏
 */
export function FilterBar({ filters = [], checkboxLabel = '我创建的' }) {
  const filterItems = filters.map(normalizeFilterItem).filter(Boolean);
  const ownerFilter = checkboxLabel
    ? normalizeFilterItem({ label: checkboxLabel, options: DEFAULT_FILTER_OPTIONS[checkboxLabel] })
    : null;

  return (
    <div className="flex items-center shrink-0 flex-wrap" style={{ gap: '8px' }}>
      <Input
        placeholder="搜索"
        prefix={<Icon name="search-md-stroked" />}
        className="shrink-0"
        style={{ flex: '0 0 240px', '--size-input-width': '240px' }}
      />
      {filterItems.map((item) => (
        <Filter key={item.label} {...item} />
      ))}
      {ownerFilter && <Filter key={ownerFilter.label} {...ownerFilter} />}
    </div>
  );
}

/** 列表页首屏 loading 演示：模板预览默认 900ms 后展示真实数据 */
export function useListInitialLoading(delayMs = 900) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), delayMs);
    return () => clearTimeout(timer);
  }, [delayMs]);

  return loading;
}
