import { Button } from 'antd';
import { ArrowLeftOutlined, FileTextOutlined, SaveOutlined, RocketOutlined } from '@ant-design/icons';

interface HeaderProps {
  isNew: boolean;
  currentName?: string;
  navigate: any;
  autoSaveStatus: 'saved' | 'dirty' | 'saving' | 'error';
  saving: boolean;
  onSave: () => Promise<void>;
}

export default function Header({ isNew, currentName, navigate, autoSaveStatus, saving, onSave }: HeaderProps) {
  return (
    <header className="monica-header agent-editor-header">
      <div className="flex items-center gap-4">
        <Button
          type="text"
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate('/agents')}
          className="hover:bg-gray-100"
          style={{ borderRadius: 12, width: 40, height: 40 }}
        />
        <div>
          <div className="flex items-center gap-2">
            <RocketOutlined style={{ color: 'var(--color-brand)', fontSize: 18 }} />
            <span className="font-bold text-lg text-gray-800" style={{ color: 'var(--color-text)' }}>
              {isNew ? '创建新智能体' : currentName || ''}
            </span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginTop: 2 }}>
            围绕个性化、能力配置与实时预览，搭建一个更完整的 AI 工作台。
          </div>
        </div>
      </div>
      <div className="flex items-center gap-4">
        <span className="text-xs text-gray-400" style={{ color: 'var(--color-text-tertiary)' }}>
          {autoSaveStatus === 'saving'
            ? '正在保存...'
            : autoSaveStatus === 'dirty'
              ? '有未保存更改'
              : autoSaveStatus === 'error'
                ? '保存失败'
                : '已保存'}
        </span>
        <Button icon={<FileTextOutlined />} style={{ borderRadius: 12, height: 40 }}>
          文档
        </Button>
        <Button
          type="primary"
          icon={<SaveOutlined />}
          loading={saving}
          onClick={onSave}
          style={{ borderRadius: 12, height: 40, paddingInline: 16, fontWeight: 600 }}
        >
          保存
        </Button>
      </div>
    </header>
  );
}
