import React, { useState } from "react";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { useNavigate } from "react-router-dom";
import "./App.css";

export default function UserProfile() {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState({
    username: "示例用户",
    email: "user@example.com",
    company: "",
    school: "",
    birthday: "",
  });
  const [tempUserInfo, setTempUserInfo] = useState({ ...userInfo });

  const handleInputChange = (field, value) => {
    setTempUserInfo({ ...tempUserInfo, [field]: value });
  };

  const handleSave = () => {
    setUserInfo({ ...tempUserInfo });
    alert("信息已保存！");
  };

  const handleAvatarClick = () => {
    const avatarUrl = prompt("请输入头像的URL：");
    if (avatarUrl) {
      setTempUserInfo({ ...tempUserInfo, avatar: avatarUrl });
    }
  };

  return (
    <div className="container" style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%)', display: 'grid', gridTemplateColumns: '1fr 2fr', gridTemplateRows: 'auto 1fr', gap: '20px', padding: '40px' }}>
      {/* 左侧：用户资料 */}
      <div style={{ gridColumn: '1 / 2', gridRow: '1 / 3', display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 16 }}>
          <div onClick={handleAvatarClick} style={{ cursor: 'pointer', position: 'relative' }}>
            <AccountCircleIcon style={{ fontSize: 90, color: '#1a237e', marginBottom: 12 }} />
            {tempUserInfo.avatar && (
              <img
                src={tempUserInfo.avatar}
                alt="用户头像"
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: 90,
                  height: 90,
                  borderRadius: '50%',
                  objectFit: 'cover',
                }}
              />
            )}
          </div>
          <h2 style={{ color: '#1a237e', marginBottom: 0, fontSize: 24 }}>用户个人资料</h2>
        </div>
        <div className="card" style={{ padding: 28, width: '100%', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', flex: 1 }}>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>用户名：</b>
            <input
              type="text"
              value={tempUserInfo.username}
              onChange={(e) => handleInputChange("username", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邮箱：</b>
            <input
              type="email"
              value={tempUserInfo.email}
              onChange={(e) => handleInputChange("email", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>公司：</b>
            <input
              type="text"
              value={tempUserInfo.company}
              onChange={(e) => handleInputChange("company", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>学校：</b>
            <input
              type="text"
              value={tempUserInfo.school}
              onChange={(e) => handleInputChange("school", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>生日：</b>
            <input
              type="date"
              value={tempUserInfo.birthday}
              onChange={(e) => handleInputChange("birthday", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>密码：</b>
            <input
              type="password"
              value={tempUserInfo.password || ""}
              onChange={(e) => handleInputChange("password", e.target.value)}
              style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
            />
          </div>
          <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>性别：</b>
            <div style={{ position: 'relative', flex: 1 }}>
              <button
                onClick={() => setTempUserInfo({ ...tempUserInfo, showGenderOptions: !tempUserInfo.showGenderOptions })}
                style={{
                  width: '100%',
                  padding: '6px 10px',
                  borderRadius: 7,
                  border: '1px solid #b2b2b2',
                  textAlign: 'left',
                  backgroundColor: '#fff',
                  fontSize: 15,
                  cursor: 'pointer',
                }}
              >
                {tempUserInfo.gender || "性别"}
              </button>
              {tempUserInfo.showGenderOptions && (
                <ul
                  style={{
                    position: 'absolute',
                    top: '100%',
                    left: 0,
                    right: 0,
                    backgroundColor: '#fff',
                    border: '1px solid #b2b2b2',
                    borderRadius: 7,
                    listStyle: 'none',
                    margin: 0,
                    padding: 0,
                    zIndex: 10,
                  }}
                >
                  {["男", "女", "跨性别男", "跨性别女", "无性别"].map((option) => (
                    <li
                      key={option}
                      onClick={() => {
                        setTempUserInfo({ ...tempUserInfo, gender: option, showGenderOptions: false });
                      }}
                      style={{
                        padding: '6px 10px',
                        cursor: 'pointer',
                        borderBottom: '1px solid #e0e0e0',
                        backgroundColor: option === tempUserInfo.gender ? '#f0f0f0' : '#fff',
                      }}
                    >
                      {option}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
          <button
            onClick={handleSave}
            style={{
              marginTop: 20,
              padding: '10px 20px',
              backgroundColor: '#1a237e',
              color: '#fff',
              border: 'none',
              borderRadius: 7,
              cursor: 'pointer',
              fontSize: 16,
              alignSelf: 'center', // Center the button horizontally
            }}
            onMouseOver={(e) => (e.target.style.backgroundColor = '#0d1b5e')}
            onMouseOut={(e) => (e.target.style.backgroundColor = '#1a237e')}
          >
            保存
          </button>
        </div>
      </div>
      {/* 上传种子列表 */}
      <div style={{ gridColumn: '2 / 3', gridRow: '1 / 2', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18 }}>个人上传种子列表</h3>
        <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b2b2b2', fontSize: 18 }}>
          （此处显示上传种子列表）
        </div>
      </div>
      {/* 活跃度模块 */}
      <div style={{ gridColumn: '2 / 3', gridRow: '2 / 3', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18 }}>活跃度</h3>
        <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b2b2b2', fontSize: 18 }}>
          （此处显示活跃度信息）
        </div>
      </div>
    </div>
  );
}