import React, { useState, useEffect } from 'react';
import { 
  TrendingUp, 
  TrendingDown, 
  Target, 
  AlertTriangle, 
  CheckCircle, 
  BookOpen, 
  BarChart2, 
  Eye, 
  ArrowRight,
  RefreshCw,
  ShieldAlert
} from 'lucide-react';

// --- COMPONENTS ---

// 1. Header Section
const Header = () => (
  <header className="bg-slate-900 border-b border-slate-700 p-6 sticky top-0 z-50 shadow-lg">
    <div className="max-w-4xl mx-auto flex justify-between items-center">
      <div>
        <h1 className="text-2xl font-bold text-emerald-400 tracking-wider">ICT MENTORSHIP</h1>
        <p className="text-slate-400 text-sm">Bài 5: Daily Bias - Định Hướng Giao Dịch</p>
      </div>
      <div className="hidden md:flex items-center gap-2 bg-slate-800 px-3 py-1 rounded-full text-xs font-mono text-emerald-200 border border-emerald-900">
        <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
        LIVE LEARNING
      </div>
    </div>
  </header>
);

// 2. Interactive Concept Card
const ConceptCard = ({ title, icon: Icon, color, children }) => (
  <div className={`bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-${color}-500 transition-all duration-300 group`}>
    <div className={`w-12 h-12 rounded-lg bg-slate-900 flex items-center justify-center mb-4 border border-slate-700 group-hover:border-${color}-500/50`}>
      <Icon className={`text-${color}-400`} size={24} />
    </div>
    <h3 className="text-xl font-bold text-slate-100 mb-2">{title}</h3>
    <div className="text-slate-400 text-sm leading-relaxed space-y-2">
      {children}
    </div>
  </div>
);

// 3. The Visualizer (Simulator)
const ICTVisualizer = () => {
  const [scenario, setScenario] = useState('sell'); // 'sell' | 'buy' | 'range'
  const [animationStep, setAnimationStep] = useState(0);

  // Animation loop simulation
  useEffect(() => {
    const timer = setInterval(() => {
      setAnimationStep((prev) => (prev + 1) % 4);
    }, 1500);
    return () => clearInterval(timer);
  }, []);

  // SVG Paths definitions based on scenario
  const getPath = () => {
    if (scenario === 'sell') {
      // Moves up to premium, grabs liquidity, breaks down
      return "M 10,250 C 50,200 80,150 100,100 L 150,50 L 200,80 L 250,20 L 300,120 L 350,280";
    }
    if (scenario === 'buy') {
      // Moves down to discount, grabs liquidity, breaks up
      return "M 10,50 C 50,100 80,150 100,200 L 150,250 L 200,220 L 250,280 L 300,180 L 350,20";
    }
    // No Trade / Range
    return "M 10,150 C 50,120 100,180 150,150 C 200,120 250,180 300,150 C 350,120 380,150 400,150";
  };

  return (
    <div className="bg-slate-900 rounded-2xl p-6 border border-slate-700 shadow-2xl overflow-hidden relative">
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-cyan-500"></div>
      
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-lg font-semibold text-white flex items-center gap-2">
          <Eye size={18} className="text-cyan-400"/> Mô Phỏng Price Action
        </h3>
        <div className="flex gap-2">
          <button 
            onClick={() => setScenario('sell')}
            className={`px-3 py-1 rounded text-xs font-bold transition-colors ${scenario === 'sell' ? 'bg-red-500/20 text-red-400 border border-red-500' : 'bg-slate-800 text-slate-400'}`}
          >
            SELL BIAS
          </button>
          <button 
             onClick={() => setScenario('buy')}
             className={`px-3 py-1 rounded text-xs font-bold transition-colors ${scenario === 'buy' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500' : 'bg-slate-800 text-slate-400'}`}
          >
            BUY BIAS
          </button>
          <button 
             onClick={() => setScenario('range')}
             className={`px-3 py-1 rounded text-xs font-bold transition-colors ${scenario === 'range' ? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500' : 'bg-slate-800 text-slate-400'}`}
          >
            NO TRADE
          </button>
        </div>
      </div>

      <div className="relative h-80 bg-slate-950 rounded-lg border border-slate-800 select-none">
        {/* Dealing Range Grid */}
        <div className="absolute inset-0 flex flex-col">
          {/* Premium Zone */}
          <div className="h-1/2 w-full bg-red-900/5 border-b border-dashed border-slate-600 relative">
            <span className="absolute top-2 left-2 text-[10px] text-red-400 uppercase tracking-widest font-bold">Premium (50-100%)</span>
            <span className="absolute bottom-2 right-2 text-[10px] text-red-300/50">EQ (Equilibrium)</span>
          </div>
          {/* Discount Zone */}
          <div className="h-1/2 w-full bg-emerald-900/5 relative">
            <span className="absolute bottom-2 left-2 text-[10px] text-emerald-400 uppercase tracking-widest font-bold">Discount (0-50%)</span>
          </div>
        </div>

        {/* Liquidity Markers */}
        {scenario === 'sell' && (
          <>
            <div className="absolute top-[15%] left-[60%] flex flex-col items-center animate-bounce duration-[2000ms]">
               <span className="text-[10px] text-yellow-500 font-mono">$$$ (Buy-side Liq)</span>
               <div className="w-full h-[1px] bg-yellow-500/50 w-16"></div>
            </div>
          </>
        )}
        {scenario === 'buy' && (
          <>
            <div className="absolute bottom-[15%] left-[60%] flex flex-col items-center animate-bounce duration-[2000ms]">
               <div className="w-full h-[1px] bg-yellow-500/50 w-16"></div>
               <span className="text-[10px] text-yellow-500 font-mono">$$$ (Sell-side Liq)</span>
            </div>
          </>
        )}

        {/* SVG Chart */}
        <svg className="absolute inset-0 w-full h-full p-4 overflow-visible">
           <defs>
            <linearGradient id="lineGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#ef4444" />
              <stop offset="100%" stopColor="#10b981" />
            </linearGradient>
            <filter id="glow">
              <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          
          <path 
            d={getPath()} 
            fill="none" 
            stroke={scenario === 'range' ? '#94a3b8' : 'url(#lineGradient)'} 
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
            filter="url(#glow)"
            className="drop-shadow-lg transition-all duration-1000 ease-in-out"
          />

          {/* Dynamic Points based on scenario */}
          {scenario === 'sell' && (
            <>
              <circle cx="250" cy="20" r="4" fill="#ef4444" className="animate-ping" />
              <text x="260" y="20" fill="#ef4444" fontSize="12" className="font-mono">Sweep & Rejection</text>
            </>
          )}
          {scenario === 'buy' && (
             <>
              <circle cx="250" cy="280" r="4" fill="#10b981" className="animate-ping" />
              <text x="260" y="280" fill="#10b981" fontSize="12" className="font-mono">Sweep & Rejection</text>
            </>
          )}
        </svg>
      </div>
      
      <div className="mt-4 text-sm text-slate-300 bg-slate-800/50 p-3 rounded border border-slate-700">
        <strong className="text-white block mb-1">Giải thích kịch bản:</strong>
        {scenario === 'sell' && "Giá đang ở Premium (Vùng bán). Nó đi lên quét thanh khoản Buy-side (các đỉnh cũ), sau đó sập xuống. -> Bias: SELL."}
        {scenario === 'buy' && "Giá đang ở Discount (Vùng mua). Nó đi xuống quét thanh khoản Sell-side (các đáy cũ), sau đó bật lên. -> Bias: BUY."}
        {scenario === 'range' && "Giá nằm giữa 50% (Equilibrium), cấu trúc không rõ ràng hoặc đã quét 2 đầu. -> Bias: NO TRADE."}
      </div>
    </div>
  );
};

// 4. Checklist Component
const DailyChecklist = () => {
  const [items, setItems] = useState([
    { id: 1, text: "Giá đang ở vùng nào? (Premium/Discount)", checked: false },
    { id: 2, text: "Thanh khoản (Liquidity) bên nào chưa bị lấy?", checked: false },
    { id: 3, text: "Cấu trúc khung lớn (H4/D1) đang ủng hộ xu hướng nào?", checked: false },
    { id: 4, text: "Kết luận Bias: BUY, SELL hay NO TRADE?", checked: false },
  ]);

  const toggleItem = (id) => {
    setItems(items.map(i => i.id === id ? { ...i, checked: !i.checked } : i));
  };

  const allChecked = items.every(i => i.checked);

  return (
    <div className="bg-gradient-to-br from-slate-900 to-slate-800 p-6 rounded-2xl border border-slate-700 shadow-xl">
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-emerald-500/20 rounded-lg">
          <CheckCircle className="text-emerald-400" size={24} />
        </div>
        <h3 className="text-xl font-bold text-white">Checklist Trước Phiên London</h3>
      </div>
      
      <div className="space-y-3">
        {items.map(item => (
          <div 
            key={item.id}
            onClick={() => toggleItem(item.id)}
            className={`flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all duration-200 ${item.checked ? 'bg-emerald-900/20 border-emerald-500/50' : 'bg-slate-800 border-slate-700 hover:bg-slate-700'}`}
          >
            <div className={`w-6 h-6 rounded border flex items-center justify-center transition-colors ${item.checked ? 'bg-emerald-500 border-emerald-500' : 'border-slate-500'}`}>
              {item.checked && <CheckCircle size={16} className="text-white" />}
            </div>
            <span className={`text-sm md:text-base ${item.checked ? 'text-emerald-300 line-through' : 'text-slate-300'}`}>{item.text}</span>
          </div>
        ))}
      </div>

      {allChecked && (
        <div className="mt-6 p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-lg text-emerald-400 text-center animate-pulse font-bold">
          ✨ Bạn đã hoàn thành quy trình Bias! Hãy kiên nhẫn chờ Setup.
        </div>
      )}
    </div>
  );
};

// --- MAIN APP COMPONENT ---

const ICTDailyBiasLesson = () => {
  const [activeTab, setActiveTab] = useState('theory'); // 'theory' | 'practice'

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-emerald-500/30">
      <Header />

      <main className="max-w-4xl mx-auto p-4 md:p-8 space-y-12">
        
        {/* HERO SECTION */}
        <section className="text-center space-y-4 py-8">
          <h2 className="text-3xl md:text-5xl font-extrabold text-white">
            Daily Bias <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Chuẩn ICT</span>
          </h2>
          <p className="text-lg text-slate-400 max-w-2xl mx-auto">
            Hôm nay bạn là <strong>Người Mua (Buyer)</strong>, <strong>Người Bán (Seller)</strong>, hay <strong>Khán Giả</strong>?
            <br/>Trả lời sai câu hỏi này, mọi setup kỹ thuật đều vô nghĩa.
          </p>
        </section>

        {/* 3 THÀNH PHẦN CHÍNH */}
        <section className="grid md:grid-cols-3 gap-6">
          <ConceptCard title="1. Vị Thế Giá" icon={BarChart2} color="cyan">
            <p>Xác định <strong>Premium (Đắt)</strong> và <strong>Discount (Rẻ)</strong> từ range giá gần nhất.</p>
            <ul className="list-disc pl-4 text-xs space-y-1 mt-2 text-slate-500">
              <li>ICT không bao giờ BUY ở Premium.</li>
              <li>ICT không bao giờ SELL ở Discount.</li>
            </ul>
          </ConceptCard>
          
          <ConceptCard title="2. Thanh Khoản" icon={Target} color="yellow">
            <p>Smart Money luôn săn tìm thanh khoản (Stoploss) ở các đỉnh/đáy cũ.</p>
            <div className="mt-2 bg-slate-900 p-2 rounded text-xs text-yellow-500 font-mono text-center border border-slate-700">
              Buy-side (Đỉnh cũ) vs Sell-side (Đáy cũ)
            </div>
          </ConceptCard>

          <ConceptCard title="3. Cấu Trúc H4/D1" icon={TrendingUp} color="emerald">
            <p>Bias phải thuận theo dòng chảy lớn.</p>
            <div className="flex gap-2 mt-2">
              <span className="bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded">HH-HL: BUY</span>
              <span className="bg-red-900/50 text-red-400 text-xs px-2 py-1 rounded">LL-LH: SELL</span>
            </div>
          </ConceptCard>
        </section>

        {/* VISUALIZER SECTION */}
        <section className="space-y-6">
          <div className="flex items-center gap-3">
             <div className="h-8 w-1 bg-emerald-500 rounded-full"></div>
             <h2 className="text-2xl font-bold text-white">Visualizer: Cách Bias Hình Thành</h2>
          </div>
          <ICTVisualizer />
        </section>

        {/* COMMON SCENARIOS */}
        <section className="grid md:grid-cols-2 gap-8">
          <div>
            <div className="flex items-center gap-3 mb-6">
               <div className="h-8 w-1 bg-red-500 rounded-full"></div>
               <h2 className="text-2xl font-bold text-white">Kịch Bản Phổ Biến</h2>
            </div>
            
            <div className="space-y-4">
              {/* Scenario 1 */}
              <div className="group bg-slate-900 p-5 rounded-xl border-l-4 border-red-500 hover:bg-slate-800 transition-colors cursor-default">
                <div className="flex justify-between items-start">
                  <h4 className="font-bold text-red-400 text-lg">🔴 Kịch bản 1: SELL DAY</h4>
                  <TrendingDown className="text-red-500 opacity-50" />
                </div>
                <ul className="mt-3 space-y-2 text-sm text-slate-400">
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-red-500"/> Giá nằm trong vùng Premium ({'>'}50%).</li>
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-red-500"/> Phía trên có Equal Highs (Thanh khoản).</li>
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-red-500"/> Khung D1 đang giảm hoặc chạm Kháng cự.</li>
                </ul>
              </div>

              {/* Scenario 2 */}
              <div className="group bg-slate-900 p-5 rounded-xl border-l-4 border-emerald-500 hover:bg-slate-800 transition-colors cursor-default">
                <div className="flex justify-between items-start">
                  <h4 className="font-bold text-emerald-400 text-lg">🟢 Kịch bản 2: BUY DAY</h4>
                  <TrendingUp className="text-emerald-500 opacity-50" />
                </div>
                <ul className="mt-3 space-y-2 text-sm text-slate-400">
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-emerald-500"/> Giá nằm trong vùng Discount ({'<'}50%).</li>
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-emerald-500"/> Phía dưới có Equal Lows (Thanh khoản).</li>
                  <li className="flex items-center gap-2"><CheckCircle size={14} className="text-emerald-500"/> Khung D1 đang tăng hoặc chạm Hỗ trợ (OB).</li>
                </ul>
              </div>

              {/* Scenario 3 */}
              <div className="group bg-slate-900 p-5 rounded-xl border-l-4 border-slate-500 hover:bg-slate-800 transition-colors cursor-default opacity-80">
                <div className="flex justify-between items-start">
                  <h4 className="font-bold text-slate-300 text-lg">⚪ Kịch bản 3: NO TRADE</h4>
                  <ShieldAlert className="text-slate-500 opacity-50" />
                </div>
                <p className="mt-2 text-sm text-slate-500 italic">
                  "Giá lơ lửng ở giữa range, đã quét cả 2 đầu hoặc tin tức mạnh sắp ra. Ngồi ngoài là một vị thế."
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-6">
             <div className="flex items-center gap-3 mb-2">
               <div className="h-8 w-1 bg-yellow-500 rounded-full"></div>
               <h2 className="text-2xl font-bold text-white">Thực Hành Ngay</h2>
            </div>
            <DailyChecklist />
            
            <div className="bg-slate-800 p-6 rounded-xl border border-slate-700 mt-6">
              <h4 className="text-yellow-500 font-bold flex items-center gap-2 mb-3">
                <AlertTriangle size={18} /> Sai Lầm Chết Người
              </h4>
              <ul className="space-y-3 text-sm text-slate-300">
                <li className="flex gap-3">
                  <span className="text-red-500 font-bold">❌</span>
                  Thay đổi Bias giữa phiên vì thấy một cây nến M1 chạy mạnh.
                </li>
                <li className="flex gap-3">
                  <span className="text-red-500 font-bold">❌</span>
                  Bias là SELL nhưng thấy setup BUY đẹp ở M5 vẫn cố vào (Ngược dòng nước lũ).
                </li>
              </ul>
            </div>
          </div>
        </section>

        {/* HOMEWORK SECTION */}
        <section className="bg-slate-900 rounded-2xl p-8 border border-slate-700 text-center relative overflow-hidden">
           <div className="absolute top-0 right-0 p-10 bg-emerald-500/10 rounded-full blur-3xl"></div>
           <BookOpen className="mx-auto text-emerald-400 mb-4" size={40} />
           <h2 className="text-2xl font-bold text-white mb-4">Bài Tập Bắt Buộc (7 Ngày)</h2>
           <p className="text-slate-400 mb-6 max-w-lg mx-auto">
             Trong 7 ngày tới, mỗi sáng hãy viết ra một dòng duy nhất vào nhật ký giao dịch của bạn.
           </p>
           <div className="bg-black/30 inline-block p-4 rounded-lg font-mono text-emerald-300 border border-slate-600 shadow-inner">
             "Ngày DD/MM – Bias: <span className="text-white">BUY/SELL/NO TRADE</span> – Lý do: ..."
           </div>
           <p className="mt-6 text-sm text-slate-500 uppercase tracking-widest font-bold">
             Daily Bias là cái "Phép". Không có phép, không được bắn.
           </p>
        </section>

      </main>

      <footer className="border-t border-slate-800 mt-12 py-8 text-center text-slate-500 text-sm">
        <p>© ICT Trading Concepts Visualized</p>
        <p className="mt-2">Đừng tin những gì tôi nói, hãy tin vào <span className="text-slate-300">Backtest</span> của bạn.</p>
      </footer>
    </div>
  );
};

export default ICTDailyBiasLesson;