import React, { useState, useEffect, useMemo, useRef } from 'react';
import { PenSquare, LayoutDashboard, Edit3, Trash2, X, Play, Square, Camera, Sparkles, Loader2, AlertCircle, User, Crown, TrendingUp, Zap, Target, Trophy, CheckCircle2, Circle } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, deleteDoc, onSnapshot } from 'firebase/firestore';

// --- FIREBASE INITIALIZATION ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

export default function App() {
  const [user, setUser] = useState(null);
  const [isProfileLoading, setIsProfileLoading] = useState(true);
  
  const [view, setView] = useState('log'); // 'log', 'vault', 'profile', 'trophy', 'edit'
  const [sessions, setSessions] = useState([]);
  const [legacyWins, setLegacyWins] = useState([]);
  const [includeLegacyInTotal, setIncludeLegacyInTotal] = useState(false);
  
  const [userProfile, setUserProfile] = useState(null);
  const [signupData, setSignupData] = useState({ email: '', gamblingName: '', homeCasino: '' });
  const [successMsg, setSuccessMsg] = useState('');
  const [errorMsg, setErrorMsg] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [isScanning, setIsScanning] = useState(false);

  // Timer State
  const [timerStart, setTimerStart] = useState(null);
  const [elapsedSeconds, setElapsedSeconds] = useState(0);

  // Form State
  const initialFormState = {
    location: '',
    gameType: 'Slots',
    specificGame: '',
    buyIn: '',
    cashOut: '',
    expensesFood: '',
    expensesPark: '',
    expensesOther: '',
    tips: ''
  };
  const [formData, setFormData] = useState(initialFormState);
  
  const initialLegacyState = {
    title: '',
    amount: '',
    date: new Date().toISOString().split('T')[0],
    type: 'Jackpot'
  };
  const [legacyForm, setLegacyForm] = useState(initialLegacyState);
  const fileInputRef = useRef(null);

  // --- FIREBASE AUTHENTICATION ---
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // --- FIRESTORE REAL-TIME SYNC ---
  useEffect(() => {
    if (!user) {
      setIsProfileLoading(true);
      return;
    }

    const profileRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data');
    const sessionsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'sessions');
    const legacyRef = collection(db, 'artifacts', appId, 'users', user.uid, 'legacyWins');

    const unsubProfile = onSnapshot(profileRef, (docSnap) => {
      if (docSnap.exists()) {
        setUserProfile(docSnap.data());
      } else {
        setUserProfile(null);
      }
      setIsProfileLoading(false);
    }, (err) => {
      console.error("Profile sync error:", err);
      setIsProfileLoading(false);
    });

    const unsubSessions = onSnapshot(sessionsRef, (snapshot) => {
      const data = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
      data.sort((a, b) => new Date(b.date) - new Date(a.date));
      setSessions(data);
    }, (err) => console.error("Sessions sync error:", err));

    const unsubLegacy = onSnapshot(legacyRef, (snapshot) => {
      const data = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
      data.sort((a, b) => {
        const dateA = a.date ? new Date(a.date).getTime() : new Date(a.year, 0, 1).getTime();
        const dateB = b.date ? new Date(b.date).getTime() : new Date(b.year, 0, 1).getTime();
        return dateB - dateA;
      });
      setLegacyWins(data);
    }, (err) => console.error("Legacy wins sync error:", err));

    return () => {
      unsubProfile();
      unsubSessions();
      unsubLegacy();
    };
  }, [user]);

  // --- TIMER LOGIC ---
  useEffect(() => {
    let interval;
    if (timerStart) {
      interval = setInterval(() => {
        setElapsedSeconds(Math.floor((Date.now() - timerStart) / 1000));
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [timerStart]);

  const toggleTimer = () => {
    if (!timerStart) {
      setTimerStart(Date.now() - elapsedSeconds * 1000);
    } else {
      setTimerStart(null);
      setElapsedSeconds(0);
    }
  };

  const formatTime = (totalSeconds) => {
    const h = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
    const m = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
    const s = (totalSeconds % 60).toString().padStart(2, '0');
    return `${h}:${m}:${s}`;
  };

  // --- AI SCAN LOGIC ---
  const triggerCamera = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setIsScanning(true);
    setErrorMsg('');
    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64Data = reader.result.split(',')[1];
      await performAIScan(base64Data, file.type);
    };
    reader.onerror = () => {
      setErrorMsg('Failed to read image file.');
      setIsScanning(false);
    };
    reader.readAsDataURL(file);
  };

  const performAIScan = async (base64Data, mimeType) => {
    const apiKey = ""; // Runtime-supplied empty key placeholder
    const url = `https://generGenerativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
    const cleanUrl = url.replace("generGenerative", "generative");

    const prompt = `Analyze this image of a casino floor, slot machine, video poker unit, or table game. 
    1. Identify the exact specific game name (e.g. "Buffalo Gold", "Dragon Link", "Ultimate Texas Hold'em", "Double Double Bonus Poker").
    2. Try to locate any session duration info, credit/cash values, or play stats on screen to estimate duration.
    Return ONLY JSON matching this structure:
    {
      "gameName": "Extracted Game Name",
      "estimatedDurationMinutes": null or number
    }`;

    const payload = {
      contents: [{
        role: "user",
        parts: [
          { text: prompt },
          { inlineData: { mimeType: mimeType, data: base64Data } }
        ]
      }],
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: {
          type: "OBJECT",
          properties: {
            gameName: { type: "STRING" },
            estimatedDurationMinutes: { type: "INTEGER", nullable: true }
          },
          required: ["gameName"]
        }
      }
    };

    let retries = 5;
    let delay = 1000;
    while (retries > 0) {
      try {
        const res = await fetch(cleanUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        if (!res.ok) throw new Error("API failed");
        
        const data = await res.json();
        const responseText = data.candidates?.[0]?.content?.parts?.[0]?.text;
        if (responseText) {
          const parsed = JSON.parse(responseText);
          if (parsed.gameName) {
            setFormData(prev => ({
              ...prev,
              specificGame: parsed.gameName,
              gameType: (parsed.gameName.toLowerCase().includes('blackjack') || 
                         parsed.gameName.toLowerCase().includes('craps') || 
                         parsed.gameName.toLowerCase().includes('roulette') || 
                         parsed.gameName.toLowerCase().includes('baccarat') || 
                         parsed.gameName.toLowerCase().includes('poker') && !parsed.gameName.toLowerCase().includes('video')) 
                         ? 'Tables' : 'Slots'
            }));
            if (parsed.estimatedDurationMinutes) {
              setElapsedSeconds(parsed.estimatedDurationMinutes * 60);
              if (!timerStart) {
                setTimerStart(Date.now() - parsed.estimatedDurationMinutes * 60 * 1000);
              }
            }
            setSuccessMsg(`AI Scan complete: Loaded "${parsed.gameName}"!`);
            setTimeout(() => setSuccessMsg(''), 4000);
          }
        }
        break;
      } catch (err) {
        retries--;
        if (retries === 0) {
          setErrorMsg("AI Scan could not identify game. Please enter it manually below.");
        } else {
          await new Promise(resolve => setTimeout(resolve, delay));
          delay *= 2;
        }
      }
    }
    setIsScanning(false);
  };

  const uniqueLocations = useMemo(() => [...new Set(sessions.map(s => s.location).filter(Boolean))], [sessions]);
  const uniqueGames = useMemo(() => [...new Set(sessions.map(s => s.specificGame).filter(Boolean))], [sessions]);

  const stats = useMemo(() => {
    let baseProfit = 0;
    let totalMinutes = 0;
    let winningSessions = 0;
    let slotsProfit = 0;
    let tablesProfit = 0;
    let sportsProfit = 0;

    sessions.forEach(s => {
      baseProfit += s.profit;
      totalMinutes += s.duration;
      if (s.profit > 0) winningSessions++;
      if (s.gameType === 'Slots') slotsProfit += s.profit;
      if (s.gameType === 'Tables') tablesProfit += s.profit;
      if (s.gameType === 'Sports') sportsProfit += s.profit;
    });

    let legacyTotal = 0;
    if (includeLegacyInTotal) {
      legacyWins.forEach(w => legacyTotal += w.amount);
    }
    
    const totalProfit = baseProfit + legacyTotal;
    const hourlyWage = totalMinutes > 0 ? (baseProfit / (totalMinutes / 60)) : 0;
    const winRate = sessions.length > 0 ? Math.round((winningSessions / sessions.length) * 100) : 0;

    return { totalProfit, totalMinutes, hourlyWage, winRate, slotsProfit, tablesProfit, sportsProfit };
  }, [sessions, legacyWins, includeLegacyInTotal]);

  const gameRankings = useMemo(() => {
    const rankings = {};
    sessions.forEach(s => {
      if (!rankings[s.specificGame]) {
        rankings[s.specificGame] = { name: s.specificGame, profit: 0, time: 0, count: 0, gameType: s.gameType };
      }
      rankings[s.specificGame].profit += s.profit;
      rankings[s.specificGame].time += s.duration;
      rankings[s.specificGame].count += 1;
    });
    return Object.values(rankings).sort((a, b) => b.profit - a.profit);
  }, [sessions]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleLegacyChange = (e) => {
    const { name, value } = e.target;
    setLegacyForm(prev => ({ ...prev, [name]: value }));
  };

  const calculateProfit = (data) => {
    const buy = parseFloat(data.buyIn) || 0;
    const out = parseFloat(data.cashOut) || 0;
    const expFood = parseFloat(data.expensesFood) || 0;
    const expPark = parseFloat(data.expensesPark) || 0;
    const expOther = parseFloat(data.expensesOther) || 0;
    const tips = parseFloat(data.tips) || 0;
    return out - buy - expFood - expPark - expOther - tips;
  };

  // --- FIRESTORE WRITE HANDLERS ---
  
  const handleProfileSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), signupData);
      setFormData(prev => ({ ...prev, location: signupData.homeCasino }));
    } catch (err) {
      console.error("Error saving profile:", err);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    
    const profit = calculateProfit(formData);
    const durationMins = Math.ceil(elapsedSeconds / 60);

    const newSession = {
      id: Date.now().toString(),
      date: new Date().toISOString(),
      location: formData.location || 'Unknown Casino',
      gameType: formData.gameType,
      specificGame: formData.specificGame || 'Unknown',
      duration: durationMins,
      buyIn: parseFloat(formData.buyIn) || 0,
      cashOut: parseFloat(formData.cashOut) || 0,
      expensesFood: parseFloat(formData.expensesFood) || 0,
      expensesPark: parseFloat(formData.expensesPark) || 0,
      expensesOther: parseFloat(formData.expensesOther) || 0,
      tips: parseFloat(formData.tips) || 0,
      profit
    };

    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sessions', newSession.id), newSession);
      setFormData({ ...initialFormState, location: userProfile?.homeCasino || '' });
      setTimerStart(null);
      setElapsedSeconds(0);
      setSuccessMsg('Session Locked In. Good luck!');
      setTimeout(() => setSuccessMsg(''), 3000);
    } catch (err) {
      console.error("Error saving session:", err);
    }
  };
  
  const handleLegacySubmit = async (e) => {
    e.preventDefault();
    if (!user) return;

    const newLegacy = {
      id: Date.now().toString(),
      title: legacyForm.title || 'Unknown Win',
      amount: parseFloat(legacyForm.amount) || 0,
      date: legacyForm.date,
      year: legacyForm.date ? legacyForm.date.split('-')[0] : new Date().getFullYear().toString(),
      type: legacyForm.type
    };
    
    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'legacyWins', newLegacy.id), newLegacy);
      setLegacyForm(initialLegacyState);
      setSuccessMsg('Legacy Win Added!');
      setTimeout(() => setSuccessMsg(''), 3000);
    } catch (err) {
      console.error("Error saving legacy win:", err);
    }
  };

  const handleEditSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    
    const profit = calculateProfit(formData);
    const updatedSession = {
      location: formData.location,
      gameType: formData.gameType,
      specificGame: formData.specificGame,
      buyIn: parseFloat(formData.buyIn) || 0,
      cashOut: parseFloat(formData.cashOut) || 0,
      expensesFood: parseFloat(formData.expensesFood) || 0,
      expensesPark: parseFloat(formData.expensesPark) || 0,
      expensesOther: parseFloat(formData.expensesOther) || 0,
      tips: parseFloat(formData.tips) || 0,
      profit
    };

    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sessions', editingId), updatedSession, { merge: true });
      setView('vault');
      setEditingId(null);
      setFormData({ ...initialFormState, location: userProfile?.homeCasino || '' });
    } catch (err) {
      console.error("Error updating session:", err);
    }
  };

  const deleteSession = async (id) => {
    if (!user) return;
    if (window.confirm('Permanently delete this session? This cannot be undone.')) {
      try {
        await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sessions', id));
        if (view === 'edit') {
          setView('vault');
          setEditingId(null);
          setFormData({ ...initialFormState, location: userProfile?.homeCasino || '' });
        }
      } catch (err) {
        console.error("Error deleting session:", err);
      }
    }
  };
  
  const deleteLegacy = async (id) => {
    if (!user) return;
    if (window.confirm('Permanently delete this legacy win?')) {
      try {
        await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'legacyWins', id));
      } catch (err) {
        console.error("Error deleting legacy win:", err);
      }
    }
  };

  const openEdit = (session) => {
    setFormData({
      location: session.location,
      gameType: session.gameType,
      specificGame: session.specificGame,
      buyIn: session.buyIn,
      cashOut: session.cashOut,
      expensesFood: session.expensesFood || '',
      expensesPark: session.expensesPark || '',
      expensesOther: session.expensesOther || '',
      tips: session.tips || ''
    });
    setEditingId(session.id);
    setView('edit');
  };

  const formatMoney = (val) => {
    const isNegative = val < 0;
    const formatted = Math.abs(val).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    return isNegative ? `-$${formatted}` : `+$${formatted}`;
  };

  const formatMoneyNoCents = (val) => {
    const isNegative = val < 0;
    const formatted = Math.abs(val).toLocaleString('en-US', { maximumFractionDigits: 0 });
    return isNegative ? `-$${formatted}` : `+$${formatted}`;
  };

  // --- RENDER LOADERS ---
  if (!user || isProfileLoading) {
    return (
      <div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center text-white">
        <Loader2 className="w-12 h-12 text-emerald-500 animate-spin mb-4" />
        <h2 className="text-xl font-bold tracking-widest uppercase">Connecting to Vault...</h2>
      </div>
    );
  }

  if (!userProfile) {
    return (
      <div className="min-h-screen felt-pattern flex flex-col items-center justify-center text-gray-100 p-4 relative overflow-hidden">
        <style dangerouslySetInnerHTML={{__html: `
          .felt-pattern {
            background-color: #0b2415;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
          }
          @keyframes float-down {
              0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
              10% { opacity: 0.8; }
              90% { opacity: 0.8; }
              100% { transform: translateY(110vh) translateX(40px) rotate(15deg); opacity: 0; }
          }
          @keyframes float-down-alt {
              0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
              10% { opacity: 0.6; }
              90% { opacity: 0.6; }
              100% { transform: translateY(110vh) translateX(-40px) rotate(-15deg); opacity: 0; }
          }
          .suit {
              position: fixed;
              z-index: 0;
              user-select: none;
              pointer-events: none;
              text-shadow: 0 4px 15px rgba(0,0,0,0.5);
          }
          .suit-spade::after { content: '♠'; color: rgba(255, 255, 255, 0.15); }
          .suit-heart::after { content: '♥'; color: rgba(239, 68, 68, 0.2); }
          .suit-club::after { content: '♣'; color: rgba(255, 255, 255, 0.15); }
          .suit-diamond::after { content: '♦'; color: rgba(239, 68, 68, 0.2); }
          
          .suit-sm { font-size: 30px; }
          .suit-md { font-size: 45px; }
          .suit-lg { font-size: 60px; }
          .suit-xl { font-size: 80px; }
        `}} />
        
        {/* Background suits for the signup screen */}
        <div className="suit suit-spade suit-lg" style={{left: '10%', animation: 'float-down 14s linear 0s infinite'}}></div>
        <div className="suit suit-heart suit-sm" style={{left: '80%', animation: 'float-down-alt 16s linear 2s infinite'}}></div>
        <div className="suit suit-club suit-xl" style={{left: '50%', animation: 'float-down 12s linear 4s infinite'}}></div>

        {/* 3-Column Split Layout for Desktop / Stacked for Mobile */}
        <div className="flex flex-col lg:flex-row items-center justify-center gap-10 w-full max-w-6xl z-10">
          
          {/* Left App Preview Mockup (Hidden on mobile) */}
          <div className="hidden lg:flex flex-col w-72 h-[34rem] bg-slate-950 rounded-[2.5rem] border-[8px] border-slate-900 shadow-[0_0_40px_rgba(0,0,0,0.8)] relative overflow-hidden transform -rotate-6 hover:rotate-0 transition-all duration-500 opacity-90 hover:opacity-100">
            <div className="p-5 flex flex-col h-full bg-slate-900/50">
              <div className="border-b border-slate-800 pb-2 mb-5">
                <h3 className="text-sm font-black text-white uppercase tracking-widest text-center">Log Session</h3>
              </div>
              <div className="bg-slate-950 rounded-xl p-3 mb-5 border border-slate-800 flex justify-between items-center shadow-inner">
                <span className="text-[9px] text-slate-400 font-bold uppercase">Timer</span>
                <span className="text-sm text-emerald-400 font-mono font-black">01:24:00</span>
              </div>
              <div className="space-y-4 flex-1">
                <div className="bg-slate-950 h-12 rounded-xl border border-slate-800 flex items-center px-4 shadow-inner"><span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Location...</span></div>
                <div className="flex gap-3">
                  <div className="flex-1 bg-gradient-to-b from-slate-800 to-slate-900 h-14 rounded-xl border border-emerald-500 flex items-center justify-center text-2xl shadow-[0_0_10px_rgba(16,185,129,0.2)]">🎰</div>
                  <div className="flex-1 bg-slate-950 h-14 rounded-xl border border-slate-800 flex items-center justify-center text-2xl opacity-50">🃏</div>
                </div>
                <div className="bg-slate-950 h-12 rounded-xl border border-slate-800 flex items-center px-4 shadow-inner"><span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Game Name...</span></div>
                <div className="flex gap-3">
                  <div className="flex-1 bg-slate-950 h-12 rounded-xl border border-slate-800 flex items-center px-3 shadow-inner"><span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">In ($)</span></div>
                  <div className="flex-1 bg-slate-950 h-12 rounded-xl border border-slate-800 flex items-center px-3 shadow-inner"><span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Out ($)</span></div>
                </div>
              </div>
              <div className="bg-gradient-to-r from-emerald-600 to-teal-500 h-14 rounded-2xl flex items-center justify-center shadow-[0_0_15px_rgba(16,185,129,0.3)] mt-auto border border-emerald-400/50">
                <span className="text-sm font-black text-white uppercase tracking-widest">Lock It In</span>
              </div>
            </div>
          </div>

          {/* Main Sign Up Form */}
          <div className="max-w-md w-full bg-slate-950/80 backdrop-blur-xl p-8 rounded-3xl border border-emerald-500/30 shadow-[0_0_50px_rgba(16,185,129,0.15)] relative z-10">
            <div className="text-center mb-8">
              <h1 className="text-3xl sm:text-4xl font-black bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-teal-200 tracking-widest uppercase mb-3 leading-tight">Welcome, Gambler.</h1>
              <div className="h-px w-24 bg-emerald-500/50 mx-auto mb-4"></div>
              <p className="text-sm text-slate-300 font-bold tracking-wide leading-relaxed mb-2">I'm here to help you track wins and losses.</p>
              <p className="text-[10px] text-slate-400 font-bold tracking-widest uppercase">Provide a few details below to get started.</p>
            </div>
            
            <form onSubmit={handleProfileSubmit} className="space-y-5">
              <div>
                <label className="text-emerald-400 font-bold ml-2 text-xs uppercase tracking-wider">Email Address</label>
                <input type="email" required value={signupData.email} onChange={(e) => setSignupData({...signupData, email: e.target.value})} className="w-full bg-slate-900/80 text-lg font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none mt-1 transition-all" placeholder="pro@example.com" />
              </div>
              <div>
                <label className="text-emerald-400 font-bold ml-2 text-xs uppercase tracking-wider">Gambling Alias</label>
                <input type="text" required value={signupData.gamblingName} onChange={(e) => setSignupData({...signupData, gamblingName: e.target.value})} className="w-full bg-slate-900/80 text-lg font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none mt-1 transition-all" placeholder="e.g. VegasVic" />
              </div>
              <div>
                <label className="text-emerald-400 font-bold ml-2 text-xs uppercase tracking-wider">Home Casino</label>
                <input type="text" required value={signupData.homeCasino} onChange={(e) => setSignupData({...signupData, homeCasino: e.target.value})} className="w-full bg-slate-900/80 text-lg font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none mt-1 transition-all" placeholder="e.g. Bellagio" />
              </div>
              <button type="submit" className="w-full bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-500 hover:to-teal-400 text-white py-5 rounded-2xl font-black text-xl uppercase tracking-widest shadow-[0_0_25px_rgba(16,185,129,0.4)] border border-emerald-400/50 mt-6 transition-all active:scale-95">
                Enter Casino
              </button>
            </form>
          </div>

          {/* Right App Preview Mockup (Hidden on mobile) */}
          <div className="hidden lg:flex flex-col w-72 h-[34rem] bg-slate-950 rounded-[2.5rem] border-[8px] border-slate-900 shadow-[0_0_40px_rgba(0,0,0,0.8)] relative overflow-hidden transform rotate-6 hover:rotate-0 transition-all duration-500 opacity-90 hover:opacity-100">
            <div className="p-5 flex flex-col h-full bg-slate-900/50">
              <div className="border-b border-slate-800 pb-2 mb-5">
                <h3 className="text-sm font-black text-white uppercase tracking-widest text-center">The Vault</h3>
              </div>
              <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-5 rounded-2xl border border-slate-800 text-center mb-4 relative overflow-hidden shadow-lg">
                <div className="absolute top-0 right-0 w-20 h-20 bg-emerald-500/20 rounded-full blur-xl -mr-8 -mt-8"></div>
                <p className="text-[9px] text-slate-400 uppercase tracking-widest font-bold mb-1">True Net Profit</p>
                <p className="text-3xl font-black text-emerald-400 tracking-tight">+$4,250</p>
              </div>
              <div className="grid grid-cols-2 gap-3 mb-5">
                <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 text-center shadow-inner">
                  <p className="text-[9px] text-slate-500 uppercase font-bold tracking-widest mb-1">Win Rate</p>
                  <p className="text-lg font-black text-white">68%</p>
                </div>
                <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 text-center shadow-inner">
                  <p className="text-[9px] text-slate-500 uppercase font-bold tracking-widest mb-1">Hourly</p>
                  <p className="text-lg font-black text-emerald-400">+$85</p>
                </div>
              </div>
              <div className="flex-1 space-y-3">
                <p className="text-xs font-black text-slate-400 uppercase tracking-widest border-b border-slate-800 pb-1 flex items-center"><TrendingUp className="w-3 h-3 mr-1 text-emerald-500"/> Ledger</p>
                <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 flex justify-between items-center shadow-md">
                    <div className="flex flex-col">
                      <span className="text-[11px] font-bold text-white uppercase tracking-wider">Buffalo Gold</span>
                      <span className="text-[9px] text-teal-400 font-bold">Bellagio</span>
                    </div>
                    <span className="text-sm font-black text-emerald-400">+$800</span>
                </div>
                <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 flex justify-between items-center shadow-md">
                    <div className="flex flex-col">
                      <span className="text-[11px] font-bold text-white uppercase tracking-wider">Blackjack</span>
                      <span className="text-[9px] text-teal-400 font-bold">Aria</span>
                    </div>
                    <span className="text-sm font-black text-emerald-400">+$1200</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen text-gray-100 font-sans pb-28 relative overflow-x-hidden transition-all duration-700 ${view === 'log' ? 'felt-pattern' : 'bg-slate-950'}`}>
      
      {/* Hidden file input for AI scan */}
      <input type="file" accept="image/*" capture="environment" ref={fileInputRef} onChange={handleImageUpload} className="hidden" />

      {/* CSS For Royal Felt & Falling Suits */}
      <style dangerouslySetInnerHTML={{__html: `
        .felt-pattern {
          background-color: #0b2415;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
        }
        
        @keyframes float-down {
            0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
            10% { opacity: 0.8; }
            90% { opacity: 0.8; }
            100% { transform: translateY(110vh) translateX(40px) rotate(15deg); opacity: 0; }
        }
        @keyframes float-down-alt {
            0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% { transform: translateY(110vh) translateX(-40px) rotate(-15deg); opacity: 0; }
        }
        
        .suit {
            position: fixed;
            z-index: 0;
            user-select: none;
            pointer-events: none;
            text-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .suit-spade::after { content: '♠'; color: rgba(255, 255, 255, 0.15); }
        .suit-heart::after { content: '♥'; color: rgba(239, 68, 68, 0.2); }
        .suit-club::after { content: '♣'; color: rgba(255, 255, 255, 0.15); }
        .suit-diamond::after { content: '♦'; color: rgba(239, 68, 68, 0.2); }

        .suit-sm { font-size: 30px; }
        .suit-md { font-size: 45px; }
        .suit-lg { font-size: 60px; }
        .suit-xl { font-size: 80px; }

        ::-webkit-scrollbar { display: none; }
      `}} />

      {/* Animated Background Suits */}
      <div className="suit suit-spade suit-lg" style={{left: '5%', animation: 'float-down 14s linear 0s infinite'}}></div>
      <div className="suit suit-heart suit-sm" style={{left: '15%', animation: 'float-down-alt 17s linear 4s infinite'}}></div>
      <div className="suit suit-diamond suit-xl" style={{left: '25%', animation: 'float-down 12s linear 2s infinite'}}></div>
      <div className="suit suit-club suit-md" style={{left: '35%', animation: 'float-down-alt 19s linear 1s infinite'}}></div>
      <div className="suit suit-spade suit-lg" style={{left: '45%', animation: 'float-down 16s linear 7s infinite'}}></div>
      <div className="suit suit-heart suit-sm" style={{left: '55%', animation: 'float-down-alt 15s linear 3s infinite'}}></div>
      <div className="suit suit-diamond suit-xl" style={{left: '65%', animation: 'float-down 13s linear 5s infinite'}}></div>
      <div className="suit suit-club suit-md" style={{left: '75%', animation: 'float-down-alt 18s linear 0.5s infinite'}}></div>
      <div className="suit suit-spade suit-lg" style={{left: '85%', animation: 'float-down 15s linear 6s infinite'}}></div>

      {view === 'log' && (
        <>
          <div className="absolute top-20 left-10 w-96 h-96 bg-emerald-500/20 rounded-full blur-[100px] pointer-events-none"></div>
          <div className="absolute bottom-40 right-10 w-96 h-96 bg-teal-500/10 rounded-full blur-[100px] pointer-events-none"></div>
        </>
      )}
      
      {view === 'trophy' && (
        <div className="fixed inset-0 pointer-events-none z-0">
          <div className="absolute top-20 left-10 w-96 h-96 bg-amber-500/10 rounded-full blur-[100px]"></div>
          <div className="absolute bottom-40 right-10 w-96 h-96 bg-yellow-500/10 rounded-full blur-[100px]"></div>
        </div>
      )}

      <div className="max-w-xl mx-auto p-4 z-10 relative">

        {/* ==================== VIEW: LOGGING ==================== */}
        {view === 'log' && (
          <div className="space-y-6 animate-in fade-in duration-300">
            {successMsg && (
              <div className="bg-emerald-900/80 backdrop-blur-md border border-emerald-400 text-emerald-100 px-4 py-4 rounded-2xl text-center shadow-[0_0_20px_rgba(16,185,129,0.5)] animate-pulse font-bold tracking-wide">
                {successMsg}
              </div>
            )}

            {errorMsg && (
              <div className="bg-rose-950/90 backdrop-blur-md border border-rose-500 text-rose-200 px-4 py-4 rounded-2xl flex items-center gap-3 shadow-[0_0_20px_rgba(244,63,94,0.4)]">
                <AlertCircle className="w-6 h-6 text-rose-400 shrink-0" />
                <span className="text-sm font-medium">{errorMsg}</span>
              </div>
            )}

            <div className="bg-slate-950/80 backdrop-blur-xl p-6 rounded-3xl border border-white/5 space-y-6 shadow-2xl relative overflow-hidden ring-1 ring-white/10">
              
              {/* Header with SEAMLESS Top Timer */}
              <div className="flex items-center justify-between border-b border-white/10 pb-4 mb-2">
                <h2 className="text-2xl font-black bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400 tracking-wide uppercase">Log Session</h2>
                
                {/* Sleek Integrated Timer */}
                <div className={`flex items-center gap-3 px-3 py-1.5 rounded-full border transition-all duration-300 ${timerStart ? 'bg-emerald-950/60 border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.2)]' : 'bg-slate-900 border-slate-700'}`}>
                  <div className="flex flex-col items-end leading-none">
                    <span className="text-[9px] uppercase tracking-widest text-slate-400 font-bold">Elapsed Time</span>
                    <span className={`text-sm font-mono font-black tracking-widest ${timerStart ? 'text-emerald-400' : 'text-slate-300'}`}>
                      {formatTime(elapsedSeconds)}
                    </span>
                  </div>
                  <button 
                    type="button" 
                    onClick={toggleTimer} 
                    className={`p-2 rounded-full transition-all shadow-md active:scale-90 ${!timerStart ? 'bg-emerald-600 hover:bg-emerald-500 text-white' : 'bg-rose-600 hover:bg-rose-500 text-white shadow-[0_0_10px_rgba(244,63,94,0.5)]'}`}
                    title={!timerStart ? "Start Timer" : "Stop Timer"}
                  >
                    {!timerStart ? <Play className="w-3.5 h-3.5 fill-current"/> : <Square className="w-3.5 h-3.5 fill-current"/>}
                  </button>
                </div>
              </div>

              {/* Form Input fields */}
              <form onSubmit={handleSubmit} className="space-y-6">
                
                {/* Location */}
                <div>
                  <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Location</label>
                  <input 
                    type="text" 
                    name="location" 
                    value={formData.location} 
                    onChange={handleInputChange} 
                    list="locations" 
                    required 
                    className="w-full bg-slate-900 text-lg font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none shadow-inner transition-all" 
                    placeholder="Select or type casino..."
                  />
                  <datalist id="locations">
                    {uniqueLocations.map((loc, i) => <option key={i} value={loc} />)}
                  </datalist>
                </div>

                {/* Game Type Buttons */}
                <div className="grid grid-cols-3 gap-3">
                  <button 
                    type="button" 
                    onClick={() => setFormData({...formData, gameType: 'Slots'})}
                    className={`border p-3 rounded-2xl flex flex-col items-center justify-center transition-all ${formData.gameType === 'Slots' ? 'bg-gradient-to-b from-slate-800 to-slate-900 border-emerald-500 ring-1 ring-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]' : 'bg-slate-900 border-slate-800 opacity-70 hover:opacity-100'}`}
                  >
                    <span className="text-3xl mb-1 drop-shadow-md">🎰</span>
                    <span className="font-bold text-white tracking-wider text-[11px] uppercase">Slots/VP</span>
                  </button>
                  <button 
                    type="button" 
                    onClick={() => setFormData({...formData, gameType: 'Tables'})}
                    className={`border p-3 rounded-2xl flex flex-col items-center justify-center transition-all ${formData.gameType === 'Tables' ? 'bg-gradient-to-b from-slate-800 to-slate-900 border-emerald-500 ring-1 ring-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]' : 'bg-slate-900 border-slate-800 opacity-70 hover:opacity-100'}`}
                  >
                    <span className="text-3xl mb-1 drop-shadow-md">🃏</span>
                    <span className="font-bold text-white tracking-wider text-[11px] uppercase">Tables</span>
                  </button>
                  <button 
                    type="button" 
                    onClick={() => setFormData({...formData, gameType: 'Sports'})}
                    className={`border p-3 rounded-2xl flex flex-col items-center justify-center transition-all ${formData.gameType === 'Sports' ? 'bg-gradient-to-b from-slate-800 to-slate-900 border-emerald-500 ring-1 ring-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]' : 'bg-slate-900 border-slate-800 opacity-70 hover:opacity-100'}`}
                  >
                    <span className="text-3xl mb-1 drop-shadow-md">🏈</span>
                    <span className="font-bold text-white tracking-wider text-[11px] uppercase">Sports</span>
                  </button>
                </div>

                {/* Specific Game with Holographic AI Button */}
                <div>
                  <div className="flex justify-between items-center ml-2 mb-1">
                    <label className="text-slate-400 font-bold text-xs uppercase tracking-wider">Specific Game</label>
                    
                    <button
                      type="button"
                      onClick={triggerCamera}
                      disabled={isScanning}
                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest bg-gradient-to-r from-teal-500 to-emerald-500 text-slate-950 hover:opacity-90 shadow-[0_0_10px_rgba(45,212,191,0.5)] transition-all animate-pulse"
                    >
                      {isScanning ? (
                        <>
                          <Loader2 className="w-3 h-3 animate-spin" />
                          Scanning...
                        </>
                      ) : (
                        <>
                          <Camera className="w-3.5 h-3.5" />
                          AI Auto-Scan
                        </>
                      )}
                    </button>
                  </div>

                  <div className="relative">
                    <input 
                      type="text" 
                      name="specificGame" 
                      value={formData.specificGame} 
                      onChange={handleInputChange} 
                      list="games" 
                      required 
                      className="w-full bg-slate-900 text-lg font-bold text-white p-4 pr-12 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none shadow-inner transition-all" 
                      placeholder="e.g. Buffalo, Craps"
                    />
                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-teal-400 pointer-events-none">
                      <Sparkles className="w-5 h-5 opacity-80 drop-shadow-[0_0_5px_rgba(45,212,191,0.8)]" />
                    </div>
                  </div>
                  <datalist id="games">
                    {uniqueGames.map((g, i) => <option key={i} value={g} />)}
                  </datalist>
                </div>

                {/* Financials - BuyIn / CashOut */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Buy-In ($)</label>
                    <input type="number" step="1" name="buyIn" value={formData.buyIn} onChange={handleInputChange} required className="w-full bg-slate-900 text-2xl font-black text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 text-center shadow-inner transition-all" placeholder="0" />
                  </div>
                  <div>
                    <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Cash-Out ($)</label>
                    <input type="number" step="1" name="cashOut" value={formData.cashOut} onChange={handleInputChange} required className="w-full bg-slate-900 text-2xl font-black text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 text-center shadow-inner transition-all" placeholder="0" />
                  </div>
                </div>

                {/* Financials - Detailed Expenses */}
                <div className="bg-slate-900/50 p-4 rounded-2xl border border-white/5">
                  <label className="text-rose-400 font-bold ml-1 text-xs uppercase tracking-wider mb-3 flex items-center gap-1"><AlertCircle className="w-3 h-3"/> Leaks & Expenses</label>
                  <div className="grid grid-cols-4 gap-2">
                    <div>
                      <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Food</span>
                      <input type="number" step="1" name="expensesFood" value={formData.expensesFood} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner transition-all" placeholder="$0" />
                    </div>
                    <div>
                      <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Park</span>
                      <input type="number" step="1" name="expensesPark" value={formData.expensesPark} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner transition-all" placeholder="$0" />
                    </div>
                    <div>
                      <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Other</span>
                      <input type="number" step="1" name="expensesOther" value={formData.expensesOther} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner transition-all" placeholder="$0" />
                    </div>
                    <div>
                      <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Tips</span>
                      <input type="number" step="1" name="tips" value={formData.tips} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner transition-all" placeholder="$0" />
                    </div>
                  </div>
                </div>

                <button type="submit" className="w-full bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-500 hover:to-teal-400 text-white py-5 rounded-2xl font-black text-xl uppercase tracking-widest shadow-[0_0_20px_rgba(16,185,129,0.3)] border border-emerald-400/50 mt-2 transition-all active:scale-95">
                  Lock It In
                </button>
              </form>
            </div>
          </div>
        )}

        {/* ==================== VIEW: THE VAULT ==================== */}
        {view === 'vault' && (
          <div className="space-y-6 animate-in fade-in zoom-in-95 duration-300">
            <h1 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400 text-center tracking-widest uppercase mb-6 drop-shadow-md">The Vault</h1>

            <div className="grid grid-cols-2 gap-4">
              {/* Total Bankroll */}
              <div className="col-span-2 bg-gradient-to-br from-slate-900 to-slate-950 backdrop-blur-xl p-6 rounded-3xl border border-white/10 text-center shadow-2xl relative overflow-hidden">
                <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
                <p className="text-slate-400 uppercase tracking-widest text-sm mb-1 font-bold flex items-center justify-center gap-1">True Net Profit {includeLegacyInTotal && <span className="bg-amber-500/20 text-amber-400 text-[9px] px-2 py-0.5 rounded-full ml-2">W/ LEGACY</span>}</p>
                <div className={`text-6xl font-black tracking-tight ${stats.totalProfit >= 0 ? 'text-emerald-400 drop-shadow-[0_0_15px_rgba(16,185,129,0.3)]' : 'text-rose-500 drop-shadow-[0_0_15px_rgba(244,63,94,0.3)]'}`}>
                  {formatMoney(stats.totalProfit)}
                </div>
              </div>

              {/* Win Rate */}
              <div className="bg-slate-900/80 backdrop-blur-md p-5 rounded-3xl border border-white/5 text-center flex flex-col justify-center shadow-lg ring-1 ring-white/5">
                <p className="text-slate-500 uppercase text-[10px] font-bold mb-1 tracking-widest">Win Rate</p>
                <p className="text-3xl font-black text-white">{stats.winRate}%</p>
              </div>

              {/* Hourly Wage */}
              <div className="bg-slate-900/80 backdrop-blur-md p-5 rounded-3xl border border-white/5 text-center flex flex-col justify-center shadow-lg ring-1 ring-white/5">
                <p className="text-slate-500 uppercase text-[10px] font-bold mb-1 tracking-widest">Hourly Wage</p>
                <p className={`text-3xl font-black ${stats.hourlyWage >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
                  {stats.hourlyWage >= 0 ? '+' : ''}${Math.abs(stats.hourlyWage).toFixed(2)}
                </p>
              </div>

              {/* Edges */}
              <div className="col-span-2 bg-slate-900/80 backdrop-blur-md p-5 rounded-3xl border border-white/5 flex justify-between items-center shadow-lg ring-1 ring-white/5">
                <div className="text-center w-1/3 border-r border-slate-800">
                  <p className="text-slate-500 uppercase text-[9px] font-bold tracking-widest mb-1">🎰 Slots Edge</p>
                  <p className={`text-xl font-black ${stats.slotsProfit >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>{formatMoneyNoCents(stats.slotsProfit)}</p>
                </div>
                <div className="text-center w-1/3 border-r border-slate-800">
                  <p className="text-slate-500 uppercase text-[9px] font-bold tracking-widest mb-1">🃏 Tables Edge</p>
                  <p className={`text-xl font-black ${stats.tablesProfit >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>{formatMoneyNoCents(stats.tablesProfit)}</p>
                </div>
                <div className="text-center w-1/3">
                  <p className="text-slate-500 uppercase text-[9px] font-bold tracking-widest mb-1">🏈 Sports Edge</p>
                  <p className={`text-xl font-black ${stats.sportsProfit >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>{formatMoneyNoCents(stats.sportsProfit)}</p>
                </div>
              </div>
            </div>

            {/* Detailed Ledger */}
            <div className="bg-slate-900/80 backdrop-blur-xl p-6 rounded-3xl border border-white/5 shadow-2xl mt-8 ring-1 ring-white/5">
              <h3 className="text-lg font-black text-white mb-4 uppercase tracking-widest flex items-center"><LayoutDashboard className="w-5 h-5 mr-2 text-emerald-500"/> Session Ledger</h3>
              
              {sessions.length === 0 ? (
                <div className="text-center py-8 opacity-50">
                  <Target className="w-12 h-12 mx-auto mb-2 text-slate-500" />
                  <p className="text-slate-400 italic">No sessions logged yet.</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {sessions.map(session => (
                    <div key={session.id} className="bg-slate-950/80 p-4 rounded-2xl border border-slate-800/50 flex justify-between items-center relative group hover:border-emerald-500/30 transition-colors">
                      <div className="w-2/3">
                        <div className="font-bold text-white text-lg truncate flex items-center">
                          {session.specificGame}
                        </div>
                        <div className="text-[10px] text-teal-400 uppercase font-black tracking-widest mb-1">
                          {session.location} • {session.gameType}
                        </div>
                        <div className="text-xs text-slate-400 font-mono">
                          IN:${Math.round(session.buyIn)} | OUT:${Math.round(session.cashOut)}
                        </div>
                        {(session.expensesFood > 0 || session.expensesPark > 0 || session.expensesOther > 0 || session.tips > 0) && (
                          <div className="text-[10px] text-rose-400/80 font-mono mt-1 mb-2 bg-rose-950/30 p-1 rounded inline-block">
                            Leaks: Food ${session.expensesFood} | Park ${session.expensesPark} | Other ${session.expensesOther} | Tips ${session.tips}
                          </div>
                        )}
                        <div className="text-[10px] text-slate-500 uppercase flex items-center mt-2 font-bold tracking-wider">
                          {new Date(session.date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})} • {session.duration} mins
                          <button onClick={() => openEdit(session)} className="ml-3 text-emerald-500 hover:text-emerald-400 flex items-center bg-emerald-950/50 px-2 py-0.5 rounded">
                            <Edit3 className="w-3 h-3 mr-1"/> EDIT
                          </button>
                        </div>
                      </div>
                      <div className={`text-3xl font-black text-right tracking-tighter ${session.profit >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>
                        {formatMoneyNoCents(session.profit)}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}

        {/* ==================== VIEW: PLAYER PROFILE ==================== */}
        {view === 'profile' && (
          <div className="space-y-6 animate-in fade-in zoom-in-95 duration-300">
            
            {/* Header Identity */}
            <div className="text-center pt-2">
                <div className="inline-flex p-4 rounded-full bg-slate-900 border border-emerald-500/50 mb-3 shadow-[0_0_20px_rgba(16,185,129,0.2)]">
                    <User className="w-8 h-8 text-emerald-400" />
                </div>
                <h2 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-teal-200 uppercase tracking-widest">{userProfile.gamblingName}</h2>
                <p className="text-slate-400 font-bold tracking-widest text-xs uppercase mt-1">Home: <span className="text-white">{userProfile.homeCasino}</span></p>
            </div>

            {/* Oracle Insight */}
            <div className="bg-gradient-to-br from-emerald-900/40 to-slate-900/90 border border-emerald-500/30 p-6 rounded-3xl shadow-xl relative overflow-hidden ring-1 ring-emerald-500/20">
                 <div className="absolute -top-4 -right-4 p-4 opacity-10"><Zap className="w-24 h-24 text-emerald-400"/></div>
                 <h3 className="text-emerald-400 font-black uppercase tracking-widest text-xs mb-3 flex items-center"><Zap className="w-4 h-4 mr-1"/> The Oracle Insight</h3>
                 
                 {gameRankings.length > 0 && gameRankings[0].profit > 0 ? (
                     <p className="text-slate-300 text-sm leading-relaxed">
                        Data indicates your most powerful edge is playing <span className="font-black text-white bg-emerald-900/50 px-2 py-0.5 rounded">{gameRankings[0].name}</span>. You have generated a total yield of <span className="text-emerald-400 font-bold">{formatMoney(gameRankings[0].profit)}</span> in {gameRankings[0].count} sessions. Dedicate more of your bankroll here to maximize your ROI.
                     </p>
                 ) : (
                     <p className="text-slate-300 text-sm leading-relaxed">
                        Log more winning sessions. The Oracle needs more data to generate a statistically significant play recommendation for your edge.
                     </p>
                 )}
            </div>

            {/* Leaderboard */}
            <div className="bg-slate-900/80 backdrop-blur-xl p-6 rounded-3xl border border-white/5 shadow-2xl mt-8 ring-1 ring-white/5">
                <h3 className="text-lg font-black text-white mb-4 uppercase tracking-widest flex items-center"><TrendingUp className="w-5 h-5 mr-2 text-emerald-500"/> Performance Rankings</h3>
                
                {gameRankings.length === 0 ? (
                    <p className="text-slate-500 text-center italic py-4">No data to rank.</p>
                ) : (
                    <div className="space-y-3">
                        {gameRankings.map((game, index) => (
                            <div key={index} className={`flex items-center justify-between p-4 rounded-2xl border ${index === 0 ? 'bg-gradient-to-r from-amber-500/10 to-slate-950 border-amber-500/30 ring-1 ring-amber-500/20' : index === 1 ? 'bg-slate-950/80 border-slate-300/20' : index === 2 ? 'bg-slate-950/80 border-amber-700/20' : 'bg-slate-950/50 border-white/5'}`}>
                                <div className="flex items-center gap-3 w-2/3">
                                    <div className={`font-black text-lg ${index === 0 ? 'text-amber-400' : index === 1 ? 'text-slate-300' : index === 2 ? 'text-amber-700' : 'text-slate-600'}`}>
                                        #{index + 1}
                                    </div>
                                    <div className="truncate">
                                        <div className="font-bold text-white text-md truncate flex items-center gap-1">
                                            {index === 0 && <Crown className="w-4 h-4 text-amber-400 shrink-0"/>}
                                            {game.name}
                                        </div>
                                        <div className="text-[10px] text-slate-500 uppercase tracking-widest font-bold">
                                            {game.gameType} • {game.count} Sessions
                                        </div>
                                    </div>
                                </div>
                                <div className={`text-xl font-black text-right ${game.profit >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>
                                    {formatMoneyNoCents(game.profit)}
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>

          </div>
        )}

        {/* ==================== VIEW: TROPHY ROOM ==================== */}
        {view === 'trophy' && (
          <div className="space-y-6 animate-in fade-in zoom-in-95 duration-300 relative z-10">
            {successMsg && (
              <div className="bg-amber-900/80 backdrop-blur-md border border-amber-400 text-amber-100 px-4 py-4 rounded-2xl text-center shadow-[0_0_20px_rgba(245,158,11,0.5)] animate-pulse font-bold tracking-wide">
                {successMsg}
              </div>
            )}
            
            <div className="text-center pt-2">
                <Trophy className="w-12 h-12 text-amber-400 mx-auto mb-2 drop-shadow-[0_0_15px_rgba(245,158,11,0.5)]"/>
                <h1 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-amber-200 to-yellow-500 tracking-widest uppercase drop-shadow-md">Trophy Room</h1>
                <p className="text-amber-400/70 text-xs font-bold tracking-widest uppercase mt-1">Legacy Wins & Bragging Rights</p>
            </div>

            {/* Toggle Switch */}
            <div className="bg-slate-900/80 backdrop-blur-md p-5 rounded-3xl border border-amber-500/20 flex items-center justify-between shadow-lg ring-1 ring-amber-500/10">
                <div className="flex flex-col">
                    <span className="text-white font-bold text-sm">Factor into Total Profit</span>
                    <span className="text-[9px] text-slate-400 uppercase tracking-widest font-bold">Injects wins into Vault stats</span>
                </div>
                <button 
                    onClick={() => setIncludeLegacyInTotal(!includeLegacyInTotal)}
                    className={`w-14 h-7 rounded-full p-1 transition-colors duration-300 ease-in-out relative flex items-center ${includeLegacyInTotal ? 'bg-amber-500' : 'bg-slate-700'}`}
                >
                    <div className={`w-5 h-5 bg-white rounded-full shadow-md transform transition-transform duration-300 ease-in-out ${includeLegacyInTotal ? 'translate-x-7' : 'translate-x-0'}`}></div>
                </button>
            </div>

            {/* Add Legacy Win Form */}
            <form onSubmit={handleLegacySubmit} className="bg-gradient-to-br from-slate-900 to-slate-950 backdrop-blur-xl p-6 rounded-3xl border border-amber-500/30 shadow-2xl ring-1 ring-amber-500/10 space-y-5">
                <h3 className="text-sm font-black text-amber-400 uppercase tracking-widest border-b border-amber-500/20 pb-3 flex items-center"><Crown className="w-4 h-4 mr-2"/> Log a Legacy Win</h3>
                
                <div>
                  <label className="text-slate-400 font-bold ml-2 text-[10px] uppercase tracking-wider mb-1 block">Win Title (e.g. WSOP Circuit, Mega Moolah)</label>
                  <input type="text" required name="title" value={legacyForm.title} onChange={handleLegacyChange} className="w-full bg-slate-950 text-md font-bold text-white p-3 rounded-xl border border-slate-700 focus:border-amber-500 focus:outline-none transition-all" placeholder="Grand Jackpot..." />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="text-slate-400 font-bold ml-2 text-[10px] uppercase tracking-wider mb-1 block">Amount Won ($)</label>
                    <input type="number" required step="1" name="amount" value={legacyForm.amount} onChange={handleLegacyChange} className="w-full bg-slate-950 text-xl font-black text-amber-400 p-3 rounded-xl border border-slate-700 focus:border-amber-500 focus:outline-none text-center transition-all" placeholder="10000" />
                  </div>
                  <div>
                    <label className="text-slate-400 font-bold ml-2 text-[10px] uppercase tracking-wider mb-1 block">Exact Date</label>
                    <input type="date" required name="date" value={legacyForm.date} onChange={handleLegacyChange} className="w-full bg-slate-950 text-lg font-black text-white p-3 rounded-xl border border-slate-700 focus:border-amber-500 focus:outline-none text-center transition-all" />
                  </div>
                </div>
                
                <div>
                  <label className="text-slate-400 font-bold ml-2 text-[10px] uppercase tracking-wider mb-1 block">Category</label>
                  <select name="type" value={legacyForm.type} onChange={handleLegacyChange} className="w-full bg-slate-950 text-sm font-bold text-white p-3 rounded-xl border border-slate-700 focus:border-amber-500 focus:outline-none transition-all">
                      <option value="Jackpot">Slot Jackpot</option>
                      <option value="Tournament">Poker Tournament</option>
                      <option value="Table Run">Massive Table Run</option>
                      <option value="Sports Bet">Sports Parlay/Bet</option>
                      <option value="Other">Other</option>
                  </select>
                </div>

                <button type="submit" className="w-full bg-gradient-to-r from-amber-600 to-yellow-500 hover:from-amber-500 hover:to-yellow-400 text-slate-950 py-4 rounded-xl font-black text-lg uppercase tracking-widest shadow-[0_0_20px_rgba(245,158,11,0.3)] border border-amber-300/50 mt-2 transition-all">
                  Mount Trophy
                </button>
            </form>
            
            {/* Legacy List */}
            <div className="space-y-4 pt-4">
                {legacyWins.length === 0 ? (
                    <div className="text-center py-8 opacity-50">
                        <Trophy className="w-12 h-12 mx-auto mb-2 text-slate-600" />
                        <p className="text-slate-500 italic text-sm">No legacy wins recorded yet.</p>
                    </div>
                ) : (
                    legacyWins.map(win => (
                        <div key={win.id} className="bg-slate-950/80 p-5 rounded-2xl border border-amber-500/20 flex justify-between items-center shadow-lg relative overflow-hidden group">
                            <div className="absolute top-0 right-0 w-24 h-24 bg-amber-500/5 rounded-full blur-2xl -mr-8 -mt-8 pointer-events-none"></div>
                            <div className="w-2/3 relative z-10">
                                <div className="font-black text-white text-xl truncate">{win.title}</div>
                                <div className="text-xs text-amber-500 uppercase font-bold tracking-widest mt-1">
                                    {win.date ? new Date(win.date).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC'}) : win.year} • {win.type}
                                </div>
                                <button onClick={() => deleteLegacy(win.id)} className="text-[10px] text-rose-500 uppercase font-bold tracking-widest mt-3 opacity-0 group-hover:opacity-100 transition-opacity">Delete</button>
                            </div>
                            <div className="text-3xl font-black text-right text-amber-400 drop-shadow-[0_0_5px_rgba(245,158,11,0.3)] relative z-10">
                                {formatMoneyNoCents(win.amount)}
                            </div>
                        </div>
                    ))
                )}
            </div>
          </div>
        )}

        {/* ==================== VIEW: EDIT ==================== */}
        {view === 'edit' && (
          <form onSubmit={handleEditSubmit} className="bg-slate-900/90 backdrop-blur-md p-6 rounded-3xl border border-slate-800 space-y-6 shadow-2xl animate-in fade-in duration-200 ring-1 ring-white/10">
            <div className="flex justify-between items-center border-b border-slate-800 pb-4">
              <button type="button" onClick={() => {setView('vault'); setEditingId(null); setFormData({ ...initialFormState, location: userProfile?.homeCasino || '' });}} className="text-slate-400 font-bold uppercase hover:text-white flex items-center bg-slate-800 px-3 py-1 rounded-full text-xs">
                <X className="w-3 h-3 mr-1"/> Cancel
              </button>
              <h2 className="text-xl font-black text-emerald-400 tracking-wide uppercase">Edit Session</h2>
              <div className="w-16"></div>
            </div>

            <div>
              <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Location</label>
              <input type="text" name="location" value={formData.location} onChange={handleInputChange} required className="w-full bg-slate-950 text-xl font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:outline-none shadow-inner" />
            </div>

            <div>
              <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Game Name</label>
              <input type="text" name="specificGame" value={formData.specificGame} onChange={handleInputChange} required className="w-full bg-slate-950 text-xl font-bold text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 focus:outline-none shadow-inner" />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Buy-In ($)</label>
                <input type="number" step="1" name="buyIn" value={formData.buyIn} onChange={handleInputChange} required className="w-full bg-slate-950 text-2xl font-black text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 text-center shadow-inner" />
              </div>
              <div>
                <label className="text-slate-400 font-bold ml-2 text-xs uppercase tracking-wider mb-1 block">Cash-Out ($)</label>
                <input type="number" step="1" name="cashOut" value={formData.cashOut} onChange={handleInputChange} required className="w-full bg-slate-950 text-2xl font-black text-white p-4 rounded-2xl border border-slate-700 focus:border-emerald-500 text-center shadow-inner" />
              </div>
            </div>

            <div className="bg-slate-950/50 p-4 rounded-2xl border border-white/5">
              <label className="text-rose-400 font-bold ml-1 text-xs uppercase tracking-wider mb-3 flex items-center gap-1"><AlertCircle className="w-3 h-3"/> Leaks & Expenses</label>
              <div className="grid grid-cols-4 gap-2">
                <div>
                  <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Food</span>
                  <input type="number" step="1" name="expensesFood" value={formData.expensesFood} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner" />
                </div>
                <div>
                  <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Park</span>
                  <input type="number" step="1" name="expensesPark" value={formData.expensesPark} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner" />
                </div>
                <div>
                  <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Other</span>
                  <input type="number" step="1" name="expensesOther" value={formData.expensesOther} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner" />
                </div>
                <div>
                  <span className="text-[9px] text-slate-500 uppercase font-bold ml-1 block mb-1">Tips</span>
                  <input type="number" step="1" name="tips" value={formData.tips} onChange={handleInputChange} className="w-full bg-slate-950 text-sm font-bold text-rose-400 p-3 rounded-xl border border-slate-800 focus:border-rose-500 text-center shadow-inner" />
                </div>
              </div>
            </div>

            <div className="pt-4 space-y-4">
              <button type="submit" className="w-full bg-gradient-to-r from-emerald-600 to-teal-500 text-white py-5 rounded-2xl font-black text-xl uppercase tracking-widest shadow-[0_0_20px_rgba(16,185,129,0.3)] border border-emerald-400/50">
                Save Changes
              </button>
              <button type="button" onClick={() => deleteSession(editingId)} className="w-full bg-slate-950 border border-rose-900 text-rose-500 hover:bg-rose-900/50 hover:text-white py-4 rounded-2xl font-bold text-sm uppercase tracking-widest transition-colors flex items-center justify-center">
                <Trash2 className="w-4 h-4 mr-2"/> Delete Session
              </button>
            </div>
          </form>
        )}

      </div>

      {/* ==================== BOTTOM NAVIGATION (4 TABS) ==================== */}
      <div className="fixed bottom-0 w-full bg-slate-950/95 backdrop-blur-xl border-t border-white/10 pb-safe shadow-[0_-10px_30px_rgba(0,0,0,0.8)] z-50">
        <div className="max-w-xl mx-auto flex justify-between p-2 px-4">
          
          <button onClick={() => setView('log')} className={`flex flex-col items-center justify-center w-1/4 py-2 rounded-xl transition-all ${view === 'log' ? 'text-emerald-400 bg-emerald-950/30' : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900'}`}>
            <PenSquare className="w-5 h-5 mb-1" />
            <span className="text-[9px] font-black uppercase tracking-widest">Log</span>
          </button>
          
          <button onClick={() => setView('vault')} className={`flex flex-col items-center justify-center w-1/4 py-2 rounded-xl transition-all ${(view === 'vault' || view === 'edit') ? 'text-emerald-400 bg-emerald-950/30' : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900'}`}>
            <LayoutDashboard className="w-5 h-5 mb-1" />
            <span className="text-[9px] font-black uppercase tracking-widest">Vault</span>
          </button>
          
          <button onClick={() => setView('trophy')} className={`flex flex-col items-center justify-center w-1/4 py-2 rounded-xl transition-all ${view === 'trophy' ? 'text-amber-400 bg-amber-950/30' : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900'}`}>
            <Trophy className="w-5 h-5 mb-1" />
            <span className="text-[9px] font-black uppercase tracking-widest">Trophy</span>
          </button>

          <button onClick={() => setView('profile')} className={`flex flex-col items-center justify-center w-1/4 py-2 rounded-xl transition-all ${view === 'profile' ? 'text-emerald-400 bg-emerald-950/30' : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900'}`}>
            <User className="w-5 h-5 mb-1" />
            <span className="text-[9px] font-black uppercase tracking-widest">Profile</span>
          </button>

        </div>
      </div>

    </div>
  );
}