import { useState } from 'react';
import { Info, ChevronDown, ChevronUp } from 'lucide-react';

export default function FlowInfoPanel() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="bg-slate-900/50 backdrop-blur-sm rounded-lg border border-slate-800/50 p-4">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full flex items-center justify-between text-left"
      >
        <div className="flex items-center gap-2">
          <Info className="w-5 h-5 text-blue-400" />
          <h3 className="font-semibold text-slate-100">📚 Flow Data Legend & Info</h3>
        </div>
        {isExpanded ? (
          <ChevronUp className="w-5 h-5 text-slate-400" />
        ) : (
          <ChevronDown className="w-5 h-5 text-slate-400" />
        )}
      </button>

      {isExpanded && (
        <div className="mt-4 space-y-4 text-sm">
          {/* Badges Section */}
          <div>
            <h4 className="text-slate-200 font-semibold mb-2">🎯 Badges & Indicators</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
              <div className="flex items-start gap-2">
                <span className="text-lg">⚡</span>
                <div>
                  <span className="text-slate-300 font-medium">Flash:</span>
                  <span className="text-slate-400 ml-1">Aggressive sweep (AA/BB) with premium &gt; $10K</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🟢</span>
                <div>
                  <span className="text-slate-300 font-medium">Green Circle:</span>
                  <span className="text-slate-400 ml-1">Bullish ITM premium dominance</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🔴</span>
                <div>
                  <span className="text-slate-300 font-medium">Red Circle:</span>
                  <span className="text-slate-400 ml-1">Bearish ITM premium dominance</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">💎</span>
                <div>
                  <span className="text-slate-300 font-medium">Diamond:</span>
                  <span className="text-slate-400 ml-1">ITM premium dominance in direction</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">⭐</span>
                <div>
                  <span className="text-slate-300 font-medium">Star:</span>
                  <span className="text-slate-400 ml-1">OTM flow spread &gt; $10K</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">💰</span>
                <div>
                  <span className="text-slate-300 font-medium">Money:</span>
                  <span className="text-slate-400 ml-1">Open Interest accumulation &gt; $100K</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">✔</span>
                <div>
                  <span className="text-slate-300 font-medium">Check:</span>
                  <span className="text-slate-400 ml-1">Volume &gt; OI (new positioning)</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🔥</span>
                <div>
                  <span className="text-slate-300 font-medium">Fire:</span>
                  <span className="text-slate-400 ml-1">Premium &gt; $1M</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">💵</span>
                <div>
                  <span className="text-slate-300 font-medium">Cash:</span>
                  <span className="text-slate-400 ml-1">Premium &gt; $500K</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🚀</span>
                <div>
                  <span className="text-slate-300 font-medium">Rocket:</span>
                  <span className="text-slate-400 ml-1">Single rocket - Vol &gt; OI + (Flash OR Premium &gt; $500K)</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🚀🚀</span>
                <div>
                  <span className="text-slate-300 font-medium">Double Rocket:</span>
                  <span className="text-slate-400 ml-1">Vol &gt; OI + Flash + Money badge</span>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <span className="text-lg">🚀🚀🚀</span>
                <div>
                  <span className="text-slate-300 font-medium">Triple Rocket:</span>
                  <span className="text-slate-400 ml-1">Vol &gt; OI + Flash + Money + Premium &gt; $500K</span>
                </div>
              </div>
            </div>
          </div>

          {/* Trading Terms */}
          <div>
            <h4 className="text-slate-200 font-semibold mb-2">📖 Trading Terms</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
              <div>
                <span className="text-slate-300 font-medium">Side:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>A/AA:</strong> Ask / Above Ask (aggressive buy)</li>
                  <li>• <strong>B/BB:</strong> Bid / Below Bid (aggressive sell)</li>
                </ul>
              </div>
              <div>
                <span className="text-slate-300 font-medium">Moneyness:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>ITM:</strong> In The Money</li>
                  <li>• <strong>OTM:</strong> Out The Money</li>
                </ul>
              </div>
              <div>
                <span className="text-slate-300 font-medium">Option Type:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>CALL:</strong> Right to buy at strike</li>
                  <li>• <strong>PUT:</strong> Right to sell at strike</li>
                </ul>
              </div>
              <div>
                <span className="text-slate-300 font-medium">Direction:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>BULL:</strong> Call Buy or Put Sell</li>
                  <li>• <strong>BEAR:</strong> Put Buy or Call Sell</li>
                </ul>
              </div>
              <div>
                <span className="text-slate-300 font-medium">Sessions:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>PRE:</strong> Pre-market (4:00 AM - 9:30 AM)</li>
                  <li>• <strong>RTH:</strong> Regular Trading Hours (9:30 AM - 4:00 PM)</li>
                  <li>• <strong>POST:</strong> After-hours (4:00 PM - 8:00 PM)</li>
                </ul>
              </div>
              <div>
                <span className="text-slate-300 font-medium">Key Metrics:</span>
                <ul className="text-slate-400 ml-4 mt-1 space-y-0.5">
                  <li>• <strong>Premium:</strong> Total dollar value of trade</li>
                  <li>• <strong>Volume:</strong> Contracts traded</li>
                  <li>• <strong>OI:</strong> Open Interest (outstanding contracts)</li>
                  <li>• <strong>Net Premium:</strong> Bull total - Bear total</li>
                </ul>
              </div>
            </div>
          </div>

          {/* Tape Alignment */}
          <div>
            <h4 className="text-slate-200 font-semibold mb-2">📊 Tape Alignment</h4>
            <div className="text-xs text-slate-400">
              <p className="mb-1">
                <strong className="text-slate-300">↗︎ (Up Arrow):</strong> Bullish flow with price moving up ≥ 0.20%
              </p>
              <p>
                <strong className="text-slate-300">↘︎ (Down Arrow):</strong> Bearish flow with price moving down ≥ 0.20%
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

