import React, { useState, useEffect } from 'react';
import { 
  TrendingUp, ShieldCheck, Zap, Globe, DollarSign, Settings, Users, 
  Sliders, Activity, ChevronRight, ChevronDown, CheckCircle, AlertTriangle, 
  RefreshCw, Search, Filter, Lock, User, LogOut, ArrowUpRight, BarChart3, 
  HelpCircle, CreditCard, Bell, Play, Pause, ExternalLink, Calculator, Layers,
  Check, X, Eye, EyeOff, Server, Cpu
} from 'lucide-react';

// ==========================================
// MOCK DATA & CONFIGURATIONS
// ==========================================

const INITIAL_OPPORTUNITIES = [
  {
    id: 'arb-101',
    sport: 'Football',
    league: 'English Premier League',
    event: 'Arsenal vs Manchester City',
    startTime: '2026-10-12 16:30',
    market: '1X2 (Full Time)',
    isLive: false,
    country: 'UK',
    netRoi: 3.42,
    grossMargin: 3.85,
    totalImpliedProb: 96.28,
    lastUpdated: '2s ago',
    status: 'ACTIVE',
    legs: [
      { outcome: '1 (Arsenal)', bookmaker: 'Bet365', odds: 2.35, stakePercent: 42.1, recommendedStake: 421.00, payout: 989.35 },
      { outcome: 'X (Draw)', bookmaker: 'William Hill', odds: 3.60, stakePercent: 27.4, recommendedStake: 274.00, payout: 986.40 },
      { outcome: '2 (Man City)', bookmaker: 'Sky Bet', odds: 3.40, stakePercent: 30.5, recommendedStake: 305.00, payout: 1037.00 }
    ],
    currency: 'USD',
    totalInvestment: 1000.00,
    estimatedProfit: 34.20,
    warning: 'Minor liquidity limits reported on William Hill draw market.'
  },
  {
    id: 'arb-102',
    sport: 'Basketball',
    league: 'NBA',
    event: 'Boston Celtics vs LA Lakers',
    startTime: '2026-10-12 00:00',
    market: 'Moneyline (OT Included)',
    isLive: true,
    country: 'US',
    netRoi: 2.15,
    grossMargin: 2.40,
    totalImpliedProb: 97.65,
    lastUpdated: '1s ago',
    status: 'ACTIVE',
    legs: [
      { outcome: 'Boston Celtics', bookmaker: 'DraftKings', odds: 1.85, stakePercent: 54.1, recommendedStake: 541.00, payout: 1000.85 },
      { outcome: 'LA Lakers', bookmaker: 'FanDuel', odds: 2.22, stakePercent: 45.9, recommendedStake: 459.00, payout: 1018.98 }
    ],
    currency: 'USD',
    totalInvestment: 1000.00,
    estimatedProfit: 21.50,
    warning: 'Live odds fluctuating rapidly. Execute quickly.'
  },
  {
    id: 'arb-103',
    sport: 'Football',
    league: 'Nigeria NPFL',
    event: 'Enyimba vs Rivers United',
    startTime: '2026-10-13 15:00',
    market: '1X2 (Full Time)',
    isLive: false,
    country: 'Nigeria',
    netRoi: 4.80,
    grossMargin: 5.20,
    totalImpliedProb: 95.05,
    lastUpdated: '8s ago',
    status: 'ACTIVE',
    legs: [
      { outcome: '1 (Enyimba)', bookmaker: 'Bet9ja', odds: 2.10, stakePercent: 49.5, recommendedStake: 49500.00, payout: 103950.00 },
      { outcome: 'X (Draw)', bookmaker: 'SportyBet', odds: 3.50, stakePercent: 29.7, recommendedStake: 29700.00, payout: 103950.00 },
      { outcome: '2 (Rivers)', bookmaker: 'BetKing', odds: 4.20, stakePercent: 20.8, recommendedStake: 20800.00, payout: 103360.00 }
    ],
    currency: 'NGN',
    totalInvestment: 100000.00,
    estimatedProfit: 4800.00,
    warning: 'Ensure exact stake rounding per Nigerian bookmaker rules.'
  },
  {
    id: 'arb-104',
    sport: 'Tennis',
    league: 'ATP Masters',
    event: 'Alcaraz C. vs Sinner J.',
    startTime: '2026-10-12 14:00',
    market: 'Match Winner',
    isLive: false,
    country: 'UK',
    netRoi: 1.85,
    grossMargin: 2.10,
    totalImpliedProb: 98.15,
    lastUpdated: '12s ago',
    status: 'STALE',
    legs: [
      { outcome: 'Alcaraz C.', bookmaker: 'Bet365', odds: 1.72, stakePercent: 58.1, recommendedStake: 581.00, payout: 999.32 },
      { outcome: 'Sinner J.', bookmaker: 'Betfair Exchange', odds: 2.45, stakePercent: 41.9, recommendedStake: 419.00, payout: 1026.55 }
    ],
    currency: 'USD',
    totalInvestment: 1000.00,
    estimatedProfit: 18.50,
    warning: 'Exchange commission (2%) already factored into net ROI calculation.'
  },
  {
    id: 'arb-105',
    sport: 'Ice Hockey',
    league: 'NHL',
    event: 'Edmonton Oilers vs Toronto Maple Leafs',
    startTime: '2026-10-14 01:30',
    market: 'Moneyline',
    isLive: false,
    country: 'Canada',
    netRoi: 3.10,
    grossMargin: 3.45,
    totalImpliedProb: 96.90,
    lastUpdated: '5s ago',
    status: 'ACTIVE',
    legs: [
      { outcome: 'Oilers', bookmaker: 'bet365 Canada', odds: 2.05, stakePercent: 49.2, recommendedStake: 492.00, payout: 1008.60 },
      { outcome: 'Maple Leafs', bookmaker: 'BetMGM', odds: 1.98, stakePercent: 50.8, recommendedStake: 508.00, payout: 1005.84 }
    ],
    currency: 'CAD',
    totalInvestment: 1000.00,
    estimatedProfit: 31.00,
    warning: 'Provincial sports betting regulations apply.'
  }
];

const BOOKMAKERS_DIRECTORY = [
  { name: 'Bet9ja', country: 'Nigeria', region: 'NG', status: 'Connected', latency: '140ms', apiType: 'Direct API', reliability: '99.4%' },
  { name: 'SportyBet', country: 'Nigeria', region: 'NG', status: 'Connected', latency: '110ms', apiType: 'WebSocket', reliability: '99.8%' },
  { name: 'BetKing', country: 'Nigeria', region: 'NG', status: 'Connected', latency: '180ms', apiType: 'REST API', reliability: '98.9%' },
  { name: 'Bet365', country: 'United Kingdom', region: 'UK', status: 'Connected', latency: '65ms', apiType: 'Enterprise Feed', reliability: '99.9%' },
  { name: 'William Hill', country: 'United Kingdom', region: 'UK', status: 'Connected', latency: '85ms', apiType: 'Direct API', reliability: '99.5%' },
  { name: 'Sky Bet', country: 'United Kingdom', region: 'UK', status: 'Delayed', latency: '320ms', apiType: 'Polled API', reliability: '97.2%' },
  { name: 'DraftKings', country: 'United States', region: 'US', status: 'Connected', latency: '75ms', apiType: 'WebSocket', reliability: '99.9%' },
  { name: 'FanDuel', country: 'United States', region: 'US', status: 'Connected', latency: '80ms', apiType: 'Direct API', reliability: '99.8%' },
  { name: 'BetMGM', country: 'United States', region: 'US', status: 'Connected', latency: '95ms', apiType: 'REST API', reliability: '99.1%' },
  { name: 'Caesars', country: 'United States', region: 'US', status: 'Unavailable', latency: 'N/A', apiType: 'Maintenance', reliability: '94.0%' },
  { name: 'bet365 Canada', country: 'Canada', region: 'CA', status: 'Connected', latency: '90ms', apiType: 'Enterprise Feed', reliability: '99.7%' }
];

const SUBSCRIPTION_PLANS = [
  {
    id: 'free',
    name: 'Free Starter',
    priceNGN: '₦0',
    priceUSD: '$0',
    period: 'forever',
    features: ['Delayed Odds (60s delay)', 'Basic 2-Outcome Arbs', 'Community Support', 'Standard Calculator'],
    current: false
  },
  {
    id: 'starter',
    name: 'Pro Arbitrageur',
    priceNGN: '₦24,500',
    priceUSD: '$39',
    period: 'per month',
    features: ['Real-time Instant Feed (<2s)', '2 & 3+ Outcome Arbs', 'All Regions (NG, UK, US, CA)', 'Advanced Stake Calculator', 'Email & Telegram Alerts'],
    current: true
  },
  {
    id: 'enterprise',
    name: 'Institutional Syndicate',
    priceNGN: '₦85,000',
    priceUSD: '$149',
    period: 'per month',
    features: ['Dedicated Low-Latency Feeds', 'API & Webhook Access', 'Custom Bookmaker Filters', 'Multi-Account Stake Manager', 'Dedicated Account Manager'],
    current: false
  }
];

export default function ArbFinderApp() {
  // Navigation & View State
  const [currentView, setCurrentView] = useState('landing'); // landing, dashboard, calculator, bookmakers, settings, admin, auth
  const [authMode, setAuthMode] = useState('login'); // login, signup, forgot
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState(null);

  // User Session State
  const [user, setUser] = useState({
    name: 'Adeola Johnson',
    email: 'adeola@arbfinder.io',
    role: 'SUPER_ADMIN', // FREE, PREMIUM, SUPER_ADMIN
    plan: 'Pro Arbitrageur',
    currency: 'USD'
  });

  // Dashboard Filters & State
  const [opportunities, setOpportunities] = useState(INITIAL_OPPORTUNITIES);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCountry, setSelectedCountry] = useState('ALL');
  const [selectedSport, setSelectedSport] = useState('ALL');
  const [minRoi, setMinRoi] = useState(1.0);
  const [onlyLive, setOnlyLive] = useState(false);
  const [expandedRowId, setExpandedRowId] = useState(null);
  const [simulatedFeedActive, setSimulatedFeedActive] = useState(true);

  // Calculator State
  const [calcBankroll, setCalcBankroll] = useState(1000);
  const [calcCurrency, setCalcCurrency] = useState('USD');
  const [calcOddsFormat, setCalcOddsFormat] = useState('decimal');
  const [calcLegs, setCalcLegs] = useState([
    { bookmaker: 'Bet365', odds: 2.10 },
    { bookmaker: 'William Hill', odds: 3.40 }
  ]);

  // Toast notification helper
  const showToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3500);
  };

  // Simulated live feed tick effect
  useEffect(() => {
    if (!simulatedFeedActive) return;
    const interval = setInterval(() => {
      setOpportunities(prev => prev.map(item => {
        if (Math.random() > 0.7) {
          const delta = (Math.random() * 0.4 - 0.2);
          const newRoi = Math.max(0.5, Number((item.netRoi + delta).toFixed(2)));
          return { ...item, netRoi: newRoi, lastUpdated: 'Just now' };
        }
        return item;
      }));
    }, 4000);
    return () => clearInterval(interval);
  }, [simulatedFeedActive]);

  // Filtered opportunities
  const filteredOpportunities = opportunities.filter(item => {
    const matchesSearch = item.event.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          item.league.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCountry = selectedCountry === 'ALL' || item.country === selectedCountry;
    const matchesSport = selectedSport === 'ALL' || item.sport === selectedSport;
    const matchesRoi = item.netRoi >= minRoi;
    const matchesLive = !onlyLive || item.isLive;
    return matchesSearch && matchesCountry && matchesSport && matchesRoi && matchesLive;
  });

  // Calculator calculations
  const calcInverseSum = calcLegs.reduce((sum, leg) => sum + (1 / (Number(leg.odds) || 1.01)), 0);
  const calcGrossMargin = 1 - calcInverseSum;
  const calcNetRoi = (1 / calcInverseSum - 1) * 100;
  const calcStakes = calcLegs.map(leg => {
    const odds = Number(leg.odds) || 1.01;
    const stake = (calcBankroll * (1 / odds)) / calcInverseSum;
    const payout = stake * odds;
    return {
      bookmaker: leg.bookmaker,
      odds,
      stake: isNaN(stake) ? 0 : Number(stake.toFixed(2)),
      payout: isNaN(payout) ? 0 : Number(payout.toFixed(2))
    };
  });
  const calcEstimatedProfit = calcStakes.length > 0 ? calcStakes[0].payout - calcBankroll : 0;

  return (
    <div className="min-h-screen bg-[#070D1D] text-slate-100 font-sans selection:bg-emerald-500 selection:text-slate-950 flex flex-col">
      
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed top-5 right-5 z-50 bg-emerald-500 text-slate-950 px-5 py-3 rounded-xl shadow-2xl flex items-center space-x-3 font-medium border border-emerald-400 animate-bounce">
          <CheckCircle className="w-5 h-5" />
          <span>{toastMessage}</span>
        </div>
      )}

      {/* TOP NAVIGATION BAR */}
      <header className="sticky top-0 z-40 bg-[#0B132B]/90 backdrop-blur-md border-b border-slate-800/80 px-4 lg:px-8 py-3 flex items-center justify-between">
        <div className="flex items-center space-x-6">
          <div 
            onClick={() => setCurrentView('landing')} 
            className="flex items-center space-x-2.5 cursor-pointer group"
          >
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:scale-105 transition-transform">
              <TrendingUp className="w-6 h-6 text-slate-950 stroke-[2.5]" />
            </div>
            <div>
              <span className="text-xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-200 to-emerald-400 bg-clip-text text-transparent">
                ArbFinder
              </span>
              <span className="hidden sm:inline-block ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded">
                PRO v3.4
              </span>
            </div>
          </div>

          {/* Desktop Nav Links */}
          <nav className="hidden md:flex items-center space-x-1 text-sm font-medium">
            <button 
              onClick={() => setCurrentView('landing')}
              className={`px-3 py-2 rounded-lg transition-colors ${currentView === 'landing' ? 'bg-slate-800 text-emerald-400 font-semibold' : 'text-slate-300 hover:text-white hover:bg-slate-800/50'}`}
            >
              Overview
            </button>
            <button 
              onClick={() => setCurrentView('dashboard')}
              className={`px-3 py-2 rounded-lg transition-colors flex items-center space-x-1.5 ${currentView === 'dashboard' ? 'bg-slate-800 text-emerald-400 font-semibold' : 'text-slate-300 hover:text-white hover:bg-slate-800/50'}`}
            >
              <Zap className="w-4 h-4 text-emerald-400" />
              <span>Surebets Live</span>
            </button>
            <button 
              onClick={() => setCurrentView('calculator')}
              className={`px-3 py-2 rounded-lg transition-colors flex items-center space-x-1.5 ${currentView === 'calculator' ? 'bg-slate-800 text-emerald-400 font-semibold' : 'text-slate-300 hover:text-white hover:bg-slate-800/50'}`}
            >
              <Calculator className="w-4 h-4 text-emerald-400" />
              <span>Calculator</span>
            </button>
            <button 
              onClick={() => setCurrentView('bookmakers')}
              className={`px-3 py-2 rounded-lg transition-colors ${currentView === 'bookmakers' ? 'bg-slate-800 text-emerald-400 font-semibold' : 'text-slate-300 hover:text-white hover:bg-slate-800/50'}`}
            >
              Bookmakers
            </button>
          </nav>
        </div>

        {/* Right Nav Actions */}
        <div className="flex items-center space-x-3">
          {/* Simulated Feed Status Pill */}
          <div className="hidden xl:flex items-center space-x-2 bg-slate-900/90 border border-slate-800 px-3 py-1.5 rounded-full text-xs">
            <span className={`w-2 h-2 rounded-full ${simulatedFeedActive ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'}`} />
            <span className="text-slate-300">Feed: <strong className="text-white">{simulatedFeedActive ? 'Live WebSocket' : 'Paused'}</strong></span>
            <button 
              onClick={() => {
                setSimulatedFeedActive(!simulatedFeedActive);
                showToast(simulatedFeedActive ? 'Odds feed paused' : 'Odds feed reconnected');
              }}
              className="ml-2 text-emerald-400 hover:text-emerald-300 underline"
            >
              {simulatedFeedActive ? 'Pause' : 'Resume'}
            </button>
          </div>

          {user ? (
            <div className="flex items-center space-x-3">
              <button 
                onClick={() => setCurrentView('admin')}
                className={`hidden sm:flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border ${user.role === 'SUPER_ADMIN' ? 'bg-purple-500/10 border-purple-500/30 text-purple-400 hover:bg-purple-500/20' : 'bg-slate-800 border-slate-700 text-slate-300'}`}
              >
                <Server className="w-3.5 h-3.5" />
                <span>Admin Panel</span>
              </button>

              <button 
                onClick={() => setCurrentView('settings')}
                className="p-2 rounded-lg bg-slate-800/80 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors border border-slate-700/50"
                title="Settings"
              >
                <Settings className="w-4 h-4" />
              </button>

              <div className="flex items-center space-x-2 bg-slate-900 border border-slate-800 pl-3 pr-2 py-1.5 rounded-xl">
                <div className="text-right hidden sm:block">
                  <div className="text-xs font-bold text-white">{user.name}</div>
                  <div className="text-[10px] text-emerald-400 uppercase font-semibold">{user.plan}</div>
                </div>
                <div 
                  onClick={() => setUser(null)} 
                  className="w-8 h-8 rounded-lg bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-slate-950 font-bold text-xs cursor-pointer hover:opacity-90"
                  title="Logout"
                >
                  AJ
                </div>
              </div>
            </div>
          ) : (
            <div className="flex items-center space-x-2">
              <button 
                onClick={() => { setAuthMode('login'); setCurrentView('auth'); }}
                className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-colors"
              >
                Sign In
              </button>
              <button 
                onClick={() => { setAuthMode('signup'); setCurrentView('auth'); }}
                className="px-4 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 text-sm font-bold rounded-xl shadow-lg shadow-emerald-500/20 transition-all"
              >
                Get Started Free
              </button>
            </div>
          )}

          {/* Mobile Menu Toggle */}
          <button 
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="md:hidden p-2 text-slate-300 hover:text-white"
          >
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Filter className="w-6 h-6" />}
          </button>
        </div>
      </header>

      {/* Mobile Dropdown Nav */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-slate-900 border-b border-slate-800 px-4 py-4 space-y-2 z-30">
          <button 
            onClick={() => { setCurrentView('landing'); setMobileMenuOpen(false); }}
            className="block w-full text-left px-3 py-2 rounded-lg text-slate-200 hover:bg-slate-800 font-medium"
          >
            Overview
          </button>
          <button 
            onClick={() => { setCurrentView('dashboard'); setMobileMenuOpen(false); }}
            className="block w-full text-left px-3 py-2 rounded-lg text-emerald-400 hover:bg-slate-800 font-medium"
          >
            Surebets Live Feed
          </button>
          <button 
            onClick={() => { setCurrentView('calculator'); setMobileMenuOpen(false); }}
            className="block w-full text-left px-3 py-2 rounded-lg text-slate-200 hover:bg-slate-800 font-medium"
          >
            Arbitrage Calculator
          </button>
          <button 
            onClick={() => { setCurrentView('bookmakers'); setMobileMenuOpen(false); }}
            className="block w-full text-left px-3 py-2 rounded-lg text-slate-200 hover:bg-slate-800 font-medium"
          >
            Bookmaker Directory
          </button>
          <button 
            onClick={() => { setCurrentView('admin'); setMobileMenuOpen(false); }}
            className="block w-full text-left px-3 py-2 rounded-lg text-purple-400 hover:bg-slate-800 font-medium"
          >
            Admin Panel
          </button>
        </div>
      )}

      {/* ========================================== */}
      {/* MAIN VIEW ROUTER                           */}
      {/* ========================================== */}

      <main className="flex-1 flex flex-col">

        {/* 1. PUBLIC LANDING VIEW */}
        {currentView === 'landing' && (
          <div className="flex-1 flex flex-col">
            {/* Hero Section */}
            <section className="relative px-6 lg:px-20 py-20 lg:py-32 flex flex-col items-center text-center overflow-hidden bg-gradient-to-b from-[#0B132B] via-[#070D1D] to-[#070D1D]">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(16,185,129,0.08)_0,transparent_70%)] pointer-events-none" />
              
              <div className="inline-flex items-center space-x-2 bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 rounded-full text-emerald-400 text-xs font-semibold mb-6 animate-pulse">
                <Zap className="w-4 h-4" />
                <span>Real-Time Odds Aggregation Across NG, UK, US & Canada</span>
              </div>

              <h1 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight max-w-5xl leading-tight">
                Mathematical Certainty in <span className="bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-500 bg-clip-text text-transparent">Sports Arbitrage</span>
              </h1>

              <p className="mt-6 text-lg sm:text-xl text-slate-400 max-w-3xl leading-relaxed">
                Scan live sportsbooks instantly. Discover guaranteed profit opportunities with positive expected value regardless of match outcomes.
              </p>

              <div className="mt-10 flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
                <button 
                  onClick={() => setCurrentView('dashboard')}
                  className="w-full sm:w-auto px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-2xl shadow-xl shadow-emerald-500/25 transition-all transform hover:-translate-y-0.5 flex items-center justify-center space-x-3 text-base"
                >
                  <span>Launch Live Dashboard</span>
                  <ArrowUpRight className="w-5 h-5" />
                </button>
                <button 
                  onClick={() => setCurrentView('calculator')}
                  className="w-full sm:w-auto px-8 py-4 bg-slate-800/80 hover:bg-slate-800 text-slate-200 font-semibold rounded-2xl border border-slate-700 transition-all flex items-center justify-center space-x-3 text-base"
                >
                  <Calculator className="w-5 h-5 text-emerald-400" />
                  <span>Test Arbitrage Calculator</span>
                </button>
              </div>

              {/* Live Ticker Bar on Landing */}
              <div className="mt-16 w-full max-w-5xl bg-slate-900/80 border border-slate-800/90 rounded-2xl p-4 backdrop-blur-md shadow-2xl">
                <div className="flex items-center justify-between mb-3 text-xs text-slate-400 border-b border-slate-800 pb-2">
                  <span className="flex items-center space-x-2 font-semibold text-white">
                    <span className="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping" />
                    <span>LIVE ARBITRAGE FEED SAMPLE</span>
                  </span>
                  <span>Updated 1s ago</span>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
                  {opportunities.slice(0, 3).map((opp) => (
                    <div key={opp.id} className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800 hover:border-emerald-500/40 transition-colors">
                      <div className="flex justify-between items-center text-xs text-slate-400 mb-1">
                        <span>{opp.sport} • {opp.country}</span>
                        <span className="text-emerald-400 font-bold">+{opp.netRoi}% ROI</span>
                      </div>
                      <div className="font-bold text-sm text-white truncate">{opp.event}</div>
                      <div className="mt-2 flex items-center justify-between text-xs text-slate-300">
                        <span>{opp.legs[0].bookmaker} vs {opp.legs[1].bookmaker}</span>
                        <button 
                          onClick={() => setCurrentView('dashboard')}
                          className="text-emerald-400 hover:underline font-semibold flex items-center space-x-1"
                        >
                          <span>View</span>
                          <ChevronRight className="w-3 h-3" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>

            {/* Features Grid */}
            <section className="py-20 px-6 lg:px-20 bg-[#070D1D] border-t border-slate-800/60">
              <div className="max-w-7xl mx-auto">
                <div className="text-center max-w-2xl mx-auto mb-16">
                  <h2 className="text-3xl font-bold tracking-tight">Engineered for Maximum Yield</h2>
                  <p className="mt-3 text-slate-400">Professional-grade tools built to eliminate latency and human calculation errors.</p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  <div className="bg-slate-900/60 p-8 rounded-3xl border border-slate-800/80 hover:border-emerald-500/40 transition-all">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-6">
                      <Zap className="w-6 h-6" />
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">Sub-Second Ingestion</h3>
                    <p className="text-slate-400 text-sm leading-relaxed">Direct WebSocket and enterprise API feeds capture price discrepancies before bookmakers adjust their lines.</p>
                  </div>
                  <div className="bg-slate-900/60 p-8 rounded-3xl border border-slate-800/80 hover:border-emerald-500/40 transition-all">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-6">
                      <Sliders className="w-6 h-6" />
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">Advanced Stake Optimizer</h3>
                    <p className="text-slate-400 text-sm leading-relaxed">Automatic stake balancing across 2-outcome and 3-outcome markets with exchange commission deductions.</p>
                  </div>
                  <div className="bg-slate-900/60 p-8 rounded-3xl border border-slate-800/80 hover:border-emerald-500/40 transition-all">
                    <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-6">
                      <Globe className="w-6 h-6" />
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">Multi-Jurisdiction Coverage</h3>
                    <p className="text-slate-400 text-sm leading-relaxed">Compliant bookmaker registry covering Nigeria (Bet9ja, SportyBet), UK, US, and Canadian regulated operators.</p>
                  </div>
                </div>
              </div>
            </section>
          </div>
        )}

        {/* 2. MAIN ARBITRAGE DASHBOARD (SUREBETS LISTING) */}
        {currentView === 'dashboard' && (
          <div className="flex-1 flex flex-col p-4 lg:p-8 max-w-7xl mx-auto w-full">
            
            {/* Dashboard Header & Stats */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
              <div>
                <h1 className="text-2xl lg:text-3xl font-extrabold text-white">Live Arbitrage Scanner</h1>
                <p className="text-sm text-slate-400">Real-time surebets detected across authorized regional bookmakers.</p>
              </div>
              <div className="flex items-center space-x-3">
                <div className="bg-slate-900 border border-slate-800 px-4 py-2 rounded-xl text-xs flex items-center space-x-2">
                  <span className="text-slate-400">Active Opportunities:</span>
                  <span className="text-emerald-400 font-bold">{filteredOpportunities.length}</span>
                </div>
                <button 
                  onClick={() => {
                    showToast('Refreshed odds database');
                  }}
                  className="px-4 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 text-xs font-bold rounded-xl flex items-center space-x-2 shadow-lg shadow-emerald-500/20 transition-all"
                >
                  <RefreshCw className="w-3.5 h-3.5" />
                  <span>Sync Feeds</span>
                </button>
              </div>
            </div>

            {/* Filter Toolbar */}
            <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-4 mb-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Search Event</label>
                <div className="relative">
                  <Search className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
                  <input 
                    type="text" 
                    placeholder="Team or league..." 
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-9 pr-3 py-2 text-sm text-white focus:outline-none focus:border-emerald-500"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Jurisdiction</label>
                <select 
                  value={selectedCountry}
                  onChange={(e) => setSelectedCountry(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-emerald-500"
                >
                  <option value="ALL">All Regions</option>
                  <option value="Nigeria">Nigeria (NG)</option>
                  <option value="UK">United Kingdom (UK)</option>
                  <option value="US">United States (US)</option>
                  <option value="Canada">Canada (CA)</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Sport</label>
                <select 
                  value={selectedSport}
                  onChange={(e) => setSelectedSport(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-emerald-500"
                >
                  <option value="ALL">All Sports</option>
                  <option value="Football">Football</option>
                  <option value="Basketball">Basketball</option>
                  <option value="Tennis">Tennis</option>
                  <option value="Ice Hockey">Ice Hockey</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Minimum ROI ({minRoi}%)</label>
                <input 
                  type="range" 
                  min="0.5" 
                  max="5.0" 
                  step="0.1"
                  value={minRoi}
                  onChange={(e) => setMinRoi(Number(e.target.value))}
                  className="w-full accent-emerald-500 mt-2"
                />
              </div>

              <div className="flex items-end">
                <button 
                  onClick={() => setOnlyLive(!onlyLive)}
                  className={`w-full py-2 px-3 rounded-xl text-xs font-bold border transition-all flex items-center justify-center space-x-2 ${onlyLive ? 'bg-emerald-500 text-slate-950 border-emerald-400' : 'bg-slate-950 text-slate-300 border-slate-800 hover:border-slate-700'}`}
                >
                  <span className={`w-2 h-2 rounded-full ${onlyLive ? 'bg-slate-950' : 'bg-red-500 animate-pulse'}`} />
                  <span>{onlyLive ? 'Live Only Active' : 'Show All (Prematch & Live)'}</span>
                </button>
              </div>
            </div>

            {/* Opportunities Table */}
            <div className="bg-slate-900/60 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <thead>
                    <tr className="border-b border-slate-800 bg-slate-950/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                      <th className="py-3.5 px-4">Net ROI</th>
                      <th className="py-3.5 px-4">Sport / Event</th>
                      <th className="py-3.5 px-4">Market</th>
                      <th className="py-3.5 px-4">Outcomes & Bookmakers</th>
                      <th className="py-3.5 px-4">Est. Profit ($1k inv)</th>
                      <th className="py-3.5 px-4">Updated</th>
                      <th className="py-3.5 px-4 text-right">Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800 text-sm">
                    {filteredOpportunities.length === 0 ? (
                      <tr>
                        <td colSpan="7" className="text-center py-12 text-slate-500">
                          No arbitrage opportunities found matching your filter criteria.
                        </td>
                      </tr>
                    ) : (
                      filteredOpportunities.map((opp) => {
                        const isExpanded = expandedRowId === opp.id;
                        return (
                          <React.Fragment key={opp.id}>
                            <tr className={`hover:bg-slate-800/40 transition-colors ${opp.status === 'STALE' ? 'opacity-50 bg-slate-950/30' : ''}`}>
                              <td className="py-4 px-4 font-extrabold text-emerald-400 text-base">
                                +{opp.netRoi}%
                                <div className="text-[10px] text-slate-400 font-normal">Gross: {opp.grossMargin}%</div>
                              </td>
                              <td className="py-4 px-4">
                                <div className="font-bold text-white">{opp.event}</div>
                                <div className="text-xs text-slate-400 flex items-center space-x-1 mt-0.5">
                                  <span>{opp.league}</span>
                                  <span>•</span>
                                  <span className="text-emerald-400 font-medium">{opp.country}</span>
                                </div>
                              </td>
                              <td className="py-4 px-4">
                                <span className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 border border-slate-700">
                                  {opp.market}
                                </span>
                              </td>
                              <td className="py-4 px-4">
                                <div className="space-y-1">
                                  {opp.legs.map((leg, idx) => (
                                    <div key={idx} className="text-xs flex items-center space-x-2">
                                      <span className="text-slate-300 font-medium">{leg.outcome}:</span>
                                      <span className="bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5 rounded font-bold">{leg.odds}</span>
                                      <span className="text-slate-400">({leg.bookmaker})</span>
                                    </div>
                                  ))}
                                </div>
                              </td>
                              <td className="py-4 px-4 font-bold text-white">
                                {opp.currency === 'NGN' ? '₦' : opp.currency === 'CAD' ? 'CAD$' : '$'}
                                {opp.estimatedProfit.toLocaleString()}
                                <div className="text-[10px] text-slate-400 font-normal">Stake: {opp.currency === 'NGN' ? '₦' : '$'}{opp.totalInvestment.toLocaleString()}</div>
                              </td>
                              <td className="py-4 px-4 text-xs text-slate-400">
                                {opp.lastUpdated}
                                {opp.status === 'STALE' && <span className="block text-amber-400 font-semibold text-[10px]">Stale Odds</span>}
                              </td>
                              <td className="py-4 px-4 text-right">
                                <button 
                                  onClick={() => setExpandedRowId(isExpanded ? null : opp.id)}
                                  className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold rounded-xl border border-slate-700 transition-colors inline-flex items-center space-x-1"
                                >
                                  <span>{isExpanded ? 'Hide Details' : 'Calculate'}</span>
                                  <ChevronDown className={`w-3.5 h-3.5 transform transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
                                </button>
                              </td>
                            </tr>

                            {/* Expanded Row Breakdown */}
                            {isExpanded && (
                              <tr className="bg-slate-950/80 border-b border-slate-800">
                                <td colSpan="7" className="p-6">
                                  <div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg">
                                    <div className="flex items-center justify-between mb-4">
                                      <h4 className="text-sm font-bold text-white flex items-center space-x-2">
                                        <Layers className="w-4 h-4 text-emerald-400" />
                                        <span>Stake Allocation & Execution Breakdown</span>
                                      </h4>
                                      <span className="text-xs text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-lg">
                                        ⚠️ {opp.warning}
                                      </span>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                      {opp.legs.map((leg, idx) => (
                                        <div key={idx} className="bg-slate-950 p-4 rounded-xl border border-slate-800">
                                          <div className="text-xs text-slate-400 mb-1">{leg.outcome} ({leg.bookmaker})</div>
                                          <div className="text-lg font-bold text-emerald-400">Odds: {leg.odds}</div>
                                          <div className="mt-2 pt-2 border-t border-slate-800/80 flex justify-between text-xs">
                                            <span className="text-slate-300">Rec. Stake:</span>
                                            <span className="font-bold text-white">{opp.currency === 'NGN' ? '₦' : '$'}{leg.recommendedStake.toLocaleString()}</span>
                                          </div>
                                          <div className="flex justify-between text-xs mt-1">
                                            <span className="text-slate-300">Guaranteed Payout:</span>
                                            <span className="font-bold text-emerald-300">{opp.currency === 'NGN' ? '₦' : '$'}{leg.payout.toLocaleString()}</span>
                                          </div>
                                        </div>
                                      ))}
                                    </div>

                                    <div className="flex items-center justify-between pt-2 border-t border-slate-800 text-xs text-slate-400">
                                      <span>Total Implied Probability: <strong className="text-white">{opp.totalImpliedProb}%</strong></span>
                                      <button 
                                        onClick={() => {
                                          showToast(`Copied arbitrage stakes to clipboard for ${opp.event}`);
                                        }}
                                        className="px-3 py-1.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-lg transition-colors"
                                      >
                                        Copy Stake Breakdown
                                      </button>
                                    </div>
                                  </div>
                                </td>
                              </tr>
                            )}
                          </React.Fragment>
                        );
                      })
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* 3. INTERACTIVE ARBITRAGE CALCULATOR */}
        {currentView === 'calculator' && (
          <div className="flex-1 flex flex-col p-4 lg:p-8 max-w-5xl mx-auto w-full">
            <div className="mb-8">
              <h1 className="text-2xl lg:text-3xl font-extrabold text-white">Arbitrage Stake Calculator</h1>
              <p className="text-sm text-slate-400">Enter bankroll and odds to instantly calculate optimal stakes and guaranteed profit.</p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Left Input Panel */}
              <div className="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-semibold text-slate-400 mb-1">Total Bankroll / Investment</label>
                    <input 
                      type="number" 
                      value={calcBankroll}
                      onChange={(e) => setCalcBankroll(Number(e.target.value))}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-slate-400 mb-1">Currency</label>
                    <select 
                      value={calcCurrency}
                      onChange={(e) => setCalcCurrency(e.target.value)}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500"
                    >
                      <option value="USD">USD ($)</option>
                      <option value="NGN">NGN (₦)</option>
                      <option value="GBP">GBP (£)</option>
                      <option value="CAD">CAD ($)</option>
                    </select>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between items-center mb-2">
                    <label className="text-xs font-semibold text-slate-400">Outcome Odds (Decimal)</label>
                    <button 
                      onClick={() => {
                        if (calcLegs.length < 4) {
                          setCalcLegs([...calcLegs, { bookmaker: `Bookmaker ${calcLegs.length + 1}`, odds: 2.0 }]);
                        }
                      }}
                      className="text-xs text-emerald-400 hover:underline font-bold"
                    >
                      + Add Outcome Leg
                    </button>
                  </div>

                  <div className="space-y-3">
                    {calcLegs.map((leg, index) => (
                      <div key={index} className="flex items-center space-x-3 bg-slate-950 p-3 rounded-xl border border-slate-800">
                        <span className="w-6 text-xs text-slate-500 font-bold">#{index + 1}</span>
                        <input 
                          type="text" 
                          value={leg.bookmaker}
                          onChange={(e) => {
                            const updated = [...calcLegs];
                            updated[index].bookmaker = e.target.value;
                            setCalcLegs(updated);
                          }}
                          className="flex-1 bg-slate-900 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white"
                          placeholder="Bookmaker name"
                        />
                        <input 
                          type="number" 
                          step="0.01"
                          value={leg.odds}
                          onChange={(e) => {
                            const updated = [...calcLegs];
                            updated[index].odds = e.target.value;
                            setCalcLegs(updated);
                          }}
                          className="w-24 bg-slate-900 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white font-bold text-emerald-400"
                        />
                        {calcLegs.length > 2 && (
                          <button 
                            onClick={() => setCalcLegs(calcLegs.filter((_, i) => i !== index))}
                            className="text-slate-500 hover:text-red-400 p-1"
                          >
                            <X className="w-4 h-4" />
                          </button>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Right Output Summary Panel */}
              <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl flex flex-col justify-between">
                <div>
                  <h3 className="text-base font-bold text-white mb-4 flex items-center space-x-2">
                    <TrendingUp className="w-5 h-5 text-emerald-400" />
                    <span>Calculation Results</span>
                  </h3>

                  <div className="space-y-4 mb-6">
                    <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800">
                      <div className="text-xs text-slate-400">Net Arbitrage ROI</div>
                      <div className={`text-3xl font-extrabold mt-1 ${calcNetRoi > 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                        {calcNetRoi > 0 ? `+${calcNetRoi.toFixed(2)}%` : `${calcNetRoi.toFixed(2)}%`}
                      </div>
                      <div className="text-[10px] text-slate-400 mt-1">
                        {calcNetRoi > 0 ? '🟢 Profitable Surebet Opportunity' : '🔴 Negative Margin (No Arb)'}
                      </div>
                    </div>

                    <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 space-y-2">
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-400">Gross Margin:</span>
                        <span className="font-bold text-white">{(calcGrossMargin * 100).toFixed(2)}%</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-400">Total Implied Prob:</span>
                        <span className="font-bold text-white">{(calcInverseSum * 100).toFixed(2)}%</span>
                      </div>
                      <div className="flex justify-between text-xs pt-2 border-t border-slate-800">
                        <span className="text-slate-400">Estimated Profit:</span>
                        <span className="font-bold text-emerald-400">{calcCurrency === 'NGN' ? '₦' : '$'}{calcEstimatedProfit.toFixed(2)}</span>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <div className="text-xs font-bold text-slate-300">Recommended Stakes:</div>
                      {calcStakes.map((s, i) => (
                        <div key={i} className="text-xs bg-slate-950 p-2.5 rounded-xl border border-slate-800 flex justify-between items-center">
                          <span className="text-slate-300">{s.bookmaker} ({s.odds}):</span>
                          <span className="font-bold text-white">{calcCurrency === 'NGN' ? '₦' : '$'}{s.stake.toLocaleString()}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                <button 
                  onClick={() => showToast('Calculator setup copied successfully!')}
                  className="w-full py-3 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-xl transition-all text-sm shadow-lg shadow-emerald-500/20"
                >
                  Save to Saved Arbs
                </button>
              </div>
            </div>
          </div>
        )}

        {/* 4. BOOKMAKER & PROVIDER DIRECTORY */}
        {currentView === 'bookmakers' && (
          <div className="flex-1 flex flex-col p-4 lg:p-8 max-w-7xl mx-auto w-full">
            <div className="mb-8">
              <h1 className="text-2xl lg:text-3xl font-extrabold text-white">Bookmaker & Data Provider Registry</h1>
              <p className="text-sm text-slate-400">Operational health, latency, and regional availability across authorized jurisdictions.</p>
            </div>

            <div className="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <thead>
                    <tr className="border-b border-slate-800 bg-slate-950/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                      <th className="py-3.5 px-4">Operator / Provider</th>
                      <th className="py-3.5 px-4">Jurisdiction</th>
                      <th className="py-3.5 px-4">Operational Status</th>
                      <th className="py-3.5 px-4">Feed Latency</th>
                      <th className="py-3.5 px-4">Integration Type</th>
                      <th className="py-3.5 px-4">Reliability</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800 text-sm">
                    {BOOKMAKERS_DIRECTORY.map((bm, index) => (
                      <tr key={index} className="hover:bg-slate-800/40 transition-colors">
                        <td className="py-4 px-4 font-bold text-white flex items-center space-x-2">
                          <Cpu className="w-4 h-4 text-emerald-400" />
                          <span>{bm.name}</span>
                        </td>
                        <td className="py-4 px-4">
                          <span className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300">
                            {bm.country} ({bm.region})
                          </span>
                        </td>
                        <td className="py-4 px-4">
                          <span className={`inline-flex items-center space-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${
                            bm.status === 'Connected' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' :
                            bm.status === 'Delayed' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' :
                            'bg-red-500/10 text-red-400 border border-red-500/20'
                          }`}>
                            <span className={`w-1.5 h-1.5 rounded-full ${bm.status === 'Connected' ? 'bg-emerald-400' : bm.status === 'Delayed' ? 'bg-amber-400' : 'bg-red-400'}`} />
                            <span>{bm.status}</span>
                          </span>
                        </td>
                        <td className="py-4 px-4 text-slate-300 font-mono text-xs">{bm.latency}</td>
                        <td className="py-4 px-4 text-xs text-slate-400">{bm.apiType}</td>
                        <td className="py-4 px-4 font-bold text-emerald-400">{bm.reliability}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* 5. USER SETTINGS & SUBSCRIPTION VIEW */}
        {currentView === 'settings' && (
          <div className="flex-1 flex flex-col p-4 lg:p-8 max-w-5xl mx-auto w-full">
            <div className="mb-8">
              <h1 className="text-2xl lg:text-3xl font-extrabold text-white">Subscription & Account Settings</h1>
              <p className="text-sm text-slate-400">Manage your subscription tier, API keys, and notification preferences.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
              {SUBSCRIPTION_PLANS.map((plan) => (
                <div key={plan.id} className={`bg-slate-900 border rounded-3xl p-6 flex flex-col justify-between ${plan.current ? 'border-emerald-500 shadow-xl shadow-emerald-500/10' : 'border-slate-800'}`}>
                  <div>
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="font-bold text-white text-lg">{plan.name}</h3>
                      {plan.current && <span className="bg-emerald-500/20 text-emerald-400 text-xs font-bold px-2.5 py-1 rounded-full">Current Plan</span>}
                    </div>
                    <div className="text-3xl font-extrabold text-white mb-1">{plan.priceUSD} <span className="text-xs font-normal text-slate-400">/ {plan.period}</span></div>
                    <div className="text-xs text-emerald-400 mb-6 font-semibold">({plan.priceNGN})</div>

                    <ul className="space-y-2.5 text-xs text-slate-300 mb-6">
                      {plan.features.map((feat, i) => (
                        <li key={i} className="flex items-center space-x-2">
                          <Check className="w-4 h-4 text-emerald-400 flex-shrink-0" />
                          <span>{feat}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <button 
                    onClick={() => showToast(`Switched plan to ${plan.name}`)}
                    className={`w-full py-3 rounded-xl font-bold text-xs transition-all ${plan.current ? 'bg-slate-800 text-slate-300 cursor-default' : 'bg-emerald-500 hover:bg-emerald-400 text-slate-950 shadow-lg shadow-emerald-500/20'}`}
                  >
                    {plan.current ? 'Active Subscription' : 'Upgrade Plan'}
                  </button>
                </div>
              ))}
            </div>

            <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 space-y-4">
              <h3 className="font-bold text-white text-base">API Credentials & Webhooks</h3>
              <p className="text-xs text-slate-400">Keep your API key secure. Never expose private keys in client-side applications.</p>
              <div className="flex items-center space-x-3">
                <input 
                  type="password" 
                  readOnly 
                  value="arb_live_998374a819b27461982b4" 
                  className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-slate-300 font-mono"
                />
                <button 
                  onClick={() => showToast('API key copied to clipboard')}
                  className="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold rounded-xl transition-colors"
                >
                  Copy Key
                </button>
              </div>
            </div>
          </div>
        )}

        {/* 6. ADMIN DASHBOARD (SUPER ADMIN VIEW) */}
        {currentView === 'admin' && (
          <div className="flex-1 flex flex-col p-4 lg:p-8 max-w-7xl mx-auto w-full">
            <div className="mb-8 flex items-center justify-between">
              <div>
                <h1 className="text-2xl lg:text-3xl font-extrabold text-white">Super Admin Control Center</h1>
                <p className="text-sm text-slate-400">System health, audit logs, and user role management.</p>
              </div>
              <span className="bg-purple-500/10 text-purple-400 border border-purple-500/20 px-3 py-1.5 rounded-xl text-xs font-bold">
                🔐 SUPER_ADMIN ACCESS ACTIVE
              </span>
            </div>

            {/* Metrics Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                <div className="text-xs text-slate-400 mb-1">Total Registered Users</div>
                <div className="text-3xl font-extrabold text-white">4,892</div>
                <div className="text-[10px] text-emerald-400 mt-1">+342 this week</div>
              </div>
              <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                <div className="text-xs text-slate-400 mb-1">Active Subscribers</div>
                <div className="text-3xl font-extrabold text-white">1,245</div>
                <div className="text-[10px] text-emerald-400 mt-1">94% retention rate</div>
              </div>
              <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                <div className="text-xs text-slate-400 mb-1">Active Odds Providers</div>
                <div className="text-3xl font-extrabold text-emerald-400">10 / 11</div>
                <div className="text-[10px] text-amber-400 mt-1">Caesars degraded</div>
              </div>
              <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
                <div className="text-xs text-slate-400 mb-1">System Ingestion Latency</div>
                <div className="text-3xl font-extrabold text-white">88ms</div>
                <div className="text-[10px] text-emerald-400 mt-1">Optimal performance</div>
              </div>
            </div>

            {/* Audit Logs */}
            <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6">
              <h3 className="font-bold text-white text-base mb-4">Recent System Audit Logs</h3>
              <div className="space-y-3">
                {[
                  { time: '2 mins ago', action: 'Provider Bet365 reconnected successfully', type: 'INFO' },
                  { time: '14 mins ago', action: 'User upgrade to Pro: michael@hedgecapital.co.uk', type: 'PAYMENT' },
                  { time: '45 mins ago', action: 'Manual access grant issued by Super Admin', type: 'SECURITY' },
                  { time: '2 hours ago', action: 'Database migration v3.4 executed successfully', type: 'SYSTEM' }
                ].map((log, i) => (
                  <div key={i} className="bg-slate-950 p-3.5 rounded-xl border border-slate-800 flex items-center justify-between text-xs">
                    <div className="flex items-center space-x-3">
                      <span className="font-mono text-slate-500">{log.time}</span>
                      <span className="text-slate-200">{log.action}</span>
                    </div>
                    <span className="px-2 py-0.5 rounded font-bold text-[10px] bg-slate-800 text-emerald-400">{log.type}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* 7. AUTH VIEWS (SIGN IN / SIGN UP) */}
        {currentView === 'auth' && (
          <div className="flex-1 flex items-center justify-center p-6">
            <div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-md w-full shadow-2xl">
              <div className="text-center mb-8">
                <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-emerald-500/20">
                  <TrendingUp className="w-6 h-6 text-slate-950 stroke-[2.5]" />
                </div>
                <h2 className="text-2xl font-bold text-white">{authMode === 'login' ? 'Welcome Back to ArbFinder' : 'Create Your Account'}</h2>
                <p className="text-xs text-slate-400 mt-1">Professional sports arbitrage SaaS platform</p>
              </div>

              <div className="space-y-4">
                {authMode === 'signup' && (
                  <div>
                    <label className="block text-xs font-semibold text-slate-400 mb-1">Full Name</label>
                    <input type="text" placeholder="Adeola Johnson" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500" />
                  </div>
                )}
                <div>
                  <label className="block text-xs font-semibold text-slate-400 mb-1">Email Address</label>
                  <input type="email" placeholder="name@example.com" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500" />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-400 mb-1">Password</label>
                  <input type="password" placeholder="••••••••" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500" />
                </div>

                <button 
                  onClick={() => {
                    setUser({ name: 'Adeola Johnson', email: 'adeola@arbfinder.io', role: 'SUPER_ADMIN', plan: 'Pro Arbitrageur', currency: 'USD' });
                    setCurrentView('dashboard');
                    showToast('Successfully signed in!');
                  }}
                  className="w-full py-3.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-xl shadow-lg shadow-emerald-500/20 transition-all text-sm mt-2"
                >
                  {authMode === 'login' ? 'Sign In to Dashboard' : 'Complete Registration'}
                </button>
              </div>

              <div className="mt-6 text-center text-xs text-slate-400">
                {authMode === 'login' ? (
                  <span>Don't have an account? <button onClick={() => setAuthMode('signup')} className="text-emerald-400 font-bold hover:underline">Sign up</button></span>
                ) : (
                  <span>Already have an account? <button onClick={() => setAuthMode('login')} className="text-emerald-400 font-bold hover:underline">Sign in</button></span>
                )}
              </div>
            </div>
          </div>
        )}

      </main>

      {/* FOOTER */}
      <footer className="bg-[#0B132B] border-t border-slate-800/80 px-6 lg:px-12 py-8 mt-auto text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
          © 2026 ArbFinder Inc. All rights reserved. Professional sports arbitrage SaaS platform.
        </div>
        <div className="flex items-center space-x-6">
          <a href="#" className="hover:text-slate-300 transition-colors">Privacy Policy</a>
          <a href="#" className="hover:text-slate-300 transition-colors">Terms of Service</a>
          <a href="#" className="hover:text-slate-300 transition-colors">Responsible Betting</a>
        </div>
      </footer>

    </div>
  );
}