import React, { useState, useEffect, useRef } from 'react';
import { 
  Shield, 
  TrendingUp, 
  AlertTriangle, 
  XCircle, 
  Activity, 
  CheckCircle, 
  BookOpen, 
  Target, 
  Brain,
  Lock,
  MousePointer,
  Clock
} from 'lucide-react';

// --- Components ---

const Section = ({ title, children, icon: Icon, className = "" }) => (
  <div className={`bg-gray-800/50 backdrop-blur-md border border-gray-700 rounded-xl p-6 mb-8 shadow-lg ${className}`}>
    <div className="flex items-center gap-3 mb-4 border-b border-gray-700 pb-3">
      {Icon && <Icon className="w-6 h-6 text-emerald-400" />}
      <h2 className="text-xl font-bold text-gray-100 uppercase tracking-wide">{title}</h2>
    </div>
    {children}
  </div>
);

const Badge = ({ type, children }) => {
  const colors = {
    green: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
    yellow: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20",
    red: "bg-rose-500/10 text-rose-400 border-rose-500/20",
    blue: "bg-blue-500/10 text-blue-400 border-blue-500/20",
  };
  return (
    <span className={`px-2 py-1 rounded-md text-xs font-mono border ${colors[type] || colors.blue}`}>
      {children}
    </span>
  );
};

// --- Chart Visualizer Component ---
const ChartSimulator = () => {
  const [dayType, setDayType] = useState('green');
  const [animate, setAnimate] = useState(false);

  useEffect(() => {
    setAnimate(true);
    const timer = setTimeout(() => setAnimate(false), 1000);
    return () => clearTimeout(timer);
  }, [dayType]);

  const chartConfig = {
    green: {
      title: "NGÀY CÓ SETUP (GREEN DAY)",
      desc: "Daily Bias rõ ràng + Quét thanh khoản + MSS + FVG.",
      action: "ACTION: Trade tập trung, tự tin.",
      path: "M 10,80 L 30,20 L 50,50 L 90,10", // Impulse, Retrace, Expansion
      points: [
        { x: 30, y: 20, label: "Sweep", color: "text-rose-400" },
        { x: 50, y: 50, label: "Entry (FVG)", color: "text-emerald-400" },
        { x: 90, y: 10, label: "TP", color: "text-blue-400" }
      ],
      color: "stroke-emerald-500"
    },
    yellow: {
      title: "NGÀY MƠ HỒ (YELLOW DAY)",
      desc: "Giá chạy lắt nhắt, Bias không rõ, range nhỏ.",
      action: "ACTION: NGHỈ. Đừng cố tìm lệnh.",
      path: "M 10,50 L 20,60 L 30,40 L 40,55 L 50,45 L 60,55 L 70,40 L 80,50 L 90,45", // Choppy
      points: [
        { x: 50, y: 45, label: "Nhiễu", color: "text-yellow-400" }
      ],
      color: "stroke-yellow-500"
    },
    red: {
      title: "NGÀY KHÔNG TRADE (RED DAY)",
      desc: "Tin mạnh (CPI, NFP), Range quá chặt hoặc đã quét 2 đầu.",
      action: "ACTION: Tắt máy. Bảo toàn vốn.",
      path: "M 10,50 L 90,50", // Flat or crazy spike usually visualized as flat for 'no entry' or vertical
      points: [
        { x: 50, y: 50, label: "NO ENTRY", color: "text-rose-500" }
      ],
      color: "stroke-rose-500"
    }
  };

  const currentConfig = chartConfig[dayType];

  return (
    <div className="bg-gray-900 rounded-xl p-6 border border-gray-700">
      <div className="flex gap-2 mb-6 justify-center">
        <button 
          onClick={() => setDayType('green')}
          className={`px-4 py-2 rounded-lg font-bold transition-all ${dayType === 'green' ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-500/20' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}
        >
          🟢 Có Setup
        </button>
        <button 
          onClick={() => setDayType('yellow')}
          className={`px-4 py-2 rounded-lg font-bold transition-all ${dayType === 'yellow' ? 'bg-yellow-600 text-white shadow-lg shadow-yellow-500/20' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}
        >
          🟡 Mơ Hồ
        </button>
        <button 
          onClick={() => setDayType('red')}
          className={`px-4 py-2 rounded-lg font-bold transition-all ${dayType === 'red' ? 'bg-rose-600 text-white shadow-lg shadow-rose-500/20' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}
        >
          🔴 No Trade
        </button>
      </div>

      <div className="relative h-64 bg-gray-950 rounded-lg border border-gray-800 overflow-hidden mb-4 grid-bg">
        {/* SVG Chart */}
        <svg viewBox="0 0 100 100" className="w-full h-full p-4" preserveAspectRatio="none">
          {/* Grid lines */}
          <line x1="0" y1="25" x2="100" y2="25" stroke="#1f2937" strokeWidth="0.5" />
          <line x1="0" y1="50" x2="100" y2="50" stroke="#1f2937" strokeWidth="0.5" />
          <line x1="0" y1="75" x2="100" y2="75" stroke="#1f2937" strokeWidth="0.5" />

          {/* Main Price Line */}
          <path 
            d={currentConfig.path} 
            fill="none" 
            strokeWidth="2" 
            className={`${currentConfig.color} transition-all duration-700 ease-in-out ${animate ? 'opacity-50' : 'opacity-100'}`}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          
          {/* Points of Interest */}
          {currentConfig.points.map((p, i) => (
             <g key={i}>
                <circle cx={p.x} cy={p.y} r="2" fill="white" className="animate-pulse" />
                <text x={p.x} y={p.y - 5} fontSize="4" fill="currentColor" className={`${p.color} font-bold`} textAnchor="middle">{p.label}</text>
             </g>
          ))}
        </svg>

        {dayType === 'red' && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm">
             <div className="border-2 border-rose-500 text-rose-500 px-4 py-2 font-black text-2xl rotate-[-15deg] uppercase tracking-widest">
               Stay Out
             </div>
           </div>
        )}
      </div>

      <div className="text-center space-y-2">
        <h3 className={`text-lg font-bold uppercase ${
          dayType === 'green' ? 'text-emerald-400' : 
          dayType === 'yellow' ? 'text-yellow-400' : 'text-rose-400'
        }`}>
          {currentConfig.title}
        </h3>
        <p className="text-gray-400 text-sm">{currentConfig.desc}</p>
        <div className="inline-block px-3 py-1 bg-gray-700 rounded text-white text-xs font-bold mt-2">
          {currentConfig.action}
        </div>
      </div>
    </div>
  );
};

// --- Checkbox Item ---
const ChecklistItem = ({ text }) => {
  const [checked, setChecked] = useState(false);
  return (
    <div 
      onClick={() => setChecked(!checked)}
      className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 border ${
        checked 
        ? 'bg-emerald-900/20 border-emerald-500/50' 
        : 'bg-gray-800/50 border-gray-700 hover:border-gray-500'
      }`}
    >
      <div className={`mt-1 min-w-[20px] h-5 rounded border flex items-center justify-center transition-colors ${
        checked ? 'bg-emerald-500 border-emerald-500' : 'border-gray-500'
      }`}>
        {checked && <CheckCircle className="w-3 h-3 text-white" />}
      </div>
      <span className={`text-sm ${checked ? 'text-gray-300 line-through' : 'text-gray-200'}`}>{text}</span>
    </div>
  );
};

// --- Main App Component ---

const App = () => {
  const [activeTab, setActiveTab] = useState(0);

  // Background Grid CSS
  const gridStyle = {
    backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0)`,
    backgroundSize: '24px 24px'
  };

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 font-sans selection:bg-emerald-500/30 selection:text-emerald-200" style={gridStyle}>
      
      {/* Header */}
      <header className="fixed top-0 w-full z-50 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800">
        <div className="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-emerald-500 to-blue-600 rounded-lg flex items-center justify-center font-bold text-white">8</div>
            <h1 className="font-bold text-lg hidden sm:block">ICT TRADING <span className="text-gray-500 font-normal">| Bài 8: Tâm Lý & Kỷ Luật</span></h1>
          </div>
          <div className="flex items-center gap-4 text-xs font-mono text-gray-400">
            <span>GIAI ĐOẠN 1: HIỂU BẢN CHẤT</span>
            <div className="h-2 w-20 bg-gray-800 rounded-full overflow-hidden">
              <div className="h-full bg-emerald-500 w-[90%]"></div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-3xl mx-auto pt-24 pb-20 px-4">

        {/* Hero Section */}
        <div className="text-center mb-12 animate-fade-in-up">
          <h2 className="text-3xl md:text-5xl font-black mb-4 bg-gradient-to-r from-white via-gray-200 to-gray-500 bg-clip-text text-transparent">
            KIẾN THỨC CÓ THỂ HỌC NHANH<br/>
            <span className="text-emerald-400">KỶ LUẬT THÌ KHÔNG</span>
          </h2>
          <p className="text-gray-400 max-w-xl mx-auto text-lg">
            Bài quyết định bạn có đi tiếp được với ICT hay không.
            Biết khi nào <span className="text-rose-400 font-bold">KHÔNG ĐƯỢC TRADE</span> quan trọng hơn biết cách vào lệnh.
          </p>
        </div>

        {/* Section 1: Sự thật khó nuốt */}
        <Section title="1. Sự thật khó nuốt" icon={Shield}>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="p-4 bg-rose-900/20 border border-rose-500/30 rounded-lg">
              <div className="flex items-center gap-2 mb-2 text-rose-400 font-bold">
                <XCircle size={18} />
                <span>Tại sao bạn thua?</span>
              </div>
              <ul className="space-y-2 text-sm text-gray-300">
                <li>❌ Không phải vì thiếu kiến thức.</li>
                <li>❌ Vì KHÔNG LÀM ĐÚNG điều đã biết.</li>
              </ul>
            </div>
            <div className="p-4 bg-emerald-900/20 border border-emerald-500/30 rounded-lg">
              <div className="flex items-center gap-2 mb-2 text-emerald-400 font-bold">
                <CheckCircle size={18} />
                <span>ICT Trader</span>
              </div>
              <ul className="space-y-2 text-sm text-gray-300">
                <li>📌 Không thua vì sai setup.</li>
                <li>📌 Thua khi phá vỡ kỷ luật.</li>
              </ul>
            </div>
          </div>
        </Section>

        {/* Section 2: Visualizer 3 Loại ngày */}
        <Section title="2. Phân biệt 3 loại ngày" icon={Activity}>
          <p className="mb-6 text-gray-400 text-sm">
            Để sống sót, bạn phải nhận diện được thị trường đang ở trạng thái nào. Hãy bấm vào các nút bên dưới để xem mô phỏng.
          </p>
          <ChartSimulator />
          <div className="mt-4 p-3 bg-yellow-900/20 border border-yellow-500/20 rounded text-yellow-200 text-sm flex gap-2">
             <AlertTriangle className="shrink-0 w-5 h-5" />
             <p><strong>Lưu ý:</strong> 90% lệnh thua lỗ ("ngu ngốc") thường xảy ra vào <span className="text-yellow-400 font-bold">Ngày Mơ Hồ</span>.</p>
          </div>
        </Section>

        {/* Section 3: FOMO */}
        <Section title="3. FOMO - Kẻ thù số 1" icon={AlertTriangle}>
          <div className="relative p-6 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border border-gray-700 overflow-hidden">
             {/* Abstract Visualization of FOMO */}
             <div className="flex flex-col md:flex-row gap-8 items-center justify-between">
                <div className="space-y-4 flex-1">
                  <h3 className="font-bold text-lg text-white">Tâm lý FOMO</h3>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-gray-400">
                       <span className="w-2 h-2 rounded-full bg-rose-500"></span>
                       Thấy giá chạy mạnh → Sợ lỡ tàu
                    </div>
                    <div className="flex items-center gap-2 text-sm text-gray-400">
                       <span className="w-2 h-2 rounded-full bg-rose-500"></span>
                       Nghĩ "Chắc nó đi luôn"
                    </div>
                  </div>
                </div>

                <div className="flex-1 w-full border-l border-gray-700 pl-0 md:pl-8">
                   <h3 className="font-bold text-lg text-emerald-400 mb-2">Tư duy ICT</h3>
                   <div className="bg-black/50 p-4 rounded-lg font-mono text-sm border border-emerald-500/30">
                      <p className="text-emerald-300">{`if (price_retrace == false) {`}</p>
                      <p className="pl-4 text-rose-400">{`return "KHÔNG DÀNH CHO BẠN";`}</p>
                      <p className="text-emerald-300">{`}`}</p>
                      <p className="text-emerald-300">{`enter_trade(OTE_FVG);`}</p>
                   </div>
                   <p className="text-xs text-gray-500 mt-2 italic">ICT chỉ vào lệnh khi giá QUAY LẠI (Retracement).</p>
                </div>
             </div>
          </div>
        </Section>

        {/* Section 4 & 5: Quy tắc & Tư duy */}
        <Section title="4. Quy tắc sắt đá" icon={Lock}>
           <div className="grid md:grid-cols-3 gap-4">
              <div className="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-emerald-500 transition-colors group">
                 <div className="text-3xl font-black text-gray-700 group-hover:text-emerald-500/50 mb-2">01</div>
                 <h4 className="font-bold text-white mb-1">1 Bias/Ngày</h4>
                 <p className="text-xs text-gray-400">Bias SELL thì không BUY. Đổi view giữa ngày là cảm xúc.</p>
              </div>
              <div className="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-emerald-500 transition-colors group">
                 <div className="text-3xl font-black text-gray-700 group-hover:text-emerald-500/50 mb-2">02</div>
                 <h4 className="font-bold text-white mb-1">Max 2 Lệnh</h4>
                 <p className="text-xs text-gray-400">Thua 1 dừng, thua 2 tắt máy. Tuyệt đối không gỡ.</p>
              </div>
              <div className="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-emerald-500 transition-colors group">
                 <div className="text-3xl font-black text-gray-700 group-hover:text-emerald-500/50 mb-2">03</div>
                 <h4 className="font-bold text-white mb-1">Không Rảnh</h4>
                 <p className="text-xs text-gray-400">Không trade vì chán, vì muốn giết thời gian.</p>
              </div>
           </div>
           
           <div className="mt-6 p-4 bg-gray-900 rounded-lg flex items-center justify-between border border-gray-700">
              <div>
                 <h4 className="font-bold text-gray-200">Tại sao dám bỏ kèo?</h4>
                 <p className="text-sm text-gray-400">Cơ hội vô hạn - Vốn hữu hạn. <br/>Không có kèo = Không mất tiền.</p>
              </div>
              <div className="text-right">
                 <span className="block text-2xl font-bold text-emerald-400">0 Loss</span>
                 <span className="text-xs text-gray-500 uppercase">Better than loss</span>
              </div>
           </div>
        </Section>

        {/* Section 6: Kỹ năng "Không Trade" */}
        <Section title="Kỹ năng đặc biệt" icon={Brain}>
           <div className="flex flex-col items-center justify-center p-8 bg-gray-900/50 rounded-xl border border-dashed border-gray-700">
              <h3 className="text-xl font-bold text-white mb-2">Bạn có chịu nổi 3-5 ngày không bấm nút?</h3>
              <p className="text-center text-gray-400 mb-6 text-sm max-w-md">
                 Trader ICT chuyên nghiệp ngồi nhìn chart hàng giờ. Nếu không có setup đúng sách giáo khoa, họ đóng máy và không cảm thấy khó chịu.
              </p>
              <div className="flex gap-4">
                 <Badge type="green">Kiên nhẫn</Badge>
                 <Badge type="blue">Quan sát</Badge>
                 <Badge type="red">Kỷ luật</Badge>
              </div>
           </div>
        </Section>

        {/* Section 7 & 8: Nhật ký & Bài tập */}
        <Section title="Bài tập 7 Ngày" icon={BookOpen}>
           <div className="space-y-6">
              <div className="bg-gray-800 p-5 rounded-lg border-l-4 border-blue-500">
                 <h3 className="font-bold text-lg mb-2 flex items-center gap-2">
                    <TrendingUp className="w-5 h-5 text-blue-400" />
                    Nhật ký tâm lý (3 dòng)
                 </h3>
                 <div className="space-y-3 font-mono text-sm text-gray-300">
                    <p>1. Hôm nay tôi có tuân thủ Bias không?</p>
                    <p>2. Tôi vào lệnh vì Setup hay vì Cảm xúc?</p>
                    <p>3. Nếu thua - Tôi có làm đúng hệ thống không?</p>
                 </div>
              </div>

              <div>
                 <h3 className="font-bold text-white mb-3 flex items-center gap-2">
                   <Target className="w-5 h-5 text-emerald-400" />
                   Checklist hoàn thành Giai đoạn 1
                 </h3>
                 <div className="grid grid-cols-1 gap-2">
                    <ChecklistItem text="Không còn hào hứng với Breakout (phá vỡ)." />
                    <ChecklistItem text="Nhìn thấy Thanh khoản trước khi thấy Mô hình." />
                    <ChecklistItem text="Dám bỏ kèo mà không thấy tiếc nuối." />
                    <ChecklistItem text="Quan tâm Risk/Reward & Kỷ luật hơn là Thắng/Thua." />
                 </div>
              </div>
           </div>
        </Section>

        {/* Footer Quote */}
        <div className="mt-16 text-center border-t border-gray-800 pt-10">
          <p className="text-gray-500 uppercase tracking-widest text-xs mb-4">Kết thúc giai đoạn 1</p>
          <blockquote className="text-xl md:text-2xl font-serif italic text-gray-300 max-w-2xl mx-auto">
             "Trader thua hỏi: <span className="text-rose-400">Tại sao tôi thua?</span><br/>
             Trader ICT hỏi: <span className="text-emerald-400">Tôi có làm đúng hệ thống không?</span>"
          </blockquote>
          
          <div className="mt-8 flex justify-center gap-4 text-xs text-gray-600">
             <span>© ICT Trading Methodology</span>
             <span>•</span>
             <span>Lesson 8: Psychology</span>
          </div>
        </div>

      </main>

      {/* Floating Action Button (Optional Context) */}
      <div className="fixed bottom-6 right-6 z-40 hidden md:block">
         <div className="bg-gray-800 border border-gray-700 text-gray-400 px-4 py-2 rounded-full text-xs shadow-xl flex items-center gap-2">
            <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
            Market is always right
         </div>
      </div>

    </div>
  );
};

export default App;