"use client";

import React from "react";
import { Planet, Starship } from "@/types/swapi";
import { t } from "@/content/locales";

interface ActionPanelProps {
  planet?: Planet | null;
  enemy?: Starship | null;
  onAction: () => void;
  onEscape?: () => void;
  isLoading?: boolean;
}

const getPlanetTheme = (terrain: string = "", climate: string = "") => {
  const terr = terrain.toLowerCase();
  const clim = climate.toLowerCase();

  if (terr.includes("ocean") || terr.includes("water"))
    return {
      color: "text-blue-400",
      border: "border-blue-500",
      glow: "shadow-[0_0_20px_#3b82f6]",
      label: t.ACTION_PANEL.MODES.AQUATIC,
    };
  if (terr.includes("forest") || terr.includes("jungle"))
    return {
      color: "text-green-400",
      border: "border-green-500",
      glow: "shadow-[0_0_20px_#22c55e]",
      label: t.ACTION_PANEL.MODES.VERDANT,
    };
  if (terr.includes("desert") || clim.includes("arid"))
    return {
      color: "text-orange-400",
      border: "border-orange-500",
      glow: "shadow-[0_0_20px_#f97316]",
      label: t.ACTION_PANEL.MODES.ARID,
    };
  if (
    terr.includes("ice") ||
    terr.includes("glacier") ||
    clim.includes("frozen")
  )
    return {
      color: "text-cyan-200",
      border: "border-cyan-300",
      glow: "shadow-[0_0_20px_#a5f3fc]",
      label: t.ACTION_PANEL.MODES.CRYO,
    };
  if (terr.includes("city") || terr.includes("urban"))
    return {
      color: "text-purple-400",
      border: "border-purple-500",
      glow: "shadow-[0_0_20px_#a855f7]",
      label: t.ACTION_PANEL.MODES.ECUMENOPOLIS,
    };

  return {
    color: "text-yellow-500",
    border: "border-yellow-500",
    glow: "shadow-[0_0_20px_#eab308]",
    label: t.ACTION_PANEL.MODES.STANDARD,
  };
};

export default function ActionPanel({
  planet,
  enemy,
  onAction,
  onEscape,
  isLoading,
}: ActionPanelProps) {
  const isCombat = !!enemy;
  const theme =
    !isCombat && planet
      ? getPlanetTheme(planet.terrain, planet.climate)
      : {
          color: "text-red-500",
          border: "border-red-600",
          glow: "shadow-[0_0_30px_#dc2626]",
          label: t.ACTION_PANEL.MODES.HOSTILE,
        };

  const displayName = isCombat ? enemy.name : planet?.name;
  const displaySubtitle = isCombat
    ? `${t.ACTION_PANEL.LABELS.CLASS}: ${enemy.starship_class} // ${t.ACTION_PANEL.LABELS.CREW}: ${enemy.crew}`
    : `${t.ACTION_PANEL.LABELS.SECTOR}: ${planet?.climate} // ${planet?.terrain}`;

  return (
    <div
      className={`w-full max-w-4xl mt-6 bg-black/90 backdrop-blur-md border-2 rounded-lg p-6 shadow-2xl animate-in fade-in slide-in-from-bottom-4 relative overflow-hidden transition-colors duration-500 ${theme.border}`}
    >
      <div
        className={`absolute inset-0 bg-[linear-gradient(transparent_0%,${isCombat ? "rgba(220,38,38,0.1)" : "rgba(234,179,8,0.05)"}_50%,transparent_100%)] bg-[length:100%_4px] animate-pulse pointer-events-none`}
      />

      <div className="flex flex-col md:flex-row gap-8 items-center relative z-10">
        <div className="relative shrink-0">
          <div
            className={`w-32 h-32 rounded-full border-4 ${theme.border} ${theme.glow} flex items-center justify-center transition-all duration-700 bg-black overflow-hidden relative`}
          >
            {isCombat ? (
              <div className="text-red-600 animate-pulse font-black text-5xl drop-shadow-[0_0_10px_rgba(220,38,38,0.8)]">
                !
              </div>
            ) : (
              <>
                <div
                  className="w-full h-full transition-colors duration-1000"
                  style={{
                    background: `radial-gradient(circle at 30% 30%, ${theme.color.replace("text-", "")}, #000)`,
                    backgroundColor: theme.color.includes("blue")
                      ? "#60a5fa"
                      : theme.color.includes("green")
                        ? "#4ade80"
                        : theme.color.includes("orange")
                          ? "#fb923c"
                          : theme.color.includes("cyan")
                            ? "#22d3ee"
                            : theme.color.includes("purple")
                              ? "#c084fc"
                              : "#eab308",
                  }}
                />
                <div className="absolute inset-0 bg-gradient-to-tr from-black/60 via-transparent to-white/20 pointer-events-none" />
                <div className="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] animate-spin-slow mix-blend-overlay" />
              </>
            )}
          </div>

          <div
            className={`absolute -top-2 -right-2 bg-black border px-2 py-0.5 text-[8px] uppercase tracking-widest ${isCombat ? "border-red-600 text-red-600" : "border-yellow-500/50 text-yellow-500"}`}
          >
            {theme.label}
          </div>
        </div>

        <div className="flex-1 text-center md:text-left space-y-3">
          <div>
            <h3
              className={`text-3xl font-black tracking-widest uppercase ${isCombat ? "text-red-600" : "text-white"}`}
            >
              {displayName}
            </h3>
            <p
              className={`${theme.color} text-xs font-bold uppercase tracking-widest opacity-80`}
            >
              {displaySubtitle}
            </p>
          </div>

          <div
            className={`grid grid-cols-2 gap-4 border-t border-b py-3 ${isCombat ? "border-red-900/30" : "border-yellow-500/10"}`}
          >
            <div className="text-[10px] uppercase">
              <span
                className={isCombat ? "text-red-500/50" : "text-yellow-500/50"}
              >
                {isCombat
                  ? t.ACTION_PANEL.LABELS.MANUFACTURER
                  : t.ACTION_PANEL.LABELS.POPULATION}
              </span>
              <p className="text-white font-mono truncate">
                {isCombat
                  ? enemy.manufacturer
                  : planet?.population.toLocaleString()}
              </p>
            </div>
            <div className="text-[10px] uppercase">
              <span
                className={isCombat ? "text-red-500/50" : "text-yellow-500/50"}
              >
                {isCombat
                  ? t.ACTION_PANEL.LABELS.COST
                  : t.ACTION_PANEL.LABELS.GRAVITY}
              </span>
              <p className="text-white font-mono">
                {isCombat ? `${enemy.cost_in_credits} Cr` : planet?.gravity}
              </p>
            </div>
          </div>

          <p
            className={`text-xs italic leading-relaxed ${isCombat ? "text-red-400/60" : "text-yellow-500/60"}`}
          >
            {isCombat
              ? t.ACTION_PANEL.STATUS.COMBAT_WARNING
              : t.ACTION_PANEL.STATUS.PLANET_SCAN}
          </p>
        </div>

        <div className="flex flex-col gap-3 shrink-0 w-full md:w-auto">
          <button
            onClick={onAction}
            disabled={isLoading}
            className={`w-full md:w-auto px-10 py-5 border-2 font-black uppercase tracking-[0.3em] transition-all relative group
              ${
                isCombat
                  ? "border-red-600 text-red-600 hover:bg-red-600 hover:text-white shadow-[0_0_15px_rgba(220,38,38,0.3)]"
                  : "border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-black hover:shadow-[0_0_30px_#eab308]"
              } ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
          >
            {isLoading ? (
              <span className="flex items-center gap-2">
                <span
                  className={`animate-ping inline-flex h-2 w-2 rounded-full ${isCombat ? "bg-red-600" : "bg-yellow-500"}`}
                ></span>
                {t.ACTION_PANEL.STATUS.ENGAGING}
              </span>
            ) : isCombat ? (
              t.ACTION_PANEL.BUTTONS.FIRE
            ) : (
              t.ACTION_PANEL.BUTTONS.JUMP
            )}
          </button>

          {isCombat && (
            <button
              onClick={onEscape}
              className="px-10 py-2 border border-white/20 text-white/40 text-[10px] uppercase tracking-widest hover:bg-white/5 hover:text-white transition-all"
            >
              {t.ACTION_PANEL.BUTTONS.ESCAPE}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}