import React, { useState, useEffect, useRef, useMemo } from 'react';
import { X, Edit3, Trash2, Shield, ShieldCheck, ShieldAlert, Skull, Newspaper, Download, Upload, Database, Save, History, Plus, Globe, User, ShieldX, UserMinus, UserCheck, Medal, CheckCircle2, Settings, Flag, Wrench, LayoutGrid, RefreshCw } from 'lucide-react';
import { useCTF } from './CTFContext';
import { Challenge, Team, BlogPost, Difficulty, ChallengeFile } from './types';
import { Button, Countdown, CategoryIcon } from './UIComponents';
import { CATEGORIES, DIFFICULTIES } from './constants';
import { calculateChallengeValue, getFirstBloodBonusFactor } from './services/scoring';

type AdminTab = 'GENERAL' | 'CHALLENGES' | 'BLOG' | 'PLAYERS' | 'TOOLS';

export const Admin: React.FC = () => {
  const { state, toggleCtf, resetScores, upsertChallenge, deleteChallenge, deleteAllChallenges, updateTeam, deleteTeam, deleteSolve, createBlogPost, updateBlogPost, deleteBlogPost, updateConfig, exportChallenges, importChallenges, backupDatabase, restoreDatabase, refreshState } = useCTF();
  
  const [activeTab, setActiveTab] = useState<AdminTab>('GENERAL');
  const [editingChallenge, setEditingChallenge] = useState<Partial<Challenge> | null>(null);
  const [editingTeam, setEditingTeam] = useState<Partial<Team> & { newPassword?: string } | null>(null);
  const [editingBlogPost, setEditingBlogPost] = useState<Partial<BlogPost> | null>(null);
  const [newFiles, setNewFiles] = useState<File[]>([]);
  const [currentFiles, setCurrentFiles] = useState<ChallengeFile[]>([]);
  const [localConf, setLocalConf] = useState<Record<string, string>>({});
  const initialLoadDone = useRef(false);

  // Sorted data for display
  const sortedChallenges = useMemo(() => {
    return [...state.challenges].sort((a, b) => a.title.localeCompare(b.title));
  }, [state.challenges]);

  const sortedUsers = useMemo(() => {
    return [...state.teams]
      .filter(t => t.id !== 'admin-0')
      .sort((a, b) => (a.name || '').localeCompare(b.name || '', undefined, { sensitivity: 'base' }));
  }, [state.teams]);

  useEffect(() => {
    if (Object.keys(state.config).length > 0 && !initialLoadDone.current) {
      setLocalConf({ ...state.config });
      initialLoadDone.current = true;
    }
  }, [state.config]);

  const importChalRef = useRef<HTMLInputElement>(null);
  const restoreDbRef = useRef<HTMLInputElement>(null);

  const handleConfigSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const fd = new FormData();
    Object.entries(localConf).forEach(([k, v]) => {
      if (v !== undefined && v !== null && v !== 'NaN') fd.append(k, String(v));
    });
    const logoInput = (e.target as any).logo;
    const bgInput = (e.target as any).bgImage;
    if (logoInput && logoInput.files[0]) fd.append('logo', logoInput.files[0]);
    if (bgInput && bgInput.files[0]) fd.append('bgImage', bgInput.files[0]);
    try {
      await updateConfig(fd);
      await refreshState();
      initialLoadDone.current = false;
      alert('CONFIGURATION_SAVED_SUCCESSFULLY');
    } catch (err) { alert('SAVE_FAILED_CHECK_CONSOLE'); }
  };

  const toUTCDisplay = (msStr: string) => {
    if (!msStr || msStr === 'undefined' || msStr === 'NaN') return "";
    const ms = parseInt(msStr);
    if (isNaN(ms)) return "";
    const d = new Date(ms);
    return d.toISOString().slice(0, 16);
  };

  const fromUTCDisplay = (isoStr: string) => {
    if (!isoStr) return "";
    const d = new Date(isoStr + ":00Z");
    const ms = d.getTime();
    return isNaN(ms) ? "" : ms.toString();
  };

  const eventStartTime = parseInt(state.config.eventStartTime || "0");
  const isBeforeStart = Date.now() < eventStartTime;

  const handleDifficultyChange = (val: Difficulty) => {
    if (!editingChallenge) return;
    const points = val === 'Low' ? 100 : val === 'Medium' ? 200 : 300;
    setEditingChallenge({
      ...editingChallenge,
      difficulty: val,
      initialPoints: points,
      minimumPoints: Math.floor(points / 2)
    });
  };

  const handleInitialPointsChange = (p: number) => {
    if (!editingChallenge) return;
    setEditingChallenge({
      ...editingChallenge,
      initialPoints: p,
      minimumPoints: Math.floor(p / 2)
    });
  };

  const quickToggleAdmin = async (team: Team) => {
    if (team.id === 'admin-0') return;
    await updateTeam(team.id, { ...team, isAdmin: !team.isAdmin });
  };

  const quickToggleStatus = async (team: Team) => {
    if (team.id === 'admin-0') return;
    await updateTeam(team.id, { ...team, isDisabled: !team.isDisabled });
  };

  const menuItems: { id: AdminTab; label: string; icon: React.ReactNode }[] = [
    { id: 'GENERAL', label: 'General', icon: <Settings size={18} /> },
    { id: 'CHALLENGES', label: 'Challenges', icon: <Flag size={18} /> },
    { id: 'BLOG', label: 'Blog', icon: <Newspaper size={18} /> },
    { id: 'PLAYERS', label: 'Players', icon: <User size={18} /> },
    { id: 'TOOLS', label: 'Tools', icon: <Wrench size={18} /> },
  ];

  return (
    <div className="max-w-[1400px] mx-auto py-12 px-6">
      <div className="flex flex-col lg:flex-row gap-12">
        {/* Sidebar */}
        <aside className="w-full lg:w-64 shrink-0">
          <div className="sticky top-24 space-y-2">
            <div className="mb-8 border-b-4 border-[#ff0000] pb-4">
              <h2 className="text-3xl font-black italic text-white uppercase tracking-tighter">ADMIN</h2>
            </div>
            {menuItems.map((item) => (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id)}
                className={`w-full flex items-center gap-4 px-6 py-4 font-black uppercase tracking-widest text-sm transition-all border-l-4 ${
                  activeTab === item.id 
                    ? 'bg-[#ff0000] text-black border-[#ff0000] shadow-[4px_0_15px_rgba(255,0,0,0.2)]' 
                    : 'bg-white/5 text-slate-400 border-transparent hover:bg-white/10 hover:text-white'
                }`}
              >
                {item.icon}
                {item.label}
              </button>
            ))}
            
            <div className="mt-12 pt-8 border-t border-white/10">
              <div className="flex flex-col gap-4">
                {isBeforeStart && (
                  <div className="px-4 py-2 hxp-border-purple bg-[#bf00ff]/10 flex items-center gap-3">
                    <Countdown target={eventStartTime} label="START" />
                  </div>
                )}
                <Button 
                  onClick={toggleCtf} 
                  variant={state.isStarted ? 'secondary' : 'primary'}
                  className="w-full py-3"
                >
                  {state.isStarted ? 'PAUSE BOARD' : 'RESUME BOARD'}
                </Button>
              </div>
            </div>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 min-w-0">
          {activeTab === 'GENERAL' && (
            <section className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
              <div className="flex items-center gap-4 border-b-2 border-[#ffaa00] pb-2">
                <Settings className="text-[#ffaa00]" />
                <h3 className="text-2xl font-black text-white uppercase italic">GENERAL_CONFIG</h3>
              </div>
              <form onSubmit={handleConfigSubmit} className="hxp-border p-8 bg-black space-y-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="space-y-6">
                    <div className="space-y-1">
                      <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Competition Name</label>
                      <input placeholder="Ex: HIPCTF '26" className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.conferenceName || ''} onChange={e => setLocalConf({...localConf, conferenceName: e.target.value})} />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Event Start (UTC)</label>
                        <input type="datetime-local" className="w-full bg-black hxp-border p-3 text-white font-black text-xs" value={toUTCDisplay(localConf.eventStartTime || "")} onChange={e => { const val = fromUTCDisplay(e.target.value); if (val) setLocalConf({...localConf, eventStartTime: val}); }} />
                      </div>
                      <div>
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Event End (UTC)</label>
                        <input type="datetime-local" className="w-full bg-black hxp-border p-3 text-white font-black text-xs" value={toUTCDisplay(localConf.eventEndTime || "")} onChange={e => { const val = fromUTCDisplay(e.target.value); if (val) setLocalConf({...localConf, eventEndTime: val}); }} />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Central Node IP</label>
                      <input placeholder="Ex: 10.0.0.5" className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.dockerIp || ''} onChange={e => setLocalConf({...localConf, dockerIp: e.target.value})} />
                    </div>
                  </div>
                  <div className="space-y-6">
                    <div className="space-y-1">
                      <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Landing Page Text</label>
                      <textarea placeholder="Welcome message..." className="w-full bg-black hxp-border p-3 text-white font-black h-40" value={localConf.landingText || ''} onChange={e => setLocalConf({...localConf, landingText: e.target.value})} />
                    </div>
                  </div>
                </div>

                <div className="border-t-2 border-[#333] pt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="space-y-6">
                    <h4 className="text-sm font-black text-[#bf00ff] italic uppercase tracking-tighter">Visual Branding</h4>
                    <div className="space-y-4">
                      <div className="space-y-1">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Custom Logo</label>
                        <input type="file" name="logo" className="text-xs block w-full bg-black hxp-border p-2" />
                      </div>
                      <div className="space-y-1">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Type</label>
                        <select className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.bgType || 'color'} onChange={e => setLocalConf({...localConf, bgType: e.target.value})}>
                          <option value="color">SOLID_COLOR</option>
                          <option value="image">IMAGE_DATA</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-6">
                    <h4 className="text-sm font-black text-transparent italic uppercase tracking-tighter">.</h4>
                    {localConf.bgType === 'color' ? (
                      <div className="space-y-1">
                        <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Color</label>
                        <input type="color" className="w-full bg-black hxp-border p-1 h-12" value={localConf.bgColor || '#000000'} onChange={e => setLocalConf({...localConf, bgColor: e.target.value})} />
                      </div>
                    ) : (
                      <div className="space-y-4">
                        <div className="space-y-1">
                          <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Background Image</label>
                          <input type="file" name="bgImage" className="text-xs block w-full bg-black hxp-border p-2" />
                        </div>
                        <div className="space-y-1">
                          <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest flex justify-between">Opacity <span>{localConf.bgOpacity}</span></label>
                          <input type="range" min="0" max="1" step="0.1" className="w-full accent-[#bf00ff]" value={localConf.bgOpacity || '0.5'} onChange={e => setLocalConf({...localConf, bgOpacity: e.target.value})} />
                        </div>
                      </div>
                    )}
                  </div>
                </div>
                <Button type="submit" className="w-full py-4 text-xl">SAVE ALL CHANGES</Button>
              </form>
            </section>
          )}

          {activeTab === 'CHALLENGES' && (
            <section className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
              <div className="flex justify-between items-center border-b-2 border-[#bf00ff] pb-2">
                <div className="flex items-center gap-4">
                  <Flag className="text-[#bf00ff]" />
                  <h3 className="text-2xl font-black text-white uppercase italic">CHALLENGES</h3>
                </div>
                <Button onClick={() => { setEditingChallenge({ title: '', category: 'WEB', difficulty: 'Low', initialPoints: 100, minimumPoints: 50, decaySolves: 20, flag: '', description: '', files: [], port: 0, connectionType: 'nc', overrideIp: '' }); setCurrentFiles([]); setNewFiles([]); }} className="py-2 px-6">ADD_CHALLENGE</Button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {sortedChallenges.map(c => {
                  const diffColor = c.difficulty === 'Low' ? 'text-[#00ff00]' : c.difficulty === 'Medium' ? 'text-[#ffaa00]' : 'text-[#ff0000]';
                  return (
                    <div key={c.id} className="hxp-border-purple p-4 flex justify-between items-center bg-black hover:bg-white/5 transition-colors gap-4">
                      <div className="flex items-center gap-4 min-w-0 flex-1">
                        <div className="shrink-0 p-2 bg-white/5 hxp-border">
                          <CategoryIcon category={c.category} size={20} />
                        </div>
                        <div className="flex flex-col min-w-0">
                          <span className="font-black text-white uppercase italic truncate">{c.title}</span>
                          <div className="flex items-center gap-3 mt-1">
                            <span className={`text-[9px] font-black uppercase ${diffColor}`}>{c.difficulty}</span>
                            <span className="text-[9px] font-black uppercase text-[#00ccff]">
                              {c.connectionType || 'nc'}{c.port && c.port > 0 ? `:${c.port}` : ''}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="flex gap-4 shrink-0">
                        <button onClick={() => { setEditingChallenge(c); setCurrentFiles(c.files || []); setNewFiles([]); }} className="text-[#bf00ff] hover:text-white transition-colors"><Edit3 size={18}/></button>
                        <button onClick={() => { if(window.confirm(`DELETE CHALLENGE "${c.title}"?`)) deleteChallenge(c.id); }} className="text-red-500 hover:text-white transition-colors"><Trash2 size={18}/></button>
                      </div>
                    </div>
                  );
                })}
              </div>
              {sortedChallenges.length === 0 && (
                <div className="py-20 text-center bg-black hxp-border border-dashed border-slate-800">
                  <Flag size={48} className="mx-auto text-slate-800 mb-4" />
                  <p className="text-slate-700 font-black italic uppercase tracking-widest text-sm">No active challenges detected.</p>
                </div>
              )}
            </section>
          )}

          {activeTab === 'BLOG' && (
            <section className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
              <div className="flex justify-between items-center border-b-2 border-[#00ccff] pb-2">
                <div className="flex items-center gap-4">
                  <Newspaper className="text-[#00ccff]" />
                  <h3 className="text-2xl font-black text-white uppercase italic">BROADCASTS</h3>
                </div>
                <Button onClick={() => setEditingBlogPost({ title: '', content: '' })} className="py-2 px-6">NEW_BROADCAST</Button>
              </div>
              <div className="space-y-4">
                {state.blogs.map(post => (
                  <div key={post.id} className="hxp-border border-[#00ccff] p-6 bg-black flex justify-between items-center group">
                    <div className="space-y-1">
                      <h4 className="text-xl font-black text-white uppercase italic group-hover:text-[#00ccff] transition-colors">{post.title}</h4>
                      <p className="text-xs text-slate-500 font-bold uppercase tracking-widest">{new Date(post.timestamp).toLocaleString()}</p>
                    </div>
                    <div className="flex gap-6">
                      <button onClick={() => setEditingBlogPost(post)} className="text-[#00ccff] hover:text-white transition-colors"><Edit3 size={20}/></button>
                      <button onClick={() => deleteBlogPost(post.id)} className="text-red-500 hover:text-white transition-colors"><Trash2 size={20}/></button>
                    </div>
                  </div>
                ))}
                {state.blogs.length === 0 && (
                  <div className="py-20 text-center bg-black hxp-border border-dashed border-slate-800">
                    <Newspaper size={48} className="mx-auto text-slate-800 mb-4" />
                    <p className="text-slate-700 font-black italic uppercase tracking-widest text-sm">No broadcasts issued yet.</p>
                  </div>
                )}
              </div>
            </section>
          )}

          {activeTab === 'PLAYERS' && (
            <section className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
              <div className="flex items-center gap-4 border-b-2 border-[#bf00ff] pb-2">
                <User className="text-[#bf00ff]" />
                <h3 className="text-2xl font-black text-white uppercase italic">PLAYER_MANAGEMENT</h3>
              </div>
              <div className="hxp-border border-2 overflow-hidden bg-black">
                <table className="w-full text-xs font-black">
                  <thead className="bg-[#333] uppercase">
                    <tr>
                      <th className="p-4 text-left">PLAYER_IDENTIFIER</th>
                      <th className="p-4 text-center">ROLE</th>
                      <th className="p-4 text-center">STATUS</th>
                      <th className="p-4 text-right">ACTIONS</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-white/10 italic">
                    {sortedUsers.map(team => (
                      <tr key={team.id} className="hover:bg-white/5 transition-colors group">
                        <td className="p-4 text-white text-base">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 bg-[#bf00ff]/10 flex items-center justify-center hxp-border">
                              <User size={16} className="text-[#bf00ff]" />
                            </div>
                            {team.name}
                          </div>
                        </td>
                        <td className="p-4 text-center">
                          <button 
                            onClick={() => quickToggleAdmin(team)}
                            className={`flex items-center gap-2 mx-auto px-4 py-2 border-2 transition-all font-black text-[10px] uppercase ${team.isAdmin ? 'border-[#ffaa00] text-[#ffaa00] bg-[#ffaa00]/10' : 'border-slate-800 text-slate-500 hover:border-[#bf00ff] hover:text-[#bf00ff]'}`}
                          >
                            {team.isAdmin ? <ShieldCheck size={14} /> : <Shield size={14} />}
                            <span>{team.isAdmin ? 'ADMIN' : 'USER'}</span>
                          </button>
                        </td>
                        <td className="p-4 text-center">
                          <button 
                            onClick={() => quickToggleStatus(team)}
                            className={`flex items-center gap-2 mx-auto px-4 py-2 border-2 transition-all font-black text-[10px] uppercase ${team.isDisabled ? 'border-red-500 text-red-500 bg-red-500/10' : 'border-slate-800 text-[#00ff00] hover:bg-[#00ff00]/5'}`}
                          >
                            {team.isDisabled ? <UserMinus size={14} /> : <UserCheck size={14} />}
                            <span>{team.isDisabled ? 'BANNED' : 'ACTIVE'}</span>
                          </button>
                        </td>
                        <td className="p-4 text-right">
                          <div className="flex justify-end gap-6 opacity-40 group-hover:opacity-100 transition-opacity">
                             <button onClick={() => setEditingTeam(team)} className="text-[#bf00ff] hover:text-white transition-colors" title="Full Edit"><Edit3 size={20} /></button>
                             <button onClick={() => { if(window.confirm(`WIPE IDENTITY "${team.name}"?`)) deleteTeam(team.id); }} className="text-red-500 hover:text-white transition-colors" title="Delete Identity"><Trash2 size={20} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                {sortedUsers.length === 0 && (
                  <div className="py-20 text-center bg-black">
                    <User size={48} className="mx-auto text-slate-800 mb-4" />
                    <p className="text-slate-700 font-black italic uppercase tracking-widest text-sm">No player records found.</p>
                  </div>
                )}
              </div>
            </section>
          )}

          {activeTab === 'TOOLS' && (
            <section className="space-y-12 animate-in fade-in slide-in-from-right-4 duration-300">
              {/* Backup & Restore */}
              <div className="space-y-8">
                <div className="flex items-center gap-4 border-b-2 border-[#00ff00] pb-2">
                  <Database className="text-[#00ff00]" />
                  <h3 className="text-2xl font-black text-white uppercase italic">SYSTEM_TOOLS</h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="hxp-border p-8 bg-black space-y-6">
                    <h4 className="text-xl font-black italic text-white uppercase flex items-center gap-2"><Flag size={20} className="text-[#bf00ff]" /> Challenges Data</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <Button onClick={async () => {
                        const data = await exportChallenges();
                        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a'); a.href = url; a.download = `challenges-${Date.now()}.json`; a.click();
                      }} className="py-4">EXPORT</Button>
                      <Button onClick={() => importChalRef.current?.click()} className="py-4" variant="secondary">IMPORT</Button>
                      <input type="file" ref={importChalRef} className="hidden" accept=".json" onChange={async e => { if (e.target.files?.[0]) { await importChallenges(e.target.files[0]); alert('CHALLENGES_IMPORTED'); } }} />
                    </div>
                  </div>
                  <div className="hxp-border p-8 bg-black space-y-6">
                    <h4 className="text-xl font-black italic text-white uppercase flex items-center gap-2"><Database size={20} className="text-[#ffaa00]" /> Full DB Backup</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <Button onClick={async () => {
                        const data = await backupDatabase();
                        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a'); a.href = url; a.download = `ctf_backup-${Date.now()}.json`; a.click();
                      }} className="py-4 border-[#ffaa00] text-[#ffaa00] hover:bg-[#ffaa00] hover:text-black">BACKUP</Button>
                      <Button onClick={() => restoreDbRef.current?.click()} className="py-4 border-[#00ff00] text-[#00ff00] hover:bg-[#00ff00] hover:text-black" variant="secondary">RESTORE</Button>
                      <input type="file" ref={restoreDbRef} className="hidden" accept=".json" onChange={async e => { if (e.target.files?.[0] && window.confirm("CRITICAL_OVERWRITE: RESTORE WILL WIPE CURRENT DATA. PROCEED?")) { await restoreDatabase(e.target.files[0]); window.location.reload(); } }} />
                    </div>
                  </div>
                </div>
              </div>

              {/* Danger Zone */}
              <div className="space-y-8">
                <div className="flex items-center gap-4 border-b-2 border-[#ff0000] pb-2">
                  <Skull className="text-[#ff0000]" />
                  <h3 className="text-2xl font-black text-white uppercase italic">DANGER_ZONE</h3>
                </div>
                <div className="hxp-border border-[#ff0000] bg-red-900/10 p-8 flex flex-col md:flex-row gap-6">
                  <div className="flex-1">
                    <h4 className="text-xl font-black text-white italic mb-2">IRREVERSIBLE_ACTIONS</h4>
                    <p className="text-sm text-red-500 font-bold uppercase tracking-widest opacity-70">Exercise extreme caution. These actions cannot be undone.</p>
                  </div>
                  <div className="flex flex-col gap-4 min-w-[300px]">
                    <Button onClick={() => { if(window.confirm("RESET_ALL_SOLVES_AND_SCORES?")) resetScores(); }} className="w-full py-4 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">RESET_ALL_SCORES</Button>
                    <Button onClick={() => { if(window.confirm("PURGE_ENTIRE_CHALLENGE_DATABASE?")) deleteAllChallenges(); }} className="w-full py-4 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">WIPE_ALL_CHALLENGES</Button>
                  </div>
                </div>
              </div>
            </section>
          )}
        </main>
      </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 overflow-y-auto max-h-[90vh] custom-scrollbar relative">
            <button onClick={() => setEditingChallenge(null)} className="absolute top-4 right-4 text-white hover:text-red-500 transition-colors"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">MANAGE_CHALLENGE</h3>
            <form onSubmit={async e => { 
              e.preventDefault(); 
              const fd = new FormData(); 
              Object.entries(editingChallenge).forEach(([k,v]) => { if (v !== null && v !== undefined && typeof v !== 'object') fd.append(k, String(v)); }); 
              fd.append('existingFiles', JSON.stringify(currentFiles)); 
              newFiles.forEach(f => fd.append('files', f)); 
              await upsertChallenge(fd, editingChallenge.id); 
              setEditingChallenge(null); 
            }} className="space-y-6">
              <div className="space-y-4">
                <input placeholder="CHALLENGE_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-1 md:grid-cols-3 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-500 uppercase">Category</label>
                    <select className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.category} onChange={e => setEditingChallenge({...editingChallenge, category: e.target.value})}>{CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}</select>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-500 uppercase">Difficulty</label>
                    <select className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.difficulty} onChange={e => handleDifficultyChange(e.target.value as Difficulty)}>{DIFFICULTIES.map(d => <option key={d} value={d}>{d}</option>)}</select>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-500 uppercase">Initial Pts</label>
                    <input type="number" className="w-full bg-black hxp-border-purple p-2 text-white font-black" value={editingChallenge.initialPoints} onChange={e => handleInitialPointsChange(parseInt(e.target.value) || 0)} />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest block mb-1">Minimum Points (50% Auto)</label>
                    <input type="number" placeholder="MIN POINTS" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.minimumPoints} onChange={e => setEditingChallenge({...editingChallenge, minimumPoints: parseInt(e.target.value)})} />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest block mb-1">Decay Solves</label>
                    <input type="number" placeholder="DECAY LIMIT" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.decaySolves} onChange={e => setEditingChallenge({...editingChallenge, decaySolves: parseInt(e.target.value)})} />
                  </div>
                </div>

                <div className="hxp-border border-[#00ccff] p-4 bg-[#00ccff]/5 space-y-4">
                  <h4 className="text-xs font-black text-[#00ccff] uppercase flex items-center gap-2"><Globe size={14}/> Connection Settings</h4>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Protocol</label>
                      <select className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.connectionType || 'nc'} onChange={e => setEditingChallenge({...editingChallenge, connectionType: e.target.value as any})}>
                        <option value="nc">NC (NETCAT)</option>
                        <option value="http">HTTP (WEB)</option>
                      </select>
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Port</label>
                      <input type="number" placeholder="0 = None" className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.port || 0} onChange={e => setEditingChallenge({...editingChallenge, port: parseInt(e.target.value) || 0})} />
                    </div>
                    <div className="space-y-1 col-span-2 md:col-span-1">
                      <label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Node IP Override</label>
                      <input placeholder="Optional" className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.overrideIp || ''} onChange={e => setEditingChallenge({...editingChallenge, overrideIp: e.target.value})} />
                    </div>
                  </div>
                </div>

                <div className="space-y-1">
                   <label className="text-[10px] font-black text-slate-500 uppercase">Flag Protocol</label>
                   <input placeholder="FLAG_PROTOCOL" 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})} />
                </div>
                
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-500 uppercase">Challenge Intel</label>
                  <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>
              </div>

              <div className="border-t-2 border-[#333] pt-6 space-y-4">
                <h4 className="text-sm font-black text-white italic uppercase tracking-tighter flex items-center gap-2"><Upload size={14} /> File Management</h4>
                <div className="space-y-3">
                  {currentFiles.length > 0 && (
                    <div className="space-y-1">
                      <label className="text-[8px] font-black text-slate-500 uppercase">Existing Assets</label>
                      <div className="grid grid-cols-1 gap-2">
                        {currentFiles.map((f, i) => (
                          <div key={i} className="flex justify-between items-center bg-white/5 hxp-border-purple p-2 text-[10px] font-bold">
                            <span className="truncate flex-1 text-slate-300">{f.name}</span>
                            <button type="button" onClick={() => setCurrentFiles(currentFiles.filter((_, idx) => idx !== i))} className="text-red-500 hover:text-white transition-colors ml-2"><Trash2 size={14}/></button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                  {newFiles.length > 0 && (
                    <div className="space-y-1">
                      <label className="text-[8px] font-black text-[#bf00ff] uppercase">Pending Uploads</label>
                      <div className="grid grid-cols-1 gap-2">
                        {newFiles.map((f, i) => (
                          <div key={i} className="flex justify-between items-center bg-[#bf00ff]/5 border border-[#bf00ff]/30 p-2 text-[10px] font-bold">
                            <span className="truncate flex-1 text-[#bf00ff] italic">{f.name}</span>
                            <button type="button" onClick={() => setNewFiles(newFiles.filter((_, idx) => idx !== i))} className="text-red-500 hover:text-white transition-colors ml-2"><Trash2 size={14}/></button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                  <div className="flex items-center gap-4">
                    <label className="flex-1 cursor-pointer bg-white/5 hxp-border-purple border-dashed p-4 flex flex-col items-center justify-center hover:bg-white/10 transition-colors">
                      <Plus size={24} className="text-[#bf00ff] mb-2" />
                      <span className="text-[10px] font-black text-[#bf00ff] uppercase">Select Assets</span>
                      <input type="file" multiple className="hidden" onChange={e => { if (e.target.files) setNewFiles([...newFiles, ...Array.from(e.target.files)]); }} />
                    </label>
                  </div>
                </div>
              </div>

              <div className="flex gap-4">
                <Button type="submit" className="flex-1 py-4 uppercase text-lg">Commit Challenge</Button>
                <Button type="button" variant="secondary" onClick={() => { if(window.confirm("RESET_TO_DEFAULTS?")) handleDifficultyChange(editingChallenge.difficulty || 'Low'); }} className="px-4" title="Restore Defaults"><History size={20}/></Button>
              </div>
            </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-md w-full max-w-md bg-black p-8 relative">
            <button onClick={() => setEditingTeam(null)} className="absolute top-4 right-4 text-white hover:text-red-500 transition-colors"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">USER_PROFILE</h3>
            <form onSubmit={async e => { e.preventDefault(); await updateTeam(editingTeam.id as string, { name: editingTeam.name, isDisabled: editingTeam.isDisabled, isAdmin: editingTeam.isAdmin, password: editingTeam.newPassword }); setEditingTeam(null); }} className="space-y-4">
              <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 />
              <input type="password" placeholder="UPDATE SECRET_KEY (OPTIONAL)" className="w-full bg-black hxp-border-purple p-3 text-white font-black" onChange={e => setEditingTeam({...editingTeam, newPassword: e.target.value})} />
              <div className="flex gap-8 py-2">
                <label className="flex items-center gap-2 cursor-pointer font-black text-xs uppercase"><input type="checkbox" className="w-4 h-4 bg-black border-2 border-[#bf00ff]" checked={!!editingTeam.isAdmin} onChange={e => setEditingTeam({...editingTeam, isAdmin: e.target.checked})} /> Elevate to Admin</label>
                <label className="flex items-center gap-2 cursor-pointer font-black text-xs uppercase"><input type="checkbox" className="w-4 h-4 bg-black border-2 border-[#ff0000]" checked={!!editingTeam.isDisabled} onChange={e => setEditingTeam({...editingTeam, isDisabled: e.target.checked})} /> Disable Identity</label>
              </div>
              <Button type="submit" className="w-full py-4 uppercase">Update Identity</Button>
            </form>
            <div className="mt-8 border-t-2 border-[#333] pt-6">
              <h4 className="text-xl font-black italic text-[#bf00ff] mb-4 uppercase">SOLVES</h4>
              <div className="space-y-2 max-h-48 overflow-y-auto pr-2">
                {state.solves.filter(s => s.teamId === editingTeam.id).length === 0 ? (
                  <p className="text-slate-500 italic text-sm font-black">NO_SOLVES_FOUND</p>
                ) : (
                  state.solves
                    .filter(s => s.teamId === editingTeam.id)
                    .map(solve => ({
                      solve,
                      challenge: state.challenges.find(c => c.id === solve.challengeId)
                    }))
                    .sort((a, b) => (a.challenge?.title || '').localeCompare(b.challenge?.title || ''))
                    .map(({ solve, challenge }) => {
                      if (!challenge) return null;
                      
                      const diffColor = challenge.difficulty === 'Low' ? 'text-[#00ff00]' : challenge.difficulty === 'Medium' ? 'text-[#ffaa00]' : 'text-[#ff0000]';
                      
                      const challengeSolves = state.solves
                        .filter(s => s.challengeId === challenge.id)
                        .sort((a, b) => a.timestamp - b.timestamp);
                      const rank = challengeSolves.findIndex(s => s.teamId === editingTeam.id);
                      
                      const baseValue = calculateChallengeValue(
                        challenge.initialPoints,
                        challenge.minimumPoints || 0,
                        challenge.decaySolves || 1,
                        (challenge.solves || []).length
                      );
                      const bonus = Math.floor(challenge.initialPoints * getFirstBloodBonusFactor(rank));
                      const totalPoints = baseValue + bonus;

                      return (
                        <div key={solve.challengeId} className="flex justify-between items-center bg-white/5 border border-[#333] p-3 text-sm font-bold">
                          <div className="flex items-center gap-2 truncate flex-1">
                            {rank === 0 ? (
                              <Medal size={16} className="text-[#ffaa00]" />
                            ) : rank === 1 ? (
                              <Medal size={16} className="text-slate-400" />
                            ) : rank === 2 ? (
                              <Medal size={16} className="text-[#cd7f32]" />
                            ) : (
                              <CheckCircle2 size={14} className="text-[#00ff00]" />
                            )}
                            <span className={`truncate ${diffColor}`}>{challenge.title}</span>
                          </div>
                          <span className="text-white text-xs mr-4">{totalPoints} PTS</span>
                          <button type="button" onClick={() => deleteSolve(editingTeam.id as string, solve.challengeId)} className="text-red-500 hover:text-red-400 transition-colors" title="Delete Solve"><Trash2 size={16}/></button>
                        </div>
                      );
                    })
                )}
              </div>
            </div>
          </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-red-500 transition-colors"><X size={24}/></button>
            <h3 className="text-3xl font-black italic text-white mb-8 uppercase">GLOBAL_BROADCAST</h3>
            <form onSubmit={async e => { e.preventDefault(); if (editingBlogPost.id) await updateBlogPost(editingBlogPost.id, editingBlogPost as any); else await createBlogPost(editingBlogPost as any); setEditingBlogPost(null); }} 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="BROADCAST_CONTENT" className="w-full bg-black hxp-border-purple p-3 text-white font-black h-48 italic" 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>
  );
};
