"use client";

import { useState } from "react";

const EncryptionDemo = () => {
  const [message, setMessage] = useState("");
  const [encrypted, setEncrypted] = useState("");
  const [key, setKey] = useState("");

  const mockEncrypt = (text: string) => {
    if (!text.trim()) return "";
    // Simulate encryption by reversing and adding salt
    const salt = "⚡🔐";
    const reversed = text.split("").reverse().join("");
    return `encrypted_${btoa(reversed)}_${salt}`;
  };

  const handleEncrypt = () => {
    const result = mockEncrypt(message);
    setEncrypted(result);
    setKey(`key_${Date.now().toString(16)}`);
  };

  const handleDecrypt = () => {
    if (!encrypted) return;
    // Simulate decryption
    const parts = encrypted.split("_");
    if (parts.length < 2) return;
    const decoded = atob(parts[1]);
    const original = decoded.split("").reverse().join("");
    setMessage(original);
    setEncrypted("");
  };

  return (
    <div className="glass rounded-2xl border border-white/10 p-8">
      <h3 className="mb-6 font-orbitron text-2xl font-bold">ENCRYPTION DEMO</h3>
      <p className="mb-6 text-foreground/70">
        Experience client‑side encryption. Your message never leaves your browser.
      </p>
      <div className="space-y-6">
        <div>
          <label className="mb-2 block text-sm font-medium">Message to encrypt</label>
          <textarea
            className="glass w-full rounded-xl border border-white/10 bg-transparent p-4"
            rows={3}
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Enter a secret message..."
          />
        </div>
        <div className="flex gap-4">
          <button
            className="flex-1 rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple py-3 font-bold text-background"
            onClick={handleEncrypt}
          >
            🔐 Encrypt
          </button>
          <button
            className="flex-1 rounded-full glass border border-neon-cyan/30 py-3 font-bold text-neon-cyan"
            onClick={handleDecrypt}
            disabled={!encrypted}
          >
            🔓 Decrypt
          </button>
        </div>
        {encrypted && (
          <>
            <div>
              <label className="mb-2 block text-sm font-medium">Encrypted payload</label>
              <div className="glass overflow-auto rounded-xl border border-neon-cyan/30 p-4 font-mono text-sm">
                {encrypted}
              </div>
            </div>
            <div>
              <label className="mb-2 block text-sm font-medium">Generated key</label>
              <div className="glass overflow-auto rounded-xl border border-neon-green/30 p-4 font-mono text-sm text-neon-green">
                {key}
              </div>
            </div>
            <div className="rounded-xl bg-gradient-to-r from-neon-cyan/10 to-neon-purple/10 p-4">
              <div className="flex items-center gap-3">
                <div className="text-2xl">🛡️</div>
                <div className="text-sm">
                  Educational transform only — production wallets use audited libs and real key agreement.
                </div>
              </div>
            </div>
          </>
        )}
        <div className="text-xs text-foreground/50">
          <p>
            All sensitive data on CyberLux is encrypted using AES‑256‑GCM. Private keys are never transmitted.
          </p>
        </div>
      </div>
    </div>
  );
};

export default EncryptionDemo;