import React, { useState } from 'react';
import { 
  Terminal, 
  LogIn, 
  ShieldAlert, 
  Database, 
  ArrowDown,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Server
} from 'lucide-react';

export default function App() {
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const options = [
    { id: 'monitor', text: 'Monitor the attacker to gather more intel' },
    { id: 'contain', text: 'Contain the system' },
    { id: 'eradicate', text: 'Delete the compromised user account' },
    { id: 'recover', text: 'Restore the database from backup' }
  ];

  const handleSubmit = () => {
    if (selectedAnswer) {
      setIsSubmitted(true);
    }
  };

  const resetSimulation = () => {
    setSelectedAnswer(null);
    setIsSubmitted(false);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 p-6 md:p-12 font-mono flex flex-col items-center">
      
      {/* Header */}
      <div className="max-w-3xl w-full mb-10 text-center">
        <div className="inline-flex items-center justify-center p-3 bg-red-500/10 rounded-full mb-4">
          <AlertTriangle className="w-8 h-8 text-red-500" />
        </div>
        <h1 className="text-3xl md:text-4xl font-bold text-white mb-2 tracking-tight">
          Critical Incident Detected
        </h1>
        <p className="text-slate-400">
          SOC Alert ID: #ERR-8992-B • Severity: <span className="text-red-400 font-semibold">CRITICAL</span>
        </p>
      </div>

      <div className="max-w-5xl w-full grid md:grid-cols-2 gap-8">
        
        {/* Timeline Panel */}
        <div className="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-2xl">
          <div className="flex items-center gap-3 mb-8 border-b border-slate-800 pb-4">
            <Terminal className="w-5 h-5 text-blue-400" />
            <h2 className="text-xl font-semibold text-white">Attack Timeline</h2>
          </div>

          <div className="relative pl-4 space-y-8">
            {/* Vertical Line */}
            <div className="absolute left-[27px] top-4 bottom-4 w-0.5 bg-slate-800"></div>

            {/* Step 1 */}
            <div className="relative flex items-start gap-4">
              <div className="bg-slate-900 border-2 border-blue-500 rounded-full p-2 z-10 relative">
                <LogIn className="w-5 h-5 text-blue-400" />
              </div>
              <div className="pt-1.5">
                <span className="text-xs font-bold text-blue-400 tracking-wider">02:14:05 UTC</span>
                <h3 className="text-lg font-medium text-slate-100 mt-1">Suspicious Login</h3>
                <p className="text-sm text-slate-400 mt-1">
                  Initial access achieved via compromised VPN credentials from an unknown IP address.
                </p>
              </div>
            </div>

            {/* Step 2 */}
            <div className="relative flex items-start gap-4">
              <div className="bg-slate-900 border-2 border-amber-500 rounded-full p-2 z-10 relative">
                <ShieldAlert className="w-5 h-5 text-amber-400" />
              </div>
              <div className="pt-1.5">
                <span className="text-xs font-bold text-amber-400 tracking-wider">02:22:18 UTC</span>
                <h3 className="text-lg font-medium text-slate-100 mt-1">Privilege Escalation</h3>
                <p className="text-sm text-slate-400 mt-1">
                  Attacker exploited CVE-2023-XXXX to elevate privileges to SYSTEM level on internal server.
                </p>
              </div>
            </div>

            {/* Step 3 */}
            <div className="relative flex items-start gap-4">
              <div className="bg-slate-900 border-2 border-red-500 rounded-full p-2 z-10 relative animate-pulse">
                <Database className="w-5 h-5 text-red-500" />
              </div>
              <div className="pt-1.5">
                <span className="text-xs font-bold text-red-500 tracking-wider">02:28:45 UTC</span>
                <h3 className="text-lg font-medium text-slate-100 mt-1">Data Exfiltration</h3>
                <p className="text-sm text-slate-400 mt-1">
                  Large outbound traffic spike detected. Customer database records are actively being compressed and sent to an external drop server.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Action Panel */}
        <div className="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-2xl flex flex-col">
          <div className="flex items-center gap-3 mb-6 border-b border-slate-800 pb-4">
            <Server className="w-5 h-5 text-emerald-400" />
            <h2 className="text-xl font-semibold text-white">Incident Response</h2>
          </div>

          <div className="bg-slate-800/50 p-4 rounded-lg border border-slate-700 mb-6">
            <p className="text-lg font-medium text-white">
              Based on the ongoing attack timeline, what is the <span className="text-emerald-400 underline decoration-2 underline-offset-4">first action</span> you must take?
            </p>
          </div>

          <div className="space-y-3 flex-grow">
            {options.map((option) => (
              <button
                key={option.id}
                disabled={isSubmitted}
                onClick={() => setSelectedAnswer(option.id)}
                className={`w-full text-left p-4 rounded-lg border transition-all duration-200 flex items-center justify-between ${
                  selectedAnswer === option.id
                    ? 'bg-blue-600/20 border-blue-500'
                    : 'bg-slate-950 border-slate-800 hover:border-slate-600 hover:bg-slate-800/50'
                } ${isSubmitted ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
              >
                <span>{option.text}</span>
                {selectedAnswer === option.id && !isSubmitted && (
                  <div className="w-3 h-3 bg-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.8)]" />
                )}
              </button>
            ))}
          </div>

          {!isSubmitted ? (
            <button
              onClick={handleSubmit}
              disabled={!selectedAnswer}
              className={`mt-8 w-full py-3 rounded-lg font-bold transition-all ${
                selectedAnswer 
                  ? 'bg-emerald-600 hover:bg-emerald-500 text-white' 
                  : 'bg-slate-800 text-slate-500 cursor-not-allowed'
              }`}
            >
              Execute Action
            </button>
          ) : (
            <div className={`mt-8 p-5 rounded-lg border ${
              selectedAnswer === 'contain' 
                ? 'bg-emerald-900/20 border-emerald-500/50' 
                : 'bg-red-900/20 border-red-500/50'
            }`}>
              {selectedAnswer === 'contain' ? (
                <div className="flex flex-col gap-2">
                  <div className="flex items-center gap-2 text-emerald-400 font-bold text-lg">
                    <CheckCircle2 className="w-6 h-6" />
                    Correct Response
                  </div>
                  <p className="text-slate-300 text-sm mt-1">
                    Excellent. When an active breach (especially exfiltration) is detected, the immediate priority in the PICERL methodology is <strong>Containment</strong>. Isolating the affected system from the network stops the bleeding before you move on to eradication and recovery.
                  </p>
                </div>
              ) : (
                <div className="flex flex-col gap-2">
                  <div className="flex items-center gap-2 text-red-400 font-bold text-lg">
                    <XCircle className="w-6 h-6" />
                    Incorrect Action
                  </div>
                  <p className="text-slate-300 text-sm mt-1">
                    While investigating or recovering are important later steps, data is actively leaving your network right now. The very first action must be to <strong>Contain the system</strong> (isolate it from the network) to stop the exfiltration immediately.
                  </p>
                </div>
              )}
              
              <button 
                onClick={resetSimulation}
                className="mt-4 text-sm text-slate-400 hover:text-white underline decoration-slate-600 underline-offset-4 transition-colors"
              >
                Reset Simulation
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}