import React, { useState, useEffect, useRef } from 'react';
import { 
  User, 
  ChevronRight, 
  Loader2, 
  BrainCircuit, 
  BarChart3, 
  Heart, 
  ShieldAlert, 
  Briefcase, 
  Share2, 
  Copy, 
  RefreshCcw, 
  Plus,
  ArrowRight,
  MessageSquare,
  Sparkles
} from 'lucide-react';

const apiKey = ""; // 运行时由环境自动填充

const App = () => {
  const [step, setStep] = useState('welcome'); // welcome, profile, quiz, loading, report
  const [profile, setProfile] = useState({
    name: 'Reese',
    age: '',
    gender: '',
    job: '',
    extra: ''
  });
  const [questions, setQuestions] = useState([]);
  const [answers, setAnswers] = useState([]);
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [loading, setLoading] = useState(false);
  const [report, setReport] = useState(null);
  const [shareImage, setShareImage] = useState(null);
  const [showMenu, setShowMenu] = useState(false);

  // 模拟重试机制的 API 调用函数
  const fetchGemini = async (payload, endpoint = 'generateContent', model = 'gemini-2.5-flash-preview-09-2025') => {
    let delay = 1000;
    for (let i = 0; i < 5; i++) {
      try {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:${endpoint}?key=${apiKey}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        if (!response.ok) throw new Error('API Error');
        return await response.json();
      } catch (err) {
        if (i === 4) throw err;
        await new Promise(resolve => setTimeout(resolve, delay));
        delay *= 2;
      }
    }
  };

  // 生成下一道题
  const generateNextQuestion = async (history) => {
    setLoading(true);
    const questionIndex = history.length + 1;
    const systemPrompt = `你是一位资深心理学专家。正在为用户 ${profile.name} 进行EQ评估。
    当前进度：[第${questionIndex}/20题]。
    要求：
    1. 必须是封闭式情境选择题，提供A,B,C,D四个选项。
    2. 题目要根据之前的回答动态调整深度（之前的记录：${JSON.stringify(history)}）。
    3. 维度覆盖：情绪感知、管理、社交直觉、人际处理、抗压能力。
    4. 输出JSON格式：{ "question": "...", "options": { "A": "...", "B": "...", "C": "...", "D": "..." }, "dimension": "..." }`;

    try {
      const data = await fetchGemini({
        contents: [{ parts: [{ text: `为 ${JSON.stringify(profile)} 生成第 ${questionIndex} 道情商测试题。` }] }],
        systemInstruction: { parts: [{ text: systemPrompt }] },
        generationConfig: { responseMimeType: "application/json" }
      });
      const q = JSON.parse(data.candidates[0].content.parts[0].text);
      setCurrentQuestion(q);
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  };

  // 生成最终报告
  const generateFullReport = async (finalAnswers) => {
    setStep('loading');
    const systemPrompt = `你是一位资深心理学专家。请根据用户 ${JSON.stringify(profile)} 的20道EQ测试回答：${JSON.stringify(finalAnswers)}，撰写一份不少于1000字的《深度心理评估报告》。
    报告结构必须包含：
    1. EQ雷达图维度分析（情绪颗粒度，共情力，社交手腕等）。
    2. 真实性格画像（挖掘面具下的潜意识性格）。
    3. 亲密关系/婚姻模式预判。
    4. 未来走向建议（职业瓶颈突破与人生关键决策建议）。
    请使用专业、优雅且深刻的中文。输出格式为JSON：{"title": "...", "radarData": {"情绪感知": 80, ...}, "content": "Markdown格式的详细正文"}`;

    try {
      const data = await fetchGemini({
        contents: [{ parts: [{ text: "生成完整评估报告" }] }],
        systemInstruction: { parts: [{ text: systemPrompt }] },
        generationConfig: { responseMimeType: "application/json" }
      });
      const result = JSON.parse(data.candidates[0].content.parts[0].text);
      setReport(result);
      setStep('report');
    } catch (error) {
      console.error(error);
    }
  };

  // 生成分享图片
  const generateImage = async () => {
    setLoading(true);
    const prompt = `A high-end psychological profile card for a user named ${profile.name} who scored high in EQ. Minimalist, professional, abstract psychological art style, teal and gold accents, clear typography.`;
    try {
      const result = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ instances: { prompt: prompt }, parameters: { sampleCount: 1 } })
      }).then(res => res.json());
      
      if (result.predictions?.[0]?.bytesBase64Encoded) {
        setShareImage(`data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`);
      }
    } catch (err) {
      console.error(err);
    }
    setLoading(false);
  };

  const handleAnswer = (option) => {
    const newAnswers = [...answers, { question: currentQuestion.question, answer: option, dimension: currentQuestion.dimension }];
    setAnswers(newAnswers);
    if (newAnswers.length < 20) {
      generateNextQuestion(newAnswers);
    } else {
      generateFullReport(newAnswers);
    }
  };

  const startQuiz = () => {
    setStep('quiz');
    generateNextQuestion([]);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-teal-100">
      {/* Header */}
      <header className="fixed top-0 w-full bg-white/80 backdrop-blur-md border-b z-50 px-6 py-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <BrainCircuit className="text-teal-600 w-6 h-6" />
          <span className="font-bold tracking-tight text-xl">EQ Expert <span className="text-teal-600">AI</span></span>
        </div>
        {step === 'quiz' && (
          <div className="text-sm font-medium text-slate-500">
            进度: {answers.length + 1} / 20
          </div>
        )}
      </header>

      <main className="pt-24 pb-12 px-6 max-w-2xl mx-auto">
        
        {/* Welcome Screen */}
        {step === 'welcome' && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
            <div className="bg-gradient-to-br from-teal-500 to-emerald-600 rounded-3xl p-8 text-white shadow-xl">
              <h1 className="text-3xl font-bold mb-4">你好, Reese</h1>
              <p className="opacity-90 leading-relaxed text-lg">
                我是你的专属心理学专家。我们将通过20轮深度交互，探索你潜意识中的情商边界，揭示那些你甚至未曾察觉的自我特质。
              </p>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-white p-6 rounded-2xl border shadow-sm">
                <Heart className="text-rose-500 mb-2" />
                <h3 className="font-semibold">情感洞察</h3>
                <p className="text-xs text-slate-500">深度解析你的共情与情绪边界</p>
              </div>
              <div className="bg-white p-6 rounded-2xl border shadow-sm">
                <ShieldAlert className="text-amber-500 mb-2" />
                <h3 className="font-semibold">压力抗性</h3>
                <p className="text-xs text-slate-500">评估极端环境下的心理韧性</p>
              </div>
            </div>
            <button 
              onClick={() => setStep('profile')}
              className="w-full bg-slate-900 text-white py-4 rounded-2xl font-bold text-lg flex items-center justify-center gap-2 hover:bg-slate-800 transition-all shadow-lg shadow-slate-200"
            >
              建立初始档案 <ArrowRight w={20} />
            </button>
          </div>
        )}

        {/* Profile Info */}
        {step === 'profile' && (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <h2 className="text-2xl font-bold">完善档案信息</h2>
            <div className="space-y-4">
              <div>
                <label className="text-sm font-semibold text-slate-500 mb-1 block">年龄</label>
                <input 
                  type="text" 
                  placeholder="例如: 29"
                  className="w-full p-4 rounded-xl border-2 border-slate-100 focus:border-teal-500 outline-none transition-all"
                  value={profile.age}
                  onChange={(e) => setProfile({...profile, age: e.target.value})}
                />
              </div>
              <div>
                <label className="text-sm font-semibold text-slate-500 mb-1 block">性别</label>
                <div className="flex gap-2">
                  {['男', '女', '多元'].map(g => (
                    <button 
                      key={g}
                      onClick={() => setProfile({...profile, gender: g})}
                      className={`flex-1 py-3 rounded-xl border-2 transition-all ${profile.gender === g ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-slate-100'}`}
                    >
                      {g}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="text-sm font-semibold text-slate-500 mb-1 block">职业</label>
                <input 
                  type="text" 
                  placeholder="例如: 市场经理"
                  className="w-full p-4 rounded-xl border-2 border-slate-100 focus:border-teal-500 outline-none transition-all"
                  value={profile.job}
                  onChange={(e) => setProfile({...profile, job: e.target.value})}
                />
              </div>
              <div>
                <label className="text-sm font-semibold text-slate-500 mb-1 block">补充信息</label>
                <textarea 
                  placeholder="还有什么想告诉专家的吗？"
                  className="w-full p-4 rounded-xl border-2 border-slate-100 focus:border-teal-500 outline-none transition-all h-24 resize-none"
                  value={profile.extra}
                  onChange={(e) => setProfile({...profile, extra: e.target.value})}
                />
              </div>
            </div>
            <button 
              onClick={startQuiz}
              disabled={!profile.age || !profile.gender || !profile.job}
              className="w-full bg-teal-600 text-white py-4 rounded-2xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-teal-700 transition-all shadow-lg shadow-teal-100"
            >
              开始测试
            </button>
          </div>
        )}

        {/* Quiz Step */}
        {step === 'quiz' && (
          <div className="space-y-8 min-h-[400px]">
            {loading || !currentQuestion ? (
              <div className="flex flex-col items-center justify-center h-64 space-y-4">
                <Loader2 className="animate-spin text-teal-600 w-10 h-10" />
                <p className="text-slate-400 font-medium">专家正在构思下一个情境...</p>
              </div>
            ) : (
              <div className="animate-in fade-in slide-in-from-right-8 duration-500">
                <div className="mb-8">
                  <span className="bg-teal-100 text-teal-700 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-3 inline-block">
                    {currentQuestion.dimension || "情商评估"}
                  </span>
                  <h2 className="text-2xl font-bold leading-snug">
                    <span className="text-teal-600 mr-2">[第{answers.length + 1}/20题]</span>
                    {currentQuestion.question}
                  </h2>
                </div>
                <div className="grid gap-3">
                  {Object.entries(currentQuestion.options).map(([key, value]) => (
                    <button
                      key={key}
                      onClick={() => handleAnswer(key)}
                      className="group flex items-center w-full p-5 rounded-2xl border-2 border-slate-100 hover:border-teal-500 hover:bg-teal-50 transition-all text-left"
                    >
                      <span className="w-10 h-10 flex items-center justify-center rounded-xl bg-slate-100 group-hover:bg-teal-600 group-hover:text-white font-bold mr-4 transition-colors">
                        {key}
                      </span>
                      <span className="flex-1 font-medium">{value}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
            
            {/* Progress Bar */}
            <div className="mt-12">
              <div className="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden">
                <div 
                  className="bg-teal-500 h-full transition-all duration-500" 
                  style={{ width: `${((answers.length) / 20) * 100}%` }}
                />
              </div>
            </div>
          </div>
        )}

        {/* Loading Report */}
        {step === 'loading' && (
          <div className="flex flex-col items-center justify-center py-20 space-y-6">
            <div className="relative">
              <Loader2 className="animate-spin text-teal-600 w-16 h-16" />
              <div className="absolute inset-0 flex items-center justify-center">
                <Sparkles className="text-amber-400 w-6 h-6 animate-pulse" />
              </div>
            </div>
            <div className="text-center">
              <h2 className="text-2xl font-bold mb-2">深度报告生成中</h2>
              <p className="text-slate-500">专家正在梳理您的20条交互数据，构建全维度人格模型...</p>
            </div>
            <div className="w-full max-w-xs space-y-2">
              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                <div className="bg-teal-500 h-full w-2/3 animate-[shimmer_2s_infinite]" />
              </div>
              <p className="text-[10px] text-center text-slate-400">正在计算：情绪颗粒度、共情共振指数、压力代偿机制...</p>
            </div>
          </div>
        )}

        {/* Final Report */}
        {step === 'report' && report && (
          <div className="space-y-10 animate-in fade-in zoom-in-95 duration-1000">
            <div className="text-center space-y-2">
              <div className="inline-block px-4 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-bold mb-2">
                ASSESSMENT COMPLETE
              </div>
              <h1 className="text-4xl font-extrabold tracking-tight">{report.title || "深度心理评估报告"}</h1>
              <p className="text-slate-500">评估对象: {profile.name} | 日期: {new Date().toLocaleDateString()}</p>
            </div>

            {/* Radar Analysis */}
            <div className="bg-white rounded-3xl p-8 border shadow-sm">
              <div className="flex items-center gap-2 mb-6">
                <BarChart3 className="text-teal-600" />
                <h2 className="text-xl font-bold">EQ全维度模型</h2>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {Object.entries(report.radarData).map(([key, val]) => (
                  <div key={key} className="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                    <div className="text-xs text-slate-500 font-medium mb-1">{key}</div>
                    <div className="flex items-end gap-2">
                      <span className="text-2xl font-bold text-teal-600">{val}</span>
                      <span className="text-[10px] text-slate-400 mb-1">/ 100</span>
                    </div>
                    <div className="w-full bg-slate-200 h-1 rounded-full mt-2 overflow-hidden">
                      <div className="bg-teal-500 h-full" style={{ width: `${val}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Main Content */}
            <article className="prose prose-slate max-w-none bg-white rounded-3xl p-8 border shadow-sm prose-headings:text-teal-900 prose-strong:text-teal-700 leading-relaxed">
              <div dangerouslySetInnerHTML={{ __html: report.content.replace(/\n/g, '<br/>') }} />
            </article>

            {/* Share Card (Imagen) */}
            {shareImage && (
              <div className="bg-slate-900 rounded-3xl p-6 text-white text-center space-y-4">
                <img src={shareImage} alt="Share card" className="w-full aspect-[4/3] object-cover rounded-xl mb-4 shadow-2xl" />
                <p className="text-sm opacity-70">这是根据您的评估结果生成的专属灵魂画像</p>
                <div className="flex justify-center gap-4">
                  <button className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm transition-colors">
                    <Share2 size={16} /> 保存并分享
                  </button>
                </div>
              </div>
            )}

            {/* Bottom Actions */}
            <div className="flex flex-col gap-4">
              <button 
                onClick={() => setStep('profile')}
                className="flex items-center justify-center gap-2 w-full py-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold transition-all"
              >
                <RefreshCcw size={20} /> 重新评测
              </button>
            </div>
          </div>
        )}
      </main>

      {/* Floating Plus Menu */}
      {step === 'report' && (
        <div className="fixed bottom-8 right-8 z-50">
          {showMenu && (
            <div className="absolute bottom-16 right-0 mb-2 flex flex-col gap-3 animate-in fade-in slide-in-from-bottom-4">
              <button 
                onClick={generateImage}
                className="flex items-center gap-3 px-5 py-3 bg-white border shadow-xl rounded-2xl whitespace-nowrap hover:bg-slate-50 transition-all"
              >
                <div className="w-8 h-8 rounded-lg bg-teal-100 text-teal-600 flex items-center justify-center"><Share2 size={18}/></div>
                <span className="font-semibold">生成分享海报</span>
              </button>
              <button 
                onClick={() => {
                   document.execCommand('copy');
                   alert('报告内容已复制到剪贴板');
                }}
                className="flex items-center gap-3 px-5 py-3 bg-white border shadow-xl rounded-2xl whitespace-nowrap hover:bg-slate-50 transition-all"
              >
                <div className="w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center"><Copy size={18}/></div>
                <span className="font-semibold">复制文本报告</span>
              </button>
              <button 
                className="flex items-center gap-3 px-5 py-3 bg-white border shadow-xl rounded-2xl whitespace-nowrap hover:bg-slate-50 transition-all"
              >
                <div className="w-8 h-8 rounded-lg bg-green-100 text-green-600 flex items-center justify-center"><MessageSquare size={18}/></div>
                <span className="font-semibold">发送至微信</span>
              </button>
            </div>
          )}
          <button 
            onClick={() => setShowMenu(!showMenu)}
            className={`w-14 h-14 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 ${showMenu ? 'bg-slate-900 rotate-45 text-white' : 'bg-teal-600 text-white'}`}
          >
            <Plus size={32} />
          </button>
        </div>
      )}

      {/* Custom Keyframes for Shimmer */}
      <style>{`
        @keyframes shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}</style>
    </div>
  );
};

export default App;