import { Form, Input, Modal, Button, Upload } from 'antd';
import { RocketOutlined, UploadOutlined } from '@ant-design/icons';
import { DEFAULT_AVATAR, PRESET_AVATARS, isImageUrl } from '../constants';

interface InitModalProps {
  open: boolean;
  onCancel: () => void;
  onConfirm: (values: any) => Promise<void>;
  avatarUploading: boolean;
  selectedAvatar: string;
  setSelectedAvatar: (url: string) => void;
  agentName: string;
  setAgentName: (name: string) => void;
  saving: boolean;
  beforeUploadInitAvatar: (file: any) => Promise<boolean>;
}

export default function InitModal({
  open,
  onCancel,
  onConfirm,
  avatarUploading,
  selectedAvatar,
  setSelectedAvatar,
  agentName,
  setAgentName,
  saving,
  beforeUploadInitAvatar,
}: InitModalProps) {
  const [initForm] = Form.useForm();

  return (
    <Modal
      title={null}
      open={open}
      onCancel={onCancel}
      footer={null}
      width={720}
      centered
      maskClosable={false}
      destroyOnHidden
    >
      <div className="py-2">
        <div style={{ marginBottom: 18 }}>
          <div
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '6px 12px',
              borderRadius: 999,
              background: 'rgba(8, 145, 178, 0.08)',
              color: 'var(--color-brand)',
              fontSize: 12,
              fontWeight: 600,
              marginBottom: 14,
            }}
          >
            <RocketOutlined />
            第一步 · 定义智能体形象
          </div>
          <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--color-text)', marginBottom: 8, letterSpacing: '-0.02em' }}>
            先给你的智能体一个更完整的开场
          </div>
          <div style={{ fontSize: 14.5, color: 'var(--color-text-secondary)', lineHeight: 1.75 }}>
            先决定它的形象、名字和一句话定位。确认后会进入三栏工作台，继续完成个性化、能力配置和实时预览。
          </div>
        </div>

        <div className="agent-editor-modal-hero">
          <div
            className="agent-editor-modal-card"
            style={{
              padding: '22px 20px',
              background: 'linear-gradient(180deg, rgba(236,253,245,0.96) 0%, rgba(240,249,255,0.96) 100%)',
            }}
          >
            <div
              className="rounded-full flex items-center justify-center text-3xl text-white font-bold shadow-xl relative transition-all duration-500 overflow-hidden ring-4 ring-white mx-auto"
              style={{
                width: 88,
                height: 88,
                background: isImageUrl(selectedAvatar) ? '#f3f4f6' : selectedAvatar,
              }}
            >
              {isImageUrl(selectedAvatar) ? (
                <img src={selectedAvatar} className="w-full h-full object-cover" alt="avatar" />
              ) : (
                (agentName?.charAt(0) || '?').toUpperCase()
              )}
            </div>
            <div style={{ textAlign: 'center', marginTop: 16 }}>
              <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--color-text)', marginBottom: 4 }}>
                {agentName || '你的新智能体'}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.7 }}>
                这里会实时映射你输入的名字与选择的形象。
              </div>
            </div>
          </div>

          <Form
            form={initForm}
            layout="vertical"
            onFinish={onConfirm}
            onValuesChange={(changed) => {
              if (changed.name !== undefined) setAgentName(changed.name);
            }}
            className="agent-editor-modal-card"
            style={{ padding: 20 }}
          >
            <Form.Item
              name="name"
              label={
                <span className="text-gray-500 font-medium" style={{ color: 'var(--color-text-secondary)' }}>
                  智能体名称
                </span>
              }
              rules={[{ required: true, message: '请输入智能体名称' }]}
            >
              <Input
                placeholder="给你的智能体起个名字"
                size="large"
                autoFocus
                className="rounded-xl h-12 border-gray-200 focus:border-cyan-500"
              />
            </Form.Item>

            <Form.Item
              name="description"
              label={
                <span className="text-gray-500 font-medium" style={{ color: 'var(--color-text-secondary)' }}>
                  描述（选填）
                </span>
              }
            >
              <Input.TextArea
                placeholder="介绍一下这个智能体是做什么的..."
                rows={3}
                className="rounded-xl border-gray-200 focus:border-cyan-500"
              />
            </Form.Item>

            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
              {['客服助理', '内容创作', '数据分析', '私人教练'].map((label) => (
                <span
                  key={label}
                  onClick={() => initForm.setFieldsValue({ description: label })}
                  style={{
                    padding: '6px 10px',
                    borderRadius: 999,
                    background: 'var(--color-surface-2)',
                    color: 'var(--color-text-secondary)',
                    fontSize: 12.5,
                    cursor: 'pointer',
                    transition: 'all 0.2s',
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = 'var(--color-border)';
                    e.currentTarget.style.color = 'var(--color-text)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = 'var(--color-surface-2)';
                    e.currentTarget.style.color = 'var(--color-text-secondary)';
                  }}
                >
                  {label}
                </span>
              ))}
            </div>

            <div className="flex gap-4 pt-2">
              <Button
                onClick={onCancel}
                className="flex-1 h-12 rounded-xl border-gray-200 text-gray-500 font-semibold hover:bg-gray-50"
              >
                取消
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                loading={saving}
                className="flex-1 h-12 rounded-xl border-none font-semibold"
              >
                确认创建
              </Button>
            </div>
          </Form>
        </div>

        <div>
          <div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest mb-3 px-1">
            选择你的智能体形象
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12, gap: 12 }}>
            <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)' }}>
              默认会使用系统头像，你也可以上传自己的图片替换。
            </div>
            <Upload accept="image/png,image/jpeg,image/webp,image/gif" showUploadList={false} beforeUpload={beforeUploadInitAvatar}>
              <Button icon={<UploadOutlined />} loading={avatarUploading} style={{ borderRadius: 10 }}>
                上传图片
              </Button>
            </Upload>
          </div>
          <div className="agent-editor-avatar-grid monica-scrollbar">
            {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
              <div
                key={url}
                onClick={() => setSelectedAvatar(url)}
                className={`relative aspect-square rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
                style={{ borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
              >
                <img src={url} className="w-full h-full object-cover" alt="preset" />
                {selectedAvatar === url && (
                  <div
                    className="absolute inset-0 flex items-center justify-center"
                    style={{ background: 'rgba(8, 145, 178, 0.10)' }}
                  >
                    <div className="bg-white rounded-full p-0.5 shadow-sm">
                      <div className="w-2 h-2 rounded-full" style={{ background: 'var(--color-brand)' }} />
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Modal>
  );
}