import { useState, useEffect } from "react";

const BOMB_CLR = "#e05252";
const CT_COLOR = "#4a9eff";

const PipBombTimer = ({ bombData, settings }) => {
  const blow = bombData?.m_blow_time ?? 0;
  const defuse = bombData?.m_defuse_time ?? 0;
  const defusing = bombData?.m_is_defusing ?? false;
  const defused = bombData?.m_is_defused ?? false;

  // Guard: don't render if no bomb planted
  if (!blow && !defusing && !defused) return null;

  // Guard: respect settings
  if (settings?.showBombTimer === false) return null;

  const pct = Math.max(0, Math.min(1, blow / 40));
  const defPct = defusing && defuse > 0
    ? Math.max(0, Math.min(1, defuse / (bombData?.m_has_kit ? 5 : 10)))
    : 0;

  // Blink animation when blow < 10
  const [blink, setBlink] = useState(false);
  useEffect(() => {
    if (defused) {
      setBlink(false);
      return;
    }
    const id = setInterval(() => setBlink(b => !b), blow < 10 ? 240 : 480);
    return () => clearInterval(id);
  }, [blow < 10, defused]);

  const timeColor = defused ? "#3dd68c"
    : blow < 5 ? (blink ? "#fca5a5" : BOMB_CLR)
    : blow < 10 ? (blink ? "#f87171" : "#fca5a5")
    : "#fca5a5";

  return (
    <div
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        height: 28,
        zIndex: 10,
        background: "rgba(40,8,8,0.88)",
        borderTop: "1px solid rgba(224,82,82,0.25)",
        display: "flex",
        alignItems: "center",
        padding: "0 8px",
        gap: 8,
      }}
    >
      {/* Bomb icon */}
      <div
        style={{
          width: 10,
          height: 10,
          background: defused ? "#3dd68c" : BOMB_CLR,
          WebkitMask: "url('./assets/icons/c4_sml.png') no-repeat center/contain",
          flexShrink: 0,
        }}
      />

      {/* Time display */}
      <span
        style={{
          fontSize: 13,
          fontWeight: 900,
          fontFamily: "monospace",
          color: timeColor,
          lineHeight: 1,
          transition: "color 0.08s",
        }}
      >
        {defused ? "SAFE" : `${blow.toFixed(1)}s`}
      </span>

      {/* Progress bar */}
      <div
        style={{
          flex: 1,
          height: 3,
          background: "rgba(0,0,0,0.5)",
          borderRadius: 2,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            height: "100%",
            width: `${pct * 100}%`,
            background: BOMB_CLR,
            transition: "width 0.1s linear",
          }}
        />
      </div>

      {/* Defuse status */}
      {defusing && (
        <>
          <span
            style={{
              fontSize: 9,
              fontWeight: 900,
              color: CT_COLOR,
              letterSpacing: "0.1em",
            }}
          >
            DEFUSE {defuse.toFixed(1)}s
          </span>
          {/* Defuse progress bar */}
          <div
            style={{
              width: 40,
              height: 3,
              background: "rgba(0,0,0,0.5)",
              borderRadius: 2,
              overflow: "hidden",
            }}
          >
            <div
              style={{
                height: "100%",
                width: `${(1 - defPct) * 100}%`,
                background: CT_COLOR,
                transition: "width 0.1s linear",
              }}
            />
          </div>
        </>
      )}
    </div>
  );
};

export default PipBombTimer;
