import { useState, useCallback, useEffect } from "react";
import { KeyRound, Lock, Unlock } from "lucide-react";

function vigenere(text, key, mode) {
  const keyChars = key.toUpperCase().replace(/[^A-Z0-9]/g, "");
  if (keyChars.length === 0) return "";

  return text
    .split("")
    .map((ch, i) => {
      if (ch === " ") return " ";

      // 英文字母 A-Z / a-z
      if (/[a-zA-Z]/.test(ch)) {
        const upper = ch.toUpperCase();
        const base = "A".charCodeAt(0);
        const shift = (keyChars.charCodeAt(i % keyChars.length) - 65) % 26;
        if (mode === "encrypt") {
          return String.fromCharCode(((upper.charCodeAt(0) - base + shift) % 26) + base);
        } else {
          return String.fromCharCode(((upper.charCodeAt(0) - base - shift + 26) % 26) + base);
        }
      }

      // 数字 0-9
      if (/[0-9]/.test(ch)) {
        const num = parseInt(ch);
        const shift = parseInt(keyChars[i % keyChars.length]) % 10;
        if (mode === "encrypt") {
          return String((num + shift) % 10);
        } else {
          return String((num - shift + 10) % 10);
        }
      }

      // 中文及其他字符：按 Unicode 偏移，用数字的偏移量
      const code = ch.charCodeAt(0);
      const shift = (keyChars.charCodeAt(i % keyChars.length) - 48) % 256;
      if (mode === "encrypt") {
        return String.fromCharCode(code + shift);
      } else {
        return String.fromCharCode(code - shift);
      }
    })
    .join("");
}

export default function VigenereCipher() {
  const [plaintext, setPlaintext] = useState("");
  const [ciphertext, setCiphertext] = useState("");
  const [key, setKey] = useState("");

  const handlePlaintextChange = useCallback(
    (e) => {
      const val = e.target.value;
      setPlaintext(val);
      if (key.trim()) {
        setCiphertext(vigenere(val, key, "encrypt"));
      } else {
        setCiphertext("");
      }
    },
    [key]
  );

  const handleCiphertextChange = useCallback(
    (e) => {
      const val = e.target.value;
      setCiphertext(val);
      if (key.trim()) {
        setPlaintext(vigenere(val, key, "decrypt"));
      } else {
        setPlaintext("");
      }
    },
    [key]
  );

  const handleKeyChange = useCallback((e) => {
    const val = e.target.value.replace(/[^a-zA-Z0-9 ]/g, "").toUpperCase();
    setKey(val);
  }, []);

  useEffect(() => {
    if (plaintext && key.trim()) {
      setCiphertext(vigenere(plaintext, key, "encrypt"));
    }
  }, [key, plaintext]);

  useEffect(() => {
    if (ciphertext && key.trim()) {
      setPlaintext(vigenere(ciphertext, key, "decrypt"));
    }
  }, [key, ciphertext]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 flex items-center justify-center p-4">
      <div className="w-full max-w-2xl">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center gap-3 mb-3">
            <KeyRound className="w-10 h-10 text-indigo-400" />
            <h1 className="text-4xl font-bold text-white tracking-tight">
              蛇脖加解密工具
            </h1>
          </div>
          <p className="text-indigo-300/70 text-sm">
            支持中文 · 英文自动大写 · 密钥支持字母 + 数字
          </p>
        </div>

        {/* Cards */}
        <div className="space-y-4">
          {/* 密钥 */}
          <div className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-5 shadow-lg shadow-indigo-500/10">
            <label className="flex items-center gap-2 text-indigo-300 font-semibold text-sm mb-2">
              <KeyRound size={16} />
              密钥 (Key) — 字母 + 数字
            </label>
            <input
              type="text"
              value={key}
              onChange={handleKeyChange}
              placeholder="输入密钥，如：SECRET123 或 2024"
              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-mono placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
            />
          </div>

          {/* 明文 */}
          <div className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-5 shadow-lg shadow-indigo-500/10">
            <label className="flex items-center gap-2 text-emerald-400 font-semibold text-sm mb-2">
              <Unlock size={16} />
              明文 (Plaintext) — 支持中文/英文/数字
            </label>
            <textarea
              value={plaintext}
              onChange={handlePlaintextChange}
              placeholder="输入明文，如：你好2024 HELLO"
              rows={3}
              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-mono placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all resize-none"
            />
          </div>

          {/* 密文 */}
          <div className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-5 shadow-lg shadow-indigo-500/10">
            <label className="flex items-center gap-2 text-amber-400 font-semibold text-sm mb-2">
              <Lock size={16} />
              密文 (Ciphertext) — 支持中文/英文/数字
            </label>
            <textarea
              value={ciphertext}
              onChange={handleCiphertextChange}
              placeholder="输入密文，如：加密后的内容"
              rows={3}
              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white text-lg font-mono placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all resize-none"
            />
          </div>
        </div>

        {/* Footer */}
        <div className="text-center mt-6 text-white/30 text-xs">
          空格不加密 · 英文自动大写 · 密钥支持 A-Z + 0-9 · 数字和中文均按偏移加密
        </div>
      </div>
    </div>
  );
}
<script async src="https://3.gemigo.app/__gemigo/favicon-runtime.v1.js" data-gemigo-favicon-runtime></script><script defer src="https://3.gemigo.app/__gemigo/analytics.v2.js" data-gemigo-analytics></script>