import React, { useState, useEffect } from 'react';
import { Calculator, TrendingUp, ShieldCheck, FileText, ArrowRight, UserCheck, Building2, Crown, Sparkles, CheckCircle2, MessageCircle, PiggyBank, Smile, Coins, Undo2, Home, Wallet, ArrowDown, Percent, Repeat, BadgeCheck, Lock, Zap } from 'lucide-react';

const Card = ({ children, className = "" }) => (
  <div className={`bg-white rounded-3xl shadow-xl shadow-stone-200/60 border border-white overflow-hidden ${className}`}>
    {children}
  </div>
);

// 跳動的減壓勳章
const JumpingBadge = ({ percent }) => (
  <div className="absolute -top-3 -right-3 z-30 animate-bounce">
    <div className="relative flex flex-col items-center justify-center w-20 h-20 bg-gradient-to-br from-red-500 to-pink-500 rounded-full shadow-lg border-4 border-[#F5F2ED] transform rotate-12">
      <div className="text-[10px] text-white font-bold mb-0.5">減壓</div>
      <div className="text-2xl font-black text-white leading-none">
        {(percent || 0).toFixed(0)}%
      </div>
    </div>
  </div>
);

// --- 主程式 ---
export default function AssetOptimizationSystem_Lite() {
  const [mode, setMode] = useState('landing'); // landing, buyer, owner

  return (
    <div className="min-h-screen bg-[#F5F2ED] flex items-center justify-center font-sans text-[#4A4A4A] p-4 relative overflow-hidden">
      {/* 背景裝飾 */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <div className="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-[#E0D8D0] rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
        <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-[#C7B299] rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
      </div>

      <div className="max-w-md w-full relative z-10">
        {mode === 'landing' && <LandingView onSelect={setMode} />}
        {mode === 'buyer' && <BuyerFlow onBack={() => setMode('landing')} />}
        {mode === 'owner' && <OwnerFlow onBack={() => setMode('landing')} />}
      </div>
    </div>
  );
}

// --- 1. 首頁選擇 (Landing) - 輕鬆成家版 ---
function LandingView({ onSelect }) {
  return (
    <div className="animate-in fade-in zoom-in duration-500">
      <div className="text-center mb-8">
        <div className="inline-flex items-center justify-center p-3 bg-white rounded-2xl shadow-sm mb-4">
           <Home className="text-[#6E8592]" size={32} />
        </div>
        <h1 className="text-3xl font-serif font-bold text-[#4A4A4A] mb-3 tracking-wide">
          房貸減壓．輕鬆成家
        </h1>
        <p className="text-[#6E6E6E] text-sm font-medium leading-relaxed">
          透過財務優化，讓買房不再是重擔。<br/>
          <span className="text-xs text-[#999999] mt-2 block">請選擇您的身分：</span>
        </p>
      </div>

      <div className="space-y-4">
        {/* Buyer Option */}
        <div className="relative group cursor-pointer" onClick={() => onSelect('buyer')}>
          <div className="absolute -top-3 left-4 bg-[#8DA399] text-white text-[10px] px-3 py-0.5 rounded-full z-10 font-bold shadow-sm">
            準備買房看這裡
          </div>
          <div className="w-full bg-white hover:bg-[#F9F7F5] p-6 rounded-2xl shadow-md border-2 border-transparent hover:border-[#8DA399] transition-all flex items-center justify-between pt-8">
            <div className="flex items-center gap-4">
              <div className="bg-[#F0F4F5] p-3 rounded-full text-[#6E8592] group-hover:scale-110 transition-transform">
                <UserCheck size={28} />
              </div>
              <div>
                <div className="font-bold text-lg text-[#5E5E5E] mb-0.5">我是首購族</div>
                <div className="text-xs text-[#999999] leading-tight">
                  頭期款已準備好？想減輕房貸壓力？<br/>
                  <span className="text-[#8DA399] font-bold">👉 立即查看輕鬆成家方案</span>
                </div>
              </div>
            </div>
            <ArrowRight className="text-[#C0C0C0] group-hover:text-[#8DA399]" />
          </div>
        </div>

        {/* Owner Option */}
        <div className="relative group cursor-pointer" onClick={() => onSelect('owner')}>
          <div className="absolute -top-3 left-4 bg-[#A67C80] text-white text-[10px] px-3 py-0.5 rounded-full z-10 font-bold shadow-sm">
            已有房貸看這裡
          </div>
          <div className="w-full bg-white hover:bg-[#F9F7F5] p-6 rounded-2xl shadow-md border-2 border-transparent hover:border-[#A67C80] transition-all flex items-center justify-between pt-8">
            <div className="flex items-center gap-4">
              <div className="bg-[#F7F2F2] p-3 rounded-full text-[#A67C80] group-hover:scale-110 transition-transform">
                <Building2 size={28} />
              </div>
              <div>
                <div className="font-bold text-lg text-[#5E5E5E] mb-0.5">我是有房族</div>
                <div className="text-xs text-[#999999] leading-tight">
                  覺得每個月繳得很辛苦？<br/>
                  <span className="text-[#A67C80] font-bold">👉 立即查看減壓潛力</span>
                </div>
              </div>
            </div>
            <ArrowRight className="text-[#C0C0C0] group-hover:text-[#A67C80]" />
          </div>
        </div>
      </div>
      
      <div className="text-center mt-8 text-[10px] text-[#B0B0B0] flex items-center justify-center gap-1">
        <BadgeCheck size={12} /> 安全匿名試算，不留存個人紀錄
      </div>
    </div>
  );
}

// --- 2. 首購族流程 (Buyer Flow) ---
function BuyerFlow({ onBack }) {
  const [step, setStep] = useState(1);
  const [price, setPrice] = useState(2000); // 萬
  const [fundType, setFundType] = useState('standard'); 
  const [loading, setLoading] = useState(false);

  // 試算邏輯
  const isRich = fundType === 'rich';
  
  // 參數設定 (固定)
  const mRate = 2.3 / 100 / 12;
  const periods = 360;

  // A. 一般規劃 (傳統)
  const tradDownPct = isRich ? 0.5 : 0.2; 
  const tradLoanAmt = price * 10000 * (1 - tradDownPct);
  
  // 傳統月付
  const tradFullPay = Math.round((tradLoanAmt * mRate * Math.pow(1 + mRate, periods)) / (Math.pow(1 + mRate, periods) - 1)) || 0;
  const tradGracePay = Math.round(tradLoanAmt * mRate) || 0;

  // B. 優化規劃
  const optLoanAmt = price * 10000 * 0.8; 
  const optDownAmt = price * 10000 * 0.2;
  
  // 投資本金
  const investRatio = isRich ? 0.3 : 0.2;
  const investedCapital = price * 10000 * investRatio;
  
  // 每月配息效益 (8%)
  const monthlyYield = Math.round((investedCapital * 0.08) / 12);

  // 優化後月付
  const optLoanFullPayRaw = Math.round((optLoanAmt * mRate * Math.pow(1 + mRate, periods)) / (Math.pow(1 + mRate, periods) - 1));
  const optFullPay = Math.max(0, optLoanFullPayRaw - monthlyYield);
  
  const optLoanGracePayRaw = Math.round(optLoanAmt * mRate);
  const optGracePay = Math.max(0, optLoanGracePayRaw - monthlyYield);

  // 總購屋成本
  const totalTradCost = (price * 10000 * tradDownPct) + (tradFullPay * 360);
  const totalOptCost = optDownAmt + (optFullPay * 360);

  // 減壓百分比
  const reliefPercent = tradFullPay > 0 ? ((tradFullPay - optFullPay) / tradFullPay) * 100 : 0;
  
  // 退休後續領金額
  const passiveIncomeAfterLoan = monthlyYield;
  
  // 省下金額 (顯示用)
  const savedMonthly = tradFullPay - optFullPay;

  const handleCalc = () => {
    setStep(2);
    setLoading(true);
    setTimeout(() => { setLoading(false); setStep(3); }, 1500);
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <button onClick={onBack} className="text-sm text-[#999999] flex items-center gap-1 font-bold hover:text-[#6E8592]"><Undo2 size={16}/> 返回</button>
        <div className="text-xs font-bold text-[#8DA399] bg-[#F0F4F5] px-2 py-1 rounded">購屋成本試算</div>
      </div>

      {step === 1 && (
        <Card className="p-8 animate-in fade-in slide-in-from-bottom-4">
          <div className="mb-6 text-center">
            <label className="block text-[#6E6E6E] font-bold text-lg mb-4">
              您預計買多少錢的房子？
            </label>
            <div className="relative flex items-center justify-center">
              <input
                type="number"
                value={price}
                onChange={(e) => setPrice(Number(e.target.value))}
                className="w-full text-center text-5xl font-black text-[#6E8592] bg-transparent border-b-2 border-[#E0D8D0] focus:border-[#8DA399] outline-none py-2 transition-colors placeholder-gray-200"
              />
              <span className="absolute right-4 bottom-4 text-[#B0B0B0] font-bold">萬</span>
            </div>
          </div>

          <div className="mb-8">
            <label className="block text-center text-xs text-[#999999] font-bold mb-3 uppercase tracking-wider">
              您的自備款準備狀態
            </label>
            <div className="grid grid-cols-2 gap-3 p-1 bg-[#F5F2ED] rounded-xl">
              <button 
                onClick={() => setFundType('standard')}
                className={`py-3 rounded-lg text-sm font-bold transition-all ${fundType === 'standard' ? 'bg-white text-[#6E8592] shadow-sm' : 'text-[#B0B0B0] hover:text-[#6E6E6E]'}`}
              >
                一般 (約2~3成)
              </button>
              <button 
                onClick={() => setFundType('rich')}
                className={`py-3 rounded-lg text-sm font-bold transition-all ${fundType === 'rich' ? 'bg-white text-[#8DA399] shadow-sm' : 'text-[#B0B0B0] hover:text-[#6E6E6E]'}`}
              >
                充裕 (5成以上)
              </button>
            </div>
            <div className="text-center mt-2 text-xs text-[#8DA399] h-4">
              {fundType === 'rich' ? '* 已切換為：高資產優化模式' : '* 已切換為：首購減壓模式'}
            </div>
          </div>

          <button onClick={handleCalc} className="w-full mt-2 bg-[#6E8592] hover:bg-[#5A6E7A] text-white text-lg font-bold py-4 rounded-xl shadow-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2">
            <Calculator size={24} /> 立即試算
          </button>
        </Card>
      )}

      {step === 2 && <LoadingScreen />}

      {step === 3 && (
        <ResultScreen 
          tradGrace={tradGracePay}
          optGrace={optGracePay}
          tradFull={tradFullPay}
          optFull={optFullPay}
          
          onReset={() => setStep(1)}
          reliefPercent={reliefPercent}
          
          isBuyer={true}
          futurePassive={passiveIncomeAfterLoan}
          totalTrad={totalTradCost}
          totalOpt={totalOptCost}
          
          diff={savedMonthly}
        />
      )}
    </div>
  );
}

// --- 3. 有房族流程 (Owner Flow) ---
function OwnerFlow({ onBack }) {
  const [step, setStep] = useState(1);
  const [monthlyPay, setMonthlyPay] = useState(45000);
  const [loading, setLoading] = useState(false);

  // 試算邏輯 (保守估計降 40%)
  const optimizedPay = Math.round(monthlyPay * 0.6);
  const savedMonthly = monthlyPay - optimizedPay;
  
  // 繳清後月領 (願景：原本拿去繳房貸的錢，現在變成月領配息)
  const futurePassive = savedMonthly;
  
  // 30年多存
  const saved30Years = savedMonthly * 12 * 30;

  // 減壓百分比
  const reliefPercent = monthlyPay > 0 ? ((monthlyPay - optimizedPay) / monthlyPay) * 100 : 0;

  const handleCalc = () => {
    setStep(2);
    setLoading(true);
    setTimeout(() => { setLoading(false); setStep(3); }, 1500);
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <button onClick={onBack} className="text-sm text-[#999999] flex items-center gap-1 font-bold"><Undo2 size={16}/> 返回</button>
        <div className="text-xs font-bold text-[#A67C80] bg-[#F7F2F2] px-2 py-1 rounded">房貸減壓速測</div>
      </div>

      {step === 1 && (
        <Card className="p-8 animate-in fade-in slide-in-from-bottom-4">
          <div className="mb-8 text-center">
            <label className="block text-[#6E6E6E] font-bold text-lg mb-4">
              您目前每個月房貸繳多少？
            </label>
            <div className="relative flex items-center justify-center">
              <input
                type="number"
                value={monthlyPay}
                onChange={(e) => setMonthlyPay(Number(e.target.value))}
                className="w-full text-center text-4xl font-black text-[#A67C80] bg-transparent border-b-2 border-[#E0D8D0] focus:border-[#A67C80] outline-none py-2 transition-colors placeholder-gray-200"
              />
              <span className="absolute right-4 bottom-4 text-[#B0B0B0] font-bold">元</span>
            </div>
            <p className="text-xs text-[#B0B0B0] mt-2">* 請輸入帳單上的實際金額</p>
          </div>
          <button onClick={handleCalc} className="w-full mt-4 bg-[#A67C80] hover:bg-[#8F6A6E] text-white text-lg font-bold py-4 rounded-xl shadow-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2">
            <Calculator size={24} /> 立即試算
          </button>
        </Card>
      )}

      {step === 2 && <LoadingScreen />}

      {step === 3 && (
        <ResultScreen 
          tradFull={monthlyPay}
          optFull={optimizedPay}
          
          onReset={() => setStep(1)}
          reliefPercent={reliefPercent}
          
          isOwner={true}
          futurePassive={futurePassive}
          saved30Years={saved30Years}
          
          diff={savedMonthly}
        />
      )}
    </div>
  );
}

// --- Loading Component ---
function LoadingScreen() {
  return (
    <div className="text-center py-20 animate-in fade-in duration-300">
      <div className="relative inline-block">
        <div className="w-20 h-20 border-4 border-[#E0D8D0] border-t-[#8DA399] rounded-full animate-spin mb-4"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><Sparkles className="text-[#C7B299] animate-pulse" size={24} /></div>
      </div>
      <h3 className="text-xl font-bold text-[#6E6E6E] mb-2">正在為您試算...</h3>
      <p className="text-[#999999] text-sm">尋找最佳減壓路徑</p>
    </div>
  );
}

// --- Result Component ---
function ResultScreen({ 
  tradGrace, optGrace, 
  tradFull, optFull, 
  onReset, reliefPercent, isBuyer, isOwner, futurePassive, totalTrad, totalOpt, saved30Years, diff 
}) {
  const formatCurrency = (val) => new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD', maximumFractionDigits: 0 }).format(val);
  const formatWan = (val) => (val / 10000).toFixed(0);

  return (
    <div className="animate-in fade-in slide-in-from-bottom-8 duration-700 space-y-6">
      
      {/* 核心結果：上下對照 */}
      <Card className="p-0 border-[#8DA399] border-2 relative overflow-visible">
        
        {/* 跳動勳章 */}
        <JumpingBadge percent={reliefPercent} />

        {/* 1. 寬限期比較 (首購族顯示) */}
        {isBuyer && (
          <div className="bg-[#F2F0ED] p-6 border-b border-white relative">
             <div className="flex justify-between items-center mb-1">
                <span className="text-sm font-bold text-[#999999] uppercase tracking-wider">第一階段 (寬限期)</span>
             </div>
             <div className="flex justify-between items-center">
               <div className="text-xl font-bold text-[#B0B0B0] line-through decoration-2">
                  {formatCurrency(tradGrace)} <span className="text-xs no-underline">元</span>
               </div>
               <div className="flex items-center gap-2">
                 <ArrowRight size={16} className="text-[#C0C0C0]" />
                 <div className="text-2xl font-black text-[#A67C80]">
                    {optGrace <= 0 ? "0" : formatCurrency(optGrace)} <span className="text-xs ml-0.5 text-[#A67C80]/60">元</span>
                 </div>
               </div>
             </div>
             {optGrace < 0 && <div className="text-[10px] text-[#8DA399] text-right mt-1 font-bold">每個月還倒賺 {formatCurrency(Math.abs(optGrace))}</div>}
          </div>
        )}

        {/* 2. 本利攤比較 / 有房族月付比較 */}
        <div className="bg-white p-6 pt-6">
           <div className="flex justify-between items-center mb-2">
              <span className="text-sm font-bold text-[#A67C80] uppercase tracking-wider">{isBuyer ? '第二階段 (本利攤)' : '每月房貸負擔'}</span>
           </div>
           
           <div className="flex justify-between items-center">
             <div className="text-2xl font-bold text-[#B0B0B0] line-through decoration-2">
                {formatCurrency(tradFull)} <span className="text-xs no-underline">元</span>
             </div>
             <div className="flex items-center gap-2">
               <ArrowRight size={20} className="text-[#A67C80]" />
               <div className="text-4xl font-black text-[#A67C80]">
                  {formatCurrency(optFull)} <span className="text-xs ml-0.5 text-[#A67C80]/60">元</span>
               </div>
             </div>
           </div>
           
           <div className="mt-4 bg-[#F0F2EB] text-[#6B8E76] px-3 py-2 rounded-xl text-center text-sm font-bold flex items-center justify-center gap-2">
             <ArrowDown size={16} /> 每月幫您省下 {formatCurrency(diff)}
           </div>
        </div>
      </Card>
      
      {/* 願景卡片 (Vision Cards) */}
      <div className="grid grid-cols-2 gap-4">
        
        {/* Left Card: 總購屋成本 (Buyer) / 累積多存 (Owner) */}
        {isBuyer ? (
          <div className="bg-white p-4 rounded-2xl shadow-sm border border-[#EBE6E1] text-center flex flex-col justify-center min-h-[120px]">
            <div className="flex justify-center mb-1 text-[#C7B299]"><Home size={20} /></div>
            <div className="text-xs text-[#999999] font-bold mb-1">總購屋成本</div>
            <div className="text-xs text-[#B0B0B0] line-through decoration-red-300">{formatWan(totalTrad)} 萬</div>
            <div className="text-xl font-black text-[#6E8592]">{formatWan(totalOpt)} 萬</div>
            <div className="text-[10px] text-[#8DA399] font-bold mt-1 bg-[#F0F2EB] px-2 py-0.5 rounded-full inline-block mx-auto">省下 {formatWan(totalTrad - totalOpt)} 萬</div>
          </div>
        ) : (
          <div className="bg-white p-4 rounded-2xl shadow-sm border border-[#EBE6E1] text-center flex flex-col justify-center min-h-[120px]">
            <div className="flex justify-center mb-1 text-[#C7B299]"><Coins size={20} /></div>
            <div className="text-xs text-[#999999] font-bold mb-1">30年累積多存</div>
            <div className="text-xl font-black text-[#6E8592]">{formatWan(saved30Years)} 萬</div>
          </div>
        )}

        {/* Right Card: 繳清後月領 */}
        <div className="bg-white p-4 rounded-2xl shadow-sm border border-[#EBE6E1] text-center flex flex-col justify-center min-h-[120px]">
          <div className="flex justify-center mb-1 text-[#8DA399]"><Repeat size={20} /></div>
          <div className="text-xs text-[#999999] font-bold mb-1">繳清房貸後</div>
          <div className="text-lg font-black text-[#8DA399] leading-tight">
             <span className="text-[10px] text-[#8DA399]/60 block font-normal mb-1">每月配息</span>
             {formatCurrency(futurePassive)}
          </div>
        </div>
      </div>
      
      {/* CTA */}
      <div className="text-center mt-4">
        <p className="text-[#6E6E6E] font-medium mb-4 text-sm">想了解如何落實這套規劃？</p>
        <button className="w-full bg-[#6B8E76] hover:bg-[#5A7A63] text-white text-lg font-bold py-4 rounded-2xl shadow-xl shadow-[#6B8E76]/20 transition-all transform hover:scale-[1.02] flex items-center justify-center gap-3 animate-pulse">
          <MessageCircle size={24} fill="white" className="text-white" /> 索取我的專屬規劃書
        </button>
        <button onClick={onReset} className="mt-6 text-[#B0B0B0] text-sm font-bold flex items-center justify-center gap-1 hover:text-[#6E8592] transition-colors mx-auto"><Undo2 size={14} /> 重新試算</button>
      </div>
    </div>
  );
}