import { Form, Input } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

interface PromptEditorProps {
  form: any;
  markDirty: () => void;
}

export default function PromptEditor({ form, markDirty }: PromptEditorProps) {
  return (
    <div className="flex-1 agent-editor-pane">
      <div className="agent-editor-pane-body">
        <div className="agent-editor-pane-header">
          <div>
            <h3 className="agent-editor-pane-title">个性化</h3>
            <p className="agent-editor-pane-subtitle">
              定义这个智能体的身份、语气、边界和输出规范，让它更像一个稳定的角色，而不是随机回复的模型。
            </p>
          </div>
          <span className="agent-editor-badge">
            <FileTextOutlined />
            System Prompt
          </span>
        </div>

        <div className="agent-editor-intro">
          <div className="agent-editor-intro-title">提示词是这个智能体最重要的灵魂设定</div>
          <div className="agent-editor-intro-text">
            可以从身份定位、擅长任务、回应风格、拒答边界和输出格式这五个维度去描述，让预览区的表现更稳定。
          </div>
        </div>

        <Form
          form={form}
          layout="vertical"
          onValuesChange={markDirty}
        >
          <div className="agent-editor-surface agent-editor-prompt-wrap">
            <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 10, paddingInline: 4 }}>
              建议写清楚角色设定、目标用户、语气和回答结构。
            </div>
            <div className="agent-editor-prompt">
              <Form.Item name="prompt" noStyle>
                <Input.TextArea
                  rows={30}
                  placeholder="在这里输入智能体的人设、技能、风格和输出规范..."
                  className="border-none focus:ring-0 bg-transparent p-4 font-mono text-sm leading-relaxed"
                  style={{ height: 'calc(100vh - 290px)', resize: 'none', borderRadius: 16 }}
                />
              </Form.Item>
            </div>
          </div>
          <div className="text-[11px] text-gray-400 mt-2 px-2" style={{ color: 'var(--color-text-tertiary)' }}>
            提示：写得越具体，预览区里的回答风格越稳定。
          </div>
        </Form>
      </div>
    </div>
  );
}