import React, { useEffect, useMemo, useRef, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

// =========================
// Cipher Clash - Improved Prototype
// Fixed state sync + bot logic + gameplay loops
// =========================

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function caesarShift(str, shift) {
  return str
    .split("")
    .map((c) => {
      const code = c.charCodeAt(0);
      if (code >= 65 && code <= 90)
        return String.fromCharCode(((code - 65 + shift) % 26) + 65);
      if (code >= 97 && code <= 122)
        return String.fromCharCode(((code - 97 + shift) % 26) + 97);
      return c;
    })
    .join("");
}

function createBot(name, difficulty) {
  return {
    name,
    difficulty,
    integrity: 100,
    energy: 0,
  };
}

function solveChance(difficulty) {
  if (difficulty === "easy") return 0.4;
  if (difficulty === "medium") return 0.6;
  return 0.8;
}

function attackChance(difficulty) {
  if (difficulty === "easy") return 0.25;
  if (difficulty === "medium") return 0.4;
  return 0.6;
}

export default function CipherClash() {
  const [player, setPlayer] = useState({ integrity: 100, energy: 0, input: "" });

  const [bots, setBots] = useState(() => [
    createBot("Nova", "easy"),
    createBot("Hex", "medium"),
    createBot("Root", "hard"),
  ]);

  const [round, setRound] = useState(1);
  const [log, setLog] = useState([]);

  const logRef = useRef([]);

  function addLog(msg) {
    logRef.current = [msg, ...logRef.current].slice(0, 10);
    setLog(logRef.current);
  }

  const puzzle = useMemo(() => {
    const words = ["cipher", "security", "crypto", "matrix", "signal"];
    const word = words[rand(0, words.length - 1)];
    const shift = rand(1, 10);

    return {
      original: word,
      encoded: caesarShift(word, shift),
      shift,
    };
  }, [round]);

  function submitAnswer() {
    const correct = player.input.toLowerCase().trim() === puzzle.original;

    if (correct) {
      setPlayer((p) => ({ ...p, energy: p.energy + 25 }));
      addLog("You decrypted the cipher and gained energy.");
    } else {
      setPlayer((p) => ({ ...p, integrity: Math.max(0, p.integrity - 5) }));
      addLog("Incorrect decryption. System stability reduced.");
    }

    setPlayer((p) => ({ ...p, input: "" }));
    setRound((r) => r + 1);
  }

  useEffect(() => {
    const interval = setInterval(() => {
      setBots((prevBots) => {
        return prevBots.map((bot) => {
          let updated = { ...bot };

          // Solve attempt
          if (Math.random() < solveChance(bot.difficulty)) {
            updated.energy += 10;
            addLog(`${bot.name} decoded a fragment.`);
          }

          // Attack attempt
          if (updated.energy > 15 && Math.random() < attackChance(bot.difficulty)) {
            setPlayer((p) => ({
              ...p,
              integrity: Math.max(0, p.integrity - 6),
            }));
            updated.energy -= 10;
            addLog(`${bot.name} launched a cyber attack!`);
          }

          // Bot decay (prevents infinite scaling)
          updated.energy = Math.max(0, updated.energy - 1);

          return updated;
        });
      });
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const gameOver = player.integrity <= 0;

  return (
    <div className="p-6 max-w-3xl mx-auto space-y-4">
      <h1 className="text-2xl font-bold">Cipher Clash</h1>

      <div className="grid grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h2 className="font-semibold">Player</h2>
            <p>Integrity: {player.integrity}</p>
            <p>Energy: {player.energy}</p>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h2 className="font-semibold">Bots</h2>
            {bots.map((b) => (
              <p key={b.name}>
                {b.name} — ❤️ {b.integrity}% ⚡ {b.energy}
              </p>
            ))}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardContent className="p-4 space-y-2">
          <h2 className="font-semibold">Decrypt Caesar Cipher</h2>
          <p className="text-sm text-gray-500">
            Encoded: <b>{puzzle.encoded}</b>
          </p>

          <input
            className="border p-2 w-full"
            value={player.input}
            onChange={(e) => setPlayer((p) => ({ ...p, input: e.target.value }))}
            placeholder="Enter plaintext"
          />

          <Button onClick={submitAnswer}>Submit</Button>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <h2 className="font-semibold">System Log</h2>
          <div className="text-sm space-y-1">
            {log.map((l, i) => (
              <p key={i}>• {l}</p>
            ))}
          </div>
        </CardContent>
      </Card>

      {gameOver && (
        <div className="text-red-500 font-bold text-center">
          SYSTEM BREACHED — GAME OVER
        </div>
      )}
    </div>
  );
}