import React, { useState, useEffect, useRef } from 'react';
import { Shield, FileText, User, Lock, AlertTriangle, CheckCircle, XCircle, Info, ChevronRight, Eye, Edit3, Terminal } from 'lucide-react';

// --- Constants & Config ---

const SECURITY_LEVELS = {
  TOP_SECRET: { value: 3, label: "Top Secret", color: "text-red-600", bg: "bg-red-100", border: "border-red-500", badge: "bg-red-600" },
  SECRET: { value: 2, label: "Secret", color: "text-orange-600", bg: "bg-orange-100", border: "border-orange-500", badge: "bg-orange-500" },
  CONFIDENTIAL: { value: 1, label: "Confidential", color: "text-blue-600", bg: "bg-blue-100", border: "border-blue-500", badge: "bg-blue-500" },
  UNCLASSIFIED: { value: 0, label: "Unclassified", color: "text-green-600", bg: "bg-green-100", border: "border-green-500", badge: "bg-green-500" },
};

const INITIAL_USERS = [
  { id: 'u1', name: 'General Alice', role: 'Commander', level: 'TOP_SECRET', avatar: '⭐' },
  { id: 'u2', name: 'Agent Bob', role: 'Field Agent', level: 'SECRET', avatar: '🕵️' },
  { id: 'u3', name: 'Analyst Charlie', role: 'Data Entry', level: 'CONFIDENTIAL', avatar: '👓' },
  { id: 'u4', name: 'Civilian Dave', role: 'Guest', level: 'UNCLASSIFIED', avatar: '😊' },
];

const INITIAL_FILES = [
  { id: 'f1', name: 'Nuclear Launch Codes', content: 'The code is 1234-ALPHA-OMEGA.', level: 'TOP_SECRET' },
  { id: 'f2', name: 'Alien Contact Protocol', content: 'In case of contact, play jazz music.', level: 'TOP_SECRET' },
  { id: 'f3', name: 'Troop Locations', content: 'Troops are moving to sector 7G.', level: 'SECRET' },
  { id: 'f4', name: 'Spy Network List', content: 'Agent X is actually a double agent.', level: 'SECRET' },
  { id: 'f5', name: 'Staff Meeting Minutes', content: 'We need more coffee in the breakroom.', level: 'CONFIDENTIAL' },
  { id: 'f6', name: 'Cafeteria Menu', content: 'Today\'s special: Mystery Meat.', level: 'UNCLASSIFIED' },
];

// --- Helper Components ---

const Badge = ({ level }) => {
  const config = SECURITY_LEVELS[level];
  return (
    <span className={`${config.badge} text-white text-xs font-bold px-2 py-1 rounded shadow-sm`}>
      {config.label}
    </span>
  );
};

const Modal = ({ isOpen, onClose, title, children, type = 'info' }) => {
  if (!isOpen) return null;
  
  const typeStyles = {
    success: 'border-green-500 bg-green-50',
    error: 'border-red-500 bg-red-50',
    info: 'border-blue-500 bg-white'
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
      <div className={`relative w-full max-w-md p-6 rounded-xl shadow-2xl border-l-4 ${typeStyles[type]} transform transition-all scale-100`}>
        <button onClick={onClose} className="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
          <XCircle size={24} />
        </button>
        <h3 className="text-xl font-bold mb-2 flex items-center gap-2">
          {type === 'success' && <CheckCircle className="text-green-600" />}
          {type === 'error' && <XCircle className="text-red-600" />}
          {title}
        </h3>
        <div className="text-gray-700">{children}</div>
        <div className="mt-6 flex justify-end">
          <button 
            onClick={onClose}
            className="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition-colors"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

// --- Main Application ---

export default function BellLaPadulaSim() {
  const [currentUser, setCurrentUser] = useState(INITIAL_USERS[0]);
  const [files, setFiles] = useState(INITIAL_FILES);
  const [logs, setLogs] = useState([]);
  const [modalState, setModalState] = useState({ isOpen: false, title: '', content: '', type: 'info' });
  const [showRules, setShowRules] = useState(false);
  
  const logEndRef = useRef(null);

  // Auto-scroll logs
  useEffect(() => {
    if (logEndRef.current) {
      logEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [logs]);

  const addLog = (action, subject, object, success, reason) => {
    const timestamp = new Date().toLocaleTimeString();
    setLogs(prev => [...prev, { id: Date.now(), timestamp, action, subject, object, success, reason }]);
  };

  const checkAccess = (userLevel, fileLevel, action) => {
    const userVal = SECURITY_LEVELS[userLevel].value;
    const fileVal = SECURITY_LEVELS[fileLevel].value;

    if (action === 'READ') {
      // Simple Security Property: No Read Up
      if (userVal >= fileVal) return { allowed: true };
      return { allowed: false, reason: 'No Read Up violation: Subject clearance is lower than Object classification.' };
    }
    
    if (action === 'WRITE') {
      // *-Property (Star Property): No Write Down
      // Strictly speaking, BLP allows write up (blind write), but forbids write down.
      if (userVal <= fileVal) return { allowed: true };
      return { allowed: false, reason: '*-Property violation: Subject cannot write to lower classification (potential leak).' };
    }

    return { allowed: false, reason: 'Unknown action' };
  };

  const handleRead = (file) => {
    const result = checkAccess(currentUser.level, file.level, 'READ');
    
    if (result.allowed) {
      setModalState({
        isOpen: true,
        title: 'Access Granted',
        type: 'success',
        content: (
          <div className="space-y-4">
            <p className="font-semibold text-green-800">Reading File: {file.name}</p>
            <div className="p-4 bg-white border border-gray-200 rounded shadow-inner font-mono text-sm">
              {file.content}
            </div>
            <p className="text-xs text-gray-500 mt-2">
              Rule Applied: Simple Security Property (Subject Level &ge; Object Level)
            </p>
          </div>
        )
      });
      addLog('READ', currentUser, file, true, 'Access Granted');
    } else {
      setModalState({
        isOpen: true,
        title: 'Access Denied',
        type: 'error',
        content: (
          <div>
            <p className="font-semibold text-red-800">Cannot Read File: {file.name}</p>
            <p className="mt-2 text-gray-700">{result.reason}</p>
            <div className="mt-4 p-3 bg-red-100 rounded text-sm text-red-900 border border-red-200">
               CONFIDENTIALITY GUARD: BLP prevents you from reading data above your clearance level.
            </div>
          </div>
        )
      });
      addLog('READ', currentUser, file, false, result.reason);
    }
  };

  const handleWrite = (file) => {
    const result = checkAccess(currentUser.level, file.level, 'WRITE');

    if (result.allowed) {
      setModalState({
        isOpen: true,
        title: 'Write Operation Allowed',
        type: 'success',
        content: (
          <div>
            <p className="font-semibold text-green-800">Writing to: {file.name}</p>
            <p className="mt-2 text-gray-600">You appended new data to this secure file.</p>
            <p className="text-xs text-gray-500 mt-4">
              Rule Applied: *-Property (Subject Level &le; Object Level). Writing up is allowed to preserve confidentiality of the subject's high-level knowledge (blind write).
            </p>
          </div>
        )
      });
      addLog('WRITE', currentUser, file, true, 'Access Granted');
    } else {
      setModalState({
        isOpen: true,
        title: 'Write Operation Blocked',
        type: 'error',
        content: (
          <div>
            <p className="font-semibold text-red-800">Cannot Write to: {file.name}</p>
            <p className="mt-2 text-gray-700">{result.reason}</p>
            <div className="mt-4 p-3 bg-red-100 rounded text-sm text-red-900 border border-red-200">
               LEAK PREVENTION: You hold a higher clearance. Writing to a lower level could accidentally leak secrets you know.
            </div>
          </div>
        )
      });
      addLog('WRITE', currentUser, file, false, result.reason);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-200">
      
      {/* Header */}
      <header className="bg-slate-900 text-white p-4 shadow-lg sticky top-0 z-30">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-2 rounded-lg">
              <Shield className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold tracking-tight">Bell-LaPadula Simulator</h1>
              <p className="text-xs text-blue-300 font-mono">CONFIDENTIALITY MODEL // DoD STANDARD</p>
            </div>
          </div>
          
          <button 
            onClick={() => setShowRules(!showRules)}
            className="flex items-center gap-2 text-sm bg-slate-800 hover:bg-slate-700 px-3 py-2 rounded-lg transition-colors border border-slate-700"
          >
            <Info size={16} />
            {showRules ? 'Hide Rules' : 'Show Rules'}
          </button>
        </div>
      </header>

      {/* Rules Banner */}
      {showRules && (
        <div className="bg-blue-50 border-b border-blue-200 p-6 animate-in slide-in-from-top-4">
          <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-8">
            <div className="space-y-2">
              <h3 className="font-bold text-blue-900 flex items-center gap-2">
                <Eye size={18} /> Simple Security Property (No Read Up)
              </h3>
              <p className="text-sm text-blue-800">
                A subject at a specific clearance level cannot read an object at a higher classification level.
                <br/>
                <span className="font-mono text-xs opacity-75">Logic: Clearance &ge; Classification</span>
              </p>
            </div>
            <div className="space-y-2">
              <h3 className="font-bold text-blue-900 flex items-center gap-2">
                <Edit3 size={18} /> *-Property (No Write Down)
              </h3>
              <p className="text-sm text-blue-800">
                A subject cannot write information to an object at a lower classification level. This prevents high-level secrets from being copied to low-level documents.
                <br/>
                <span className="font-mono text-xs opacity-75">Logic: Clearance &le; Classification</span>
              </p>
            </div>
          </div>
        </div>
      )}

      <main className="max-w-7xl mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        {/* Left Column: User Selection & Status */}
        <section className="lg:col-span-3 space-y-6">
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="bg-slate-100 px-4 py-3 border-b border-slate-200 font-semibold text-slate-700 flex items-center gap-2">
              <User size={18} /> Select Subject
            </div>
            <div className="divide-y divide-slate-100">
              {INITIAL_USERS.map(user => (
                <button
                  key={user.id}
                  onClick={() => setCurrentUser(user)}
                  className={`w-full text-left px-4 py-3 flex items-center gap-3 transition-colors ${
                    currentUser.id === user.id ? 'bg-blue-50 border-l-4 border-blue-500' : 'hover:bg-slate-50 border-l-4 border-transparent'
                  }`}
                >
                  <span className="text-2xl">{user.avatar}</span>
                  <div>
                    <div className="font-medium text-slate-900">{user.name}</div>
                    <div className="text-xs text-slate-500">{user.role}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
            <h2 className="text-sm uppercase tracking-wider text-slate-500 font-bold mb-4">Current Clearance</h2>
            <div className={`p-4 rounded-lg border-2 ${SECURITY_LEVELS[currentUser.level].bg} ${SECURITY_LEVELS[currentUser.level].border} flex flex-col items-center text-center`}>
              <span className="text-4xl mb-2">{currentUser.avatar}</span>
              <span className="font-bold text-lg text-slate-900">{currentUser.name}</span>
              <Badge level={currentUser.level} />
            </div>
            <div className="mt-4 text-xs text-slate-400 text-center">
              You are acting as this subject for all operations.
            </div>
          </div>
        </section>

        {/* Center Column: Files Grid */}
        <section className="lg:col-span-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
              <FileText className="text-slate-500" /> Files (Objects)
            </h2>
            <span className="text-xs font-mono bg-slate-200 px-2 py-1 rounded">System: SECURE</span>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            {files.map(file => {
              const levelConfig = SECURITY_LEVELS[file.level];
              return (
                <div key={file.id} className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-shadow flex flex-col">
                  <div className={`h-2 ${levelConfig.bg} border-b ${levelConfig.border}`}></div>
                  <div className="p-4 flex-1">
                    <div className="flex justify-between items-start mb-2">
                      <div className="p-2 bg-slate-100 rounded-lg">
                        <Lock size={20} className="text-slate-500" />
                      </div>
                      <Badge level={file.level} />
                    </div>
                    <h3 className="font-bold text-slate-900 mb-1">{file.name}</h3>
                    <p className="text-xs text-slate-500 font-mono">ID: {file.id.toUpperCase()}</p>
                  </div>
                  
                  <div className="bg-slate-50 px-4 py-3 border-t border-slate-100 grid grid-cols-2 gap-3">
                    <button
                      onClick={() => handleRead(file)}
                      className="flex items-center justify-center gap-2 px-3 py-2 bg-white border border-slate-300 rounded hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-colors text-sm font-medium"
                    >
                      <Eye size={16} /> Read
                    </button>
                    <button
                      onClick={() => handleWrite(file)}
                      className="flex items-center justify-center gap-2 px-3 py-2 bg-white border border-slate-300 rounded hover:bg-orange-50 hover:text-orange-600 hover:border-orange-300 transition-colors text-sm font-medium"
                    >
                      <Edit3 size={16} /> Write
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* Right Column: System Log */}
        <section className="lg:col-span-3 h-full min-h-[400px]">
          <div className="bg-slate-900 rounded-xl shadow-lg border border-slate-800 h-full flex flex-col overflow-hidden">
            <div className="bg-slate-950 px-4 py-3 border-b border-slate-800 flex items-center justify-between">
              <span className="text-slate-200 font-mono text-sm flex items-center gap-2">
                <Terminal size={14} /> Security Audit Log
              </span>
              <div className="flex gap-1">
                <div className="w-2 h-2 rounded-full bg-red-500"></div>
                <div className="w-2 h-2 rounded-full bg-yellow-500"></div>
                <div className="w-2 h-2 rounded-full bg-green-500"></div>
              </div>
            </div>
            
            <div className="flex-1 p-4 overflow-y-auto space-y-4 font-mono text-xs">
              {logs.length === 0 && (
                <div className="text-slate-600 text-center mt-10 italic">
                  -- No activity recorded --
                </div>
              )}
              {logs.map(log => (
                <div key={log.id} className={`p-2 rounded border-l-2 ${log.success ? 'border-green-500 bg-green-900/10' : 'border-red-500 bg-red-900/10'}`}>
                  <div className="flex justify-between text-slate-500 mb-1">
                    <span>{log.timestamp}</span>
                    <span className={log.success ? 'text-green-400' : 'text-red-400'}>
                      {log.success ? 'ALLOWED' : 'DENIED'}
                    </span>
                  </div>
                  <div className="text-slate-300">
                    <span className="font-bold">{log.subject.name}</span> attempted to <span className="font-bold">{log.action}</span> <span className="italic">{log.object.name}</span>
                  </div>
                  {!log.success && (
                    <div className="mt-1 text-red-400 opacity-90">
                      Error: {log.reason}
                    </div>
                  )}
                </div>
              ))}
              <div ref={logEndRef} />
            </div>
          </div>
        </section>

      </main>

      <Modal 
        isOpen={modalState.isOpen} 
        onClose={() => setModalState(prev => ({ ...prev, isOpen: false }))}
        title={modalState.title}
        type={modalState.type}
      >
        {modalState.content}
      </Modal>

    </div>
  );
}