import React, { useState, useEffect } from 'react';
import { 
  BookOpen, 
  CheckCircle2, 
  AlertTriangle, 
  ArrowRightCircle, 
  Target, 
  TrendingDown, 
  TrendingUp,
  Zap,
  Info,
  ChevronRight,
  MousePointer2
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('theory');
  const [completedTasks, setCompletedTasks] = useState([]);

  const toggleTask = (id) => {
    setCompletedTasks(prev => 
      prev.includes(id) ? prev.filter(t => t !== id) : [...prev, id]
    );
  };

  const sections = {
    theory: { label: 'Lý thuyết Gốc', icon: <BookOpen size={20} /> },
    visualizer: { label: 'Mô phỏng Chart', icon: <Zap size={20} /> },
    checklist: { label: 'Thực hành', icon: <Target size={20} /> }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-blue-500/30">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800">
        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="bg-blue-600 p-1.5 rounded-lg">
              <TrendingUp className="text-white" size={24} />
            </div>
            <span className="font-bold text-xl tracking-tight text-white">ICT <span className="text-blue-500 underline decoration-2 underline-offset-4">Mastery</span></span>
          </div>
          <div className="flex gap-4">
            {Object.entries(sections).map(([id, { label, icon }]) => (
              <button
                key={id}
                onClick={() => setActiveTab(id)}
                className={`flex items-center gap-2 px-3 py-1.5 rounded-full transition-all text-sm font-medium ${
                  activeTab === id 
                  ? 'bg-blue-600/10 text-blue-400 border border-blue-600/30' 
                  : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                {icon}
                <span className="hidden sm:inline">{label}</span>
              </button>
            ))}
          </div>
        </div>
      </nav>

      <main className="max-w-5xl mx-auto px-4 py-8">
        {/* Header Section */}
        <header className="mb-12 text-center sm:text-left">
          <div className="inline-block px-3 py-1 rounded-full bg-blue-600/10 border border-blue-600/20 text-blue-400 text-xs font-bold uppercase tracking-widest mb-4">
            Bài 3: Kết hợp Liquidity + Structure
          </div>
          <h1 className="text-4xl sm:text-5xl font-extrabold text-white mb-4 leading-tight">
            Khi Nào Thị Trường <br/><span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400 font-black italic underline decoration-blue-500/50">Thực Sự Đổi Vai?</span>
          </h1>
          <p className="text-slate-400 text-lg max-w-2xl leading-relaxed">
            Nối não giữa Bẫy Thanh Khoản (Bài 1) và Cấu Trúc (Bài 2) để tìm ra điểm xoay chiều chuẩn xác nhất của "Kẻ đi săn".
          </p>
        </header>

        {activeTab === 'theory' && <TheorySection />}
        {activeTab === 'visualizer' && <VisualizerSection />}
        {activeTab === 'checklist' && <ChecklistSection completedTasks={completedTasks} toggleTask={toggleTask} />}
      </main>

      {/* Footer */}
      <footer className="border-t border-slate-900 bg-slate-950 py-12">
        <div className="max-w-5xl mx-auto px-4 text-center">
          <p className="text-slate-500 italic text-sm mb-2">"Liquidity là CÁI BẪY. CHoCH là DẤU HIỆU KẺ ĐI SĂN ĐỔI HƯỚNG."</p>
          <p className="text-slate-600 text-xs uppercase tracking-tighter">Hệ thống ICT Trading - Bài 3 Visualizer</p>
        </div>
      </footer>
    </div>
  );
};

const TheorySection = () => (
  <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
    {/* Core Rules */}
    <section className="grid sm:grid-cols-2 gap-6">
      <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 rounded-2xl border border-slate-800 shadow-xl group hover:border-blue-500/50 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-blue-600/20 text-blue-400 rounded-lg">
            <Info size={24} />
          </div>
          <h3 className="font-bold text-xl text-white">Quy Luật Gốc</h3>
        </div>
        <ul className="space-y-4">
          <li className="flex gap-3 text-slate-300">
            <ChevronRight className="text-blue-500 shrink-0" size={18} />
            <span><strong className="text-blue-400">Chưa quét thanh khoản</strong> → Không đổi xu hướng.</span>
          </li>
          <li className="flex gap-3 text-slate-300">
            <ChevronRight className="text-blue-500 shrink-0" size={18} />
            <span><strong className="text-blue-400">Quét thanh khoản xong</strong> → Mới có khả năng CHoCH.</span>
          </li>
        </ul>
      </div>

      <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 rounded-2xl border border-slate-800 shadow-xl group hover:border-emerald-500/50 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-emerald-600/20 text-emerald-400 rounded-lg">
            <ArrowRightCircle size={24} />
          </div>
          <h3 className="font-bold text-xl text-white">Trình Tự Chuẩn</h3>
        </div>
        <div className="flex flex-col gap-2">
          {['Tiếp cận Liquidity', 'Quét (Stop Hunt)', 'Mất động lực', 'CHoCH (Phá cấu trúc nhỏ)', 'Đổi vai'].map((step, i) => (
            <div key={i} className="flex items-center gap-3">
              <span className="w-6 h-6 rounded-full bg-slate-800 text-xs flex items-center justify-center font-bold text-slate-400">{i+1}</span>
              <span className={i === 1 || i === 3 ? "text-white font-semibold" : "text-slate-400"}>{step}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Comparison Table */}
    <section>
      <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
        <CheckCircle2 className="text-blue-500" /> Bảng Phân Biệt Nhanh
      </h3>
      <div className="overflow-x-auto rounded-xl border border-slate-800 shadow-2xl">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-slate-900/50">
              <th className="p-4 border-b border-slate-800 text-slate-400 font-medium">Hiện tượng</th>
              <th className="p-4 border-b border-slate-800 text-slate-400 font-medium text-center">Quét Đỉnh/Đáy</th>
              <th className="p-4 border-b border-slate-800 text-slate-400 font-medium text-center">Phá Cấu Trúc</th>
              <th className="p-4 border-b border-slate-800 text-slate-400 font-medium">Kết Luận</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-800">
            <tr>
              <td className="p-4 text-white font-medium">Liquidity Grab</td>
              <td className="p-4 text-center">✅ Có</td>
              <td className="p-4 text-center">❌ Không</td>
              <td className="p-4"><span className="px-2 py-0.5 rounded bg-slate-800 text-slate-400 text-sm">Chỉ là bẫy</span></td>
            </tr>
            <tr className="bg-blue-600/5">
              <td className="p-4 text-white font-medium">CHoCH (Thật)</td>
              <td className="p-4 text-center">✅ Có</td>
              <td className="p-4 text-center font-bold text-blue-400">✅ Có</td>
              <td className="p-4"><span className="px-2 py-0.5 rounded bg-blue-600/20 text-blue-300 text-sm font-bold uppercase">Đổi Xu Hướng</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    {/* Mistakes */}
    <section className="bg-red-950/20 border border-red-500/20 p-8 rounded-2xl relative overflow-hidden">
        <div className="absolute top-0 right-0 p-8 text-red-500/10">
            <AlertTriangle size={120} />
        </div>
        <h3 className="text-xl font-bold text-red-400 mb-6 flex items-center gap-2 relative z-10">
            <AlertTriangle /> 3 Sai Lầm Chết Người
        </h3>
        <div className="grid sm:grid-cols-3 gap-6 relative z-10">
            {[
                "Vào lệnh ngay khi thấy râu nến quét (Chưa có CHoCH).",
                "Nhầm râu nến với CHoCH (ICT dùng cấu trúc đóng nến).",
                "Không xác định được Đáy/Đỉnh cấu trúc thật sự."
            ].map((m, i) => (
                <div key={i} className="flex gap-3 text-slate-300 items-start">
                    <span className="text-red-500 font-bold shrink-0">{i+1}.</span>
                    <span className="text-sm">{m}</span>
                </div>
            ))}
        </div>
    </section>
  </div>
);

const VisualizerSection = () => {
    const [scenario, setScenario] = useState('sweep');

    return (
        <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="flex gap-2 mb-6">
                <button 
                    onClick={() => setScenario('sweep')}
                    className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${scenario === 'sweep' ? 'bg-blue-600 text-white' : 'bg-slate-900 text-slate-400 hover:bg-slate-800'}`}
                >
                    Liquidity Grab
                </button>
                <button 
                    onClick={() => setScenario('choch')}
                    className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${scenario === 'choch' ? 'bg-emerald-600 text-white' : 'bg-slate-900 text-slate-400 hover:bg-slate-800'}`}
                >
                    Sweep + CHoCH
                </button>
            </div>

            <div className="bg-slate-900/50 rounded-2xl border border-slate-800 p-4 sm:p-12 shadow-inner">
                <div className="flex flex-col md:flex-row gap-8 items-center">
                    <div className="w-full max-w-[500px] bg-slate-950 rounded-xl border border-slate-800 overflow-hidden shadow-2xl">
                        {scenario === 'sweep' ? <SweepDiagram /> : <ChochDiagram />}
                    </div>
                    
                    <div className="flex-1 space-y-4">
                        <h4 className="text-2xl font-bold text-white">
                            {scenario === 'sweep' ? "Case Study: Chỉ là quét" : "Case Study: Đổi cấu trúc"}
                        </h4>
                        <div className="space-y-4 text-slate-400">
                            {scenario === 'sweep' ? (
                                <>
                                    <div className="flex gap-2 items-start">
                                      <span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 shrink-0" />
                                      <span>Giá phá đỉnh Equal Highs phía trên.</span>
                                    </div>
                                    <div className="flex gap-2 items-start">
                                      <span className="w-1.5 h-1.5 bg-red-500 rounded-full mt-2 shrink-0" />
                                      <span>Nhưng KHÔNG phá đáy cấu trúc (HL).</span>
                                    </div>
                                    <div className="text-emerald-400 font-bold p-3 bg-emerald-400/5 border border-emerald-400/20 rounded-lg">KẾT LUẬN: Cấu trúc tăng vẫn còn nguyên. Đừng SELL!</div>
                                </>
                            ) : (
                                <>
                                    <div className="flex gap-2 items-start">
                                      <span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 shrink-0" />
                                      <span>Giá quét thanh khoản tại đỉnh.</span>
                                    </div>
                                    <div className="flex gap-2 items-start">
                                      <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2 shrink-0" />
                                      <span>Giá quay xuống phá Đáy cấu trúc (HL) gần nhất.</span>
                                    </div>
                                    <div className="text-blue-400 font-bold p-3 bg-blue-400/5 border border-blue-400/20 rounded-lg">KẾT LUẬN: Đã CHoCH. Chờ hồi lên vùng OB để SELL.</div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const SweepDiagram = () => (
    <svg viewBox="0 0 400 300" className="w-full h-auto">
        {/* Equal Highs */}
        <line x1="150" y1="100" x2="350" y2="100" stroke="#475569" strokeDasharray="4 4" />
        <text x="250" y="90" textAnchor="middle" fill="#64748b" fontSize="12" fontWeight="bold">EQUAL HIGHS (Buy-side Liq)</text>
        
        {/* Price Action Path */}
        <path 
            d="M 50 250 L 100 150 L 150 200 L 250 100 L 280 150 L 320 80 L 330 140 L 380 200" 
            fill="none" 
            stroke="#3b82f6" 
            strokeWidth="3" 
            strokeLinejoin="round" 
        />
        
        {/* Annotations */}
        <circle cx="320" cy="80" r="6" fill="#ef4444" fillOpacity="0.3" stroke="#ef4444" strokeWidth="2" />
        <text x="325" y="70" fill="#ef4444" fontSize="10" fontWeight="black">LIQ GRAB (SWEEP)</text>
        
        <circle cx="150" cy="200" r="4" fill="#64748b" />
        <text x="130" y="220" fill="#64748b" fontSize="10">HL (Đáy cấu trúc)</text>
        
        <path d="M 330 140 L 380 200" stroke="#ef4444" strokeWidth="3" strokeDasharray="4 4" />
        <text x="350" y="230" fill="#ef4444" fontSize="12" fontWeight="bold">❌ KHÔNG PHÁ HL</text>
    </svg>
);

const ChochDiagram = () => (
    <svg viewBox="0 0 400 300" className="w-full h-auto">
        {/* Equal Highs */}
        <line x1="150" y1="100" x2="350" y2="100" stroke="#475569" strokeDasharray="4 4" />
        
        {/* Price Action Path */}
        <path 
            d="M 50 250 L 100 150 L 150 200 L 250 100 L 300 150 L 330 70 L 340 120 L 130 230" 
            fill="none" 
            stroke="#10b981" 
            strokeWidth="3" 
            strokeLinejoin="round" 
        />
        
        {/* Annotations */}
        <circle cx="330" cy="70" r="6" fill="#ef4444" fillOpacity="0.3" stroke="#ef4444" strokeWidth="2" />
        <text x="340" y="60" fill="#ef4444" fontSize="10" fontWeight="black">SWEEP</text>
        
        <circle cx="150" cy="200" r="5" fill="none" stroke="#ef4444" strokeWidth="2" />
        <text x="100" y="195" fill="#ef4444" fontSize="10" fontWeight="bold">HL (PHÁ VỠ)</text>
        
        <text x="140" y="250" fill="#ef4444" fontSize="14" fontWeight="black">CHoCH ⬇️</text>

        {/* Order Block */}
        <rect x="280" y="100" width="40" height="20" fill="#3b82f6" fillOpacity="0.2" stroke="#3b82f6" strokeWidth="1" />
        <text x="325" y="115" fill="#3b82f6" fontSize="10">OB Cần Chờ</text>
    </svg>
);

const ChecklistSection = ({ completedTasks, toggleTask }) => {
    const tasks = [
        "Mở Chart M15 hoặc H1 của 1 cặp tiền bất kỳ.",
        "Xác định các vùng đỉnh/đáy bằng nhau (Equal Highs/Lows).",
        "Chờ đợi giá quét qua các vùng thanh khoản đó.",
        "Quan sát nến đóng cửa: Có phá HL/LH gần nhất để CHoCH chưa?",
        "Ghi nhật ký: 'Liquidity Grab' hay 'Sweep + CHoCH'?",
        "KHÔNG VÀO LỆNH (Chỉ luyện tập con mắt)."
    ];

    return (
        <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 sm:p-10 shadow-2xl overflow-hidden relative">
                <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/5 blur-3xl -z-0"></div>
                <div className="relative z-10">
                    <div className="flex items-center justify-between mb-8">
                        <div>
                            <h3 className="text-2xl font-bold text-white mb-2">Thực Hành 5 Ngày</h3>
                            <p className="text-slate-400 italic">Mỗi ngày tìm ít nhất 3 setup như trên chart thật.</p>
                        </div>
                        <div className="text-right">
                            <span className="text-3xl font-black text-blue-500">
                                {Math.round((completedTasks.length / tasks.length) * 100)}%
                            </span>
                            <div className="text-xs text-slate-500 uppercase tracking-widest font-bold">Hoàn thành</div>
                        </div>
                    </div>

                    <div className="space-y-3">
                        {tasks.map((task, i) => (
                            <div 
                                key={i}
                                onClick={() => toggleTask(i)}
                                className={`flex items-center gap-4 p-4 rounded-xl border cursor-pointer transition-all ${
                                    completedTasks.includes(i) 
                                    ? 'bg-blue-600/10 border-blue-600/30 text-slate-400' 
                                    : 'bg-slate-950 border-slate-800 text-white hover:border-slate-700'
                                }`}
                            >
                                <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 border-2 ${
                                    completedTasks.includes(i) ? 'bg-blue-500 border-blue-500 text-white' : 'border-slate-700'
                                }`}>
                                    {completedTasks.includes(i) && <CheckCircle2 size={16} />}
                                </div>
                                <span className={completedTasks.includes(i) ? 'line-through opacity-50' : ''}>{task}</span>
                            </div>
                        ))}
                    </div>

                    <div className="mt-8 p-4 bg-blue-600/10 border border-blue-600/20 rounded-xl text-center">
                        <p className="text-blue-400 font-medium flex items-center justify-center gap-2">
                            <MousePointer2 size={18} /> Nhấn vào mỗi mục để đánh dấu tiến độ
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default App;