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 } 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';

export const Admin: React.FC = () => {
  const { state, toggleCtf, resetScores, upsertChallenge, deleteChallenge, deleteAllChallenges, updateTeam, deleteTeam, createBlogPost, updateBlogPost, deleteBlogPost, updateConfig, exportChallenges, importChallenges, backupDatabase, restoreDatabase, refreshState } = useCTF();
  
  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 sortedOperators = useMemo(() => {
    return state.teams
      .filter(t => t.id !== 'admin-0')
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [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 });
  };

  return (
    <div className="max-w-6xl mx-auto py-12 px-6">
      <div className="flex flex-wrap gap-4 justify-between items-center mb-12 border-b-4 border-[#ff0000] pb-6">
        <h2 className="text-5xl font-black italic text-white uppercase tracking-tighter">ADMIN_CONSOLE</h2>
        <div className="flex gap-4 items-center">
          {isBeforeStart && (
            <div className="px-4 py-2 hxp-border-purple bg-[#bf00ff]/10 hidden sm:flex items-center gap-3">
               <Countdown target={eventStartTime} label="STARTING IN" />
            </div>
          )}
          <Button onClick={toggleCtf} variant={state.isStarted ? 'secondary' : 'primary'}>{state.isStarted ? 'PAUSE_BOARD' : 'RESUME_BOARD'}</Button>
        </div>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div className="space-y-12">
          <section className="space-y-6">
            <h3 className="text-2xl font-black text-[#ffaa00] border-b-2 border-[#ffaa00] uppercase italic">GENERAL_CONFIG</h3>
            <form onSubmit={handleConfigSubmit} className="hxp-border p-6 bg-white/5 space-y-6">
              <div className="space-y-4">
                <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 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-24" value={localConf.landingText || ''} onChange={e => setLocalConf({...localConf, landingText: e.target.value})} />
                </div>
                <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>
              <div className="border-t-2 border-[#333] pt-6 space-y-4">
                <h4 className="text-sm font-black text-white italic uppercase tracking-tighter">Background Style</h4>
                <div className="grid grid-cols-2 gap-4">
                  <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>
                  {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-1">
                      <label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Upload</label>
                      <input type="file" name="bgImage" className="text-xs block w-full bg-black hxp-border p-2" />
                    </div>
                  )}
                </div>
                {localConf.bgType === 'image' && (
                  <div className="space-y-4 p-4 hxp-border-purple bg-white/5">
                    <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>
              <Button type="submit" className="w-full py-3">Commit Configuration</Button>
            </form>
          </section>
          <section className="space-y-6">
            <div className="flex justify-between items-center border-b-2 border-[#bf00ff]"><h3 className="text-2xl font-black text-[#bf00ff] uppercase italic">CHALLENGES</h3><div className="flex gap-2"><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="text-xs">NEW_CHAL</Button></div></div>
            <div className="space-y-2 max-h-[500px] overflow-y-auto custom-scrollbar">
              {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-3 flex justify-between items-center bg-white/5 hover:bg-white/10 transition-colors gap-4">
                    <div className="flex items-center gap-3 min-w-0 flex-1">
                      <div className="shrink-0 opacity-70">
                        <CategoryIcon category={c.category} size={14} />
                      </div>
                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
                        <span className="font-black text-white uppercase italic whitespace-normal leading-tight">{c.title}</span>
                        <div className="flex items-center gap-2">
                          <span className={`text-[9px] font-black uppercase ${diffColor} px-1.5 border border-current opacity-80 h-4 flex items-center`}>{c.difficulty}</span>
                          <span className="text-[9px] font-black uppercase text-[#00ccff] px-1.5 border border-[#00ccff]/50 h-4 flex items-center bg-[#00ccff]/5">
                            {c.connectionType || 'nc'}{c.port && c.port > 0 ? `:${c.port}` : ''}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-2 shrink-0">
                      <button onClick={() => { setEditingChallenge(c); setCurrentFiles(c.files || []); setNewFiles([]); }} className="text-[#bf00ff] hover:text-white transition-colors" title="Edit Challenge"><Edit3 size={16}/></button>
                      <button onClick={() => deleteChallenge(c.id)} className="text-red-500 hover:text-white transition-colors" title="Delete Challenge"><Trash2 size={16}/></button>
                    </div>
                  </div>
                );
              })}
              {sortedChallenges.length === 0 && (
                <div className="p-10 text-center text-slate-700 font-black italic uppercase tracking-widest text-xs">No challenges in database.</div>
              )}
            </div>
          </section>
        </div>
        <div className="space-y-12">
          <section className="space-y-6">
            <div className="flex justify-between items-center border-b-2 border-[#ff0000]"><h3 className="text-2xl font-black text-[#ff0000] uppercase italic">BLOGS</h3><Button onClick={() => setEditingBlogPost({ title: '', content: '' })} className="text-xs">NEW_POST</Button></div>
            <div className="space-y-2 max-h-48 overflow-y-auto custom-scrollbar">
              {state.blogs.map(post => (
                <div key={post.id} className="hxp-border p-3 flex justify-between bg-white/5 hover:bg-white/10 transition-colors"><span className="truncate w-40 font-black uppercase italic">{post.title}</span><div className="flex gap-2"><button onClick={() => setEditingBlogPost(post)} className="text-[#bf00ff] hover:text-white"><Edit3 size={16}/></button><button onClick={() => deleteBlogPost(post.id)} className="text-red-500 hover:text-white"><Trash2 size={16}/></button></div></div>
              ))}
            </div>
          </section>

          <section className="space-y-6">
            <h3 className="text-2xl font-black text-[#00ccff] border-b-2 border-[#00ccff] uppercase italic">BACKUP_RESTORE</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <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="w-full text-xs py-3">EXPORT_CHAL</Button>
                <Button onClick={() => importChalRef.current?.click()} className="w-full text-xs py-3" variant="secondary">IMPORT_CHAL</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 className="space-y-2">
                <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="w-full text-xs py-3 border-[#ffaa00] text-[#ffaa00] hover:bg-[#ffaa00] hover:text-black">BACKUP_DB</Button>
                <Button onClick={() => restoreDbRef.current?.click()} className="w-full text-xs py-3 border-[#00ff00] text-[#00ff00] hover:bg-[#00ff00] hover:text-black" variant="secondary">RESTORE_DB</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>
          </section>

          <section className="space-y-6">
            <h3 className="text-2xl font-black text-[#bf00ff] border-b-2 border-[#bf00ff] uppercase italic">OPERATORS</h3>
            <div className="hxp-border border-2 overflow-hidden bg-black">
              <table className="w-full text-[10px] font-black">
                <thead className="bg-[#333] uppercase">
                  <tr>
                    <th className="p-3 text-left">TEAM_IDENTIFIER</th>
                    <th className="p-3 text-center">ROLE</th>
                    <th className="p-3 text-center">STATUS</th>
                    <th className="p-3 text-right">ACTIONS</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/10 italic">
                  {sortedOperators.map(team => (
                    <tr key={team.id} className="hover:bg-white/5 transition-colors group">
                      <td className="p-3 text-white text-sm">
                        <div className="flex items-center gap-2">
                          <User size={14} className="text-slate-500" />
                          {team.name}
                        </div>
                      </td>
                      <td className="p-3 text-center uppercase">
                        <button 
                          onClick={() => quickToggleAdmin(team)}
                          className={`flex items-center gap-1 mx-auto px-2 py-1 border transition-all ${team.isAdmin ? 'border-[#ffaa00] text-[#ffaa00] bg-[#ffaa00]/10' : 'border-slate-700 text-slate-500 hover:border-[#bf00ff] hover:text-[#bf00ff]'}`}
                          title={team.isAdmin ? "Revoke Admin Privileges" : "Grant Admin Privileges"}
                        >
                          {team.isAdmin ? <ShieldCheck size={12} /> : <Shield size={12} />}
                          <span>{team.isAdmin ? 'ADMIN' : 'OPERATOR'}</span>
                        </button>
                      </td>
                      <td className="p-3 text-center uppercase">
                        <button 
                          onClick={() => quickToggleStatus(team)}
                          className={`flex items-center gap-1 mx-auto px-2 py-1 border transition-all ${team.isDisabled ? 'border-red-500 text-red-500 bg-red-500/10' : 'border-slate-700 text-[#00ff00] hover:bg-[#00ff00]/5'}`}
                          title={team.isDisabled ? "Enable Account" : "Disable Account"}
                        >
                          {team.isDisabled ? <UserMinus size={12} /> : <UserCheck size={12} />}
                          <span>{team.isDisabled ? 'BANNED' : 'ACTIVE'}</span>
                        </button>
                      </td>
                      <td className="p-3 text-right">
                        <div className="flex justify-end gap-3 opacity-60 group-hover:opacity-100 transition-opacity">
                           <button onClick={() => setEditingTeam(team)} className="text-[#bf00ff] hover:text-white transition-colors" title="Full Edit"><Edit3 size={16} /></button>
                           <button onClick={() => deleteTeam(team.id)} className="text-red-500 hover:text-white transition-colors" title="Delete Identity"><Trash2 size={16} /></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {sortedOperators.length === 0 && (
                    <tr>
                      <td colSpan={4} className="p-10 text-center text-slate-700 font-black italic uppercase tracking-widest text-xs">No registered operators detected.</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </section>

          <section className="space-y-6">
             <div className="flex items-center gap-3 border-b-2 border-[#ff0000]"><Skull className="text-[#ff0000]" size={24} /><h3 className="text-2xl font-black text-[#ff0000] uppercase italic">DANGER_ZONE</h3></div>
             <div className="hxp-border border-[#ff0000] bg-red-900/10 p-6 space-y-4">
                <Button onClick={resetScores} className="w-full text-xs py-3 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">RESET_ALL_SCORES</Button>
                <Button onClick={deleteAllChallenges} className="w-full text-xs py-3 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">WIPE_ALL_CHALLENGES</Button>
             </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 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">OPERATOR_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>
        </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>
  );
};