import { Button, Collapse, Form, Input, List, Popconfirm, Tag } from 'antd';
import { DatabaseOutlined, ToolOutlined } from '@ant-design/icons';
import { Agent } from '../../../../api';
import { STATUS_TAG } from '../../constants';

interface KnowledgeSettingsPanelProps {
  agent: Agent | null;
  beforeUploadKnowledge: (file: any) => Promise<boolean>;
  onDeleteKnowledge: (fileId: string) => Promise<void>;
}

export default function KnowledgeSettingsPanel({
  agent,
  beforeUploadKnowledge,
  onDeleteKnowledge,
}: KnowledgeSettingsPanelProps) {
  return (
    <Collapse
      ghost
      expandIconPosition="end"
      className="monica-collapse"
      items={[
        {
          key: 'knowledge',
          label: (
            <div className="agent-editor-collapse-label">
              <DatabaseOutlined className="agent-editor-label-icon" />
              知识库 ({agent?.knowledge?.length ?? 0})
            </div>
          ),
          children: (
            <div className="px-1">
              <div className="flex justify-between items-center mb-4">
                <span className="text-xs text-gray-500">上传文档以增强 AI 知识</span>
                <Input
                  type="file"
                  multiple
                  className="agent-editor-file-input"
                  id="knowledge-upload"
                  onChange={async (e) => {
                    const files = e.target.files;
                    if (!files) return;
                    for (let i = 0; i < files.length; i++) {
                      await beforeUploadKnowledge(files[i]);
                    }
                  }}
                />
                <Button
                  type="primary"
                  size="small"
                  ghost
                  icon={<DatabaseOutlined />}
                  className="agent-editor-small-action"
                  onClick={() => document.getElementById('knowledge-upload')?.click()}
                >
                  添加
                </Button>
              </div>
              <List
                size="small"
                dataSource={agent?.knowledge ?? []}
                renderItem={(item) => (
                  <List.Item
                    className="bg-white mb-2 rounded-lg border border-gray-100 p-2"
                    actions={[
                      <Popconfirm key="del" title="确认删除？" onConfirm={() => onDeleteKnowledge(item.id)}>
                        <Button type="text" danger size="small" className="agent-editor-danger-action">
                          删除
                        </Button>
                      </Popconfirm>,
                    ]}
                  >
                    <div className="flex flex-col gap-1 overflow-hidden">
                      <span className="text-sm font-medium truncate">{item.originalName}</span>
                      <span className="text-[10px] text-gray-400">
                        {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''} ·{' '}
                        {item.status === 'indexing' ? (
                          <Tag color="processing" className="m-0 text-[10px] px-1">
                            <span className="agent-editor-indexing-label">索引中…</span>
                          </Tag>
                        ) : (
                          <Tag color={STATUS_TAG[(item.status || 'ready')].color} className="m-0 text-[10px] px-1">
                            {STATUS_TAG[(item.status || 'ready')].text}
                          </Tag>
                        )}
                      </span>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          ),
        },
        {
          key: 'skills',
          collapsible: 'disabled',
          label: (
            <div className="agent-editor-disabled-label" title="技能功能开发中">
              <ToolOutlined />
              技能 & 工具 (开发中)
            </div>
          ),
          children: null,
        },
      ]}
    />
  );
}