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

// --- INITIAL STATE & MATH HELPERS ---
const INITIAL_NODES = [
  { id: 0, name: 'Alpha Prime', x: 100, y: 150 },
  { id: 1, name: 'Beta Sector', x: 250, y: 80 },
  { id: 2, name: 'Gamma Nexus', x: 400, y: 150 },
  { id: 3, name: 'Delta Void', x: 250, y: 220 },
];

// 4x4 Adjacency Matrix (Directed, Weighted)
const INITIAL_MATRIX = [
  [0.0, 0.8, 0.2, 0.0],
  [0.1, 0.0, 0.7, 0.4],
  [0.3, 0.1, 0.0, 0.9],
  [0.5, 0.0, 0.2, 0.0],
];

// Power Iteration to approximate Eigenvector Centrality (PageRank style)
const computeCentrality = (matrix, iterations = 10) => {
  const n = matrix.length;
  let vector = new Array(n).fill(1 / n);

  for (let iter = 0; iter < iterations; iter++) {
    let nextVector = new Array(n).fill(0);
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < n; j++) {
        nextVector[i] += matrix[i][j] * vector[j];
      }
    }
    // Normalize (L2 Norm)
    const norm = Math.sqrt(nextVector.reduce((sum, val) => sum + val * val, 0));
    vector = nextVector.map(v => (norm > 0 ? v / norm : 0));
  }
  return vector;
};

// Compute Trace of a square matrix (Sum of diagonal)
const computeTrace = (matrix) => matrix.reduce((sum, row, i) => sum + row[i], 0);

// Matrix Multiplication (2x2 for Combat)
const multiplyMatrices = (A, B) => {
  return [
    [A[0][0] * B[0][0] + A[0][1] * B[1][0], A[0][0] * B[0][1] + A[0][1] * B[1][1]],
    [A[1][0] * B[0][0] + A[1][1] * B[1][0], A[1][0] * B[0][1] + A[1][1] * B[1][1]]
  ];
};

export default function IsomorphPrototype() {
  // Graph State
  const [adjMatrix, setAdjMatrix] = useState(INITIAL_MATRIX);
  const [centrality, setCentrality] = useState([]);
  const [selectedNode, setSelectedNode] = useState(null);

  // Combat Layer State (2x2 Force Matrices: [Unit Type, Stance])
  const [playerForce, setPlayerForce] = useState([[2, 1], [1, 3]]);
  const [enemyForce, setEnemyForce] = useState([[1, 2], [2, 2]]);
  const [combatLog, setCombatLog] = useState('');

  // Calculate Centrality on Matrix change
  useEffect(() => {
    setCentrality(computeCentrality(adjMatrix));
  }, [adjMatrix]);

  // Morph Edge Weight (Simulating a turn action)
  const modifyEdge = (source, target, delta) => {
    const nextMatrix = adjMatrix.map((row, i) =>
      row.map((val, j) => {
        if (i === source && j === target) {
          return Math.max(0, Math.min(2, parseFloat((val + delta).toFixed(1))));
        }
        return val;
      })
    );
    setAdjMatrix(nextMatrix);
  };

  // Resolve Matrix Combat
  const executeCombat = () => {
    // Combat Resolution Formula: Trace(PlayerMatrix * EnemyMatrix^T) vs Trace(EnemyMatrix * PlayerMatrix^T)
    // For simplicity of UI interaction, we multiply Player Force by Enemy Force and check the system stability (Trace)
    const resultMatrix = multiplyMatrices(playerForce, enemyForce);
    const traceVal = computeTrace(resultMatrix);
    
    if (traceVal > 7) {
      setCombatLog(`Combat Resolved. Trace Value: ${traceVal.toFixed(2)} - Morphic Resonance achieved! Node weights shifted.`);
      // Combat outcome mutates the global graph state
      modifyEdge(0, 2, 0.4);
    } else {
      setCombatLog(`Combat Resolved. Trace Value: ${traceVal.toFixed(2)} - System stabilized. Dynamic equilibrium maintained.`);
      modifyEdge(2, 0, 0.2);
    }
  };

  return (
    <div style={{ padding: '24px', fontFamily: 'monospace', backgroundColor: '#0b0f19', color: '#c3c9d6', minHeight: '100vh' }}>
      <header style={{ borderBottom: '2px solid #1e293b', paddingBottom: '16px', marginBottom: '24px' }}>
        <h1 style={{ color: '#38bdf8', margin: 0, fontSize: '2rem', letterSpacing: '2px' }}>ISOMORPH // CORE_ENGINE</h1>
        <p style={{ color: '#64748b', margin: '4px 0 0 0' }}>Systemic Topology & Morphic Vector Resolution</p>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
        
        {/* LEFT COLUMN: THE GRAPH STATE (SPATIAL CONTROL) */}
        <div style={{ backgroundColor: '#111827', padding: '20px', borderRadius: '8px', border: '1px solid #1e293b' }}>
          <h2 style={{ color: '#f8fafc', marginTop: 0 }}>Layer 1: Eigenvector Topology</h2>
          <p style={{ fontSize: '0.85rem', color: '#94a3b8' }}>Alter edge weights to shift node centrality. Control requires high centrality.</p>
          
          {/* Visual Graph Viewport */}
          <div style={{ position: 'relative', width: '100%', height: '280px', backgroundColor: '#030712', borderRadius: '6px', border: '1px dashed #334155', overflow: 'hidden', marginBottom: '20px' }}>
            {INITIAL_NODES.map((node, i) => {
              const score = centrality[i] ? centrality[i].toFixed(3) : '0.000';
              const isDominant = centrality[i] === Math.max(...centrality);
              return (
                <div
                  key={node.id}
                  onClick={() => setSelectedNode(node.id)}
                  style={{
                    position: 'absolute',
                    left: node.x,
                    top: node.y,
                    transform: 'translate(-50%, -50%)',
                    width: '90px',
                    padding: '8px',
                    borderRadius: '4px',
                    backgroundColor: selectedNode === node.id ? '#1e3a8a' : '#1f2937',
                    border: isDominant ? '2px solid #10b981' : '1px solid #4b5563',
                    textAlign: 'center',
                    cursor: 'pointer',
                    boxShadow: isDominant ? '0 0 12px rgba(16, 185, 129, 0.3)' : 'none',
                    transition: 'all 0.2s'
                  }}
                >
                  <div style={{ fontSize: '0.75rem', fontWeight: 'bold', color: '#f3f4f6' }}>{node.name}</div>
                  <div style={{ fontSize: '0.85rem', color: isDominant ? '#10b981' : '#38bdf8', marginTop: '4px' }}>𝝀: {score}</div>
                </div>
              );
            })}
            <div style={{ position: 'absolute', bottom: '8px', left: '8px', fontSize: '0.7rem', color: '#4b5563' }}>
              *Green border indicates current Dominant Centrality Node
            </div>
          </div>

          {/* Matrix Editor */}
          <h3>Adjacency Matrix Mutation</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '6px', maxWidth: '320px' }}>
            {adjMatrix.map((row, i) =>
              row.map((val, j) => (
                <div key={`${i}-${j}`} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', bg: '#1f2937', padding: '4px', borderRadius: '4px', border: '1px solid #374151' }}>
                  <span style={{ fontSize: '0.65rem', color: '#6b7280' }}>{i}→{j}</span>
                  <span style={{ fontSize: '0.9rem', color: '#e5e7eb', margin: '2px 0' }}>{val.toFixed(1)}</span>
                  <div style={{ display: 'flex', gap: '2px' }}>
                    <button onClick={() => modifyEdge(i, j, 0.1)} style={{ padding: '0 4px', cursor: 'pointer', backgroundColor: '#374151', color: '#fff', border: 'none', borderRadius: '2px' }}>+</button>
                    <button onClick={() => modifyEdge(i, j, -0.1)} style={{ padding: '0 4px', cursor: 'pointer', backgroundColor: '#374151', color: '#fff', border: 'none', borderRadius: '2px' }}>-</button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

        {/* RIGHT COLUMN: COMBAT RESOLUTION (LINEAR ALGEBRA) */}
        <div style={{ display: 'flex', flexDirection: 'col', gap: '24px' }}>
          
          <div style={{ backgroundColor: '#111827', padding: '20px', borderRadius: '8px', border: '1px solid #1e293b', width: '100%' }}>
            <h2 style={{ color: '#f8fafc', marginTop: 0 }}>Layer 2: Linear Algebra Combat</h2>
            <p style={{ fontSize: '0.85rem', color: '#94a3b8' }}>Mutate your 2x2 Force Matrix. Victory depends on the Trace of the matrix product.</p>

            <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
              {/* Player Matrix */}
              <div>
                <h4 style={{ margin: '0 0 6px 0', color: '#38bdf8' }}>Player Force Matrix</h4>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 50px)', gap: '6px', padding: '8px', backgroundColor: '#1f2937', borderRadius: '4px' }}>
                  {playerForce.flat().map((val, idx) => {
                    const r = Math.floor(idx / 2);
                    const c = idx % 2;
                    return (
                      <input
                        key={`p-${idx}`}
                        type="number"
                        value={val}
                        onChange={(e) => {
                          const nextF = [...playerForce];
                          nextF[r][c] = parseInt(e.target.value) || 0;
                          setPlayerForce(nextF);
                        }}
                        style={{ width: '100%', backgroundColor: '#030712', color: '#fff', border: '1px solid #4b5563', textAlign: 'center', padding: '4px 0' }}
                      />
                    );
                  })}
                </div>
              </div>

              {/* Enemy Matrix */}
              <div>
                <h4 style={{ margin: '0 0 6px 0', color: '#f43f5e' }}>Enemy Force Matrix</h4>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 50px)', gap: '6px', padding: '8px', backgroundColor: '#1f2937', borderRadius: '4px' }}>
                  {enemyForce.flat().map((val, idx) => {
                    const r = Math.floor(idx / 2);
                    const c = idx % 2;
                    return (
                      <input
                        key={`e-${idx}`}
                        type="number"
                        value={val}
                        onChange={(e) => {
                          const nextF = [...enemyForce];
                          nextF[r][c] = parseInt(e.target.value) || 0;
                          setEnemyForce(nextF);
                        }}
                        style={{ width: '100%', backgroundColor: '#030712', color: '#fff', border: '1px solid #4b5563', textAlign: 'center', padding: '4px 0' }}
                      />
                    );
                  })}
                </div>
              </div>
            </div>

            <button
              onClick={executeCombat}
              style={{
                width: '100%',
                padding: '12px',
                backgroundColor: '#0284c7',
                color: '#fff',
                border: 'none',
                borderRadius: '4px',
                fontWeight: 'bold',
                cursor: 'pointer',
                letterSpacing: '1px'
              }}
            >
              RESOLVE VECTOR ENGAGEMENT
            </button>

            {combatLog && (
              <blockquote style={{ margin: '16px 0 0 0', padding: '12px', backgroundColor: '#030712', borderLeft: '4px solid #38bdf8', fontSize: '0.85rem', color: '#e2e8f0' }}>
                {combatLog}
              </blockquote>
            )}
          </div>

          {/* SYSTEM DOCTRINE WIN CONDITION INFO */}
          <div style={{ backgroundColor: '#111827', padding: '20px', borderRadius: '8px', border: '1px solid #1e293b', width: '100%' }}>
            <h2 style={{ color: '#f8fafc', marginTop: 0 }}>Layer 5: Win Condition Objective</h2>
            <p style={{ fontSize: '0.85rem', color: '#94a3b8', marginBottom: '8px' }}>
              Your system target is a fixed-point invariant configuration.
            </p>
            <div style={{ padding: '10px', backgroundColor: '#1c1917', border: '1px solid #78716c', borderRadius: '4px', color: '#e7e5e4', fontSize: '0.8rem' }}>
              <strong>Current Doctrine Target:</strong> High isolation of Gamma Nexus, structural dominance of Alpha Prime. Shift edge weight metrics until the Eigenvector distribution stabilizers match your faction signature.
            </div>
          </div>

        </div>

      </div>
    </div>
  );
}