import React, { useState, useEffect } from 'react';
import { 
  Shield, 
  Target, 
  TrendingUp, 
  AlertTriangle, 
  CheckSquare, 
  Calculator, 
  BookOpen, 
  Lock,
  ArrowRight,
  TrendingDown,
  Activity,
  XCircle,
  CheckCircle2
} from 'lucide-react';

// --- Colors & Theme Constants ---
const THEME = {
  bg: 'bg-slate-950',
  card: 'bg-slate-900',
  text: 'text-slate-300',
  heading: 'text-white',
  accent: 'text-emerald-400',
  danger: 'text-rose-400',
  border: 'border-slate-800',
  highlight: 'bg-slate-800'
};

// --- Components ---

// 1. Interactive RR Simulator
const RRSimulator = () => {
  const [winRate, setWinRate] = useState(35);
  const [rrRatio, setRrRatio] = useState(3);
  const totalTrades = 10;
  
  const wins = Math.round((winRate / 100) * totalTrades);
  const losses = totalTrades - wins;
  const netResult = (wins * rrRatio) - (losses * 1);
  
  return (
    <div className={`p-6 rounded-xl border ${THEME.border} ${THEME.card} shadow-lg`}>
      <h3 className={`text-xl font-bold mb-4 flex items-center ${THEME.accent}`}>
        <Calculator className="w-5 h-5 mr-2" />
        Mô phỏng Sức mạnh Toán học
      </h3>
      
      <div className="grid md:grid-cols-2 gap-8">
        <div className="space-y-6">
          <div>
            <label className="block text-sm font-medium mb-2">Winrate (Tỷ lệ thắng): {winRate}%</label>
            <input 
              type="range" min="10" max="90" value={winRate} 
              onChange={(e) => setWinRate(parseInt(e.target.value))}
              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-2">Risk : Reward (1 : {rrRatio})</label>
            <input 
              type="range" min="1" max="10" step="0.5" value={rrRatio} 
              onChange={(e) => setRrRatio(parseFloat(e.target.value))}
              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500"
            />
          </div>
          <div className="p-4 bg-slate-800 rounded-lg text-sm">
            <p>Giả sử bạn đánh <strong>{totalTrades} lệnh</strong>.</p>
            <p className="text-rose-400 mt-1">❌ Thua {losses} lệnh x 1R = -{losses}R</p>
            <p className="text-emerald-400">✅ Thắng {wins} lệnh x {rrRatio}R = +{(wins * rrRatio).toFixed(1)}R</p>
          </div>
        </div>

        <div className="flex flex-col justify-center items-center">
          <div className={`text-4xl font-black mb-2 ${netResult > 0 ? 'text-emerald-400' : 'text-rose-500'}`}>
            {netResult > 0 ? '+' : ''}{netResult.toFixed(1)}R
          </div>
          <p className="text-sm text-slate-400 text-center mb-6">Lợi nhuận ròng (Net Profit)</p>
          
          <div className="w-full bg-slate-800 h-4 rounded-full overflow-hidden flex">
            <div 
              className="h-full bg-emerald-500 transition-all duration-500"
              style={{ width: `${Math.max(0, Math.min(100, 50 + (netResult * 2)))}%` }} // Simple visualization logic
            ></div>
          </div>
          <p className="text-xs text-slate-500 mt-2 text-center">
            {netResult > 0 
              ? "Bạn có LÃI dù thua nhiều hơn thắng!" 
              : "Bạn đang LỖ. Hãy tăng RR hoặc Winrate."}
          </p>
        </div>
      </div>
    </div>
  );
};

// 2. SVG Visualizer for Setup
const SetupVisualizer = () => {
  return (
    <div className={`p-6 rounded-xl border ${THEME.border} ${THEME.card} mt-6`}>
      <h3 className="text-xl font-bold mb-4 text-white flex items-center">
        <Target className="w-5 h-5 mr-2 text-blue-400" />
        Mô hình Buy Setup chuẩn ICT
      </h3>
      <div className="relative w-full aspect-video bg-slate-950 rounded-lg border border-slate-800 overflow-hidden">
        <svg viewBox="0 0 400 200" className="w-full h-full">
          {/* Grid */}
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1e293b" strokeWidth="0.5"/>
          </pattern>
          <rect width="400" height="200" fill="url(#grid)" />

          {/* Liquidity High */}
          <line x1="250" y1="40" x2="350" y2="40" stroke="#fbbf24" strokeWidth="2" strokeDasharray="4"/>
          <text x="300" y="35" fill="#fbbf24" fontSize="10" textAnchor="middle">Liquidity / TP (Đỉnh cũ)</text>
          
          {/* Order Block Zone */}
          <rect x="100" y="140" width="60" height="20" fill="#059669" fillOpacity="0.3" stroke="#059669" />
          <text x="170" y="153" fill="#059669" fontSize="10">Bullish OB</text>

          {/* Price Action Path */}
          <path d="M 20 100 L 60 140 L 100 90 L 130 145 L 180 80 L 220 120 L 320 40" 
            fill="none" stroke="#94a3b8" strokeWidth="2" strokeLinejoin="round" />
            
          {/* Entry Point */}
          <circle cx="130" cy="145" r="4" fill="#3b82f6" />
          <text x="130" y="175" fill="#3b82f6" fontSize="10" textAnchor="middle">Entry tại OB</text>

          {/* Stop Loss Line */}
          <line x1="100" y1="165" x2="160" y2="165" stroke="#f43f5e" strokeWidth="2" />
          <text x="130" y="185" fill="#f43f5e" fontSize="10" textAnchor="middle">SL dưới OB</text>
        </svg>
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
        <div className="p-2 bg-rose-900/30 text-rose-300 rounded border border-rose-900">
          <strong>SL</strong><br/>Dưới OB ("Vùng Bảo Vệ")
        </div>
        <div className="p-2 bg-blue-900/30 text-blue-300 rounded border border-blue-900">
          <strong>Entry</strong><br/>Chạm mép OB/FVG
        </div>
        <div className="p-2 bg-amber-900/30 text-amber-300 rounded border border-amber-900">
          <strong>TP</strong><br/>Tại Thanh khoản (Liquidity)
        </div>
      </div>
    </div>
  );
};

// 3. Checklist Component
const Checklist = () => {
  const items = [
    "SL đã nằm sau vùng OB/FVG chưa?",
    "TP có phải là vùng Liquidity (Đỉnh/Đáy cũ) không?",
    "Tỷ lệ RR có đạt ≥ 1:3 không?",
    "Rủi ro lệnh này có ≤ 1-2% tài khoản không?",
    "Nếu lệnh này thua, tâm lý mình có bình thản không?"
  ];
  const [checkedState, setCheckedState] = useState(new Array(items.length).fill(false));

  const handleOnChange = (position) => {
    const updated = checkedState.map((item, index) => index === position ? !item : item);
    setCheckedState(updated);
  };

  const allChecked = checkedState.every(Boolean);

  return (
    <div className={`p-6 rounded-xl border ${THEME.border} bg-gradient-to-br from-slate-900 to-slate-800`}>
      <h3 className="text-xl font-bold mb-4 text-white flex items-center">
        <CheckSquare className="w-5 h-5 mr-2 text-purple-400" />
        Checklist Trước Khi Vào Lệnh
      </h3>
      <div className="space-y-3">
        {items.map((item, index) => (
          <div key={index} 
            className={`flex items-start p-3 rounded-lg cursor-pointer transition-colors ${checkedState[index] ? 'bg-emerald-900/20 border border-emerald-800' : 'bg-slate-950 border border-slate-800'}`}
            onClick={() => handleOnChange(index)}
          >
            <div className={`mt-0.5 w-5 h-5 rounded border flex items-center justify-center mr-3 ${checkedState[index] ? 'bg-emerald-500 border-emerald-500' : 'border-slate-500'}`}>
              {checkedState[index] && <CheckCircle2 className="w-3 h-3 text-white" />}
            </div>
            <span className={checkedState[index] ? 'text-emerald-200 line-through' : 'text-slate-300'}>{item}</span>
          </div>
        ))}
      </div>
      {allChecked && (
        <div className="mt-4 p-3 bg-emerald-500/20 text-emerald-300 text-center rounded border border-emerald-500 font-bold animate-pulse">
          ✅ Đủ điều kiện! Bạn có thể cân nhắc vào lệnh.
        </div>
      )}
    </div>
  );
};

// --- Main Application ---
export default function ICTLesson7App() {
  const [activeTab, setActiveTab] = useState('mindset');

  const content = {
    mindset: {
      title: "1. Tư Duy & Sự Thật",
      icon: <BookOpen className="w-5 h-5"/>,
      component: (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
          <div className="bg-rose-500/10 border border-rose-500/30 p-4 rounded-lg">
            <h4 className="font-bold text-rose-400 text-lg mb-2">Sự thật khó chấp nhận</h4>
            <p>❌ Trader giỏi không phải là người ít thua.</p>
            <p>✅ Trader giỏi là người <strong>thua nhỏ – thắng lớn</strong>.</p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-4">
            <div className={`p-5 rounded-lg border ${THEME.border} ${THEME.card}`}>
              <div className="text-emerald-400 font-bold text-lg mb-2">Mục tiêu ICT</div>
              <ul className="space-y-2 text-sm">
                <li className="flex items-center"><Shield className="w-4 h-4 mr-2"/> Thua không đau (Quản lý vốn)</li>
                <li className="flex items-center"><Target className="w-4 h-4 mr-2"/> Thắng đúng chỗ (Thanh khoản)</li>
                <li className="flex items-center"><Activity className="w-4 h-4 mr-2"/> Không cần Winrate cao</li>
              </ul>
            </div>
            <div className={`p-5 rounded-lg border ${THEME.border} ${THEME.card}`}>
              <div className="text-blue-400 font-bold text-lg mb-2">Quy tắc vàng</div>
              <p className="text-sm leading-relaxed">
                Nhiệm vụ của trader không phải là THẮNG. Nhiệm vụ là <strong className="text-white">SỐNG SÓT</strong> đủ lâu để lợi thế phát huy.
              </p>
            </div>
          </div>
        </div>
      )
    },
    sltp: {
      title: "2. SL & TP Logic",
      icon: <Target className="w-5 h-5"/>,
      component: (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
           <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="text-xl font-bold text-rose-400 mb-3">Stop Loss (Cắt lỗ)</h3>
              <ul className="space-y-3">
                <li className="flex items-start bg-slate-800 p-3 rounded">
                  <Lock className="w-5 h-5 text-rose-500 mr-2 mt-1 shrink-0"/>
                  <span>
                    <strong>Quy tắc sống còn:</strong> SL phải đặt ở nơi mà nếu giá chạm vào → <strong>Ý tưởng ICT SAI.</strong>
                  </span>
                </li>
                <li className="flex items-start bg-slate-800 p-3 rounded">
                  <ArrowRight className="w-5 h-5 text-slate-400 mr-2 mt-1 shrink-0"/>
                  <span>
                    <strong>Vị trí:</strong> Phía SAU vùng Smart Money (Sau OB / FVG).
                  </span>
                </li>
                <li className="text-sm text-slate-400 italic pl-8">
                  👉 Sai là sai nhanh. Đúng là chạy rất xa.
                </li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-xl font-bold text-emerald-400 mb-3">Take Profit (Chốt lời)</h3>
              <ul className="space-y-3">
                <li className="flex items-start bg-slate-800 p-3 rounded">
                  <Target className="w-5 h-5 text-emerald-500 mr-2 mt-1 shrink-0"/>
                  <span>
                    <strong>Luôn nhắm tới Thanh khoản (Liquidity):</strong> Đỉnh cũ, đáy cũ, Equal Highs/Lows.
                  </span>
                </li>
                <li className="flex items-start bg-slate-800 p-3 rounded">
                  <TrendingUp className="w-5 h-5 text-emerald-500 mr-2 mt-1 shrink-0"/>
                  <span>
                    <strong>Chia nhỏ TP:</strong> TP1 (30-50%) để giảm áp lực, TP2 tại Liquidity chính, TP3 thả trôi (Runner).
                  </span>
                </li>
              </ul>
            </div>
          </div>
          
          <SetupVisualizer />
        </div>
      )
    },
    math: {
      title: "3. Bài toán Risk:Reward",
      icon: <Calculator className="w-5 h-5"/>,
      component: (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
           <div className="mb-4">
             <h2 className="text-2xl font-bold text-white mb-2">Trái tim của hệ thống</h2>
             <p className="text-slate-400">ICT không sống bằng cảm xúc, ICT sống bằng toán học. Hãy xem tại sao Winrate 35% vẫn giúp bạn giàu có.</p>
           </div>
           <RRSimulator />
           
           <div className="p-4 bg-slate-800 rounded-lg border-l-4 border-yellow-500">
             <h4 className="font-bold text-yellow-400 mb-1">Quy tắc RR</h4>
             <p className="text-sm">RR tối thiểu phải là <strong>1:3</strong>. Nếu setup cho RR 1:1 hoặc 1:2, hãy bỏ qua. "No trade is a position."</p>
           </div>
        </div>
      )
    },
    management: {
      title: "4. Quản lý Vốn & Lỗi sai",
      icon: <AlertTriangle className="w-5 h-5"/>,
      component: (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
          <div className="grid md:grid-cols-2 gap-6">
            {/* Rules */}
            <div className={`p-5 rounded-lg border ${THEME.border} bg-slate-900`}>
              <h3 className="font-bold text-white text-lg mb-4 border-b border-slate-700 pb-2">Luật Bất Khả Xâm Phạm</h3>
              <ul className="space-y-4">
                <li className="flex items-center justify-between">
                  <span>Risk mỗi lệnh</span>
                  <span className="font-mono text-emerald-400 bg-emerald-900/30 px-2 py-1 rounded">1% - 2% MAX</span>
                </li>
                <li className="flex items-center justify-between">
                  <span>Risk người mới</span>
                  <span className="font-mono text-emerald-400 bg-emerald-900/30 px-2 py-1 rounded">0.5% - 1%</span>
                </li>
                <li className="flex items-center justify-between">
                  <span>Số lệnh / ngày</span>
                  <span className="font-mono text-blue-400 bg-blue-900/30 px-2 py-1 rounded">1 - 2 lệnh</span>
                </li>
              </ul>
            </div>

            {/* Mistakes */}
            <div className={`p-5 rounded-lg border border-rose-900/50 bg-rose-950/10`}>
               <h3 className="font-bold text-rose-400 text-lg mb-4 border-b border-rose-900/50 pb-2">5 Lỗi "Cháy TK" Phổ Biến</h3>
               <ul className="space-y-2 text-sm text-slate-300">
                 <li className="flex items-start"><XCircle className="w-4 h-4 mr-2 text-rose-500 mt-0.5"/> Tăng lot sau lệnh thắng (tự tin thái quá).</li>
                 <li className="flex items-start"><XCircle className="w-4 h-4 mr-2 text-rose-500 mt-0.5"/> Gấp lệnh (Martingale) để gỡ lỗ.</li>
                 <li className="flex items-start"><XCircle className="w-4 h-4 mr-2 text-rose-500 mt-0.5"/> Dời SL ra xa khi giá chạy sai.</li>
                 <li className="flex items-start"><XCircle className="w-4 h-4 mr-2 text-rose-500 mt-0.5"/> Chốt non (TP sớm) vì sợ mất lãi.</li>
                 <li className="flex items-start"><XCircle className="w-4 h-4 mr-2 text-rose-500 mt-0.5"/> Không ghi nhật ký giao dịch.</li>
               </ul>
            </div>
          </div>

          <div className="p-4 bg-slate-800 rounded-lg">
             <h4 className="font-bold text-white mb-2">Quản lý lệnh đang chạy (Active Trade)</h4>
             <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-emerald-400 font-bold">ĐƯỢC dời SL (Về Entry):</span>
                  <p className="text-slate-400">Chỉ khi giá đã đạt TP1 hoặc tạo cấu trúc tăng/giảm mới rõ ràng.</p>
                </div>
                <div>
                  <span className="text-rose-400 font-bold">KHÔNG dời SL:</span>
                  <p className="text-slate-400">Khi giá mới chạy được chút ít. Dời sớm = Bóp chết Trade.</p>
                </div>
             </div>
          </div>
        </div>
      )
    },
    practice: {
      title: "5. Thực hành",
      icon: <CheckSquare className="w-5 h-5"/>,
      component: (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
          <p className="text-slate-400 mb-4">
            Trước khi vào bất kỳ lệnh nào, hãy hít thở sâu và đi qua checklist này. Nếu có 1 câu trả lời "Không", hãy tắt máy.
          </p>
          <Checklist />
          
          <div className="mt-8 p-6 bg-slate-900 border border-slate-700 rounded-xl text-center">
            <h3 className="text-xl font-bold text-white mb-4">Bài tập 7 Ngày Kỷ Luật</h3>
            <p className="mb-4 text-slate-400">Mỗi ngày tìm 1 setup (Quá khứ hoặc Realtime). Ghi lại Entry, SL, TP, RR. <br/> <span className="text-emerald-400">Không cần vào lệnh thật.</span></p>
            <button className="px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded font-bold transition-colors">
              Tải mẫu Nhật ký Trading
            </button>
          </div>
        </div>
      )
    }
  };

  return (
    <div className={`min-h-screen ${THEME.bg} ${THEME.text} font-sans selection:bg-emerald-500/30`}>
      {/* Header */}
      <header className="border-b border-slate-800 bg-slate-950/50 backdrop-blur sticky top-0 z-10">
        <div className="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <TrendingDown className="w-6 h-6 text-emerald-500" />
            <h1 className="text-lg font-bold text-white tracking-wide">ICT MENTORSHIP <span className="text-slate-500">|</span> BÀI 7</h1>
          </div>
          <div className="text-xs font-mono text-slate-500 hidden sm:block">RISK MANAGEMENT MODULE</div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-4xl mx-auto px-4 py-8">
        
        {/* Intro Hero */}
        <div className="mb-10 text-center">
          <h2 className="text-3xl md:text-4xl font-black text-white mb-3">
            STOP LOSS · TAKE PROFIT · RISK MANAGEMENT
          </h2>
          <p className="text-lg text-slate-400 max-w-2xl mx-auto">
            Biến ICT từ một "setup đẹp" thành một "hệ thống kiếm sống".
          </p>
        </div>

        {/* Navigation Tabs */}
        <div className="flex flex-wrap justify-center gap-2 mb-8">
          {Object.keys(content).map((key) => (
            <button
              key={key}
              onClick={() => setActiveTab(key)}
              className={`flex items-center px-4 py-2 rounded-full text-sm font-medium transition-all duration-300
                ${activeTab === key 
                  ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-900/50' 
                  : 'bg-slate-900 text-slate-400 hover:bg-slate-800 hover:text-white border border-slate-800'
                }`}
            >
              <span className="mr-2">{content[key].icon}</span>
              {content[key].title}
            </button>
          ))}
        </div>

        {/* Dynamic Content Area */}
        <div className="min-h-[400px]">
          {content[activeTab].component}
        </div>

      </main>

      {/* Footer */}
      <footer className="border-t border-slate-900 mt-12 py-8 text-center text-slate-600 text-sm">
        <p>"Không quan trọng bạn đúng hay sai. Quan trọng là bạn kiếm được bao nhiêu khi đúng <br/> và mất bao nhiêu khi sai." - George Soros</p>
      </footer>
    </div>
  );
}