import React, { useState, useMemo, useEffect } from 'react';
import { Leaf, Droplets, Scissors, Move, Eye, RotateCcw, Share2, Flower2, Sprout, Info, Sparkles, Loader2 } from 'lucide-react';

const App = () => {
  const [step, setStep] = useState('cover'); 
  const [answers, setAnswers] = useState([]);
  const [aiAnalysis, setAiAnalysis] = useState(null);
  const [isLoadingAi, setIsLoadingAi] = useState(false);
  const [error, setError] = useState(null);

  const apiKey = "AIzaSyA2noP8OT__6vNLdUZlAqj61z031-_Gcqo"; // API Key 由執行環境自動注入

  const types = {
    A: { name: '灌溉型', action: '給予與投入', icon: <Droplets className="w-5 h-5" />, color: '#4A90E2', desc: '傾向加法，深信充足的養分與投入是成長的關鍵。' },
    B: { name: '修剪型', action: '整理與減法', icon: <Scissors className="w-5 h-5" />, color: '#7DAA92', desc: '傾向減法，透過捨棄與整理來留出純粹的生長空間。' },
    C: { name: '移植型', action: '調整與重構', icon: <Move className="w-5 h-5" />, color: '#D4A373', desc: '傾向重構，相信環境的調整能改變生命當前的處境。' },
    D: { name: '守望型', action: '觀察與節奏', icon: <Eye className="w-5 h-5" />, color: '#6B705C', desc: '傾向觀察，尊重自然的節奏，在安靜中等待時機。' }
  };

  const questions = [
    {
      id: 1,
      title: '今天你走進一座花園，第一個會注意到什麼？',
      options: [
        { key: 'A', text: '哪裡看起來最乾、最需要水' },
        { key: 'B', text: '哪些地方長得太亂、不夠整齊' },
        { key: 'C', text: '有沒有哪株植物放錯了位置' },
        { key: 'D', text: '整體氛圍，好像少了點生氣' }
      ]
    },
    {
      id: 2,
      title: '今天你想對這座花園進行什麼動作？',
      options: [
        { key: 'A', text: '補水、施肥，讓它快點好起來' },
        { key: 'B', text: '修剪、整理，把不需要的拿掉' },
        { key: 'C', text: '移動位置，替植物換個環境' },
        { key: 'D', text: '先不動，花點時間觀察變化' }
      ]
    },
    {
      id: 3,
      title: '經過細心照料，但花園一直沒有開花，你會怎麼做？',
      options: [
        { key: 'A', text: '再調整配方，試試不同的養分' },
        { key: 'B', text: '回頭檢查，是不是哪裡做錯了' },
        { key: 'C', text: '思考是否該重新規劃整座花園' },
        { key: 'D', text: '接受現在的狀態，繼續等季節' }
      ]
    },
    {
      id: 4,
      title: '你覺得現在這座花園，最需要什麼？',
      options: [
        { key: 'A', text: '空氣與間距，讓它能呼吸' },
        { key: 'B', text: '少一點干預，多一點耐心' },
        { key: 'C', text: '時間，讓根慢慢扎深' },
        { key: 'D', text: '穩定的照看，而不是急著成果' }
      ]
    }
  ];

  const resultData = useMemo(() => {
    if (answers.length < 4) return null;
    const counts = answers.reduce((acc, cur) => {
      acc[cur] = (acc[cur] || 0) + 1;
      return acc;
    }, {});
    const sortedTypes = Object.entries(counts).sort((a, b) => b[1] - a[1]);
    const primary = sortedTypes[0][0];
    const secondary = sortedTypes.length > 1 ? sortedTypes[1][0] : null;
    return { primary, secondary, counts };
  }, [answers]);

  // Gemini API 整合邏輯
  useEffect(() => {
    if (step === 'result' && resultData && !aiAnalysis) {
      fetchAiAnalysis();
    }
  }, [step, resultData]);

  const fetchAiAnalysis = async (retryCount = 0) => {
    setIsLoadingAi(true);
    setError(null);

    const prompt = `使用者在「成為自己生命的園丁」心理引導中選擇了以下傾向：主要為${types[resultData.primary].name}，次要為${resultData.secondary ? types[resultData.secondary].name : '無'}。請根據《僧人心態》的哲學，以溫和、不說教、富有洞見的語氣，為這座「生命花園」寫一段 100 字以內的深層觀察。不要評價好壞，重點在於覺察與節奏。`;

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }],
          systemInstruction: { parts: [{ text: "你是一位精通《僧人心態》的生命引導者。你的語言風格簡潔、充滿空間感、成熟且溫暖。你從不使用標籤化的語言，而是將生命比喻為一座花園。" }] }
        })
      });

      if (!response.ok) throw new Error('API request failed');
      
      const data = await response.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      setAiAnalysis(text);
    } catch (err) {
      if (retryCount < 5) {
        const delay = Math.pow(2, retryCount) * 1000;
        setTimeout(() => fetchAiAnalysis(retryCount + 1), delay);
      } else {
        setError('暫時無法連線至智慧導引，請參考下方的園丁任務。');
      }
    } finally {
      setIsLoadingAi(false);
    }
  };

  const handleAnswer = (key) => {
    const newAnswers = [...answers, key];
    setAnswers(newAnswers);
    if (newAnswers.length < questions.length) {
      setStep(`q${newAnswers.length + 1}`);
    } else {
      setStep('result');
    }
  };

  const reset = () => {
    setAnswers([]);
    setStep('cover');
    setAiAnalysis(null);
    setError(null);
  };

  const Background = () => (
    <div className="absolute inset-0 -z-10 bg-[#F5F2ED] overflow-hidden">
      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-[#E8E1D5] rounded-full blur-3xl opacity-50" />
      <div className="absolute bottom-[-5%] right-[-5%] w-[50%] h-[50%] bg-[#D4DBCB] rounded-full blur-3xl opacity-40" />
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" 
           style={{ backgroundImage: `url("https://www.transparenttextures.com/patterns/paper.png")` }} />
    </div>
  );

  return (
    <div className="min-h-screen flex items-center justify-center p-6 font-serif text-[#3A4035]">
      <Background />
      
      <div className="max-w-md w-full bg-white/40 backdrop-blur-md border border-white/50 rounded-3xl p-8 shadow-xl relative transition-all duration-700 max-h-[90vh] overflow-y-auto custom-scrollbar">
        
        {step === 'cover' && (
          <div className="text-center space-y-8 py-8 animate-in fade-in slide-in-from-bottom-4 duration-1000">
            <div className="flex justify-center">
              <div className="p-4 bg-[#4A5D4E] rounded-full text-white shadow-lg">
                <Leaf size={40} />
              </div>
            </div>
            <div className="space-y-3">
              <h1 className="text-3xl font-bold tracking-tight">成為自己生命的園丁</h1>
              <p className="text-lg opacity-80">選擇你此刻的直覺，看看花園正在發生什麼</p>
            </div>
            <button 
              onClick={() => setStep('q1')}
              className="w-full py-4 bg-[#4A5D4E] text-white rounded-xl hover:bg-[#3d4d41] transition-all font-medium text-lg tracking-widest shadow-lg active:scale-95"
            >
              開始覺察
            </button>
          </div>
        )}

        {questions.map((q, idx) => step === `q${idx + 1}` && (
          <div key={q.id} className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500">
            <h2 className="text-2xl font-semibold leading-relaxed">{q.title}</h2>
            <div className="space-y-3">
              {q.options.map((opt) => (
                <button
                  key={opt.key}
                  onClick={() => handleAnswer(opt.key)}
                  className="w-full p-5 text-left bg-white/60 hover:bg-white border border-[#E2E8DE] rounded-2xl transition-all group"
                >
                  <span className="text-[#4A5D4E] font-bold mr-3">{opt.key}.</span>
                  {opt.text}
                </button>
              ))}
            </div>
          </div>
        ))}

        {step === 'result' && resultData && (
          <div className="space-y-8 animate-in fade-in zoom-in-95 duration-1000 pb-4">
            <div className="text-center space-y-2">
              <div className="text-xs tracking-widest text-[#7A8275] uppercase">當前生態觀察</div>
              <h2 className="text-3xl font-bold text-[#2C332A]">
                {resultData.secondary 
                  ? `${types[resultData.primary].name} × ${types[resultData.secondary].name}` 
                  : `核心 ${types[resultData.primary].name}`}
              </h2>
            </div>

            {/* AI 分析區塊 */}
            <div className="p-6 bg-[#4A5D4E] text-white rounded-3xl space-y-4 relative shadow-inner overflow-hidden min-h-[140px] flex flex-col justify-center">
              <Sparkles className="absolute top-4 right-4 opacity-20" size={24} />
              {isLoadingAi ? (
                <div className="flex flex-col items-center justify-center gap-3 py-4">
                  <Loader2 className="animate-spin opacity-60" />
                  <span className="text-sm opacity-60 tracking-widest">正在觀察你的花園...</span>
                </div>
              ) : error ? (
                <p className="text-sm opacity-90 italic">{error}</p>
              ) : (
                <p className="leading-relaxed text-sm md:text-base italic font-light">
                  「{aiAnalysis || "真正的園丁，不是選對工具，而是知道什麼時候該換手。"}」
                </p>
              )}
            </div>

            {/* 園丁身分圖鑑 */}
            <div className="space-y-4">
              <div className="flex items-center gap-2 text-sm font-bold text-[#4A5D4E]">
                <Info size={18} />
                <span>認識園丁角色</span>
              </div>
              <div className="grid grid-cols-1 gap-3">
                {Object.entries(types).map(([key, type]) => (
                  <div 
                    key={key} 
                    className={`p-4 rounded-2xl border transition-all ${resultData.counts[key] ? 'bg-white border-[#D1DBCB] shadow-sm' : 'bg-transparent border-[#E2E8DE] opacity-40'}`}
                  >
                    <div className="flex items-center gap-3">
                      <div className="p-1.5 rounded-lg text-white" style={{ backgroundColor: type.color }}>
                        {type.icon}
                      </div>
                      <span className="font-bold">{type.name}</span>
                      {resultData.counts[key] > 0 && <span className="ml-auto text-[10px] bg-[#F0F2ED] px-2 py-0.5 rounded-full text-[#4A5D4E] font-sans">Presence: {resultData.counts[key]}</span>}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="pt-6 border-t border-[#E2E8DE] flex gap-3">
              <button onClick={reset} className="flex-1 py-3 flex items-center justify-center gap-2 bg-[#E2E8DE] text-[#4A5D4E] rounded-xl hover:bg-[#D1DBCB] transition-colors">
                <RotateCcw size={18} />
              </button>
              <button className="flex-[3] py-3 bg-[#4A5D4E] text-white rounded-xl font-medium tracking-widest active:scale-95 transition-all">
                分享花園狀態
              </button>
            </div>
          </div>
        )}

      </div>
      
      <style dangerouslySetInnerHTML={{ __html: `.custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #D1DBCB; border-radius: 10px; }`}} />
    </div>
  );
};

export default App;
     

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>