import React, { useEffect, useLayoutEffect, useState } from 'react';
import { Layout, MainLayout } from './layout/UserLayout';
import { useUserStore } from './store';
import { message } from '@/modules/message';
export const Info = () => {
  return (
    <Layout>
      <MainLayout className='bg-yellow-50'>
        <ProfileForm />
      </MainLayout>
    </Layout>
  );
};
export const ProfileForm: React.FC = () => {
  const [nickname, setNickname] = useState('');
  const [name, setName] = useState('');
  const [avatar, setAvatar] = useState<string | null>(null);
  const userStore = useUserStore();
  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0];
      // 如果文件大于 2MB，提示用户
      if (file.size > 2 * 1024 * 1024) {
        message.error('文件大小不能超过 2MB');
        return;
      }

      const reader = new FileReader();
      reader.onload = () => {
        setAvatar(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = () => {
    // alert(`昵称: ${nickname}, 姓名: ${name}`)
    userStore.updateUser({
      nickname,
      data: {
        personalname: name,
      },
      avatar,
    });
  };
  useLayoutEffect(() => {
    userStore.getUpdateUser();
  }, []);
  useEffect(() => {
    if (userStore.data) {
      setNickname(userStore.data.nickname);
      setName(userStore.data?.data?.personalname);
      setAvatar(userStore.data.avatar);
    }
  }, [userStore.data]);

  return (
    <div className='w-full h-full mx-auto  p-6 rounded-lg'>
      <h2 className='text-center text-[#F39800] text-2xl font-bold mb-2'>完善个人信息</h2>
      <p className='text-center text-yellow-400 mb-6'>请设置您的基本信息</p>

      {/* Avatar Section */}
      <div className='text-center mb-6'>
        <label className='block'>
          <div className='w-24 h-24 my-2 mx-auto rounded-full bg-yellow-200 flex items-center justify-center text-4xl text-yellow-500 cursor-pointer'>
            {avatar ? <img src={avatar} alt='Avatar' className='rounded-full w-full h-full object-cover' /> : <span>👤</span>}
          </div>
          <p className='text-sm text-gray-500 mt-2'>点击更换头像</p>
          <input type='file' accept='image/*' className='hidden' onChange={handleAvatarChange} />
        </label>
      </div>

      {/* Form Fields */}
      <div className='mb-4'>
        <label className='block text-[#F39800] mb-2'>昵称 *</label>
        <input
          type='text'
          placeholder='请设置您的昵称'
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
          className='w-full border-[#FBBF24] rounded-lg p-2 border focus:outline-none focus:ring-2 focus:ring-[#F39800]'
        />
      </div>

      <div className='mb-6'>
        <label className='block text-[#F39800] mb-2'>姓名 *</label>
        <input
          type='text'
          placeholder='请输入您的姓名'
          value={name}
          onChange={(e) => setName(e.target.value)}
          className='w-full border-[#FBBF24] rounded-lg p-2 border focus:outline-none focus:ring-2 focus:ring-[#F39800]'
        />
      </div>

      {/* Submit Button */}
      <button onClick={handleSubmit} className='w-full py-2 bg-[#F39800] text-white rounded hover:bg-orange-600'>
        完成设置
      </button>
    </div>
  );
};