import React, { useState, useEffect, createContext, useContext, useMemo, useCallback } from 'react';
import { HashRouter, Routes, Route, Link, useNavigate, Navigate, useLocation } from 'react-router-dom';
import { LogIn, UserPlus, Trophy, Flag, Shield, LogOut, Settings, Clock, Plus, Trash2, Edit3, Download, ExternalLink, Menu, X, CheckCircle2, ChevronRight, Layers, Database, RefreshCw, Terminal, Crosshair, Radar, Zap, Box, User, Users, ShieldAlert, ShieldCheck, Heart, Sparkles, Coffee, Table, Paperclip, Newspaper, Image as ImageIcon, Type, Layout, Wand2, Monitor, Globe } from 'lucide-react';
import { Challenge, Team, Solve, CTFState, Difficulty, ChallengeFile, BlogPost } from './types';
import { CATEGORIES, DIFFICULTIES } from './constants';
import { calculateChallengeValue, calculateTeamTotalScore, getFirstBloodBonus } from './services/scoring';
import { api } from './services/api';

// --- Context & State Management ---
interface CTFContextType {
  state: CTFState;
  currentUser: Team | null;
  login: (name: string, pass: string) => Promise<boolean>;
  register: (name: string, pass: string) => Promise<void>;
  logout: () => void;
  submitFlag: (challengeId: string, flag: string) => Promise<boolean>;
  toggleCtf: () => Promise<void>;
  upsertChallenge: (data: FormData, id?: string) => Promise<void>;
  deleteChallenge: (id: string) => Promise<void>;
  updateTeam: (id: string, name: string, isDisabled: boolean, isAdmin: boolean, password?: string) => Promise<void>;
  updateProfile: (password?: string) => Promise<void>;
  deleteTeam: (id: string) => Promise<void>;
  createBlogPost: (data: { title: string, content: string }) => Promise<void>;
  updateBlogPost: (id: string, data: { title: string, content: string }) => Promise<void>;
  deleteBlogPost: (id: string) => Promise<void>;
  updateConfig: (formData: FormData) => Promise<void>;
  refreshState: () => Promise<void>;
}

const CTFContext = createContext<CTFContextType | null>(null);
const useCTF = () => {
  const context = useContext(CTFContext);
  if (!context) throw new Error('useCTF must be used within provider');
  return context;
};

// --- Helper Components ---
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { currentUser } = useCTF();
  const location = useLocation();

  if (!currentUser) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <>{children}</>;
};

const CategoryIcon: React.FC<{ category: string; size?: number; color?: string }> = ({ category, size = 32, color = "currentColor" }) => {
  switch (category) {
    case 'WEB': return <Radar size={size} color={color} />;
    case 'PWN': return <Zap size={size} color={color} />;
    case 'REV': return <RefreshCw size={size} color={color} />;
    case 'CRY': return <Box size={size} color={color} />;
    default: return <Terminal size={size} color={color} />;
  }
};

const getDifficultyColorClass = (difficulty: Difficulty) => {
  switch (difficulty) {
    case 'Low': return 'text-green-500';
    case 'Medium': return 'text-yellow-500';
    case 'High': return 'text-red-500';
    default: return 'text-slate-400';
  }
};

const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: 'primary' | 'secondary' }> = ({ children, variant = 'primary', className = "", ...props }) => {
  const styles = variant === 'primary' 
    ? "bg-[#ff0000] text-black border-2 border-[#ff0000] hover:bg-black hover:text-[#ff0000] disabled:opacity-50" 
    : "bg-black text-[#bf00ff] border-2 border-[#bf00ff] hover:bg-[#bf00ff] hover:text-black disabled:opacity-50";
  return (
    <button className={`px-4 py-2 font-black tracking-tighter transition-all active:scale-95 ${styles} ${className}`} {...props}>
      {children}
    </button>
  );
};

const ChallengeModal: React.FC<{ 
  challenge: Challenge; 
  onClose: () => void; 
}> = ({ challenge, onClose }) => {
  const { state, currentUser, submitFlag, refreshState } = useCTF();
  const [flagInput, setFlagInput] = useState('');
  const [message, setMessage] = useState<{ text: string, type: 'success' | 'error' } | null>(null);

  const handleFlagSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const result = await submitFlag(challenge.id, flagInput);
      if (result) {
        setMessage({ text: 'ACCESS GRANTED ✨', type: 'success' });
        setFlagInput('');
        setTimeout(() => { onClose(); setMessage(null); refreshState(); }, 1500);
      } else {
        setMessage({ text: 'RETRY SUGGESTED', type: 'error' });
      }
    } catch (err) {
      setMessage({ text: 'COMMUNICATION ERROR', type: 'error' });
    }
  };

  const connectionDetails = useMemo(() => {
    const port = Number(challenge.port);
    const ip = state.config.dockerIp;
    const type = challenge.connectionType || 'nc';
    
    if (port > 0) {
      if (!ip) {
        return currentUser?.isAdmin ? "ERROR: DOCKER_NODE_IP_NOT_CONFIGURED" : null;
      }
      return type === 'nc' ? `nc ${ip} ${port}` : `http://${ip}:${port}`;
    }
    return null;
  }, [challenge.port, challenge.connectionType, state.config.dockerIp, currentUser?.isAdmin]);

  return (
    <div className="fixed inset-0 bg-black/95 z-[300] flex items-center justify-center p-4">
      <div className="hxp-border border-4 max-w-2xl w-full bg-black p-8 relative overflow-y-auto max-h-[90vh] custom-scrollbar">
        <button onClick={onClose} className="absolute top-4 right-4 bg-[#ff0000] text-black font-black p-2 hover:bg-white transition-colors"><X size={24} /></button>
        <div className="mb-8">
          <h3 className="text-4xl font-black italic tracking-tighter text-white mb-2">{challenge.title}</h3>
          <div className="flex gap-4 font-bold text-xs tracking-widest text-slate-400">
            <span className="text-[#bf00ff]">{challenge.category}</span> | <span className={getDifficultyColorClass(challenge.difficulty)}>{challenge.difficulty}</span> | <span className="text-white">{calculateChallengeValue(challenge.initialPoints, challenge.solves.length)} PTS</span>
          </div>
        </div>
        <div className="hxp-border-purple p-6 mb-6 text-[#bf00ff] font-bold text-sm leading-relaxed whitespace-pre-wrap bg-[#bf00ff]/5">{challenge.description}</div>
        
        {connectionDetails && (
          <div className="mb-8 p-4 hxp-border border-[#00ccff] bg-[#00ccff]/5">
            <h4 className="text-[10px] font-black text-[#00ccff] uppercase tracking-[0.2em] mb-2 flex items-center gap-2"><Globe size={12}/> Connect to:</h4>
            <code className="block bg-black p-3 text-[#00ccff] font-black text-sm border border-[#00ccff]/30 break-all select-all cursor-pointer" title="Click to select">
              {connectionDetails}
            </code>
            {connectionDetails.startsWith("ERROR") && (
              <p className="text-[9px] text-[#ff0000] mt-2 font-black italic">ADMIN_NOTICE: Set Docker Node IP in General Config</p>
            )}
          </div>
        )}

        {challenge.files && challenge.files.length > 0 && (
          <div className="mb-8 space-y-2">
            <h4 className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Available Files</h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              {challenge.files.map((file, idx) => (
                <a key={idx} href={file.url} download={file.name} className="flex items-center gap-3 p-3 hxp-border-purple bg-white/5 hover:bg-white/10 transition-colors group">
                  <Download size={18} className="text-[#bf00ff]" />
                  <span className="text-xs font-black text-white truncate flex-1">{file.name}</span>
                </a>
              ))}
            </div>
          </div>
        )}

        {currentUser ? (
          !challenge.solves.includes(currentUser.id) ? (
            <form onSubmit={handleFlagSubmit} className="space-y-4 mb-10">
              <input type="text" placeholder="{flag: solution_here}" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={flagInput} onChange={(e) => setFlagInput(e.target.value)} autoFocus />
              <div className="flex gap-4">
                <Button type="submit" className="flex-1 text-xl py-4 font-black">Solve</Button>
                {message && <div className={`flex-1 flex items-center justify-center font-black border-4 ${message.type === 'success' ? 'text-[#00ff00] border-[#00ff00]' : 'text-red-500 border-red-500'}`}>{message.text}</div>}
              </div>
            </form>
          ) : (
            <div className="p-6 hxp-border border-[#00ff00] bg-[#00ff00]/10 text-[#00ff00] text-center font-black italic text-2xl tracking-widest mb-10 animate-pulse">CHALLENGE SOLVED ✨</div>
          )
        ) : (
          <p className="text-center font-bold text-red-500 mb-10 uppercase tracking-widest">PLEASE SIGN IN TO CONTRIBUTE</p>
        )}
        <div className="border-t-4 border-[#333] pt-6">
          <h4 className="text-sm font-black text-white tracking-[0.2em] mb-4 flex items-center gap-2 uppercase"><Sparkles size={14} /> SOLVER_LOG</h4>
          <div className="space-y-1">
            {challenge.solves.length > 0 ? (
              state.solves.filter(s => s.challengeId === challenge.id).sort((a, b) => a.timestamp - b.timestamp).map((solve, idx) => {
                const team = state.teams.find(t => t.id === solve.teamId);
                const bonus = getFirstBloodBonus(idx);
                return (
                  <div key={solve.teamId + idx} className="flex justify-between items-center p-3 bg-white/5 border border-white/10 text-[10px] font-bold">
                    <div className="flex items-center gap-3">
                      <span className={`w-5 h-5 flex items-center justify-center font-black ${idx === 0 ? 'bg-[#ff0000] text-black' : 'text-slate-500'}`}>{idx + 1}</span>
                      <span className="text-white">{team?.name}</span>
                      {bonus > 0 && <span className="text-[#00ff00] border border-[#00ff00]/30 px-2 py-0.5 uppercase tracking-tighter">PWNY POWER 🦄 +{Math.round(bonus*100)}%</span>}
                    </div>
                    <span className="text-slate-500 font-mono">{new Date(solve.timestamp).toLocaleTimeString()}</span>
                  </div>
                );
              })
            ) : (
              <div className="text-center py-4 text-slate-700 font-black italic text-xs uppercase">No solutions discovered yet.</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

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('AUTH_MISMATCH: PASSWORDS_DO_NOT_MATCH');
    try {
      await updateProfile(password);
      setSuccess(true);
      setTimeout(onClose, 2000);
    } catch (err: any) {
      setError(err.message || 'UPDATE_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-w-md w-full bg-black p-8 relative">
        <button onClick={onClose} className="absolute top-4 right-4 text-white hover:text-[#ff0000]"><X size={24}/></button>
        <h3 className="text-3xl font-black italic text-white mb-8 uppercase">IDENTITY_SETTINGS</h3>
        {success ? (
          <div className="p-8 hxp-border border-[#00ff00] text-[#00ff00] font-black text-center animate-pulse">
            CREDENTIALS_UPDATED_SUCCESSFULLY
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">NEW_ACCESS_KEY</label>
              <input type="password" placeholder="••••••••" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={password} onChange={e => setPassword(e.target.value)} required />
            </div>
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">CONFIRM_KEY</label>
              <input type="password" placeholder="••••••••" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={confirm} onChange={e => setConfirm(e.target.value)} required />
            </div>
            {error && <p className="text-red-500 font-black text-xs italic">{error}</p>}
            <Button type="submit" className="w-full py-4 text-xl">Confirm Update</Button>
          </form>
        )}
      </div>
    </div>
  );
};

// --- Pages ---

const Blog: React.FC = () => {
  const { state } = useCTF();
  return (
    <div className="max-w-4xl mx-auto py-20 px-6">
      <div className="mb-12 border-b-4 border-[#ff0000] pb-6">
        <h2 className="text-6xl font-black italic tracking-tighter text-white uppercase leading-none flex items-center gap-4">
          <Newspaper size={48} className="text-[#ff0000]" /> BLOG_FEED
        </h2>
        <p className="text-[#bf00ff] font-bold text-xs tracking-widest mt-2 uppercase">Protocol: Global Broadcasts & Updates</p>
      </div>

      <div className="space-y-12">
        {state.blogs.length > 0 ? (
          state.blogs.map((post) => (
            <div key={post.id} className="hxp-border-purple bg-white/5 p-8 group hover:bg-white/10 transition-colors relative">
              <div className="absolute top-0 right-0 bg-[#bf00ff] text-black text-[10px] font-black px-4 py-1 uppercase tracking-widest">
                {new Date(post.timestamp).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}
              </div>
              <h3 className="text-3xl font-black text-white italic mb-4 tracking-tighter group-hover:text-[#bf00ff] transition-colors">
                {post.title}
              </h3>
              <div className="text-slate-400 font-bold text-sm leading-relaxed whitespace-pre-wrap border-l-4 border-[#333] pl-6 py-2">
                {post.content}
              </div>
            </div>
          ))
        ) : (
          <div className="py-20 text-center hxp-border border-dashed border-[#333] opacity-50">
            <p className="text-slate-500 font-black italic uppercase text-xl">Awaiting broadcasts from headquarters...</p>
          </div>
        )}
      </div>
    </div>
  );
};

const Home: React.FC = () => {
  const { currentUser, state } = useCTF();
  return (
    <div className="max-w-4xl mx-auto py-20 px-4 text-center">
      <div className="mb-12 relative inline-block">
        {/* Logo or fallback generic icon - Replaced text with logo as requested */}
        <div className="relative z-10 flex flex-col items-center justify-center mb-10">
          {state.config.logoUrl ? (
            <img src={state.config.logoUrl} alt="Logo" className="max-h-60 mx-auto object-contain drop-shadow-[0_0_15px_rgba(255,0,0,0.3)]" />
          ) : (
            <Terminal size={120} className="text-[#ff0000] mb-4 animate-pulse" />
          )}
        </div>

        <h1 className="text-8xl font-black italic tracking-tighter text-white block leading-none mb-4">
          {state.config.conferenceName}
        </h1>
      </div>
      
      <div className="hxp-border p-8 mb-10 max-w-2xl mx-auto bg-black relative group overflow-hidden">
        <div className="absolute top-0 left-0 w-1 h-full bg-[#ff0000] group-hover:w-full transition-all duration-500 opacity-10"></div>
        <p className="text-xl font-bold uppercase tracking-tight relative z-10">{state.config.landingText}</p>
      </div>

      <div className="flex flex-wrap justify-center gap-6">
        {!currentUser ? (
          <>
            <Link to="/register"><Button className="text-xl px-10">Join Us</Button></Link>
            <Link to="/login"><Button variant="secondary" className="text-xl px-10">Sign In</Button></Link>
          </>
        ) : (
          <div className="flex gap-4">
            <Link to="/challenges"><Button className="text-xl px-10">Challenges</Button></Link>
            <Link to="/blog"><Button variant="secondary" className="text-xl px-10">Read Blog</Button></Link>
          </div>
        )}
      </div>
    </div>
  );
};

const ChallengeList: React.FC = () => {
  const { state, currentUser } = useCTF();
  const [selectedChallenge, setSelectedChallenge] = useState<Challenge | null>(null);

  const difficultyWeight: Record<Difficulty, number> = { 'Low': 1, 'Medium': 2, 'High': 3 };

  // Admins can see challenges even if competition is not started/paused
  if (!state.isStarted && !currentUser?.isAdmin) {
    return (
      <div className="max-w-4xl mx-auto py-32 px-4 text-center">
        <div className="hxp-border border-4 p-12 inline-block">
          <Clock className="w-20 h-20 text-[#bf00ff] mx-auto mb-6 animate-pulse" />
          <h2 className="text-4xl font-black italic mb-4 uppercase">BOARD_PAUSED</h2>
          <p className="text-slate-500 font-bold tracking-widest uppercase">Waiting for the opening ceremony...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full px-6 py-12 min-h-screen">
      {!state.isStarted && currentUser?.isAdmin && (
        <div className="max-w-7xl mx-auto mb-8 p-4 hxp-border border-[#ffaa00] bg-[#ffaa00]/10 text-[#ffaa00] font-black text-center italic uppercase tracking-widest flex items-center justify-center gap-3">
          <ShieldAlert size={20}/> Competition is currently paused. Preview mode active for Admins.
        </div>
      )}
      
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 max-w-[1600px] mx-auto">
        {CATEGORIES.map(category => {
          const categoryChallenges = (state.challenges || [])
            .filter(c => c.category === category)
            .sort((a, b) => difficultyWeight[a.difficulty] - difficultyWeight[b.difficulty]);

          if (categoryChallenges.length === 0) return null;

          return (
            <div key={category} className="flex flex-col gap-6">
              <div className="flex flex-col items-center gap-2 mb-4">
                <div className="p-3 bg-white/5 hxp-border border-[#333] hover:border-[#bf00ff] transition-colors">
                  <CategoryIcon category={category} size={48} color={category === 'WEB' ? '#ff0000' : category === 'PWN' ? '#ffaa00' : category === 'REV' ? '#00ccff' : '#bf00ff'} />
                </div>
                <h3 className="text-3xl font-black italic tracking-tighter text-white uppercase">{category}</h3>
              </div>
              
              <div className="flex flex-col gap-4">
                {categoryChallenges.map(c => {
                  const isSolved = currentUser && (c.solves || []).includes(currentUser.id);
                  const currentPoints = calculateChallengeValue(c.initialPoints, (c.solves || []).length);
                  return (
                    <div 
                      key={c.id} 
                      className={`hxp-card p-4 group cursor-pointer border-2 transition-all ${isSolved ? 'border-[#00ff00] bg-[#00ff00]/5' : 'border-[#333] hover:border-[#bf00ff]'}`}
                      onClick={() => setSelectedChallenge(c)}
                    >
                      <div className={`text-[10px] font-black text-center mb-1 ${getDifficultyColorClass(c.difficulty)} uppercase tracking-[0.2em]`}>
                        {c.difficulty}
                      </div>
                      <h4 className="font-black text-center mb-3 text-[#bf00ff] group-hover:text-white transition-colors tracking-tight uppercase truncate">{c.title}</h4>
                      <div className="flex justify-between items-center px-2">
                        <div className="flex items-center gap-1">
                          {isSolved && <CheckCircle2 size={12} className="text-[#00ff00]" />}
                          <span className={`text-xs font-black ${isSolved ? 'text-white' : 'text-slate-400'}`}>
                            {currentPoints}
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Heart size={10} className="text-slate-500" />
                          <span className="text-[10px] font-bold text-slate-500">{(c.solves || []).length}</span>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      {selectedChallenge && (
        <ChallengeModal challenge={selectedChallenge} onClose={() => setSelectedChallenge(null)} />
      )}
    </div>
  );
};

const Scoreboard: React.FC = () => {
  const { state } = useCTF();
  
  const rankings = useMemo(() => {
    return (state.teams || [])
      .filter(t => !t.isAdmin && !t.isDisabled)
      .map(team => ({
        ...team,
        score: calculateTeamTotalScore(team.id, state.challenges, state.solves),
        solveCount: state.solves.filter(s => s.teamId === team.id).length
      }))
      .sort((a, b) => b.score - a.score || a.name.localeCompare(b.name));
  }, [state]);

  return (
    <div className="max-w-5xl mx-auto py-12 px-6">
      <div className="mb-12 border-b-4 border-[#ff0000] pb-6">
        <h2 className="text-6xl font-black italic tracking-tighter text-white uppercase leading-none">LEADERBOARD</h2>
        <div className="flex justify-between items-end">
          <p className="text-[#bf00ff] font-bold text-xs tracking-widest mt-2 uppercase">Protocol: Global Standings</p>
          <Link to="/matrix" className="text-[10px] font-black text-[#ff0000] hover:underline flex items-center gap-1 uppercase tracking-widest"><Table size={12}/> View_Matrix</Link>
        </div>
      </div>

      <div className="hxp-border border-2 overflow-hidden bg-black">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-[#333] text-[10px] font-black uppercase tracking-[0.2em]">
              <th className="p-4 w-20">RANK</th>
              <th className="p-4">TEAM_IDENTIFIER</th>
              <th className="p-4 text-center">SOLVES</th>
              <th className="p-4 text-right">TOTAL_POINTS</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-white/10">
            {rankings.map((team, idx) => (
              <tr key={team.id} className={`group hover:bg-white/5 transition-colors ${idx < 3 ? 'bg-white/[0.02]' : ''}`}>
                <td className="p-4">
                  <div className={`w-8 h-8 flex items-center justify-center font-black italic text-lg ${
                    idx === 0 ? 'bg-[#ffaa00] text-black rotate-[-12deg]' : 
                    idx === 1 ? 'bg-slate-400 text-black rotate-[6deg]' : 
                    idx === 2 ? 'bg-[#cd7f32] text-black rotate-[-6deg]' : 'text-slate-500'
                  }`}>
                    {idx + 1}
                  </div>
                </td>
                <td className="p-4">
                  <div className="flex items-center gap-3">
                    <span className="text-xl font-black text-white italic group-hover:text-[#bf00ff] transition-colors">{team.name}</span>
                    {idx === 0 && <Sparkles size={16} className="text-[#ffaa00] animate-pulse" />}
                  </div>
                </td>
                <td className="p-4 text-center font-black text-[#bf00ff]">{team.solveCount}</td>
                <td className="p-4 text-right font-black text-2xl italic text-white">{team.score}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {rankings.length === 0 && (
          <div className="py-20 text-center font-black italic text-slate-600 uppercase">No team activity detected yet.</div>
        )}
      </div>
    </div>
  );
};

const ScoreMatrix: React.FC = () => {
  const { state } = useCTF();
  const sortedTeams = useMemo(() => {
    return state.teams
      .filter(t => !t.isAdmin && !t.isDisabled)
      .map(t => ({ ...t, score: calculateTeamTotalScore(t.id, state.challenges, state.solves) }))
      .sort((a, b) => b.score - a.score);
  }, [state]);

  return (
    <div className="w-full overflow-x-auto py-12 px-6 custom-scrollbar">
      <div className="mb-12 border-b-4 border-[#00ff00] pb-6 max-w-6xl mx-auto">
        <h2 className="text-6xl font-black italic tracking-tighter text-white uppercase leading-none">SCORE_MATRIX</h2>
        <p className="text-[#bf00ff] font-bold text-xs tracking-widest mt-2 uppercase">Protocol: Operational Overview</p>
      </div>

      <div className="inline-block min-w-full bg-black hxp-border overflow-hidden">
        <table className="border-collapse w-full">
          <thead>
            <tr>
              <th className="sticky left-0 z-20 bg-black p-4 text-[10px] font-black uppercase text-slate-500 border-b-2 border-r-2 border-[#333] whitespace-nowrap min-w-[200px]">Team / Challenge</th>
              {state.challenges.map(c => (
                <th key={c.id} className="p-2 border-b-2 border-r-2 border-[#333] min-w-[60px] relative">
                  <div className="h-56 flex items-center justify-center">
                    <span className="block whitespace-nowrap origin-center -rotate-90 text-[11px] font-black tracking-widest text-slate-400 uppercase w-0">
                      {c.title}
                    </span>
                  </div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {sortedTeams.map(team => (
              <tr key={team.id} className="hover:bg-white/5 group">
                <td className="sticky left-0 z-10 bg-black p-3 font-black italic text-sm border-r-2 border-b-2 border-[#333] whitespace-nowrap group-hover:text-[#bf00ff]">
                  {team.name}
                </td>
                {state.challenges.map(c => {
                  const isSolved = c.solves.includes(team.id);
                  return (
                    <td key={c.id} className={`p-0 border-r-2 border-b-2 border-[#333] text-center`}>
                      <div className={`w-full h-10 flex items-center justify-center ${isSolved ? 'bg-[#00ff00]/40' : ''}`}>
                        {isSolved && <CheckCircle2 size={16} className="text-[#00ff00]" />}
                      </div>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const Login: React.FC = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const { login } = useCTF();
  const navigate = useNavigate();
  const location = useLocation();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const success = await login(name, password);
    if (success) {
      const from = (location.state as any)?.from?.pathname || '/';
      navigate(from, { replace: true });
    } else {
      setError('ACCESS_DENIED: INVALID_CREDENTIALS');
    }
  };

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-6">
      <div className="w-full max-w-md">
        <div className="hxp-border border-4 p-10 bg-black relative">
          <div className="absolute -top-4 -left-4 bg-[#ff0000] text-black font-black px-4 py-1 text-xs italic">AUTH_GATE_01</div>
          <h2 className="text-5xl font-black italic text-white mb-8 tracking-tighter uppercase">SIGN_IN</h2>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2 tracking-[0.2em]">Team_Identifier</label>
              <input type="text" placeholder="Ghost_Protocol" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
            </div>
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2 tracking-[0.2em]">Access_Key</label>
              <input type="password" placeholder="••••••••" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={password} onChange={e => setPassword(e.target.value)} required />
            </div>
            {error && <p className="text-red-500 font-black text-xs italic animate-pulse">{error}</p>}
            <Button type="submit" className="w-full py-4 text-xl">Initiate Session</Button>
          </form>
          <p className="mt-8 text-center text-[10px] font-bold text-slate-500 tracking-widest uppercase">
            New operator? <Link to="/register" className="text-[#bf00ff] hover:underline">Register_Identity</Link>
          </p>
        </div>
      </div>
    </div>
  );
};

const Register: React.FC = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [userCaptcha, setUserCaptcha] = useState('');
  const [captchaValue, setCaptchaValue] = useState('');
  const [error, setError] = useState('');
  const { register } = useCTF();
  const navigate = useNavigate();

  const generateCaptcha = useCallback(() => {
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    let result = '';
    for (let i = 0; i < 6; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    setCaptchaValue(result);
  }, []);

  useEffect(() => {
    generateCaptcha();
  }, [generateCaptcha]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (password !== confirm) return setError('AUTH_MISMATCH: PASSWORDS_DO_NOT_MATCH');
    if (userCaptcha.toUpperCase() !== captchaValue) {
      setError('AUTH_FAILURE: INVALID_CAPTCHA');
      generateCaptcha();
      setUserCaptcha('');
      return;
    }
    try {
      await register(name, password);
      navigate('/challenges');
    } catch (err: any) {
      setError(err.message || 'REGISTRATION_FAILED');
      generateCaptcha();
    }
  };

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-6">
      <div className="w-full max-w-md">
        <div className="hxp-border border-4 p-10 bg-black relative">
          <div className="absolute -top-4 -left-4 bg-[#bf00ff] text-black font-black px-4 py-1 text-xs italic">IDENTITY_GEN_01</div>
          <h2 className="text-5xl font-black italic text-white mb-8 tracking-tighter uppercase">REGISTER</h2>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2 tracking-[0.2em]">Team_Name</label>
              <input type="text" placeholder="Neon_Surge" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
            </div>
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2 tracking-[0.2em]">Access_Key</label>
              <input type="password" placeholder="••••••••" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={password} onChange={e => setPassword(e.target.value)} required />
            </div>
            <div>
              <label className="block text-[10px] font-black text-slate-500 uppercase mb-2 tracking-[0.2em]">Confirm_Key</label>
              <input type="password" placeholder="••••••••" className="w-full bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black" value={confirm} onChange={e => setConfirm(e.target.value)} required />
            </div>
            
            <div className="space-y-4">
              <label className="block text-[10px] font-black text-slate-500 uppercase tracking-widest">Human_Validation</label>
              <div className="flex gap-4 items-center">
                <div className="flex-1 hxp-border border-2 bg-white/5 p-4 flex items-center justify-center relative select-none">
                  <span className="text-2xl font-black italic tracking-[0.3em] text-[#ff0000] drop-shadow-[0_0_8px_rgba(255,0,0,0.5)]">
                    {captchaValue}
                  </span>
                  <button type="button" onClick={generateCaptcha} className="absolute right-2 text-slate-500 hover:text-white transition-colors"><RefreshCw size={16} /></button>
                </div>
                <input type="text" placeholder="TYPE" className="w-24 bg-black hxp-border-purple p-4 outline-none focus:border-[#ff0000] text-white font-black text-center" value={userCaptcha} onChange={e => setUserCaptcha(e.target.value)} required />
              </div>
            </div>

            {error && <p className="text-red-500 font-black text-xs italic animate-pulse">{error}</p>}
            <Button type="submit" className="w-full py-4 text-xl">Create Identity</Button>
          </form>
        </div>
      </div>
    </div>
  );
};

const Admin: React.FC = () => {
  const { state, toggleCtf, upsertChallenge, deleteChallenge, updateTeam, deleteTeam, createBlogPost, updateBlogPost, deleteBlogPost, updateConfig, refreshState } = useCTF();
  const [editingChallenge, setEditingChallenge] = useState<Partial<Challenge> | null>(null);
  const [newFiles, setNewFiles] = useState<File[]>([]);
  const [currentFiles, setCurrentFiles] = useState<ChallengeFile[]>([]);
  const [editingTeam, setEditingTeam] = useState<Partial<Team> & { newPassword?: string } | null>(null);
  const [editingBlogPost, setEditingBlogPost] = useState<Partial<BlogPost> | null>(null);
  
  // General Config State
  const [confName, setConfName] = useState(state.config.conferenceName || '');
  const [confLanding, setConfLanding] = useState(state.config.landingText || '');
  const [confBgType, setConfBgType] = useState(state.config.bgType || 'color');
  const [confBgColor, setConfBgColor] = useState(state.config.bgColor || '#000000');
  const [confBgOpacity, setConfBgOpacity] = useState(state.config.bgOpacity || '0.5');
  const [confBgBrightness, setConfBgBrightness] = useState(state.config.bgBrightness || '1.0');
  const [confBgContrast, setConfBgContrast] = useState(state.config.bgContrast || '1.0');
  const [confDockerIp, setConfDockerIp] = useState(state.config.dockerIp || '');
  const [newLogo, setNewLogo] = useState<File | null>(null);
  const [newBgImage, setNewBgImage] = useState<File | null>(null);

  useEffect(() => {
    setConfName(state.config.conferenceName || '');
    setConfLanding(state.config.landingText || '');
    setConfBgType(state.config.bgType || 'color');
    setConfBgColor(state.config.bgColor || '#000000');
    setConfBgOpacity(state.config.bgOpacity || '0.5');
    setConfBgBrightness(state.config.bgBrightness || '1.0');
    setConfBgContrast(state.config.bgContrast || '1.0');
    setConfDockerIp(state.config.dockerIp || '');
  }, [state.config]);

  const handleConfigSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const fd = new FormData();
    fd.append('conferenceName', confName);
    fd.append('landingText', confLanding);
    fd.append('bgType', confBgType);
    fd.append('bgColor', confBgColor);
    fd.append('bgOpacity', confBgOpacity);
    fd.append('bgBrightness', confBgBrightness);
    fd.append('bgContrast', confBgContrast);
    fd.append('dockerIp', confDockerIp);
    if (newLogo) fd.append('logo', newLogo);
    if (newBgImage) fd.append('bgImage', newBgImage);
    
    try {
      await updateConfig(fd);
      alert('CONFIGURATION_UPDATED');
    } catch (err) {
      alert('CONFIG_UPDATE_FAILED');
    }
  };

  const handleChallengeSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingChallenge) return;
    try {
      const formData = new FormData();
      Object.entries(editingChallenge).forEach(([key, value]) => {
        if (key !== 'files' && key !== 'solves' && value !== undefined && value !== null) {
          formData.append(key, value.toString());
        }
      });
      formData.append('existingFiles', JSON.stringify(currentFiles));
      newFiles.forEach(file => { formData.append('files', file); });
      await upsertChallenge(formData, editingChallenge.id);
      setEditingChallenge(null);
      setNewFiles([]);
    } catch (err: any) {
      alert("Failed to update challenge.");
    }
  };

  const handleTeamUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingTeam || !editingTeam.id) return;
    await updateTeam(editingTeam.id, editingTeam.name || '', !!editingTeam.isDisabled, !!editingTeam.isAdmin, editingTeam.newPassword);
    setEditingTeam(null);
  };

  const handleBlogSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingBlogPost) return;
    try {
      if (editingBlogPost.id) {
        await updateBlogPost(editingBlogPost.id, { title: editingBlogPost.title || '', content: editingBlogPost.content || '' });
      } else {
        await createBlogPost({ title: editingBlogPost.title || '', content: editingBlogPost.content || '' });
      }
      setEditingBlogPost(null);
    } catch (err) {
      alert('BLOG_SAVE_FAILED');
    }
  };

  const removeExistingFile = (idx: number) => {
    setCurrentFiles(prev => prev.filter((_, i) => i !== idx));
  };

  return (
    <div className="max-w-6xl mx-auto py-12 px-6">
      <div className="flex justify-between items-center mb-12 border-b-4 border-[#ff0000] pb-6">
        <h2 className="text-5xl font-black italic tracking-tighter text-white uppercase leading-none">ADMIN_OVERRIDE</h2>
        <Button onClick={toggleCtf} variant={state.isStarted ? 'secondary' : 'primary'} className="flex items-center gap-2">
          {state.isStarted ? <Clock className="text-[#ff0000]" /> : <Zap className="text-black" />}
          {state.isStarted ? 'PAUSE_BOARD' : 'RESUME_BOARD'}
        </Button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div className="space-y-12">
          {/* General Settings */}
          <section className="space-y-6">
            <h3 className="text-2xl font-black italic text-[#ffaa00] uppercase flex items-center gap-2 border-b-2 border-[#ffaa00] pb-2">
              <Layout size={20}/> GENERAL_CONFIG
            </h3>
            <form onSubmit={handleConfigSubmit} className="hxp-border border-2 border-[#ffaa00]/30 p-6 bg-[#ffaa00]/5 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Conference Name</label>
                  <input className="w-full bg-black hxp-border p-3 text-white font-black text-sm" value={confName} onChange={e => setConfName(e.target.value)} />
                </div>
                <div>
                  <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Docker Node IP</label>
                  <input placeholder="192.168.178.1" className="w-full bg-black hxp-border p-3 text-white font-black text-sm" value={confDockerIp} onChange={e => setConfDockerIp(e.target.value)} />
                  <p className="text-[9px] text-[#ffaa00] font-bold mt-1 uppercase">Stored in DB: {state.config.dockerIp || 'MISSING'}</p>
                </div>
              </div>
              <div>
                <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Landing Page Message</label>
                <textarea className="w-full bg-black hxp-border p-3 text-white font-black text-sm h-24" value={confLanding} onChange={e => setConfLanding(e.target.value)} />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Logo</label>
                  <input type="file" className="text-xs" onChange={e => e.target.files && setNewLogo(e.target.files[0])} />
                </div>
                <div>
                  <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Background Type</label>
                  <select className="bg-black hxp-border p-2 w-full text-xs font-black uppercase" value={confBgType} onChange={e => setConfBgType(e.target.value)}>
                    <option value="color">Solid Color</option>
                    <option value="image">Background Image</option>
                  </select>
                </div>
              </div>
              {confBgType === 'color' ? (
                <div>
                  <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Background Color</label>
                  <input type="color" className="w-full h-10 bg-black border-2 border-slate-700" value={confBgColor} onChange={e => setConfBgColor(e.target.value)} />
                </div>
              ) : (
                <div className="space-y-6">
                  <div>
                    <label className="block text-[10px] font-black text-slate-500 uppercase mb-2">Background Image</label>
                    <input type="file" className="text-xs" onChange={e => e.target.files && setNewBgImage(e.target.files[0])} />
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className="text-[10px] font-black text-slate-500 uppercase">Opacity</label>
                        <span className="text-[10px] font-bold text-white">{(parseFloat(confBgOpacity) * 100).toFixed(0)}%</span>
                      </div>
                      <input type="range" min="0" max="1" step="0.01" className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-[#ffaa00]" value={confBgOpacity} onChange={e => setConfBgOpacity(e.target.value)} />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className="text-[10px] font-black text-slate-500 uppercase">Brightness</label>
                        <span className="text-[10px] font-bold text-white">{(parseFloat(confBgBrightness) * 100).toFixed(0)}%</span>
                      </div>
                      <input type="range" min="0" max="4" step="0.05" className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-[#00ccff]" value={confBgBrightness} onChange={e => setConfBgBrightness(e.target.value)} />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-1">
                        <label className="text-[10px] font-black text-slate-500 uppercase">Contrast</label>
                        <span className="text-[10px] font-bold text-white">{(parseFloat(confBgContrast) * 100).toFixed(0)}%</span>
                      </div>
                      <input type="range" min="0" max="4" step="0.05" className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-[#bf00ff]" value={confBgContrast} onChange={e => setConfBgContrast(e.target.value)} />
                    </div>
                  </div>
                </div>
              )}
              <Button type="submit" className="w-full py-3 bg-[#ffaa00] border-[#ffaa00]">Commit Settings</Button>
            </form>
          </section>

          {/* Challenges */}
          <section className="space-y-6">
            <div className="flex justify-between items-center border-b-2 border-[#bf00ff] pb-2">
              <h3 className="text-2xl font-black italic text-[#bf00ff] uppercase flex items-center gap-2"><Database size={20}/> CHALLENGES</h3>
              <Button onClick={() => {
                setEditingChallenge({ title: '', category: 'WEB', difficulty: 'Low', initialPoints: 100, flag: '', description: '', files: [], port: 0, connectionType: 'nc' });
                setCurrentFiles([]);
                setNewFiles([]);
              }} className="flex items-center gap-2 text-xs">
                <Plus size={14}/> NEW_CHAL
              </Button>
            </div>
            <div className="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
              {state.challenges.map(c => (
                <div key={c.id} className="hxp-border-purple p-4 bg-white/5 flex justify-between items-center group">
                  <div>
                    <h4 className="font-black text-white uppercase">{c.title}</h4>
                    <p className="text-[10px] text-slate-500 font-mono uppercase">{c.category} | {c.difficulty} | {c.initialPoints} PTS {c.port ? `| PORT:${c.port}` : ''}</p>
                  </div>
                  <div className="flex gap-2">
                    <button onClick={() => {
                      setEditingChallenge(c);
                      setCurrentFiles(c.files || []);
                      setNewFiles([]);
                    }} className="p-2 text-[#bf00ff] hover:bg-[#bf00ff] hover:text-black transition-colors"><Edit3 size={16}/></button>
                    <button onClick={() => deleteChallenge(c.id)} className="p-2 text-[#ff0000] hover:bg-[#ff0000] hover:text-black transition-colors"><Trash2 size={16}/></button>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>

        <div className="space-y-12">
          {/* Operators */}
          <section className="space-y-6">
            <h3 className="text-2xl font-black italic text-[#bf00ff] uppercase flex items-center gap-2 border-b-2 border-[#bf00ff] pb-2"><Users size={20}/> OPERATORS</h3>
            <div className="hxp-border border-2 overflow-hidden">
              <table className="w-full text-left">
                <thead className="bg-[#333] text-[10px] font-black uppercase">
                  <tr>
                    <th className="p-3">NAME</th>
                    <th className="p-3">STATUS</th>
                    <th className="p-3 text-right">ACTIONS</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/10 text-xs font-bold">
                  {/* Show everyone except root admin */}
                  {state.teams.filter(t => t.id !== 'admin-0').map(team => (
                    <tr key={team.id} className="hover:bg-white/5">
                      <td className="p-3 text-white italic">{team.name}</td>
                      <td className="p-3">
                        <div className="flex flex-col gap-1">
                          <span className={team.isDisabled ? 'text-red-500' : 'text-[#00ff00]'}>
                            {team.isDisabled ? 'DISABLED' : 'ACTIVE'}
                          </span>
                          {team.isAdmin ? (
                            <span className="text-[#ffaa00] text-[8px] border border-[#ffaa00]/30 px-1 inline-block w-fit uppercase">ADMIN PRIVILEGES</span>
                          ) : (
                            <span className="text-slate-500 text-[8px] border border-slate-500/30 px-1 inline-block w-fit uppercase">NORMAL OPERATOR</span>
                          )}
                        </div>
                      </td>
                      <td className="p-3 text-right">
                        <div className="flex justify-end gap-2">
                          {/* Admin Toggle */}
                          <button 
                            onClick={() => updateTeam(team.id, team.name, !!team.isDisabled, !team.isAdmin)} 
                            className={`p-1 transition-colors ${team.isAdmin ? 'text-[#ffaa00] hover:text-white' : 'text-slate-600 hover:text-[#ffaa00]'}`}
                            title={team.isAdmin ? "Demote from Admin" : "Promote to Admin"}
                          >
                            <Shield size={16} />
                          </button>
                          
                          <button onClick={() => setEditingTeam(team)} className="p-1 hover:text-white transition-colors"><Edit3 size={16}/></button>
                          <button onClick={() => updateTeam(team.id, team.name, !team.isDisabled, !!team.isAdmin)} className="p-1 hover:text-white transition-colors" title={team.isDisabled ? "Enable Operator" : "Disable Operator"}>
                            {team.isDisabled ? <ShieldCheck size={16} /> : <ShieldAlert size={16} />}
                          </button>
                          <button onClick={() => deleteTeam(team.id)} className="p-1 text-[#ff0000] hover:text-white transition-colors" title="Delete Operator"><Trash2 size={16}/></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          {/* Blogs */}
          <section className="space-y-6">
            <div className="flex justify-between items-center border-b-2 border-[#ff0000] pb-2">
              <h3 className="text-2xl font-black italic text-[#ff0000] uppercase flex items-center gap-2"><Newspaper size={20}/> BLOG_BROADCASTS</h3>
              <Button onClick={() => setEditingBlogPost({ title: '', content: '' })} className="flex items-center gap-2 text-xs">
                <Plus size={14}/> NEW_POST
              </Button>
            </div>
            <div className="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
              {state.blogs.map(post => (
                <div key={post.id} className="hxp-border p-4 bg-white/5 flex justify-between items-center">
                  <div>
                    <h4 className="font-black text-white uppercase">{post.title}</h4>
                    <p className="text-[10px] text-slate-500 font-mono uppercase">{new Date(post.timestamp).toLocaleString()}</p>
                  </div>
                  <div className="flex gap-2">
                    <button onClick={() => setEditingBlogPost(post)} className="p-2 text-[#bf00ff] hover:bg-[#bf00ff] hover:text-black transition-colors"><Edit3 size={16}/></button>
                    <button onClick={() => deleteBlogPost(post.id)} className="p-2 text-[#ff0000] hover:bg-[#ff0000] hover:text-black transition-colors"><Trash2 size={16}/></button>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>

      {editingChallenge && (
        <div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
          <div className="hxp-border border-4 max-w-2xl w-full bg-black p-8 relative overflow-y-auto max-h-[90vh] custom-scrollbar">
            <button onClick={() => setEditingChallenge(null)} className="absolute top-4 right-4 text-white hover:text-[#ff0000]"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">MANAGE_CHALLENGE</h3>
            <form onSubmit={handleChallengeSubmit} className="space-y-4">
              <input placeholder="TITLE" className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.title || ''} onChange={e => setEditingChallenge({...editingChallenge, title: e.target.value})} required />
              <div className="grid grid-cols-3 gap-4">
                <select className="bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.category || 'WEB'} onChange={e => setEditingChallenge({...editingChallenge, category: e.target.value})}>
                  {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <select className="bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.difficulty || 'Low'} onChange={e => setEditingChallenge({...editingChallenge, difficulty: e.target.value as Difficulty})}>
                  {DIFFICULTIES.map(d => <option key={d} value={d}>{d}</option>)}
                </select>
                <input type="number" placeholder="POINTS" className="bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.initialPoints || ''} onChange={e => setEditingChallenge({...editingChallenge, initialPoints: parseInt(e.target.value)})} />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-500 uppercase">Challenge Port</label>
                  <input type="number" placeholder="1337" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.port || ''} onChange={e => setEditingChallenge({...editingChallenge, port: parseInt(e.target.value)})} />
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-500 uppercase">Conn Protocol</label>
                  <select className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.connectionType || 'nc'} onChange={e => setEditingChallenge({...editingChallenge, connectionType: e.target.value as 'nc' | 'http'})}>
                    <option value="nc">Netcat (nc)</option>
                    <option value="http">HTTP/HTTPS</option>
                  </select>
                </div>
              </div>

              <input placeholder="FLAG" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.flag || ''} onChange={e => setEditingChallenge({...editingChallenge, flag: e.target.value})} required />
              <textarea placeholder="DESCRIPTION" className="w-full bg-black hxp-border-purple p-3 text-white font-black h-32" value={editingChallenge.description || ''} onChange={e => setEditingChallenge({...editingChallenge, description: e.target.value})} />
              
              <div className="space-y-2">
                <label className="block text-[10px] font-black text-slate-500 uppercase tracking-widest">Manage Files</label>
                {currentFiles.map((file, idx) => (
                  <div key={idx} className="flex items-center gap-2 p-2 bg-white/5 border border-white/10">
                    <Paperclip size={14} className="text-[#bf00ff]" />
                    <span className="text-xs flex-1 truncate">{file.name}</span>
                    <button type="button" onClick={() => removeExistingFile(idx)} className="text-red-500 hover:text-white"><Trash2 size={14}/></button>
                  </div>
                ))}
                <input type="file" multiple onChange={e => e.target.files && setNewFiles(Array.from(e.target.files))} className="w-full bg-black hxp-border-purple p-3 text-white text-xs" />
              </div>

              <Button type="submit" className="w-full py-4 uppercase">Save Challenge</Button>
            </form>
          </div>
        </div>
      )}

      {editingTeam && (
        <div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
          <div className="hxp-border border-4 max-w-md w-full bg-black p-8 relative">
            <button onClick={() => setEditingTeam(null)} className="absolute top-4 right-4 text-white hover:text-[#ff0000]"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">UPDATE_OPERATOR</h3>
            <form onSubmit={handleTeamUpdate} className="space-y-4">
              <label className="block">
                <span className="text-[10px] font-black text-slate-500 uppercase mb-2 block">Operator Name</span>
                <input className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingTeam.name || ''} onChange={e => setEditingTeam({...editingTeam, name: e.target.value})} required />
              </label>
              <label className="block">
                <span className="text-[10px] font-black text-slate-500 uppercase mb-2 block">New Access Key (Optional)</span>
                <input type="password" placeholder="LEAVE BLANK TO UNCHANGE" className="w-full bg-black hxp-border-purple p-3 text-white font-black" onChange={e => setEditingTeam({...editingTeam, newPassword: e.target.value})} />
              </label>
              
              <div className="flex gap-8 py-2">
                <label className="flex items-center gap-2 cursor-pointer group">
                  <input type="checkbox" className="hidden" checked={!!editingTeam.isAdmin} onChange={e => setEditingTeam({...editingTeam, isAdmin: e.target.checked})} />
                  <div className={`w-5 h-5 border-2 flex items-center justify-center transition-colors ${editingTeam.isAdmin ? 'border-[#ffaa00] bg-[#ffaa00]' : 'border-slate-600'}`}>
                    {editingTeam.isAdmin && <Shield size={12} className="text-black" />}
                  </div>
                  <span className={`text-[10px] font-black uppercase ${editingTeam.isAdmin ? 'text-[#ffaa00]' : 'text-slate-500'}`}>Admin Role</span>
                </label>

                <label className="flex items-center gap-2 cursor-pointer group">
                  <input type="checkbox" className="hidden" checked={!!editingTeam.isDisabled} onChange={e => setEditingTeam({...editingTeam, isDisabled: e.target.checked})} />
                  <div className={`w-5 h-5 border-2 flex items-center justify-center transition-colors ${editingTeam.isDisabled ? 'border-[#ff0000] bg-[#ff0000]' : 'border-slate-600'}`}>
                    {editingTeam.isDisabled && <X size={12} className="text-black" />}
                  </div>
                  <span className={`text-[10px] font-black uppercase ${editingTeam.isDisabled ? 'text-[#ff0000]' : 'text-slate-500'}`}>Disabled</span>
                </label>
              </div>

              <Button type="submit" className="w-full py-4 uppercase">Commit Identity Changes</Button>
            </form>
          </div>
        </div>
      )}

      {editingBlogPost && (
        <div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
          <div className="hxp-border border-4 max-w-2xl w-full bg-black p-8 relative">
            <button onClick={() => setEditingBlogPost(null)} className="absolute top-4 right-4 text-white hover:text-[#ff0000]"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">BLOG_PROTOCOL</h3>
            <form onSubmit={handleBlogSubmit} className="space-y-4">
              <input placeholder="HEADLINE" className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingBlogPost.title || ''} onChange={e => setEditingBlogPost({...editingBlogPost, title: e.target.value})} required />
              <textarea placeholder="CONTENT" className="w-full bg-black hxp-border-purple p-3 text-white font-black h-48" value={editingBlogPost.content || ''} onChange={e => setEditingBlogPost({...editingBlogPost, content: e.target.value})} required />
              <Button type="submit" className="w-full py-4 uppercase">Publish Broadcast</Button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

const App: React.FC = () => {
  const [state, setState] = useState<CTFState>({
    isStarted: false,
    startTime: null,
    teams: [],
    challenges: [],
    solves: [],
    blogs: [],
    config: {}
  });
  const [currentUser, setCurrentUser] = useState<Team | null>(null);
  const [loading, setLoading] = useState(true);
  const [showProfileModal, setShowProfileModal] = useState(false);

  const refreshState = async () => {
    try {
      const newState = await api.getState();
      setState(newState);
    } catch (err) {
      console.error("Failed to fetch state", err);
    }
  };

  useEffect(() => {
    const init = async () => {
      const session = localStorage.getItem('hip6_session');
      if (session) {
        try {
          const { team } = JSON.parse(session);
          setCurrentUser(team);
        } catch (e) {}
      }
      await refreshState();
      setLoading(false);
    };
    init();
    const interval = setInterval(refreshState, 30000);
    return () => clearInterval(interval);
  }, []);

  const login = async (name: string, pass: string) => {
    try {
      const { team, token } = await api.login(name, pass);
      localStorage.setItem('hip6_session', JSON.stringify({ team, token }));
      setCurrentUser(team);
      await refreshState();
      return true;
    } catch (err) { return false; }
  };

  const register = async (name: string, pass: string) => {
    const { team, token } = await api.register(name, pass);
    localStorage.setItem('hip6_session', JSON.stringify({ team, token }));
    setCurrentUser(team);
    await refreshState();
  };

  const logout = () => {
    localStorage.removeItem('hip6_session');
    setCurrentUser(null);
  };

  const submitFlag = async (challengeId: string, flag: string) => {
    const res = await api.submitFlag(challengeId, flag);
    if (res.success) { await refreshState(); return true; }
    return false;
  };

  const toggleCtf = async () => { await api.toggleCtf(); await refreshState(); };
  const upsertChallenge = async (data: FormData, id?: string) => { await api.upsertChallenge(data, id); await refreshState(); };
  const deleteChallenge = async (id: string) => { await api.deleteChallenge(id); await refreshState(); };
  const updateTeam = async (id: string, name: string, isDisabled: boolean, isAdmin: boolean, password?: string) => { await api.updateTeam(id, { name, isDisabled, isAdmin, password }); await refreshState(); };
  const updateProfile = async (password?: string) => { await api.updateProfile({ password }); await refreshState(); };
  const deleteTeam = async (id: string) => { await api.deleteTeam(id); await refreshState(); };
  const createBlogPost = async (data: {title: string, content: string}) => { await api.createBlogPost(data); await refreshState(); };
  const updateBlogPost = async (id: string, data: {title: string, content: string}) => { await api.updateBlogPost(id, data); await refreshState(); };
  const deleteBlogPost = async (id: string) => { await api.deleteBlogPost(id); await refreshState(); };
  const updateConfig = async (formData: FormData) => { await api.updateConfig(formData); await refreshState(); };

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

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

  return (
    <CTFContext.Provider value={{
      state, currentUser, login, register, logout, submitFlag, 
      toggleCtf, upsertChallenge, deleteChallenge, updateTeam, updateProfile, deleteTeam, 
      createBlogPost, updateBlogPost, deleteBlogPost, updateConfig, refreshState
    }}>
      <HashRouter>
        <div style={bgStyles} className="min-h-screen text-white font-mono selection:bg-[#ff0000] selection:text-black relative overflow-x-hidden">
          
          {/* Background Layer */}
          {state.config.bgType === 'image' && state.config.bgImageUrl && (
            <div 
              className="fixed inset-0 pointer-events-none z-0" 
              style={{ 
                backgroundImage: `url(${state.config.bgImageUrl})`, 
                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 flex justify-between items-center sticky top-0 bg-black/80 backdrop-blur-md z-[100]">
            <Link to="/" className="flex items-center gap-3 group">
              {state.config.logoUrl ? (
                <img src={state.config.logoUrl} alt="Logo" className="w-8 h-8 object-contain" />
              ) : (
                <Terminal className="w-8 h-8 text-[#ff0000]" />
              )}
              <span className="text-2xl font-black italic tracking-tighter group-hover:text-[#ff0000] transition-colors uppercase">
                {state.config.conferenceName}
              </span>
            </Link>
            <div className="hidden md:flex items-center gap-8 text-xs font-black tracking-widest uppercase">
              <Link to="/challenges" className="hover:text-[#bf00ff] transition-colors flex items-center gap-2"><Flag size={14}/> Challenges</Link>
              <Link to="/blog" className="hover:text-[#bf00ff] transition-colors flex items-center gap-2"><Newspaper size={14}/> Blog</Link>
              <Link to="/scoreboard" className="hover:text-[#bf00ff] transition-colors flex items-center gap-2"><Trophy size={14}/> Scoreboard</Link>
              {currentUser?.isAdmin && (
                <Link to="/admin" className="text-[#ff0000] hover:text-white transition-colors flex items-center gap-2"><Shield size={14}/> Admin</Link>
              )}
            </div>
            <div className="flex items-center gap-4">
              {currentUser ? (
                <div className="flex items-center gap-4">
                  <div className="text-right hidden sm:block">
                    <p className="text-[10px] text-slate-500 font-bold leading-none uppercase">OPERATOR</p>
                    <p className="text-sm font-black italic">{currentUser.name}</p>
                  </div>
                  <button onClick={() => setShowProfileModal(true)} title="Profile Settings" className="p-2 border-2 border-[#bf00ff] text-[#bf00ff] hover:bg-[#bf00ff] hover:text-black transition-all">
                    <Settings size={20} />
                  </button>
                  <button onClick={logout} title="Sign Out" className="p-2 border-2 border-[#ff0000] text-[#ff0000] hover:bg-[#ff0000] hover:text-black transition-all">
                    <LogOut size={20} />
                  </button>
                </div>
              ) : (
                <Link to="/login">
                  <Button variant="secondary" className="flex items-center gap-2 text-xs">
                    <LogIn size={16} /> SIGN_IN
                  </Button>
                </Link>
              )}
            </div>
          </nav>

          <main className="relative z-10">
            <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={<Scoreboard />} />
              <Route path="/matrix" element={<ScoreMatrix />} />
              <Route path="/admin" element={<ProtectedRoute>{currentUser?.isAdmin ? <Admin /> : <Navigate to="/" />}</ProtectedRoute>} />
              <Route path="*" element={<Navigate to="/" />} />
            </Routes>
          </main>
          
          {showProfileModal && <ProfileSettingsModal onClose={() => setShowProfileModal(false)} />}
        </div>
      </HashRouter>
    </CTFContext.Provider>
  );
};

export default App;