import { useState, useEffect } from 'react';
import signatureData from '../config/signature.json';

export default function CreatorsMark() {
  const [glitch, setGlitch] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setGlitch(true);
      setTimeout(() => setGlitch(false), 150);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      minHeight: '60vh', padding: '40px', textAlign: 'center'
    }}>
      <style>{`
        @keyframes scanline {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100vh); }
        }
        .signature-box {
          position: relative;
          background: rgba(0, 243, 255, 0.05);
          border: 1px solid var(--accent-cyan);
          border-radius: 12px;
          padding: 40px 60px;
          box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.1);
          overflow: hidden;
        }
        .signature-box::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0; height: 10px;
          background: rgba(0, 243, 255, 0.5);
          animation: scanline 6s linear infinite;
          opacity: 0.5;
        }
        .glitch-text {
          font-family: monospace;
          font-size: 2rem;
          font-weight: bold;
          color: var(--accent-cyan);
          letter-spacing: 2px;
          text-shadow: 0 0 10px var(--accent-cyan);
          position: relative;
        }
        .glitch-active {
          animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
          text-shadow: 2px 0 var(--accent-red), -2px 0 var(--accent-yellow);
        }
        @keyframes shake {
          10%, 90% { transform: translate3d(-1px, 0, 0); }
          20%, 80% { transform: translate3d(2px, 0, 0); }
          30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
          40%, 60% { transform: translate3d(4px, 0, 0); }
        }
      `}</style>
      
      <div className="signature-box">
        <h2 style={{color: 'var(--text-muted)', fontSize: '1rem', letterSpacing: '4px', marginBottom: '30px'}}>
          XCU OMNI-ENGINE
        </h2>
        
        <div style={{marginBottom: '40px'}}>
          <div style={{fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '10px'}}>THE CREATOR'S CRYPTOGRAPHIC MARK</div>
          <div className={`glitch-text ${glitch ? 'glitch-active' : ''}`}>
            {signatureData.signature || "[TSM.ID].UNKNOWN.XXXX"}
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px',
          borderTop: '1px solid rgba(0, 243, 255, 0.2)', paddingTop: '30px',
          textAlign: 'left', fontFamily: 'monospace', fontSize: '0.85rem'
        }}>
          <div>
            <div style={{color: 'var(--text-muted)'}}>DNA CHECKSUM (MD5)</div>
            <div style={{color: 'var(--accent-yellow)', wordBreak: 'break-all'}}>{signatureData.hash || "UNKNOWN"}</div>
          </div>
          <div>
            <div style={{color: 'var(--text-muted)'}}>FORGED TIMESTAMP</div>
            <div style={{color: 'var(--accent-cyan)'}}>{new Date(signatureData.timestamp || Date.now()).toLocaleString()}</div>
          </div>
          <div style={{gridColumn: '1 / -1', marginTop: '10px'}}>
            <div style={{color: 'var(--text-muted)'}}>FILES COMPILED</div>
            <div style={{color: 'var(--accent-purple)'}}>{signatureData.files_scanned || 0} QUANTUM NODES</div>
          </div>
        </div>
      </div>
      
      <p style={{marginTop: '30px', color: 'var(--text-muted)', maxWidth: '600px', fontSize: '0.9rem', lineHeight: '1.6'}}>
        Identitas Mutlak ini tertanam di dalam setiap berkas sumber. Perubahan pada satu karakter kode saja akan memicu mutasi UID Kriptografi. Mesin ini tidak dapat dipalsukan.
      </p>
    </div>
  );
}
