import React, { useState } from 'react';
import { Card, Form, Input, Button, Upload, Avatar, message } from 'antd';
import { UserOutlined, SaveOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { TextArea } = Input;

interface ProfileData {
  name: string;
  email: string;
  phone: string;
  position: string;
  department: string;
  bio: string;
  avatar: string;
}

const ProfileSettings: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [avatar, setAvatar] = useState<string>('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');

  const initialProfile: ProfileData = {
    name: 'John Doe',
    email: 'john.doe@example.com',
    phone: '+1 (123) 456-7890',
    position: 'Product Manager',
    department: 'Marketing',
    bio: 'Product manager with 5 years of experience in e-commerce.',
    avatar: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
  };

  const handleSubmit = async (values: any) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      message.success('个人设置已更新');
      setLoading(false);
    }, 1000);
  };

  const handleBack = () => {
    navigate('/settings');
  };

  const handleAvatarChange = (info: any) => {
    if (info.file.status === 'done') {
      // 模拟上传成功
      setAvatar('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
      message.success('头像上传成功');
    } else if (info.file.status === 'error') {
      message.error('头像上传失败');
    }
  };

  return (
    <div className="profile-settings">
      <div className="page-header">
        <h1>个人设置</h1>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
        >
          返回
        </Button>
      </div>

      <Card title="个人信息">
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={initialProfile}
        >
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24 }}>
            <Upload
              name="avatar"
              showUploadList={false}
              action="/api/upload"
              onChange={handleAvatarChange}
            >
              <Avatar size={100} icon={<UserOutlined />} src={avatar} />
            </Upload>
            <div style={{ marginLeft: 24 }}>
              <p>点击头像上传新的头像</p>
              <p style={{ color: '#999' }}>支持 JPG, PNG 格式，最大 2MB</p>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: '请输入姓名' }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>

            <Form.Item
              name="email"
              label="邮箱"
              rules={[{ required: true, message: '请输入邮箱' }]}
            >
              <Input placeholder="请输入邮箱" />
            </Form.Item>

            <Form.Item
              name="phone"
              label="电话"
              rules={[{ required: true, message: '请输入电话' }]}
            >
              <Input placeholder="请输入电话" />
            </Form.Item>

            <Form.Item
              name="position"
              label="职位"
              rules={[{ required: true, message: '请输入职位' }]}
            >
              <Input placeholder="请输入职位" />
            </Form.Item>

            <Form.Item
              name="department"
              label="部门"
              rules={[{ required: true, message: '请输入部门' }]}
            >
              <Input placeholder="请输入部门" />
            </Form.Item>
          </div>

          <Form.Item
            name="bio"
            label="个人简介"
          >
            <TextArea rows={4} placeholder="请输入个人简介" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
              保存
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title="密码设置" style={{ marginTop: 24 }}>
        <Form
          layout="vertical"
        >
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Form.Item
              name="currentPassword"
              label="当前密码"
              rules={[{ required: true, message: '请输入当前密码' }]}
            >
              <Input.Password placeholder="请输入当前密码" />
            </Form.Item>

            <Form.Item
              name="newPassword"
              label="新密码"
              rules={[{ required: true, message: '请输入新密码' }]}
            >
              <Input.Password placeholder="请输入新密码" />
            </Form.Item>

            <Form.Item
              name="confirmPassword"
              label="确认密码"
              rules={[{ required: true, message: '请确认新密码' }]}
            >
              <Input.Password placeholder="请确认新密码" />
            </Form.Item>
          </div>

          <Form.Item>
            <Button type="primary" icon={<SaveOutlined />}>
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default ProfileSettings;