import { Form, Input, Select, Collapse } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Team } from '../../../../api';

interface BasicSettingsPanelProps {
  teams: Team[];
}

export default function BasicSettingsPanel({ teams }: BasicSettingsPanelProps) {
  return (
    <Collapse
      ghost
      expandIconPosition="end"
      className="monica-collapse-bordered mb-4"
      defaultActiveKey={['basic']}
      items={[
        {
          key: 'basic',
          label: (
            <div className="agent-editor-collapse-label">
              <SettingOutlined className="agent-editor-label-icon" />
              基础设置
            </div>
          ),
          children: (
            <div className="space-y-4">
              <div className="flex items-center gap-4 mb-2">
                <div className="flex flex-col gap-1">
                  <span className="text-[11px] text-gray-400">名称、描述和可见性决定了这个智能体如何被理解和管理。</span>
                </div>
              </div>
              <Form.Item name="name" label="名称" rules={[{ required: true }]} className="mb-2">
                <Input placeholder="智能体名称" className="agent-editor-field-input" />
              </Form.Item>
              <Form.Item name="description" label="描述" className="mb-2">
                <Input.TextArea rows={3} placeholder="简短描述这个智能体是做什么的..." className="agent-editor-field-textarea" />
              </Form.Item>
              <div className="flex gap-2">
                <Form.Item name="visibility" label="可见性" className="flex-1 mb-0">
                  <Select
                    size="middle"
                    className="agent-editor-field-select"
                    options={[
                      { value: 'private', label: '🔒 私有' },
                      { value: 'team', label: '👥 团队' },
                      { value: 'public', label: '🌐 公开' },
                    ]}
                  />
                </Form.Item>
                <Form.Item name="teamId" label="归属团队" className="flex-1 mb-0" tooltip="团队功能暂未开放">
                  <Select
                    size="middle"
                    placeholder="暂不开放"
                    disabled
                    allowClear
                    className="agent-editor-field-select"
                    options={teams.map((t) => ({ value: t.id, label: t.name }))}
                  />
                </Form.Item>
              </div>
            </div>
          ),
        },
      ]}
    />
  );
}