import React, { useState, useEffect } from 'react';
import { 
  TrendingUp, 
  TrendingDown, 
  Activity, 
  AlertTriangle, 
  CheckCircle, 
  XCircle, 
  BookOpen, 
  Eye, 
  Play,
  ArrowRight,
  Target
} from 'lucide-react';

// --- Components ---

// 1. Navigation Tabs
const Tabs = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: 'intro', label: '1. Khái Niệm', icon: BookOpen },
    { id: 'structure', label: '2. Cấu Trúc', icon: Activity },
    { id: 'bos_choch', label: '3. BOS & CHoCH', icon: TrendingUp },
    { id: 'trap', label: '4. Stop Hunt vs CHoCH', icon: AlertTriangle },
    { id: 'practice', label: '5. Thực Hành', icon: Target },
  ];

  return (
    <div className="flex flex-wrap gap-2 mb-6 p-1 bg-slate-800/50 rounded-xl">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id)}
          className={`flex items-center gap-2 px-4 py-3 rounded-lg text-sm font-medium transition-all flex-1 justify-center whitespace-nowrap
            ${activeTab === tab.id 
              ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' 
              : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}
        >
          <tab.icon size={16} />
          <span className="hidden sm:inline">{tab.label}</span>
        </button>
      ))}
    </div>
  );
};

// 2. SVG Chart Visualizer (The Core Feature)
const ChartVisualizer = ({ type }) => {
  // SVG configurations based on type
  const chartConfig = {
    uptrend: {
      points: "10,250 50,150 90,200 150,80 200,140 280,20",
      labels: [
        { x: 50, y: 140, text: "HH" },
        { x: 90, y: 220, text: "HL" },
        { x: 150, y: 70, text: "HH" },
        { x: 200, y: 160, text: "HL" },
        { x: 280, y: 15, text: "HH" }
      ],
      lines: [],
      color: "#10b981" // Green
    },
    downtrend: {
      points: "10,50 60,150 110,100 180,220 230,170 290,280",
      labels: [
        { x: 60, y: 170, text: "LL" },
        { x: 110, y: 90, text: "LH" },
        { x: 180, y: 240, text: "LL" },
        { x: 230, y: 160, text: "LH" },
        { x: 290, y: 300, text: "LL" }
      ],
      lines: [],
      color: "#ef4444" // Red
    },
    bos: {
      points: "10,220 60,120 100,180 180,60 220,140 290,30",
      labels: [
        { x: 60, y: 110, text: "HH (Cũ)" },
        { x: 180, y: 50, text: "HH (Mới)" },
        { x: 200, y: 100, text: "BOS" } // Label for line
      ],
      lines: [
        { x1: 60, y1: 120, x2: 300, y2: 120, type: "dashed", label: "BOS" }
      ],
      color: "#3b82f6" // Blue
    },
    choch: {
      points: "10,250 60,150 110,200 170,100 220,240 280,180", 
      // Uplift -> Drop below HL
      labels: [
        { x: 60, y: 140, text: "HH" },
        { x: 110, y: 220, text: "HL (Key)" },
        { x: 170, y: 90, text: "HH" },
        { x: 220, y: 260, text: "LL" },
        { x: 250, y: 230, text: "CHoCH" }
      ],
      lines: [
        { x1: 110, y1: 200, x2: 300, y2: 200, type: "solid", color: "#ef4444", label: "CHoCH Line" }
      ],
      color: "#f59e0b" // Amber/Warning
    },
    stophunt: {
      points: "10,200 60,120 100,180 160,110 180,115 200,190 280,250",
      // Sweep high then crash
      labels: [
        { x: 60, y: 110, text: "Equal Highs" },
        { x: 160, y: 100, text: "Sweep!" },
        { x: 160, y: 80, text: "Stop Hunt" }
      ],
      lines: [
         { x1: 60, y1: 120, x2: 180, y2: 120, type: "dashed", label: "Liq" }
      ],
      color: "#8b5cf6" // Purple
    }
  };

  const config = chartConfig[type] || chartConfig.uptrend;

  return (
    <div className="w-full bg-slate-900 rounded-xl border border-slate-700 p-4 shadow-inner relative overflow-hidden h-80 flex flex-col items-center justify-center">
      <div className="absolute top-4 left-4 bg-slate-800 px-3 py-1 rounded-full text-xs text-slate-400 font-mono border border-slate-600">
        Mô phỏng: {type.toUpperCase()}
      </div>
      
      <svg viewBox="0 0 300 300" className="w-full h-full max-w-md drop-shadow-lg">
        {/* Background Grid */}
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />

        {/* Lines (BOS/CHoCH markers) */}
        {config.lines.map((line, idx) => (
          <g key={idx}>
            <line 
              x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} 
              stroke={line.color || "rgba(255,255,255,0.5)"} 
              strokeWidth="2" 
              strokeDasharray={line.type === 'dashed' ? "5,5" : "0"}
            />
            <text x={line.x2 - 30} y={line.y2 - 5} fill="rgba(255,255,255,0.7)" fontSize="10" fontWeight="bold">
              {line.label}
            </text>
          </g>
        ))}

        {/* The Price Path */}
        <polyline 
          points={config.points} 
          fill="none" 
          stroke={config.color} 
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="animate-draw"
        />

        {/* Labels */}
        {config.labels.map((lbl, idx) => (
          <text 
            key={idx} 
            x={lbl.x} 
            y={lbl.y} 
            fill="white" 
            fontSize="12" 
            fontWeight="bold" 
            textAnchor="middle"
            className="bg-slate-900"
          >
            {lbl.text}
          </text>
        ))}

        {/* Points circles */}
        {config.points.split(' ').map((point, idx) => {
          const [cx, cy] = point.split(',');
          return <circle key={idx} cx={cx} cy={cy} r="3" fill="#fff" />
        })}
      </svg>
    </div>
  );
};

// 3. Content Cards
const InfoCard = ({ title, children, type = "neutral" }) => {
  const styles = {
    neutral: "border-slate-700 bg-slate-800/50",
    success: "border-green-800 bg-green-900/10",
    danger: "border-red-800 bg-red-900/10",
    warning: "border-amber-800 bg-amber-900/10",
    accent: "border-blue-800 bg-blue-900/10"
  };

  return (
    <div className={`p-6 rounded-xl border ${styles[type]} mb-4`}>
      <h3 className="text-lg font-bold mb-3 flex items-center gap-2 text-white">
        {children.icon && <children.icon size={18} />}
        {title}
      </h3>
      <div className="text-slate-300 leading-relaxed text-sm sm:text-base">
        {children}
      </div>
    </div>
  );
};

// --- Main Application ---

const App = () => {
  const [activeTab, setActiveTab] = useState('intro');
  const [checklist, setChecklist] = useState({
    chart: false,
    marking: false,
    bos: false,
    choch: false
  });

  const toggleCheck = (key) => {
    setChecklist(prev => ({...prev, [key]: !prev[key]}));
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-blue-500/30">
      
      {/* Header */}
      <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-50">
        <div className="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-blue-900/50">
              <Activity className="text-white" size={24} />
            </div>
            <div>
              <h1 className="text-xl font-bold text-white tracking-tight">ICT Trading Mastery</h1>
              <p className="text-xs text-blue-400 font-medium">BÀI 2: MARKET STRUCTURE</p>
            </div>
          </div>
          <div className="hidden sm:block text-xs bg-slate-800 px-3 py-1 rounded-full border border-slate-700">
             ICT Mentorship
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-4xl mx-auto px-4 py-8">
        
        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          
          {/* Left/Center Column - Content */}
          <div className="md:col-span-2 space-y-6">
            
            {activeTab === 'intro' && (
              <div className="animate-fade-in">
                <InfoCard title="Market Structure Là Gì?" type="accent">
                  <p><strong>Định nghĩa:</strong> Cách giá tạo đỉnh và đáy theo thời gian.</p>
                  <ul className="list-disc pl-5 mt-2 space-y-1">
                    <li>Thị trường chỉ có 3 trạng thái: <span className="text-green-400">Tăng</span>, <span className="text-red-400">Giảm</span>, <span className="text-yellow-400">Sideway</span>.</li>
                    <li>ICT không đoán giá, ICT <strong>đọc cấu trúc</strong> hiện tại.</li>
                  </ul>
                </InfoCard>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="bg-slate-900 p-4 rounded-lg border border-slate-800">
                    <h4 className="font-bold text-green-400 mb-2 flex items-center gap-2"><TrendingUp size={16}/> Xu Hướng Tăng</h4>
                    <ul className="text-sm space-y-2">
                      <li className="flex justify-between border-b border-slate-800 pb-1"><span>HH</span> <span className="text-slate-400">Higher High</span></li>
                      <li className="flex justify-between border-b border-slate-800 pb-1"><span>HL</span> <span className="text-slate-400">Higher Low</span></li>
                      <li className="text-xs text-slate-500 mt-2">Đáy sau cao hơn đáy trước</li>
                    </ul>
                  </div>
                  <div className="bg-slate-900 p-4 rounded-lg border border-slate-800">
                    <h4 className="font-bold text-red-400 mb-2 flex items-center gap-2"><TrendingDown size={16}/> Xu Hướng Giảm</h4>
                    <ul className="text-sm space-y-2">
                      <li className="flex justify-between border-b border-slate-800 pb-1"><span>LL</span> <span className="text-slate-400">Lower Low</span></li>
                      <li className="flex justify-between border-b border-slate-800 pb-1"><span>LH</span> <span className="text-slate-400">Lower High</span></li>
                      <li className="text-xs text-slate-500 mt-2">Đỉnh sau thấp hơn đỉnh trước</li>
                    </ul>
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'structure' && (
               <div className="animate-fade-in space-y-6">
                 <div className="flex flex-col gap-4">
                    <button className="bg-slate-800 hover:bg-slate-700 p-3 rounded-lg text-left border border-slate-700 transition-colors">
                      <h3 className="font-bold text-white mb-1">Mô phỏng Xu Hướng Tăng</h3>
                      <ChartVisualizer type="uptrend" />
                      <p className="mt-2 text-sm text-slate-400">Giá liên tục tạo đỉnh cao hơn (HH) và đáy cao hơn (HL).</p>
                    </button>

                    <button className="bg-slate-800 hover:bg-slate-700 p-3 rounded-lg text-left border border-slate-700 transition-colors">
                      <h3 className="font-bold text-white mb-1">Mô phỏng Xu Hướng Giảm</h3>
                      <ChartVisualizer type="downtrend" />
                       <p className="mt-2 text-sm text-slate-400">Giá liên tục tạo đáy thấp hơn (LL) và đỉnh thấp hơn (LH).</p>
                    </button>
                 </div>
               </div>
            )}

            {activeTab === 'bos_choch' && (
              <div className="animate-fade-in space-y-6">
                <InfoCard title="BOS - Break Of Structure" type="success">
                   <ChartVisualizer type="bos" />
                   <div className="mt-4">
                     <p className="font-bold text-white">Ý nghĩa: Tiếp diễn xu hướng.</p>
                     <p className="mt-1">Khi giá phá qua đỉnh cũ (trong uptrend) hoặc đáy cũ (trong downtrend). Khẳng định phe mua/bán vẫn đang kiểm soát.</p>
                   </div>
                </InfoCard>

                <InfoCard title="CHoCH - Change of Character" type="warning">
                   <ChartVisualizer type="choch" />
                   <div className="mt-4">
                     <p className="font-bold text-white">Ý nghĩa: Cảnh báo đổi hướng.</p>
                     <p className="mt-1">Xảy ra khi giá phá cấu trúc ngược chiều đầu tiên (VD: Đang tăng mà phá HL gần nhất).</p>
                     <p className="text-xs text-yellow-500 mt-2 italic">📌 Lưu ý: CHoCH không có nghĩa là đảo chiều ngay lập tức, mà là "quyền kiểm soát đang thay đổi".</p>
                   </div>
                </InfoCard>
              </div>
            )}

            {activeTab === 'trap' && (
              <div className="animate-fade-in space-y-6">
                <div className="bg-red-900/20 border border-red-700/50 p-4 rounded-xl">
                  <h3 className="text-red-400 font-bold flex items-center gap-2 text-lg mb-2">
                    <AlertTriangle /> STOP HUNT vs CHoCH
                  </h3>
                  <p className="mb-4">Đây là nơi 90% trader mất tiền. Đừng nhầm lẫn giữa việc "quét thanh khoản" và "đổi cấu trúc".</p>
                  
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="bg-slate-900 p-3 rounded border border-slate-700">
                      <h4 className="text-purple-400 font-bold mb-2">❌ Stop Hunt (Quét)</h4>
                      <ChartVisualizer type="stophunt" />
                      <ul className="text-xs list-disc pl-4 mt-2 space-y-1 text-slate-300">
                        <li>Giá phá đỉnh nhưng rút chân nhanh.</li>
                        <li>KHÔNG phá cấu trúc quan trọng đối diện.</li>
                        <li>Mục đích: Lấy thanh khoản để đi tiếp xu hướng cũ.</li>
                      </ul>
                    </div>
                    <div className="bg-slate-900 p-3 rounded border border-slate-700">
                      <h4 className="text-orange-400 font-bold mb-2">✅ CHoCH (Đổi thật)</h4>
                      <ChartVisualizer type="choch" />
                      <ul className="text-xs list-disc pl-4 mt-2 space-y-1 text-slate-300">
                        <li>Phá hẳn qua HL (trong xu hướng tăng).</li>
                        <li>Thân nến đóng cửa rõ ràng.</li>
                        <li>Thường xảy ra SAU khi đã có Stop Hunt.</li>
                      </ul>
                    </div>
                  </div>
                </div>

                <InfoCard title="Quy Tắc Vàng ICT" type="neutral">
                  <div className="text-center py-4">
                    <p className="text-xl font-bold text-white mb-2">KHÔNG BAO GIỜ VÀO LỆNH NGƯỢC XU HƯỚNG</p>
                    <p className="text-lg text-slate-400">nếu CHƯA có <span className="text-yellow-500 font-bold">CHoCH</span></p>
                  </div>
                </InfoCard>
              </div>
            )}

            {activeTab === 'practice' && (
              <div className="animate-fade-in space-y-4">
                <h3 className="text-xl font-bold text-white">Bài Tập Về Nhà (5 Ngày)</h3>
                <p>Mở chart H1 hoặc M15. Tuyệt đối KHÔNG TRADE. Chỉ làm các bước sau:</p>
                
                <div className="space-y-3 mt-4">
                  {[
                    { id: 'chart', text: 'Mở biểu đồ (H1/M15), xác định 1 xu hướng rõ ràng' },
                    { id: 'marking', text: 'Đánh dấu đỉnh đáy: HH-HL hoặc LH-LL' },
                    { id: 'bos', text: 'Khoanh tròn các điểm BOS (Tiếp diễn)' },
                    { id: 'choch', text: 'Tìm điểm CHoCH (Nếu có) và tự hỏi: Đây là Stop Hunt hay CHoCH?' }
                  ].map((item) => (
                    <div 
                      key={item.id}
                      onClick={() => toggleCheck(item.id)}
                      className={`flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all ${
                        checklist[item.id] 
                        ? 'bg-green-900/20 border-green-600' 
                        : 'bg-slate-800 border-slate-700 hover:border-slate-500'
                      }`}
                    >
                      {checklist[item.id] 
                        ? <CheckCircle className="text-green-500 min-w-[24px]" /> 
                        : <div className="w-6 h-6 rounded-full border-2 border-slate-500 min-w-[24px]" />
                      }
                      <span className={checklist[item.id] ? "text-green-200 line-through" : "text-slate-200"}>
                        {item.text}
                      </span>
                    </div>
                  ))}
                </div>

                <div className="mt-8 bg-blue-900/20 p-4 rounded-lg border border-blue-800">
                  <h4 className="font-bold text-blue-400 mb-2">💡 Ghi chú tư duy</h4>
                  <p className="italic text-slate-400">"ICT không Sell vì giá cao. ICT Sell vì cấu trúc đã đổi."</p>
                </div>
              </div>
            )}
          </div>

          {/* Right Column - Quick Summary / Sticky Sidebar */}
          <div className="md:col-span-1">
            <div className="sticky top-24 space-y-4">
              <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 shadow-xl">
                <h3 className="font-bold text-white mb-4 border-b border-slate-700 pb-2">Từ Khóa Bài 2</h3>
                <div className="space-y-3 text-sm">
                  <div className="flex justify-between items-center">
                    <span className="text-slate-400">HH/HL</span>
                    <span className="font-mono text-green-400">Uptrend</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-slate-400">LH/LL</span>
                    <span className="font-mono text-red-400">Downtrend</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-slate-400">BOS</span>
                    <span className="bg-blue-900/50 text-blue-300 px-2 py-0.5 rounded text-xs">Tiếp diễn</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-slate-400">CHoCH</span>
                    <span className="bg-yellow-900/50 text-yellow-300 px-2 py-0.5 rounded text-xs">Đảo chiều</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-slate-400">Stop Hunt</span>
                    <span className="bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded text-xs">Bẫy giá</span>
                  </div>
                </div>
              </div>

              {/* Mini Quiz Context */}
              <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-5 rounded-xl border border-slate-700">
                <h3 className="font-bold text-white mb-2">Bạn có nhớ?</h3>
                <p className="text-sm text-slate-400 mb-4">Điều kiện tiên quyết để vào lệnh ngược xu hướng là gì?</p>
                
                <div className="space-y-2">
                    <button className="w-full text-left text-xs p-2 rounded bg-slate-800 hover:bg-red-900/30 border border-slate-700 hover:border-red-500 transition-colors">
                        A. Giá phá đỉnh cũ
                    </button>
                    <button className="w-full text-left text-xs p-2 rounded bg-slate-800 hover:bg-green-900/30 border border-slate-700 hover:border-green-500 transition-colors">
                        B. Phải có CHoCH xác nhận
                    </button>
                    <button className="w-full text-left text-xs p-2 rounded bg-slate-800 hover:bg-red-900/30 border border-slate-700 hover:border-red-500 transition-colors">
                        C. Giá chạm kháng cự
                    </button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </main>
    </div>
  );
};

export default App;