"use client";

import React from "react";
import { t } from "@/content/locales";

interface PowerSettings {
  engines: number;
  lasers: number;
  shields: number;
}

interface PowerDistributorProps {
  power: PowerSettings;
  onUpdatePower: (newSettings: PowerSettings) => void;
  disabled?: boolean;
  isRerouting?: boolean;
}

export default function PowerDistributor({
  power,
  onUpdatePower,
  disabled = false,
  isRerouting = false,
}: PowerDistributorProps) {
  const handleBoost = (system: keyof PowerSettings) => {
    if (disabled || isRerouting) return;

    const newSettings = { ...power };
    if (power[system] <= 4) {
      const otherSystems = (
        Object.keys(power) as Array<keyof PowerSettings>
      ).filter((s) => s !== system);

      if (power[otherSystems[0]] > 0 && power[otherSystems[1]] > 0) {
        newSettings[system] += 2;
        newSettings[otherSystems[0]] -= 1;
        newSettings[otherSystems[1]] -= 1;
        onUpdatePower(newSettings);
      }
    }
  };

  const handleReset = () => {
    if (disabled || isRerouting) return;
    onUpdatePower({ engines: 3, lasers: 3, shields: 3 });
  };

  const systems = [
    {
      key: "engines" as const,
      label: t.SYSTEMS.ENGINES,
      color: "bg-blue-500",
      glow: "shadow-[0_0_15px_#3b82f6]",
    },
    {
      key: "lasers" as const,
      label: t.SYSTEMS.LASERS,
      color: "bg-red-600",
      glow: "shadow-[0_0_15px_#dc2626]",
    },
    {
      key: "shields" as const,
      label: t.SYSTEMS.SHIELDS,
      color: "bg-green-500",
      glow: "shadow-[0_0_15px_#22c55e]",
    },
  ];

  return (
    <div className="bg-[#080808]/90 border-2 border-blue-500/60 p-4 rounded-xl w-full h-full flex flex-col justify-between backdrop-blur-md relative overflow-hidden">
      {/* Header */}
      <div className="flex justify-between items-start mb-6">
        <div>
          <h3 className="font-aurebesh text-green-500 text-lg tracking-wider">
            {t.SYSTEMS.POWER_MANAGEMENT}
          </h3>
          <div className="text-[10px] font-mono text-green-500/80 uppercase">
            {t.SYSTEMS.SUB_LABEL}
          </div>
        </div>

        <button
          onClick={handleReset}
          disabled={disabled || isRerouting}
          className="text-[10px] font-mono px-3 py-1 border border-yellow-500/30 text-yellow-500/80 hover:text-yellow-500 hover:border-yellow-500 transition-all rounded uppercase disabled:opacity-60"
        >
          {t.SYSTEMS.RESET}
        </button>
      </div>

      <div className="grid grid-cols-3 gap-4 flex-grow">
        {systems.map((sys) => (
          <div key={sys.key} className="flex flex-col items-center group">
            <button
              onClick={() => handleBoost(sys.key)}
              disabled={disabled || isRerouting || power[sys.key] >= 6}
              className="w-full mb-3 py-2 bg-yellow-500/5 border border-yellow-500/40 hover:bg-yellow-500/20 text-yellow-500 rounded-lg text-sm transition-all active:scale-95 disabled:opacity-50 group-hover:border-yellow-500/50"
            >
              {t.SYSTEMS.BOOST}
            </button>

            {/* Visual Bar */}
            <div className="flex flex-col-reverse gap-1.5 h-40 w-full bg-black/60 border border-white/40 p-1.5 rounded-md shadow-inner">
              {[...Array(6)].map((_, i) => (
                <div
                  key={i}
                  className={`h-full w-full rounded-sm transition-all duration-500 ${
                    i < power[sys.key]
                      ? `${sys.color} ${sys.glow}`
                      : "bg-white/5"
                  }`}
                />
              ))}
            </div>

            <span className="mt-3 text-[10px] font-mono uppercase text-yellow-500 tracking-widest">
              {sys.label}
            </span>
            <span className="text-[10px] font-mono text-white/60">
              LVL {power[sys.key]}
            </span>
          </div>
        ))}
      </div>

      {/* Overlay */}
      {isRerouting && (
        <div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center z-10">
          <div className="bg-black border border-red-500/50 text-red-500 text-[10px] font-mono px-4 py-2 rounded shadow-[0_0_20px_rgba(239,68,68,0.3)] animate-pulse uppercase tracking-[0.2em]">
            {t.ENGINE.SYSTEMS.REROUTING}
          </div>
        </div>
      )}
    </div>
  );
}