erp/apps/web/src/pages/PluginCRUDPage.tsx

import { useEffect, useState, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  DatePicker,
  Switch,
  Select,
  Tag,
  message,
  Popconfirm,
  Drawer,
  Descriptions,
  Segmented,
  Timeline,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ReloadOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import {
  listPluginData,
  createPluginData,
  updatePluginData,
  deletePluginData,
  type PluginDataListOptions,
} from '../api/pluginData';
import EntitySelect from '../components/EntitySelect';
import {
  getPluginSchema,
  type PluginFieldSchema,
  type PluginEntitySchema,
  type PluginPageSchema,
  type PluginSectionSchema,
} from '../api/plugins';
import { evaluateVisibleWhen } from '../utils/exprEvaluator';

const { Search } = Input;
const { TextArea } = Input;

interface PluginCRUDPageProps {
  /** 如果从 tabs/detail 页面内嵌使用，通过 props 传入配置 */
  pluginIdOverride?: string;
  entityOverride?: string;
  filterField?: string;
  filterValue?: string;
  enableViews?: string[];
  /** detail 页面内嵌时使用 compact 模式 */
  compact?: boolean;
}

export default function PluginCRUDPage({
  pluginIdOverride,
  entityOverride,
  filterField,
  filterValue,
  enableViews: enableViewsProp,
  compact,
}: PluginCRUDPageProps = {}) {
  const routeParams = useParams<{ pluginId: string; entityName: string }>();
  const pluginId = pluginIdOverride || routeParams.pluginId || '';
  const entityName = entityOverride || routeParams.entityName || '';

  const [records, setRecords] = useState<Record<string, unknown>[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [fields, setFields] = useState<PluginFieldSchema[]>([]);
  const [displayName, setDisplayName] = useState(entityName || '');
  const [modalOpen, setModalOpen] = useState(false);
  const [editRecord, setEditRecord] = useState<Record<string, unknown> | null>(null);
  const [form] = Form.useForm();
  const [formValues, setFormValues] = useState<Record<string, unknown>>({});

  // 筛选/搜索/排序 state
  const [searchText, setSearchText] = useState('');
  const [filters, setFilters] = useState<Record<string, string>>({});
  const [sortBy, setSortBy] = useState<string | undefined>();
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');

  // 视图切换
  const [viewMode, setViewMode] = useState<string>('table');

  // 详情 Drawer
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailRecord, setDetailRecord] = useState<Record<string, unknown> | null>(null);
  const [detailSections, setDetailSections] = useState<PluginSectionSchema[]>([]);
  const [allEntities, setAllEntities] = useState<PluginEntitySchema[]>([]);
  const [allPages, setAllPages] = useState<PluginPageSchema[]>([]);

  // 从 fields 中提取 filterable 字段
  const filterableFields = fields.filter((f) => f.filterable);

  // 查找是否有 detail 页面
  const hasDetailPage = allPages.some(
    (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
  );

  // 可用视图
  const enableViews = enableViewsProp ||
    (() => {
      const page = allPages.find(
        (p) => p.type === 'crud' && 'entity' in p && p.entity === entityName,
      );
      return (page as { enable_views?: string[] })?.enable_views || ['table'];
    })();

  // 加载 schema
  useEffect(() => {
    if (!pluginId) return;
    const abortController = new AbortController();

    async function loadSchema() {
      try {
        const schema = await getPluginSchema(pluginId!);
        if (abortController.signal.aborted) return;
        const entities: PluginEntitySchema[] = (schema as { entities?: PluginEntitySchema[] }).entities || [];
        setAllEntities(entities);
        const entity = entities.find((e) => e.name === entityName);
        if (entity) {
          setFields(entity.fields);
          setDisplayName(entity.display_name || entityName || '');
        }
        const ui = (schema as { ui?: { pages: PluginPageSchema[] } }).ui;
        if (ui?.pages) {
          setAllPages(ui.pages);
          const detailPage = ui.pages.find(
            (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
          );
          if (detailPage && 'sections' in detailPage) {
            setDetailSections(detailPage.sections);
          }
        }
      } catch {
        message.warning('Schema 加载失败，部分功能不可用');
      }
    }

    loadSchema();
    return () => abortController.abort();
  }, [pluginId, entityName]);

  const fetchData = useCallback(
    async (p = page, overrides?: { search?: string; sort_by?: string; sort_order?: 'asc' | 'desc' }) => {
      if (!pluginId || !entityName) return;
      setLoading(true);
      try {
        const options: PluginDataListOptions = {};
        const mergedFilters = { ...filters };
        if (filterField && filterValue) {
          mergedFilters[filterField] = filterValue;
        }
        if (Object.keys(mergedFilters).length > 0) {
          options.filter = mergedFilters;
        }
        const effectiveSearch = overrides?.search ?? searchText;
        if (effectiveSearch) options.search = effectiveSearch;
        const effectiveSortBy = overrides?.sort_by ?? sortBy;
        const effectiveSortOrder = overrides?.sort_order ?? sortOrder;
        if (effectiveSortBy) {
          options.sort_by = effectiveSortBy;
          options.sort_order = effectiveSortOrder;
        }
        const result = await listPluginData(pluginId, entityName, p, 20, options);
        setRecords(
          result.data.map((r) => ({ ...r.data, _id: r.id, _version: r.version })),
        );
        setTotal(result.total);
      } catch {
        message.error('加载数据失败');
      }
      setLoading(false);
    },
    [pluginId, entityName, page, filters, searchText, sortBy, sortOrder, filterField, filterValue],
  );

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 筛选变化
  const handleFilterChange = (fieldName: string, value: string | undefined) => {
    const newFilters = { ...filters };
    if (value) {
      newFilters[fieldName] = value;
    } else {
      delete newFilters[fieldName];
    }
    setFilters(newFilters);
    setPage(1);
    // 直接触发重新查询
    fetchData(1);
  };

  const handleSubmit = async (values: Record<string, unknown>) => {
    if (!pluginId || !entityName) return;
    const { _id, _version, ...data } = values as Record<string, unknown> & {
      _id?: string;
      _version?: number;
    };

    try {
      if (editRecord) {
        await updatePluginData(
          pluginId,
          entityName,
          editRecord._id as string,
          data,
          editRecord._version as number,
        );
        message.success('更新成功');
      } else {
        await createPluginData(pluginId, entityName, data);
        message.success('创建成功');
      }
      setModalOpen(false);
      setEditRecord(null);
      fetchData();
    } catch {
      message.error('操作失败');
    }
  };

  const handleDelete = async (record: Record<string, unknown>) => {
    if (!pluginId || !entityName) return;
    try {
      await deletePluginData(pluginId, entityName, record._id as string);
      message.success('删除成功');
      fetchData();
    } catch {
      message.error('删除失败');
    }
  };

  // 动态生成列
  const columns = [
    ...fields.slice(0, 5).map((f) => ({
      title: f.display_name || f.name,
      dataIndex: f.name,
      key: f.name,
      ellipsis: true,
      sorter: f.sortable ? true : undefined,
      render: (val: unknown) => {
        if (typeof val === 'boolean') return val ? <Tag color="green">是</Tag> : <Tag>否</Tag>;
        return String(val ?? '-');
      },
    })),
    {
      title: '操作',
      key: 'action',
      width: hasDetailPage ? 200 : 150,
      render: (_: unknown, record: Record<string, unknown>) => (
        <Space size="small">
          {hasDetailPage && (
            <Button
              size="small"
              icon={<EyeOutlined />}
              onClick={() => {
                setDetailRecord(record);
                setDetailOpen(true);
              }}
            >
              详情
            </Button>
          )}
          <Button
            size="small"
            icon={<EditOutlined />}
            onClick={() => {
              setEditRecord(record);
              form.setFieldsValue(record);
              setFormValues(record);
              setModalOpen(true);
            }}
          >
            编辑
          </Button>
          <Popconfirm title="确定删除?" onConfirm={() => handleDelete(record)}>
            <Button size="small" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 动态生成表单字段
  const renderFormField = (field: PluginFieldSchema) => {
    const widget = field.ui_widget || field.field_type;
    switch (widget) {
      case 'number':
      case 'integer':
      case 'float':
      case 'decimal':
        return <InputNumber style={{ width: '100%' }} />;
      case 'boolean':
        return <Switch />;
      case 'date':
      case 'datetime':
        return <DatePicker showTime={widget === 'datetime'} style={{ width: '100%' }} />;
      case 'select':
        return (
          <Select>
            {(field.options || []).map((opt) => (
              <Select.Option key={String(opt.value)} value={opt.value}>
                {opt.label}
              </Select.Option>
            ))}
          </Select>
        );
      case 'textarea':
        return <TextArea rows={3} />;
      case 'entity_select':
        return (
          <EntitySelect
            pluginId={pluginId}
            entity={field.ref_entity!}
            labelField={field.ref_label_field || 'name'}
            searchFields={field.ref_search_fields}
            value={formValues[field.name] as string | undefined}
            onChange={(v) => form.setFieldValue(field.name, v)}
            cascadeFrom={field.cascade_from}
            cascadeFilter={field.cascade_filter}
            cascadeValue={
              field.cascade_from
                ? (formValues[field.cascade_from] as string | undefined)
                : undefined
            }
            placeholder={field.display_name}
          />
        );
      default:
        return <Input />;
    }
  };

  // Timeline 视图渲染
  const renderTimeline = () => {
    const dateField = fields.find((f) => f.field_type === 'DateTime' || f.field_type === 'date');
    const titleField = fields.find((f) => f.searchable)?.name || fields[1]?.name;
    const contentField = fields.find((f) => f.ui_widget === 'textarea')?.name;

    return (
      <Timeline
        items={records.map((record) => ({
          children: (
            <div>
              {titleField && (
                <p>
                  <strong>{String(record[titleField] ?? '-')}</strong>
                </p>
              )}
              {contentField && <p>{String(record[contentField] ?? '-')}</p>}
              {dateField && (
                <p style={{ color: '#999', fontSize: 12 }}>
                  {String(record[dateField.name] ?? '-')}
                </p>
              )}
            </div>
          ),
        }))}
      />
    );
  };

  // 详情 Drawer 渲染
  const renderDetailDrawer = () => {
    if (!detailRecord) return null;

    return (
      <Drawer
        title={displayName + ' 详情'}
        open={detailOpen}
        onClose={() => {
          setDetailOpen(false);
          setDetailRecord(null);
        }}
        width={640}
      >
        {detailSections.length > 0 ? (
          detailSections.map((section, idx) => {
            if (section.type === 'fields') {
              return (
                <div key={idx} style={{ marginBottom: 24 }}>
                  <h4>{section.label}</h4>
                  <Descriptions column={2} bordered size="small">
                    {section.fields.map((fieldName) => {
                      const fieldDef = fields.find((f) => f.name === fieldName);
                      const val = detailRecord[fieldName];
                      return (
                        <Descriptions.Item
                          key={fieldName}
                          label={fieldDef?.display_name || fieldName}
                        >
                          {typeof val === 'boolean' ? (
                            val ? (
                              <Tag color="green">是</Tag>
                            ) : (
                              <Tag>否</Tag>
                            )
                          ) : (
                            String(val ?? '-')
                          )}
                        </Descriptions.Item>
                      );
                    })}
                  </Descriptions>
                </div>
              );
            }
            if (section.type === 'crud') {
              const secEntity = allEntities.find((e) => e.name === section.entity);
              return (
                <div key={idx} style={{ marginBottom: 24 }}>
                  <h4>{section.label}</h4>
                  {secEntity && (
                    <PluginCRUDPage
                      pluginIdOverride={pluginId}
                      entityOverride={section.entity}
                      filterField={section.filter_field}
                      filterValue={String(detailRecord._id ?? '')}
                      enableViews={section.enable_views}
                      compact
                    />
                  )}
                </div>
              );
            }
            return null;
          })
        ) : (
          // 没有 sections 配置时，默认展示所有字段
          <Descriptions column={2} bordered size="small">
            {fields.map((field) => {
              const val = detailRecord[field.name];
              return (
                <Descriptions.Item key={field.name} label={field.display_name || field.name}>
                  {typeof val === 'boolean' ? (
                    val ? (
                      <Tag color="green">是</Tag>
                    ) : (
                      <Tag>否</Tag>
                    )
                  ) : (
                    String(val ?? '-')
                  )}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
        )}
      </Drawer>
    );
  };

  return (
    <div style={compact ? { padding: 0 } : { padding: 24 }}>
      {!compact && (
        <div
          style={{
            marginBottom: 16,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <h2 style={{ margin: 0 }}>{displayName}</h2>
          <Space>
            {enableViews.length > 1 && (
              <Segmented
                options={enableViews.map((v) => ({
                  label: v === 'table' ? '表格' : v === 'timeline' ? '时间线' : v,
                  value: v,
                }))}
                value={viewMode}
                onChange={(val) => setViewMode(val as string)}
              />
            )}
            <Button
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                setEditRecord(null);
                form.resetFields();
                setFormValues({});
                setModalOpen(true);
              }}
            >
              新增
            </Button>
            <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
              刷新
            </Button>
          </Space>
        </div>
      )}

      {/* 搜索和筛选栏 */}
      {!compact && (
        <Space style={{ marginBottom: 16 }} wrap>
          {fields.some((f) => f.searchable) && (
            <Search
              placeholder="搜索..."
              allowClear
              style={{ width: 240 }}
              onSearch={(value) => {
                setSearchText(value);
                setPage(1);
                fetchData(1, { search: value });
              }}
            />
          )}
          {filterableFields.map((field) => (
            <Select
              key={field.name}
              placeholder={field.display_name || field.name}
              allowClear
              style={{ width: 150 }}
              options={field.options || []}
              onChange={(value) => handleFilterChange(field.name, value)}
            />
          ))}
        </Space>
      )}

      {viewMode === 'table' || enableViews.length <= 1 ? (
        <Table
          columns={columns}
          dataSource={records}
          rowKey="_id"
          loading={loading}
          size={compact ? 'small' : undefined}
          onChange={(_pagination, _filters, sorter) => {
            if (!Array.isArray(sorter) && sorter.field) {
              const newSortBy = String(sorter.field);
              const newSortOrder = sorter.order === 'ascend' ? 'asc' as const : 'desc' as const;
              setSortBy(newSortBy);
              setSortOrder(newSortOrder);
              setPage(1);
              fetchData(1, { sort_by: newSortBy, sort_order: newSortOrder });
            } else if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
              setSortBy(undefined);
              setSortOrder('desc');
              setPage(1);
              fetchData(1, { sort_by: undefined, sort_order: undefined });
            }
          }}
          pagination={
            compact
              ? { pageSize: 5, showTotal: (t) => `共 ${t} 条` }
              : {
                  current: page,
                  total,
                  pageSize: 20,
                  onChange: (p) => setPage(p),
                  showTotal: (t) => `共 ${t} 条`,
                }
          }
        />
      ) : viewMode === 'timeline' ? (
        renderTimeline()
      ) : null}

      {/* 新增/编辑弹窗 */}
      <Modal
        title={editRecord ? '编辑' : '新增'}
        open={modalOpen}
        onCancel={() => {
          setModalOpen(false);
          setEditRecord(null);
          setFormValues({});
        }}
        onOk={() => form.submit()}
        destroyOnClose
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          onValuesChange={(_, allValues) => setFormValues(allValues)}
        >
          {fields.map((field) => {
            // visible_when 条件显示
            const visible = evaluateVisibleWhen(field.visible_when, formValues);
            if (!visible) return null;

            return (
              <Form.Item
                key={field.name}
                name={field.name}
                label={field.display_name || field.name}
                rules={
                  field.required
                    ? [{ required: true, message: `请输入${field.display_name || field.name}` }]
                    : []
                }
                valuePropName={field.field_type === 'boolean' ? 'checked' : 'value'}
              >
                {renderFormField(field)}
              </Form.Item>
            );
          })}
        </Form>
      </Modal>

      {/* 详情 Drawer */}
      {renderDetailDrawer()}
    </div>
  );
}