import { Drawer, Descriptions, Tag } from 'antd';
import type { PluginFieldSchema, PluginEntitySchema, PluginSectionSchema } from '../../api/plugins';
import PluginCRUDPageInner from './PluginCRUDPageInner';

interface DetailDrawerProps {
  open: boolean;
  record: Record<string, unknown> | null;
  displayName: string;
  fields: PluginFieldSchema[];
  sections: PluginSectionSchema[];
  allEntities: PluginEntitySchema[];
  pluginId: string;
  entityName: string;
  onClose: () => void;
}

export default function DetailDrawer({
  open,
  record,
  displayName,
  fields,
  sections,
  allEntities,
  pluginId,
  entityName: _entityName,
  onClose,
}: DetailDrawerProps) {
  if (!record) return null;

  return (
    <Drawer
      title={displayName + ' 详情'}
      open={open}
      onClose={onClose}
      width={640}
    >
      {sections.length > 0 ? (
        sections.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 = record[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 && (
                  <PluginCRUDPageInner
                    pluginIdOverride={pluginId}
                    entityOverride={section.entity}
                    filterField={section.filter_field}
                    filterValue={String(record._id ?? '')}
                    enableViews={section.enable_views}
                    compact
                  />
                )}
              </div>
            );
          }
          return null;
        })
      ) : (
        <Descriptions column={2} bordered size="small">
          {fields.map((field) => {
            const val = record[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>
  );
}
