import React, { useState, useRef, useEffect } from 'react';
import { useStoreData } from '../hooks/useStoreData';
import { Store } from '../utils/store';
import { userApi } from '../api/user';
import { User, Settings, LogOut, X, Edit2 } from 'lucide-react';
import { GlassCard } from './ui/GlassCard';
import { Button } from './ui/Button';
import clsx from 'clsx';

/**
 * 用户资料菜单组件
 * 显示用户信息、编辑资料和退出登录选项
 */
export function UserMenu({ isOpen, onClose, onLogout }) {
  const data = useStoreData();
  const [showEditModal, setShowEditModal] = useState(false);
  const menuRef = useRef(null);

  // 每次打开菜单时，重置编辑模态框状态（模仿 PncyssD 的逻辑）
  // 确保每次打开菜单都显示主菜单界面，而不是编辑界面
  useEffect(() => {
    if (isOpen) {
      // 菜单打开时，确保编辑模态框是关闭的
      setShowEditModal(false);
    }
  }, [isOpen]);

  // 点击外部关闭菜单
  useEffect(() => {
    if (!isOpen) return;
    
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        onClose();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [isOpen, onClose]);

  // 如果菜单未打开，不渲染任何内容（除非正在显示编辑模态框）
  if (!isOpen && !showEditModal) return null;

  // 如果正在显示编辑模态框，只渲染编辑模态框
  if (showEditModal) {
    return (
      <EditProfileModal
        onClose={() => {
          setShowEditModal(false);
          // 编辑模态框关闭后，如果菜单是打开的，会显示主菜单
        }}
        userProfile={data.userProfile}
      />
    );
  }

  // 显示主菜单（isOpen 为 true 且 showEditModal 为 false）

  // 显示主菜单
  return (
    <>
      {/* 菜单遮罩层 */}
      <div 
        className="fixed inset-0 z-40" 
        onClick={onClose}
      />
      
      {/* 用户菜单 */}
      <div 
        ref={menuRef}
        className="fixed top-24 md:top-4 left-4 md:left-[300px] z-50 w-[calc(100%-2rem)] md:w-80 animate-fade-in"
      >
        <div className="bg-[#1a1c2c]/95 border border-white/20 shadow-2xl rounded-2xl p-6 space-y-6 backdrop-blur-sm">
          {/* 用户信息头部 */}
          <div className="flex items-center gap-4 pb-4 border-b border-white/10">
            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/30 to-blue-600/30 flex items-center justify-center text-2xl font-bold text-white border border-white/20 shadow-lg">
              {data.userProfile.nickname?.[0] || 'U'}
            </div>
            <div className="flex-1 overflow-hidden">
              <div className="font-bold text-gray-100 text-lg truncate">
                {data.userProfile.nickname || '旅人'}
              </div>
              <div className="text-xs text-primary flex items-center gap-1.5 mt-1">
                <span className="w-1.5 h-1.5 rounded-full bg-primary shadow-[0_0_5px_rgba(205,133,63,0.5)] animate-pulse"></span>
                {data.userProfile.mbti || '未知'} · {data.userProfile.zodiac || '未知'}
              </div>
            </div>
          </div>

          {/* 统计数据 */}
          <div className="grid grid-cols-2 gap-3">
            <div className="p-4 bg-white/5 rounded-xl border border-white/5 text-center">
              <div className="text-2xl font-bold text-primary">
                {data.lifeTimeline?.length || 0}
              </div>
              <div className="text-[10px] text-white/40 uppercase tracking-widest mt-1">
                生命足迹
              </div>
            </div>
            <div className="p-4 bg-white/5 rounded-xl border border-white/5 text-center">
              <div className="text-2xl font-bold text-blue-400">
                {data.generatedScripts?.length || 0}
              </div>
              <div className="text-[10px] text-white/40 uppercase tracking-widest mt-1">
                剧本生成
              </div>
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="space-y-2 pt-2 border-t border-white/5">
            <Button
              variant="secondary"
              size="md"
              className="w-full justify-start"
              onClick={() => {
                setShowEditModal(true);
                // 不关闭主菜单，让编辑模态框显示在主菜单之上
                // 这样关闭编辑模态框后，主菜单仍然可见
              }}
            >
              <Settings className="w-4 h-4 mr-2" />
              编辑资料
            </Button>
            <Button
              variant="ghost"
              size="md"
              className="w-full justify-start text-red-400 hover:text-red-300 hover:bg-red-500/10"
              onClick={() => {
                if (window.confirm('确定要退出登录并清除所有数据吗？此操作不可逆。')) {
                  Store.reset();
                  if (onLogout) onLogout();
                }
              }}
            >
              <LogOut className="w-4 h-4 mr-2" />
              退出登录
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}

/**
 * 编辑资料模态框组件
 */
function EditProfileModal({ onClose, userProfile }) {
  const [formData, setFormData] = useState({
    nickname: userProfile.nickname || '',
    mbti: userProfile.mbti || '',
    zodiac: userProfile.zodiac || '',
    hobbies: userProfile.hobbies?.join(', ') || '',
    gender: userProfile.gender || 'secret'
  });
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState('');

  const handleSave = async () => {
    setIsSaving(true);
    setError('');
    
    const updatedProfile = {
      nickname: formData.nickname,
      mbti: formData.mbti,
      zodiac: formData.zodiac,
      hobbies: formData.hobbies.split(',').map(s => s.trim()).filter(s => s),
      gender: formData.gender
    };

    try {
      // 1. 更新本地 Store
      Store.updateProfile(updatedProfile);

      // 2. 同步到后端
      const currentProfile = await userApi.getCurrentUser();
      if (currentProfile.data && currentProfile.data.id) {
        await userApi.updateUserProfile({
          id: currentProfile.data.id,
          nickname: updatedProfile.nickname,
          mbti: updatedProfile.mbti,
          zodiac: updatedProfile.zodiac,
          hobbies: JSON.stringify(updatedProfile.hobbies),
          gender: updatedProfile.gender
        });
      }

      onClose();
    } catch (e) {
      console.error('保存资料失败:', e);
      setError(e.response?.data?.message || '保存失败，请重试');
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-xl">
      <GlassCard className="w-full max-w-lg p-8 relative max-h-[90vh] overflow-y-auto">
        {/* 关闭按钮 */}
        <button
          onClick={onClose}
          className="absolute top-6 right-6 text-white/40 hover:text-white transition-colors z-10"
        >
          <X className="w-5 h-5" />
        </button>

        {/* 标题 */}
        <div className="flex items-center gap-4 mb-8">
          <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
            <Edit2 className="text-primary w-6 h-6" />
          </div>
          <div>
            <h3 className="text-2xl font-bold text-gray-100">编辑资料</h3>
            <p className="text-xs text-gray-400 mt-1">调整你的人生航向基础信息</p>
          </div>
        </div>

        {/* 表单 */}
        <div className="space-y-6">
          <div>
            <label className="text-sm font-medium text-gray-300 mb-2 block">昵称</label>
            <input
              type="text"
              value={formData.nickname}
              onChange={(e) => setFormData({ ...formData, nickname: e.target.value })}
              placeholder="你想被如何称呼？"
              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-300 mb-2 block">MBTI</label>
              <input
                type="text"
                value={formData.mbti}
                onChange={(e) => setFormData({ ...formData, mbti: e.target.value })}
                placeholder="性格色彩"
                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all"
              />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-300 mb-2 block">星座</label>
              <input
                type="text"
                value={formData.zodiac}
                onChange={(e) => setFormData({ ...formData, zodiac: e.target.value })}
                placeholder="星辰指引"
                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all"
              />
            </div>
          </div>

          <div>
            <label className="text-sm font-medium text-gray-300 mb-2 block">兴趣爱好</label>
            <input
              type="text"
              value={formData.hobbies}
              onChange={(e) => setFormData({ ...formData, hobbies: e.target.value })}
              placeholder="让灵魂起舞的事物（用逗号分隔）"
              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all"
            />
          </div>

          <div>
            <label className="text-sm font-medium text-gray-300 mb-2 block">性别</label>
            <select
              value={formData.gender}
              onChange={(e) => setFormData({ ...formData, gender: e.target.value })}
              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all"
            >
              <option value="secret">保密</option>
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </div>

          {/* 错误提示 */}
          {error && (
            <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-200 text-sm">
              {error}
            </div>
          )}
        </div>

        {/* 操作按钮 */}
        <div className="flex gap-4 mt-8 pt-6 border-t border-white/5">
          <Button
            variant="primary"
            size="md"
            className="flex-1"
            onClick={handleSave}
            isLoading={isSaving}
          >
            保存修改
          </Button>
          <Button
            variant="ghost"
            size="md"
            onClick={onClose}
          >
            取消
          </Button>
        </div>
      </GlassCard>
    </div>
  );
}