'use client';

import React from 'react';
import { useCombatStore } from '@/lib/game/stores/combatStore';
import { CORES } from '@/lib/game/data/golems';
import type { RuntimeActiveGolem } from './types';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';

// ─── Active Golem Card ───────────────────────────────────────────────────────

interface ActiveGolemCardProps {
  golem: RuntimeActiveGolem;
}

const ActiveGolemCard: React.FC<ActiveGolemCardProps> = React.memo(({ golem }) => {
  const loadoutEntry = useCombatStore(s =>
    s.golemancy.golemLoadout.find(e => e.designId === golem.designId),
  );
  const name = loadoutEntry?.design.name ?? golem.designId;
  const core = loadoutEntry ? CORES[loadoutEntry.design.coreId] : null;
  const maxMana = core?.manaCapacity ?? 100;

  return (
    <div className="rounded-lg border border-green-700/50 bg-green-900/10 p-3 space-y-2">
      <div className="flex items-center justify-between">
        <h4 className="font-semibold text-sm text-green-300">{name}</h4>
        <Badge className="text-[10px] px-1.5 py-0 bg-green-800 text-green-200">
          Active
        </Badge>
      </div>
      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
        <div className="text-gray-400">
          <span className="text-gray-500">Summoned Floor:</span> {golem.summonedFloor}
        </div>
        <div className="text-gray-400">
          <span className="text-gray-500">Rooms Left:</span> {golem.roomsRemaining}
        </div>
        <div className="text-gray-400">
          <span className="text-gray-500">Mana:</span>{' '}
          <span className={golem.currentMana < maxMana * 0.2 ? 'text-red-400' : 'text-blue-400'}>
            {Math.round(golem.currentMana)}/{maxMana}
          </span>
        </div>
        <div className="text-gray-400">
          <span className="text-gray-500">Atk Progress:</span>{' '}
          {Math.round(golem.attackProgress * 100)}%
        </div>
      </div>
    </div>
  );
});

ActiveGolemCard.displayName = 'ActiveGolemCard';

// ─── Props ───────────────────────────────────────────────────────────────────

export interface ActiveGolemsPanelProps {
  activeGolems: RuntimeActiveGolem[];
}

// ─── Component ───────────────────────────────────────────────────────────────

export const ActiveGolemsPanel: React.FC<ActiveGolemsPanelProps> = ({ activeGolems }) => {
  return (
    <ScrollArea className="h-[560px] rounded border border-gray-700 p-3">
      {activeGolems.length === 0 ? (
        <div className="text-center text-gray-500 py-8">
          <p>No active golems in combat.</p>
          <p className="text-xs mt-1">Enable golem designs in the Loadout and enter the spire.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {activeGolems.map(golem => (
            <ActiveGolemCard key={golem.designId} golem={golem} />
          ))}
        </div>
      )}
    </ScrollArea>
  );
};

ActiveGolemsPanel.displayName = 'ActiveGolemsPanel';
