import React, { useState, useEffect } from 'react';
import { View, Text, Image, ScrollView, Button, Input, Textarea } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';
import GuideBar from '@/components/GuideBar';
import { UserInfo } from '@/components/UserInfo';
import { UserService } from '@/services/userService';

const EditProfilePage: React.FC = () => {
  // 用户信息状态
  const [user_info, setUserInfo] = useState<UserInfo>({
    id: '1',
    nickname: '188的王晨',
    avatar: require('../../../static/userInfo/default_avatar.svg'),
    bio: '网球入坑两年，偏好双打，正手进攻型选手\n平时在张江、世纪公园附近活动，欢迎约球！\n不卷分数，但认真对待每一拍，每一场球都想打得开心。有时候也会带相机来拍点照片📸',
    location: '上海黄浦',
    occupation: '互联网从业者',
    ntrp_level: 'NTRP 4.0'
  });

  // 表单状态
  const [form_data, setFormData] = useState({
    nickname: user_info.nickname,
    bio: user_info.bio,
    location: user_info.location,
    occupation: user_info.occupation,
    ntrp_level: user_info.ntrp_level,
    phone: '', // 新增手机号字段
    gender: '' // 新增性别字段
  });

  // 页面加载时初始化数据
  useEffect(() => {
    // 这里应该从store或API获取当前用户信息
    // const currentUser = getUserInfo();
    // setUserInfo(currentUser);
    // setFormData(currentUser);
  }, []);

  // 处理输入变化
  const handle_input_change = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  // 处理头像上传
  const handle_avatar_upload = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: async (res) => {
        const tempFilePath = res.tempFilePaths[0];
        try {
          const avatar_url = await UserService.upload_avatar(tempFilePath);
          setUserInfo(prev => ({ ...prev, avatar: avatar_url }));
          Taro.showToast({
            title: '头像上传成功',
            icon: 'success'
          });
        } catch (error) {
          console.error('头像上传失败:', error);
          Taro.showToast({
            title: '头像上传失败',
            icon: 'none'
          });
        }
      }
    });
  };

  // 处理保存
  const handle_save = async () => {
    // 验证表单
    if (!form_data.nickname.trim()) {
      Taro.showToast({
        title: '请输入昵称',
        icon: 'none'
      });
      return;
    }

    try {
      await UserService.save_user_info(form_data);
      Taro.showToast({
        title: '保存成功',
        icon: 'success'
      });
      Taro.navigateBack();
    } catch (error) {
      console.error('保存失败:', error);
      Taro.showToast({
        title: '保存失败',
        icon: 'none'
      });
    }
  };

  // 处理返回
  const handle_back = () => {
    Taro.navigateBack();
  };

  return (
    <View className="edit_profile_page">
      {/* 主要内容 */}
      <ScrollView className="main_content" scrollY>
        {/* 头部操作栏 */}
        <View className="header_section">
          <Button className="back_button" onClick={handle_back}>
            <Image
              className="back_icon"
              src={require('../../../static/detail/icon-arrow-left.svg')}
            />
          </Button>
          <Text className="page_title">编辑资料</Text>
          <Button className="save_button" onClick={handle_save}>
            <Text className="save_text">保存</Text>
          </Button>
        </View>

        {/* 头像编辑区域 */}
        <View className="avatar_section">
          <View className="avatar_container" onClick={handle_avatar_upload}>
            <Image className="avatar" src={user_info.avatar} />
            <View className="avatar_overlay">
              <Image
                className="upload_icon"
                src={require('../../../static/publishBall/icon-upload.svg')}
              />
            </View>
          </View>
          <Text className="avatar_tip">点击更换头像</Text>
        </View>

        {/* 基本信息编辑 */}
        <View className="form_section">
          {/* 昵称 */}
          <View className="form_item">
            <Text className="form_label">昵称</Text>
            <Input
              className="form_input"
              value={form_data.nickname}
              placeholder="请输入昵称"
              onInput={(e) => handle_input_change('nickname', e.detail.value)}
            />
          </View>

          {/* 个人简介 */}
          <View className="form_item">
            <Text className="form_label">个人简介</Text>
            <Textarea
              className="form_textarea"
              value={form_data.bio}
              placeholder="介绍一下自己吧..."
              maxlength={200}
              onInput={(e) => handle_input_change('bio', e.detail.value)}
            />
            <Text className="char_count">{form_data.bio.length}/200</Text>
          </View>

          {/* 所在地区 */}
          <View className="form_item">
            <Text className="form_label">所在地区</Text>
            <Input
              className="form_input"
              value={form_data.location}
              placeholder="请输入所在地区"
              onInput={(e) => handle_input_change('location', e.detail.value)}
            />
          </View>

          {/* 职业 */}
          <View className="form_item">
            <Text className="form_label">职业</Text>
            <Input
              className="form_input"
              value={form_data.occupation}
              placeholder="请输入职业"
              onInput={(e) => handle_input_change('occupation', e.detail.value)}
            />
          </View>

          {/* 手机号 */}
          <View className="form_item">
            <Text className="form_label">手机号</Text>
            <Input
              className="form_input"
              value={form_data.phone}
              placeholder="请输入手机号"
              type="number"
              maxlength={11}
              onInput={(e) => handle_input_change('phone', e.detail.value)}
            />
          </View>

          {/* NTRP等级 */}
          <View className="form_item">
            <Text className="form_label">NTRP等级</Text>
            <View className="level_selector">
              {['1.0', '1.5', '2.0', '2.5', '3.0', '3.5', '4.0', '4.5', '5.0'].map((level) => (
                <View
                  key={level}
                  className={`level_item ${form_data.ntrp_level.includes(level) ? 'selected' : ''}`}
                  onClick={() => handle_input_change('ntrp_level', `NTRP ${level}`)}
                >
                  <Text className="level_text">{level}</Text>
                </View>
              ))}
            </View>
          </View>

          {/* 性别 */}
          <View className="form_item">
            <Text className="form_label">性别</Text>
            <View className="gender_selector">
              <View
                className={`gender_item ${form_data.gender === '男' ? 'selected' : ''}`}
                onClick={() => handle_input_change('gender', '男')}
              >
                <Text className="gender_text">男</Text>
              </View>
              <View
                className={`gender_item ${form_data.gender === '女' ? 'selected' : ''}`}
                onClick={() => handle_input_change('gender', '女')}
              >
                <Text className="gender_text">女</Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
      <GuideBar currentPage='personal' />
    </View>
  );
};

export default EditProfilePage;