import React, { useState, useEffect, useRef } from 'react';
import { HashRouter, Routes, Route, Link, Navigate, useLocation } from 'react-router-dom';
import { Terminal, Flag, Trophy, Newspaper, Settings, LogOut, X, History, User, ChevronDown } from 'lucide-react';
import { CTFProvider, useCTF } from './CTFContext';
import { ProtectedRoute, Button, Countdown } from './UIComponents';
import { Home } from './Home';
import { ChallengeList } from './Challenges';
import { Blog } from './Blog';
import { Scoreboard, ScoreMatrix } from './Scoreboard';
import { Admin } from './Admin';
import { Login, Register } from './Auth';
import { calculateTeamTotalScore } from './services/scoring';

const ProfileSettingsModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  const { updateProfile } = useCTF();
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (password !== confirm) return setError('PASSWORD_MISMATCH');
    try { await updateProfile(password); setSuccess(true); setTimeout(onClose, 2000); } catch (err: any) { setError('FAILED'); }
  };
  return (
    <div className="fixed inset-0 bg-black/95 z-[500] flex items-center justify-center p-4">
      <div className="hxp-border border-4 max-md w-full max-w-md bg-black p-8 relative">
        <button onClick={onClose} className="absolute top-4 right-4 text-white"><X size={24}/></button>
        <h3 className="text-3xl font-black italic text-white mb-8">IDENTITY_SETTINGS</h3>
        {success ? <div className="p-8 border-[#00ff00] text-[#00ff00] font-black text-center">UPDATED_SUCCESSFULLY</div> : (
          <form onSubmit={handleSubmit} className="space-y-6">
            <input type="password" placeholder="NEW KEY" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={password} onChange={e => setPassword(e.target.value)} required />
            <input type="password" placeholder="CONFIRM" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={confirm} onChange={e => setConfirm(e.target.value)} required />
            {error && <p className="text-red-500 font-black italic">{error}</p>}<Button type="submit" className="w-full py-4 text-xl">Confirm Update</Button>
          </form>
        )}
      </div>
    </div>
  );
};

const LayoutShell: React.FC = () => {
  const { state, currentUser, logout, loading, loadError } = useCTF();
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const location = useLocation();

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setShowUserMenu(false);
      }
    };
    if (showUserMenu) {
      document.body.addEventListener('mousedown', handleClickOutside);
    }
    return () => document.body.removeEventListener('mousedown', handleClickOutside);
  }, [showUserMenu]);

  useEffect(() => {
    if (state.config && state.config.conferenceName) {
      document.title = state.config.conferenceName;
    }
  }, [state.config]);

  if (loading) return <div className="min-h-screen bg-black flex items-center justify-center text-[#ff0000] font-black italic text-4xl animate-pulse tracking-tighter uppercase">INITIALIZING_SESSION...</div>;

  const now = Date.now();
  const eventStartTime = parseInt(state.config.eventStartTime || "0");
  const eventEndTime = parseInt(state.config.eventEndTime || (Date.now() + 86400000).toString());
  const isEventLive = now >= eventStartTime && now <= eventEndTime && state.isStarted;

  const bgStyles: React.CSSProperties = { backgroundColor: state.config.bgType === 'color' ? (state.config.bgColor || '#000000') : '#000000' };

  const userScore = currentUser ? calculateTeamTotalScore(currentUser.id, state.challenges, state.solves) : 0;

  const getPageTitle = () => {
    const path = location.pathname;
    if (path === '/') return { text: 'HOME', icon: <Terminal size={28} /> };
    if (path === '/challenges') return { text: 'CHALLENGES', icon: <Flag size={28} /> };
    if (path === '/blog') return { text: 'BLOG', icon: <Newspaper size={28} /> };
    if (path === '/scoreboard' || path === '/matrix') return { text: 'SCORES', icon: <Trophy size={28} /> };
    if (path === '/admin') return { text: 'ADMIN PANEL', icon: <Settings size={28} /> };
    if (path === '/login') return { text: 'LOGIN', icon: <User size={28} /> };
    if (path === '/register') return { text: 'REGISTER', icon: <User size={28} /> };
    return { text: '', icon: null };
  };

  const pageTitle = getPageTitle();

  return (
    <div style={bgStyles} className="min-h-screen text-white font-mono selection:bg-[#ff0000] selection:text-black relative overflow-x-hidden">
      {loadError && <div className="fixed top-0 left-0 right-0 bg-[#ff0000] text-black font-black text-center py-1 z-[999] text-[10px] italic">{loadError}</div>}
      {state.config.bgType === 'image' && state.config.bgImageData && (
        <div className="fixed inset-0 pointer-events-none z-0" style={{ 
          backgroundImage: `url(${state.config.bgImageData})`, 
          backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed',
          opacity: parseFloat(state.config.bgOpacity || '0.5'), 
          filter: `brightness(${state.config.bgBrightness || '1.0'}) contrast(${state.config.bgContrast || '1.0'})` 
        }} />
      )}
      <nav className="border-b-4 border-[#333] px-6 py-4 sticky top-0 bg-black/80 backdrop-blur-md z-[100]">
        <div className="grid grid-cols-3 items-center">
          {/* Left: Branding */}
          <Link to="/" className="flex items-center gap-3 group justify-self-start">
            {state.config.logoData ? <img src={state.config.logoData} className="w-8 h-8 object-contain" /> : <Terminal className="text-[#ff0000]" />}
            <span className="text-2xl font-black italic uppercase group-hover:text-[#ff0000] transition-colors tracking-tighter truncate max-w-[200px]">{state.config.conferenceName}</span>
          </Link>

          {/* Middle: Dynamic Page Title */}
          <div className="flex justify-center text-center">
            <div className="flex items-center gap-3 text-white">
              {pageTitle.icon && <div className="text-[#bf00ff]">{pageTitle.icon}</div>}
              <span className="text-3xl font-black italic uppercase tracking-tighter truncate pr-1">
                {pageTitle.text}
              </span>
            </div>
          </div>

          {/* Right: Menu & User */}
          <div className="flex items-center gap-6 justify-self-end">
            <div className="hidden lg:flex gap-8 text-xs font-black uppercase tracking-widest">
              {currentUser ? <Link to="/challenges" className="hover:text-[#bf00ff] flex items-center gap-2 transition-colors"><Flag size={16}/> CHALLENGES</Link> : null}
              <Link to="/blog" className="hover:text-[#bf00ff] flex items-center gap-2 transition-colors"><Newspaper size={16}/> BLOG</Link>
              {currentUser ? <Link to="/scoreboard" className="hover:text-[#bf00ff] flex items-center gap-2 transition-colors"><Trophy size={16}/> SCORES</Link> : null}
            </div>
            
            {isEventLive && (
              <div className="px-4 py-2 hxp-border-purple bg-[#bf00ff]/10 hidden sm:block">
                <Countdown target={eventEndTime} label="Time Left" />
              </div>
            )}
            
            <div className="flex items-center gap-4 relative">
              {currentUser ? (
                <div className="relative" ref={menuRef}>
                  <button 
                    onClick={() => setShowUserMenu(!showUserMenu)} 
                    className={`flex items-center gap-2 px-3 py-2 border-2 transition-all ${showUserMenu ? 'bg-[#bf00ff] text-black border-[#bf00ff]' : 'border-[#333] text-white hover:border-[#bf00ff]'}`}
                  >
                    <User size={18} />
                    <span className="text-xs font-black truncate max-w-[120px] hidden sm:inline">{currentUser.name}</span>
                    <ChevronDown size={14} className={`transition-transform ${showUserMenu ? 'rotate-180' : ''}`} />
                  </button>

                  {showUserMenu && (
                    <div className="absolute right-0 mt-2 w-64 bg-black border-2 border-[#bf00ff] shadow-[0_0_20px_rgba(191,0,255,0.2)] z-[50] animate-in fade-in slide-in-from-top-2 duration-200">
                        <div className="p-4 border-b border-[#333] bg-[#bf00ff]/5">
                          <p className="text-xs font-black text-slate-500 uppercase tracking-widest mb-1">PLAYER</p>
                          <p className="text-lg font-black text-white truncate">{currentUser.name}</p>
                          <div className="mt-2 flex items-center gap-2">
                            <span className="text-base font-black bg-[#bf00ff] text-black px-2 py-0.5">SCORE: {userScore} PTS</span>
                          </div>
                        </div>
                        
                        <div className="p-2 flex flex-col gap-1">
                          {currentUser.isAdmin && (
                            <Link 
                              to="/admin" 
                              onClick={() => setShowUserMenu(false)}
                              className="flex items-center gap-3 px-3 py-2 text-xs font-black uppercase text-[#ff0000] hover:bg-[#ff0000]/10 transition-colors"
                            >
                              <Settings size={14} /> Admin Panel
                            </Link>
                          )}
                          <button 
                            onClick={() => { setShowProfileModal(true); setShowUserMenu(false); }}
                            className="flex items-center gap-3 px-3 py-2 text-xs font-black uppercase text-white hover:bg-white/10 transition-colors text-left"
                          >
                            <Settings size={14} /> Change Password
                          </button>
                          <div className="h-px bg-[#333] my-1" />
                          <button 
                            onClick={() => { logout(); setShowUserMenu(false); }}
                            className="flex items-center gap-3 px-3 py-2 text-xs font-black uppercase text-red-500 hover:bg-red-500/10 transition-colors text-left"
                          >
                            <LogOut size={14} /> LOGOUT
                          </button>
                        </div>
                      </div>
                  )}
                </div>
              ) : <Link to="/login"><Button variant="secondary" className="text-[10px] py-1 px-4">SIGN_IN</Button></Link>}
            </div>
          </div>
        </div>
      </nav>
      <main className="relative">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/scoreboard" element={<ProtectedRoute><Scoreboard /></ProtectedRoute>} />
          <Route path="/matrix" element={<ProtectedRoute><ScoreMatrix /></ProtectedRoute>} />
          <Route path="/admin" element={<ProtectedRoute>{currentUser?.isAdmin ? <Admin /> : <Navigate to="/" />}</ProtectedRoute>} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </main>
      {showProfileModal && <ProfileSettingsModal onClose={() => setShowProfileModal(false)} />}
    </div>
  );
};

const App: React.FC = () => {
  return (
    <CTFProvider>
      <HashRouter>
        <LayoutShell />
      </HashRouter>
    </CTFProvider>
  );
};

export default App;