import React, { useState, useEffect, useRef } from 'react';
import { BookOpen, Play, Eye, CheckCircle, AlertTriangle, TrendingUp, TrendingDown, Info, DollarSign, ArrowRight, RefreshCw, ChevronRight, ChevronLeft } from 'lucide-react';

// --- COMPONENTS ---

// 1. Simulation Component (Mô phỏng Stop Hunt)
const LiquiditySimulator = () => {
  const [step, setStep] = useState(0); // 0: Idle, 1: Approach, 2: Sweep/Hunt, 3: Reversal
  const [isAnimating, setIsAnimating] = useState(false);

  const runSimulation = () => {
    if (isAnimating) return;
    setIsAnimating(true);
    setStep(1);
    
    // Sequence of animation
    setTimeout(() => setStep(2), 1000); // Giá đi lên vùng Stop Hunt
    setTimeout(() => setStep(3), 2500); // Giá đảo chiều mạnh
    setTimeout(() => {
      setIsAnimating(false);
    }, 4000);
  };

  const reset = () => {
    setStep(0);
    setIsAnimating(false);
  };

  return (
    <div className="bg-slate-900 rounded-xl p-6 border border-slate-700 shadow-2xl relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-blue-500"></div>
      
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-xl font-bold text-slate-100 flex items-center gap-2">
          <TrendingUp className="text-emerald-400" /> Mô Phỏng: Stop Hunt & Liquidity
        </h3>
        <div className="flex gap-2">
           <button 
            onClick={reset}
            disabled={isAnimating || step === 0}
            className={`px-3 py-1 text-sm rounded transition-colors ${step === 0 ? 'text-slate-600' : 'text-slate-300 hover:bg-slate-800'}`}
          >
            <RefreshCw size={16} />
          </button>
          <button 
            onClick={runSimulation}
            disabled={isAnimating || step === 3}
            className={`px-4 py-1.5 rounded-lg font-semibold text-sm flex items-center gap-2 transition-all ${
              isAnimating || step === 3
                ? 'bg-slate-700 text-slate-500 cursor-not-allowed' 
                : 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-900/50'
            }`}
          >
            <Play size={16} /> {step === 3 ? 'Đã hoàn thành' : 'Chạy Mô Phỏng'}
          </button>
        </div>
      </div>

      {/* CHART AREA */}
      <div className="h-64 w-full bg-slate-950 rounded-lg relative border border-slate-800 grid grid-cols-12 gap-1 p-4 overflow-hidden">
        {/* Grid lines */}
        <div className="absolute inset-0 pointer-events-none opacity-10" style={{ backgroundImage: 'linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>

        {/* Labels */}
        <div className="absolute top-8 right-10 text-xs font-mono text-rose-400 z-10 bg-slate-900/80 px-2 py-1 border border-rose-900/30 rounded">
          Retail Stop Loss (Buy Stops)
        </div>

        {/* Static Candles (Equal Highs) */}
        <div className="col-start-2 col-span-1 h-full flex items-end pb-20 justify-center">
            <div className="w-4 h-24 bg-emerald-600/50 rounded-sm relative">
                <div className="absolute -top-6 left-1/2 -translate-x-1/2 w-[1px] h-32 bg-emerald-600/50"></div>
            </div>
        </div>
        <div className="col-start-4 col-span-1 h-full flex items-end pb-20 justify-center">
             <div className="w-4 h-20 bg-emerald-600/50 rounded-sm relative">
                <div className="absolute -top-6 left-1/2 -translate-x-1/2 w-[1px] h-28 bg-emerald-600/50"></div>
            </div>
        </div>
        
        {/* Equal Highs Line */}
        <div className="absolute top-24 left-10 right-10 h-[1px] border-t-2 border-dashed border-slate-500 flex justify-end items-start pt-1">
             <span className="text-[10px] text-slate-400 font-mono bg-slate-950 px-1">EQUAL HIGHS (EQH)</span>
        </div>

        {/* LIQUIDITY POOL ($$$) */}
        <div className="absolute top-16 left-20 right-20 h-8 flex justify-center gap-8 items-center z-20 transition-opacity duration-500"
             style={{ opacity: step >= 2 ? 0 : 1, transform: step >= 2 ? 'scale(1.5) translateY(-10px)' : 'scale(1)' }}>
            {[1,2,3,4,5].map((i) => (
                <div key={i} className="text-emerald-400 animate-pulse text-xs flex flex-col items-center">
                    <DollarSign size={14} />
                    <span className="text-[9px]">SL</span>
                </div>
            ))}
        </div>

        {/* ANIMATED SMART MONEY CANDLE */}
        <div className="absolute bottom-20 left-[45%] w-8 z-30 flex flex-col items-center transition-all duration-1000 ease-in-out"
             style={{
                 height: step === 0 ? '60px' : step === 1 ? '140px' : step === 2 ? '190px' : '190px',
                 bottom: '80px',
             }}>
            
            {/* The Wick */}
            <div className={`w-[2px] transition-all duration-500 ${step === 3 ? 'bg-rose-500 h-full' : 'bg-emerald-500 h-[110%]'}`}></div>
            
            {/* The Body */}
            <div className={`absolute bottom-0 w-full transition-all duration-700 border border-black/20
                ${step === 0 ? 'h-full bg-emerald-500' : ''}
                ${step === 1 ? 'h-full bg-emerald-500' : ''}
                ${step === 2 ? 'h-full bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,0.5)]' : ''}
                ${step === 3 ? 'h-[20%] bg-rose-500 top-0 bottom-auto shadow-[0_0_20px_rgba(244,63,94,0.5)]' : ''} 
            `}>
            </div>
            
            {/* Annotation Text */}
            {step === 2 && (
                <div className="absolute -top-12 left-10 w-40 bg-slate-800 text-emerald-300 text-xs p-2 rounded border border-emerald-500/30 animate-bounce">
                    ⚡️ <b>Quét Thanh Khoản!</b><br/>
                    (Kích hoạt Buy Stop/SL)
                </div>
            )}
             {step === 3 && (
                <div className="absolute top-10 left-10 w-40 bg-slate-800 text-rose-300 text-xs p-2 rounded border border-rose-500/30">
                    📉 <b>Đảo chiều (Reversal)</b><br/>
                    (Sau khi đã có đủ hàng)
                </div>
            )}
        </div>

        {/* Big Down Move (Final Step) */}
        <div className={`absolute right-[20%] w-8 bg-rose-600 z-20 transition-all duration-1000 delay-300
             ${step === 3 ? 'h-40 bottom-10 opacity-100' : 'h-0 bottom-40 opacity-0'}`}>
        </div>

      </div>
      
      {/* EXPLANATION FOOTER */}
      <div className="mt-4 p-4 bg-slate-800/50 rounded-lg text-slate-300 text-sm border border-slate-700">
        <div className="flex items-start gap-3">
            <Info className="flex-shrink-0 text-blue-400 mt-1" size={18} />
            <div>
                {step === 0 && <p>Thị trường đang có <b>Equal Highs</b> (đỉnh bằng nhau). Retail Trader thường đặt Stop Loss (lệnh chờ mua) ngay phía trên vùng này.</p>}
                {step === 1 && <p>Giá bắt đầu đi lên. Retail nghĩ: "Sắp Breakout rồi! Mua vào thôi!" hoặc "Giữ lệnh Sell, SL ngay trên đỉnh".</p>}
                {step === 2 && <p><span className="text-emerald-400 font-bold">QUÉT THANH KHOẢN!</span> Giá phá đỉnh giả. Ngân hàng dùng các lệnh Buy Stop (SL của Retail) để khớp lệnh SELL khổng lồ của họ.</p>}
                {step === 3 && <p><span className="text-rose-400 font-bold">GIÁ SẬP MẠNH!</span> Sau khi lấy đủ thanh khoản, Smart Money đẩy giá đi theo hướng thực sự. Retail bị "bẫy" mua đỉnh hoặc dính SL.</p>}
            </div>
        </div>
      </div>
    </div>
  );
};

// 2. Card Component
const ConceptCard = ({ title, icon: Icon, children, highlight = false }) => (
  <div className={`p-6 rounded-xl border ${highlight ? 'bg-emerald-900/10 border-emerald-500/50' : 'bg-slate-800 border-slate-700'} shadow-sm hover:shadow-md transition-shadow`}>
    <div className="flex items-center gap-3 mb-4">
      <div className={`p-2 rounded-lg ${highlight ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-700 text-slate-300'}`}>
        <Icon size={24} />
      </div>
      <h3 className={`text-lg font-bold ${highlight ? 'text-emerald-300' : 'text-slate-100'}`}>{title}</h3>
    </div>
    <div className="text-slate-300 space-y-2 leading-relaxed text-sm md:text-base">
      {children}
    </div>
  </div>
);

// 3. Checklist Component
const PracticeChecklist = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: "Mở chart XAUUSD hoặc EURUSD (Khung H1/H4)", done: false },
    { id: 2, text: "Khoanh tròn các đỉnh/đáy rõ ràng (Cũ)", done: false },
    { id: 3, text: "Tìm Equal Highs / Equal Lows", done: false },
    { id: 4, text: "Ghi chú 'SL nằm ở đây' tại các vùng đó", done: false },
    { id: 5, text: "QUAN TRỌNG: Chỉ quan sát, KHÔNG vào lệnh", done: false },
  ]);

  const toggleTask = (id) => {
    setTasks(tasks.map(t => t.id === id ? { ...t, done: !t.done } : t));
  };

  const progress = Math.round((tasks.filter(t => t.done).length / tasks.length) * 100);

  return (
    <div className="bg-slate-900 p-6 rounded-xl border border-slate-700">
      <div className="flex justify-between items-end mb-4">
        <h3 className="text-lg font-bold text-slate-100">Bài Tập Thực Hành (3 Ngày Tới)</h3>
        <span className="text-sm font-mono text-emerald-400">{progress}% Hoàn thành</span>
      </div>
      
      <div className="w-full bg-slate-800 h-2 rounded-full mb-6 overflow-hidden">
        <div className="bg-emerald-500 h-full transition-all duration-500" style={{ width: `${progress}%` }}></div>
      </div>

      <div className="space-y-3">
        {tasks.map(task => (
          <div 
            key={task.id} 
            onClick={() => toggleTask(task.id)}
            className={`flex items-center gap-4 p-3 rounded-lg cursor-pointer transition-all border ${
              task.done 
                ? 'bg-emerald-900/20 border-emerald-500/30' 
                : 'bg-slate-800 border-slate-700 hover:border-slate-500'
            }`}
          >
            <div className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center ${
              task.done ? 'bg-emerald-500 border-emerald-500' : 'border-slate-500'
            }`}>
              {task.done && <CheckCircle size={14} className="text-white" />}
            </div>
            <span className={`text-sm ${task.done ? 'text-emerald-200 line-through decoration-emerald-500/50' : 'text-slate-300'}`}>
              {task.text}
            </span>
          </div>
        ))}
      </div>
      {progress === 100 && (
        <div className="mt-4 text-center p-3 bg-emerald-500/10 text-emerald-400 text-sm rounded border border-emerald-500/20 animate-pulse">
            Tuyệt vời! Bạn đã sẵn sàng để nhìn chart dưới góc nhìn Smart Money.
        </div>
      )}
    </div>
  );
};

// --- MAIN APP ---

export default function ICTLessonOne() {
  const [activeTab, setActiveTab] = useState('theory'); // theory, visualizer, practice

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-emerald-500/30 selection:text-emerald-100">
      
      {/* HEADER */}
      <header className="fixed top-0 w-full bg-slate-900/80 backdrop-blur-md border-b border-slate-800 z-50">
        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-emerald-600 text-white font-bold p-1.5 rounded text-xs">ICT</div>
            <h1 className="font-bold text-lg md:text-xl tracking-tight text-slate-100">
              Bài 1: <span className="text-emerald-400">Giá Di Chuyển Vì Thanh Khoản</span>
            </h1>
          </div>
          <div className="hidden md:flex items-center gap-1 text-xs font-mono text-slate-500">
            <span>LESSON_01</span>
            <span className="text-slate-700">|</span>
            <span>CORE_LOGIC</span>
          </div>
        </div>
      </header>

      {/* CONTENT WRAPPER */}
      <main className="pt-24 pb-20 px-4 max-w-5xl mx-auto space-y-12">

        {/* HERO SECTION */}
        <section className="text-center space-y-6">
          <h2 className="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400 leading-tight">
            "Không có Thanh Khoản,<br className="hidden md:block" /> Không có Chuyển Động Lớn."
          </h2>
          <p className="text-slate-400 max-w-2xl mx-auto text-lg">
            Nếu bạn chỉ nhớ 1 điều duy nhất trong ICT, hãy nhớ điều này. Giá không chạy ngẫu nhiên, giá chạy đi tìm nơi có nhiều tiền nhất.
          </p>
        </section>

        {/* TABS NAVIGATION (Mobile Friendly) */}
        <div className="flex justify-center mb-8 sticky top-16 z-40 py-2 bg-slate-950/90 backdrop-blur md:static md:bg-transparent">
          <div className="bg-slate-900 p-1 rounded-full border border-slate-800 inline-flex">
            {[
              { id: 'theory', label: 'Lý Thuyết', icon: BookOpen },
              { id: 'visualizer', label: 'Mô Phỏng', icon: Eye },
              { id: 'practice', label: 'Thực Hành', icon: CheckCircle },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-5 py-2 rounded-full text-sm font-medium transition-all ${
                  activeTab === tab.id 
                    ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-900/50' 
                    : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'
                }`}
              >
                <tab.icon size={16} />
                <span className={`${activeTab === tab.id ? 'block' : 'hidden md:block'}`}>{tab.label}</span>
              </button>
            ))}
          </div>
        </div>

        {/* TAB CONTENT: THEORY */}
        {activeTab === 'theory' && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
            
            {/* 1. Definition */}
            <div className="grid md:grid-cols-2 gap-6">
              <ConceptCard title="Thanh Khoản (Liquidity) Là Gì?" icon={DollarSign} highlight={true}>
                <p>Nói theo ngôn ngữ Trader:</p>
                <ul className="list-disc pl-5 space-y-1 text-slate-400 marker:text-emerald-500">
                  <li>Thanh khoản = Nơi có <b>NHIỀU LỆNH CHỜ SẴN</b>.</li>
                  <li>Lệnh chờ nhiều nhất = <b>Stop-Loss</b>.</li>
                  <li>Nơi nhiều Stop-Loss nhất = Đỉnh/Đáy cũ rõ ràng.</li>
                </ul>
                <div className="mt-4 p-3 bg-slate-950 rounded border border-slate-700 text-xs font-mono">
                  Smart Money: "Tôi muốn mua 1 tỷ đô, tôi cần ai đó bán cho tôi 1 tỷ đô. Stop Loss của bạn chính là thứ tôi cần."
                </div>
              </ConceptCard>

              <ConceptCard title="Ví Dụ Đời Thường" icon={BookOpen}>
                <p>Ngân hàng muốn <b>SELL 1.000 lot</b> nhưng thị trường chỉ có <b>100 lot BUY</b>.</p>
                <p className="mt-2 text-rose-400 font-semibold">❌ Không đủ thanh khoản để bán.</p>
                <p className="mt-2">👉 Ngân hàng đẩy giá <b>PHÁ ĐỈNH</b>.</p>
                <p>Khi đó: Trader Breakout nhảy vào BUY + Trader Sell bị dính Stop Loss (cũng là lệnh BUY).</p>
                <p className="mt-2 text-emerald-400 font-semibold">✅ Đủ thanh khoản (Lệnh BUY) → Ngân hàng SELL hết hàng.</p>
              </ConceptCard>
            </div>

            {/* 2. Key Locations */}
            <div className="bg-slate-900 rounded-xl border border-slate-700 p-6 md:p-8">
               <h3 className="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2">
                 <Eye className="text-emerald-400" /> Thanh Khoản Nằm Ở Đâu? (3 Vị Trí Cố Định)
               </h3>
               <div className="grid md:grid-cols-3 gap-4">
                  <div className="bg-slate-950 p-4 rounded-lg border border-slate-800 text-center hover:border-emerald-500/30 transition-colors">
                    <div className="h-1 bg-rose-500 w-16 mx-auto mb-3"></div>
                    <h4 className="font-bold text-slate-200">Trên Đỉnh Cũ</h4>
                    <p className="text-xs text-slate-500 mt-1 font-mono uppercase">Buy-side Liquidity</p>
                    <p className="text-sm mt-2 text-slate-400">Nơi đặt SL của phe Sell.</p>
                  </div>
                  <div className="bg-slate-950 p-4 rounded-lg border border-slate-800 text-center hover:border-emerald-500/30 transition-colors">
                    <div className="h-1 bg-emerald-500 w-16 mx-auto mb-3"></div>
                    <h4 className="font-bold text-slate-200">Dưới Đáy Cũ</h4>
                    <p className="text-xs text-slate-500 mt-1 font-mono uppercase">Sell-side Liquidity</p>
                    <p className="text-sm mt-2 text-slate-400">Nơi đặt SL của phe Buy.</p>
                  </div>
                  <div className="bg-slate-950 p-4 rounded-lg border border-slate-800 text-center hover:border-emerald-500/30 transition-colors">
                    <div className="flex justify-center gap-1 mb-3">
                        <div className="h-1 bg-yellow-500 w-8"></div>
                        <div className="h-1 bg-yellow-500 w-8"></div>
                    </div>
                    <h4 className="font-bold text-slate-200">Equal Highs / Lows</h4>
                    <p className="text-xs text-slate-500 mt-1 font-mono uppercase">Hồ Thanh Khoản</p>
                    <p className="text-sm mt-2 text-slate-400">Nơi SL tập trung nhiều nhất.</p>
                  </div>
               </div>
            </div>

            {/* 3. Mindset Shift */}
            <div className="bg-gradient-to-r from-emerald-900/20 to-slate-900 rounded-xl border border-emerald-500/20 p-6">
                <h3 className="text-xl font-bold text-emerald-300 mb-4 flex items-center gap-2">
                    <RefreshCw size={20} /> Đổi Tư Duy - Bước Ngoặt
                </h3>
                <div className="flex flex-col md:flex-row gap-8 items-center">
                    <div className="flex-1 text-center md:text-right opacity-50 grayscale">
                        <h4 className="font-bold text-slate-400 mb-2">Tư Duy Cũ (Retail)</h4>
                        <p>"Giá sắp tăng hay giảm?"</p>
                        <p>"Mô hình này là gì?"</p>
                    </div>
                    <div className="bg-slate-800 p-2 rounded-full border border-slate-700">
                        <ArrowRight />
                    </div>
                    <div className="flex-1 text-center md:text-left">
                        <h4 className="font-bold text-emerald-400 mb-2">Tư Duy ICT (Smart Money)</h4>
                        <p>"Ai đang mắc bẫy ở đây?"</p>
                        <p>"Stop-loss của họ nằm ở đâu?"</p>
                        <p className="font-bold text-white mt-1">"Giá cần đi đâu để có thanh khoản?"</p>
                    </div>
                </div>
            </div>
            
            <div className="flex justify-end pt-4">
                <button 
                  onClick={() => setActiveTab('visualizer')}
                  className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-3 rounded-lg font-bold transition-all"
                >
                  Xem Mô Phỏng <ChevronRight />
                </button>
            </div>
          </div>
        )}

        {/* TAB CONTENT: VISUALIZER */}
        {activeTab === 'visualizer' && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="prose prose-invert max-w-none">
                <h3>Thị Trường Thực Tế</h3>
                <p className="text-slate-400">Hãy quan sát cách giá được "thao túng" để lấy thanh khoản trước khi di chuyển thật sự. Đây không phải là lừa đảo, đây là cơ chế vận hành.</p>
            </div>
            
            <LiquiditySimulator />

            <div className="grid md:grid-cols-2 gap-6 mt-8">
                <div className="p-4 bg-rose-900/10 border border-rose-500/20 rounded-lg">
                    <h4 className="font-bold text-rose-300 mb-2 flex items-center gap-2"><AlertTriangle size={16}/> Cạm Bẫy Retail</h4>
                    <p className="text-sm text-slate-400">
                        Thấy phá đỉnh → Nghĩ xu hướng tăng mạnh → Nhảy vào BUY (FOMO) hoặc dời SL ngay dưới đỉnh. Kết quả: Dính đỉnh.
                    </p>
                </div>
                <div className="p-4 bg-emerald-900/10 border border-emerald-500/20 rounded-lg">
                    <h4 className="font-bold text-emerald-300 mb-2 flex items-center gap-2"><Eye size={16}/> Góc Nhìn ICT</h4>
                    <p className="text-sm text-slate-400">
                        Thấy phá đỉnh → Chờ đợi tín hiệu quét thanh khoản (Sweep) → Quan sát nến đảo chiều (Engulfing) → SELL khi Retail đang hoảng loạn.
                    </p>
                </div>
            </div>

             <div className="flex justify-between pt-4">
                <button 
                  onClick={() => setActiveTab('theory')}
                  className="flex items-center gap-2 text-slate-400 hover:text-white px-4 py-2"
                >
                  <ChevronLeft /> Quay lại Lý Thuyết
                </button>
                <button 
                  onClick={() => setActiveTab('practice')}
                  className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-3 rounded-lg font-bold transition-all"
                >
                  Bài Tập Thực Hành <ChevronRight />
                </button>
            </div>
          </div>
        )}

        {/* TAB CONTENT: PRACTICE */}
        {activeTab === 'practice' && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="text-center mb-8">
                <h3 className="text-2xl font-bold text-slate-100">Bài Tập Về Nhà (Bắt Buộc)</h3>
                <p className="text-slate-400 mt-2">Nếu bạn chưa nhìn thấy thanh khoản trên chart thật, đừng học bài tiếp theo.</p>
            </div>

            <PracticeChecklist />

            <div className="bg-slate-900 p-6 rounded-xl border border-slate-700 mt-8">
                <h4 className="font-bold text-slate-100 mb-4">Tóm Tắt Bài 1 (Phải Thuộc Lòng)</h4>
                <blockquote className="border-l-4 border-emerald-500 pl-4 italic text-slate-300 text-lg">
                    "Giá không phá đỉnh để đi tiếp.<br/>
                    Giá phá đỉnh để <span className="text-emerald-400 font-bold not-italic">LẤY THANH KHOẢN</span>."
                </blockquote>
            </div>
             <div className="flex justify-start pt-4">
                <button 
                  onClick={() => setActiveTab('visualizer')}
                  className="flex items-center gap-2 text-slate-400 hover:text-white px-4 py-2"
                >
                  <ChevronLeft /> Quay lại Mô Phỏng
                </button>
            </div>
          </div>
        )}

      </main>

      {/* FOOTER */}
      <footer className="border-t border-slate-800 bg-slate-950 py-8 text-center text-slate-500 text-sm">
        <p>© ICT Learning Application. Designed for Educational Purposes.</p>
        <p className="mt-2 text-xs">Trading carries risk. Understand liquidity before you trade.</p>
      </footer>
    </div>
  );
}