import React from "react";
import { motion, AnimatePresence } from "framer-motion";

interface BattleStatusProps {
  phase: string;
  myIndex: number;
  turn: number;
  players: any[];
  lastHit: boolean | null;
  winner: string | null;
  gameOver: boolean | null;
}

export default function BattleStatus({
  phase,
  myIndex,
  turn,
  players,
  lastHit,
  winner,
  gameOver,
}: BattleStatusProps) {
  const isMyTurn = turn === myIndex;

  // -----------------------------
  // STATUS TEXT
  // -----------------------------
  let statusText = "";

  if (gameOver) {
    statusText =
      winner === players[myIndex]?.user_id ? "🎉 Victory!" : "💥 Defeat";
  } else if (phase === "placement") {
    statusText = "Place Your Fleet";
  } else {
    statusText = isMyTurn ? "Your Turn — FIRE!" : "Opponent’s Turn";
  }

  // -----------------------------
  // Last hit/miss indicator
  // -----------------------------
  let hitText = null;
  if (lastHit === true) hitText = "🔥 HIT!";
  else if (lastHit === false) hitText = "💦 MISS";

  return (
    <motion.div
      initial={{ opacity: 0, y: 6 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      style={{
        textAlign: "center",
        marginBottom: 14,
        color: "#eee",
        fontFamily: "sans-serif",
      }}
    >
      {/* MAIN STATUS */}
      <motion.div
        key={statusText}
        initial={{ opacity: 0, y: -4 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
        style={{
          fontSize: 20,
          fontWeight: 700,
          marginBottom: 4,
        }}
      >
        {statusText}
      </motion.div>

      {/* HIT / MISS FEEDBACK */}
      <AnimatePresence mode="wait">
        {hitText && !gameOver && (
          <motion.div
            key={hitText}
            initial={{ opacity: 0, scale: 0.7 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.7 }}
            transition={{ duration: 0.25 }}
            style={{
              color: lastHit ? "#e74c3c" : "#3498db",
              fontSize: 18,
              fontWeight: 600,
              marginTop: 4,
            }}
          >
            {hitText}
          </motion.div>
        )}
      </AnimatePresence>

      {/* PHASE */}
      <div style={{ marginTop: 6, opacity: 0.55, fontSize: 14 }}>
        Phase: <strong>{phase}</strong>
      </div>
    </motion.div>
  );
}