import React, { useState, useEffect } from 'react';

// --- MOCK DATA ABSTRACTIONS ---
const INITIAL_DIRECTIVES = [
  {
    id: 'd1-uuid',
    timestamp: new Date(Date.now() - 86400000).toISOString(),
    classification: 'PUBLIC',
    title: 'TEMPORAL DRIFT LOGGING MANDATE',
    payload: { sector: '7G', variance: '0.003%', status: 'MONITORING' },
    hash: 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'
  },
  {
    id: 'd2-uuid',
    timestamp: new Date(Date.now() - 172800000).toISOString(),
    classification: 'PUBLIC',
    title: 'UNVERIFIED CHANNEL SILENCE PROTOCOL',
    payload: { required_action: 'TERMINATE_CONNECTION', timeout_ms: 5000 },
    hash: '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
  }
];

const INITIAL_INTAKES = [
  {
    id: 'i1-uuid',
    created_at: new Date(Date.now() - 3600000).toISOString(),
    payload_encrypted: 'U2FsdGVkX1+v.../mock/data...',
    signature: 'mock_sig_alpha',
    processed: true
  },
  {
    id: 'i2-uuid',
    created_at: new Date(Date.now() - 60000).toISOString(),
    payload_encrypted: 'U2FsdGVkX19z.../mock/data...',
    signature: 'mock_sig_beta',
    processed: false
  }
];

// --- CORE LAYOUT COMPONENT ---
export default function App() {
  const [currentRoute, setCurrentRoute] = useState('home');
  const [intakes, setIntakes] = useState(INITIAL_INTAKES);

  // System Time Simulation
  const [cycleTime, setCycleTime] = useState('');
  useEffect(() => {
    setCycleTime(`994.02.${new Date().getSeconds().toString().padStart(2, '0')}`);
    const interval = setInterval(() => {
      setCycleTime(`994.02.${new Date().getSeconds().toString().padStart(2, '0')}`);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const renderRoute = () => {
    switch (currentRoute) {
      case 'home':
        return <PageHome cycleTime={cycleTime} />;
      case 'directives':
        return <PageDirectives />;
      case 'comm':
        return <PageComm setIntakes={setIntakes} />;
      case 'admin':
        return <PageAdmin intakes={intakes} setIntakes={setIntakes} />;
      default:
        return <PageHome cycleTime={cycleTime} />;
    }
  };

  return (
    <div className="min-h-screen bg-[#050505] text-neutral-200 antialiased font-mono selection:bg-neutral-800 selection:text-white">
      {/* Abstracted Navigation Vector */}
      <nav className="max-w-7xl mx-auto p-4 flex gap-4 text-xs uppercase tracking-widest border-b border-neutral-800 bg-[#0a0a0a]">
        <button onClick={() => setCurrentRoute('home')} className={`hover:text-white ${currentRoute === 'home' ? 'text-white font-bold' : 'text-neutral-500'}`}>[ ROOT ]</button>
        <button onClick={() => setCurrentRoute('directives')} className={`hover:text-white ${currentRoute === 'directives' ? 'text-white font-bold' : 'text-neutral-500'}`}>[ DIRECTIVES ]</button>
        <button onClick={() => setCurrentRoute('comm')} className={`hover:text-white ${currentRoute === 'comm' ? 'text-white font-bold' : 'text-neutral-500'}`}>[ SECURE_COMM ]</button>
        <button onClick={() => setCurrentRoute('admin')} className={`hover:text-red-500 ${currentRoute === 'admin' ? 'text-red-500 font-bold' : 'text-neutral-600'}`}>[ ADMIN_OVR ]</button>
      </nav>

      {renderRoute()}
    </div>
  );
}

// --- ROUTE: HOME ---
function PageHome({ cycleTime }) {
  return (
    <main className="max-w-7xl mx-auto p-8 font-mono">
      <header className="border-b border-neutral-800 pb-4 mb-8 flex justify-between items-end">
        <div>
          <h1 className="text-3xl font-bold tracking-tighter text-white">QGI // NEXUS</h1>
          <p className="text-sm text-neutral-500 uppercase tracking-widest mt-1">Quantum Genesis Initiative</p>
        </div>
        <div className="text-xs text-neutral-600 uppercase tracking-widest">
          SYS.STAT: <span className="text-green-500">NOMINAL</span>
        </div>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="col-span-1 md:col-span-2 border border-neutral-800 bg-[#0a0a0a] p-6">
          <h2 className="text-lg font-semibold text-white mb-4 uppercase tracking-wide border-b border-neutral-800 pb-2">Core Directives</h2>
          <ul className="space-y-3 text-sm text-neutral-400">
            <li className="flex gap-4"><span className="text-neutral-600">01</span><span>Maintain absolute cryptographic silence on unverified channels.</span></li>
            <li className="flex gap-4"><span className="text-neutral-600">02</span><span>Isolate anomalous data vectors outside primary execution threads.</span></li>
            <li className="flex gap-4"><span className="text-neutral-600">03</span><span>Log all temporal drift variances in the immutable ledger.</span></li>
          </ul>
        </div>

        <div className="col-span-1 border border-neutral-800 bg-[#0a0a0a] p-6">
          <h2 className="text-lg font-semibold text-white mb-4 uppercase tracking-wide border-b border-neutral-800 pb-2">Simulation Overview</h2>
          <div className="space-y-4 text-xs uppercase tracking-widest">
            <div className="flex justify-between"><span className="text-neutral-500">Cycle</span><span className="text-white">{cycleTime}</span></div>
            <div className="flex justify-between"><span className="text-neutral-500">Entropy Rate</span><span className="text-white">0.0042%</span></div>
            <div className="flex justify-between"><span className="text-neutral-500">Active Nodes</span><span className="text-white">8,192</span></div>
            <div className="flex justify-between"><span className="text-neutral-500">Containment</span><span className="text-green-500">Secure</span></div>
          </div>
        </div>
      </section>
    </main>
  );
}

// --- ROUTE: DIRECTIVES ---
function PageDirectives() {
  return (
    <main className="max-w-7xl mx-auto p-8 font-mono">
      <header className="border-b border-neutral-800 pb-4 mb-8">
        <h1 className="text-2xl font-bold tracking-tighter text-white">Public Directives Ledger</h1>
      </header>

      <div className="space-y-4">
        {INITIAL_DIRECTIVES.map((directive) => (
          <div key={directive.id} className="border border-neutral-800 bg-[#0a0a0a] p-4 flex flex-col gap-2 transition-colors hover:bg-[#0f0f0f]">
            <div className="flex justify-between text-xs text-neutral-500 uppercase tracking-widest">
              <span>{new Date(directive.timestamp).toISOString()}</span>
              <span>HASH: {directive.hash.substring(0, 12)}...</span>
            </div>
            <h3 className="text-white font-bold tracking-tight">{directive.title}</h3>
            <pre className="text-xs text-neutral-400 mt-2 overflow-x-auto p-2 bg-[#050505] border border-neutral-800">
              {JSON.stringify(directive.payload, null, 2)}
            </pre>
          </div>
        ))}
      </div>
    </main>
  );
}

// --- ROUTE: COMM ---
function PageComm({ setIntakes }) {
  const [payload, setPayload] = useState('');
  const [status, setStatus] = useState('IDLE'); // 'IDLE' | 'PROCESSING' | 'SUCCESS' | 'ERROR'

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!payload.trim()) return;
    setStatus('PROCESSING');

    // Simulate network delay and cryptography
    setTimeout(() => {
      try {
        const mockEncryptedPayload = btoa(payload).substring(0, 64) + '...[ENCRYPTED]';
        const mockSignature = `sig_${Date.now().toString(16)}`;

        const newIntake = {
          id: `i-${Date.now()}`,
          created_at: new Date().toISOString(),
          payload_encrypted: mockEncryptedPayload,
          signature: mockSignature,
          processed: false
        };

        setIntakes(prev => [newIntake, ...prev]);
        setStatus('SUCCESS');
        setPayload('');
        
        setTimeout(() => setStatus('IDLE'), 3000);
      } catch (err) {
        setStatus('ERROR');
      }
    }, 800);
  };

  return (
    <main className="max-w-7xl mx-auto p-8 font-mono">
      <header className="border-b border-neutral-800 pb-4 mb-8">
        <h1 className="text-2xl font-bold tracking-tighter text-white">Secure Intake Vector</h1>
        <p className="text-xs text-neutral-500 mt-2 uppercase tracking-widest">All submissions are cryptographically signed and logged.</p>
      </header>
      
      <form onSubmit={handleSubmit} className="border border-neutral-800 bg-[#0a0a0a] p-6 max-w-xl">
        <div className="mb-4">
          <label className="block text-xs uppercase text-neutral-500 mb-2 tracking-widest">
            Secure Message Vector
          </label>
          <textarea
            required
            value={payload}
            onChange={(e) => setPayload(e.target.value)}
            className="w-full bg-[#050505] border border-neutral-800 text-neutral-200 p-4 font-mono text-sm focus:outline-none focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500 h-32 resize-none"
            placeholder="Enter unclassified transmission..."
          />
        </div>
        <div className="flex items-center justify-between">
          <button
            type="submit"
            disabled={status === 'PROCESSING'}
            className="bg-white text-black px-6 py-2 text-xs uppercase tracking-widest font-bold hover:bg-neutral-300 disabled:opacity-50 transition-colors"
          >
            {status === 'PROCESSING' ? 'Transmitting...' : 'Transmit Data'}
          </button>
          <span className="text-xs uppercase tracking-widest">
            {status === 'SUCCESS' && <span className="text-green-500 animate-pulse">Transmission Logged</span>}
            {status === 'ERROR' && <span className="text-red-500 animate-pulse">Transmission Failed</span>}
          </span>
        </div>
      </form>
    </main>
  );
}

// --- ROUTE: ADMIN ---
function PageAdmin({ intakes, setIntakes }) {
  const handleAcknowledge = (id) => {
    setIntakes(prev => prev.map(intake => 
      intake.id === id ? { ...intake, processed: true } : intake
    ));
  };

  return (
    <main className="max-w-7xl mx-auto p-8 font-mono">
      <div className="bg-red-950/20 border border-red-900/50 p-4 mb-8 text-xs text-red-500 uppercase tracking-widest flex items-center gap-4">
        <span className="font-bold animate-pulse">[!] WARNING</span>
        <span>Simulated Environment: RBAC Middleware bypassed for SPA demonstration.</span>
      </div>

      <header className="border-b border-neutral-800 pb-4 mb-8 flex justify-between items-end">
        <h1 className="text-2xl font-bold tracking-tighter text-red-500">RESTRICTED OPERATIONS CONTROL</h1>
        <div className="text-xs text-red-600 uppercase tracking-widest">Operator Clearance Active</div>
      </header>

      <div className="border border-neutral-800 bg-[#0a0a0a] overflow-x-auto">
        <table className="w-full text-left text-sm text-neutral-400">
          <thead className="text-xs text-neutral-500 uppercase tracking-widest bg-[#050505] border-b border-neutral-800">
            <tr>
              <th className="px-6 py-4">Timestamp</th>
              <th className="px-6 py-4">Encrypted Payload</th>
              <th className="px-6 py-4">Status</th>
              <th className="px-6 py-4">Action</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-800">
            {intakes.map((intake) => (
              <tr key={intake.id} className="hover:bg-[#0f0f0f] transition-colors">
                <td className="px-6 py-4 whitespace-nowrap text-xs">{new Date(intake.created_at).toLocaleString()}</td>
                <td className="px-6 py-4 font-mono text-xs max-w-xs truncate" title={intake.payload_encrypted}>
                  {intake.payload_encrypted}
                </td>
                <td className="px-6 py-4 text-xs tracking-widest">
                  {intake.processed ? (
                    <span className="text-green-500">PROCESSED</span>
                  ) : (
                    <span className="text-yellow-500 animate-pulse">PENDING</span>
                  )}
                </td>
                <td className="px-6 py-4">
                  {!intake.processed && (
                    <button 
                      onClick={() => handleAcknowledge(intake.id)}
                      className="text-xs uppercase tracking-widest bg-neutral-800 text-white px-4 py-2 hover:bg-neutral-700 transition-colors"
                    >
                      Acknowledge
                    </button>
                  )}
                </td>
              </tr>
            ))}
            {intakes.length === 0 && (
              <tr>
                <td colSpan="4" className="px-6 py-8 text-center text-neutral-600 text-xs uppercase tracking-widest">
                  No vectors logged in current cycle.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </main>
  );
}