'use client';

import React from 'react';
import type { ComputedGolemStats, CoreDefinition } from '@/lib/game/data/golems/types';
import { ELEMENTS } from '@/lib/game/constants/elements';
import clsx from 'clsx';
import { formatManaCost, formatRequirement } from './golemancy-utils';

interface ComponentSelectorProps<T> {
  label: string;
  items: T[];
  selectedId: string | null;
  unlockedIds: Set<string>;
  onSelect: (id: string) => void;
  renderItem: (item: T, unlocked: boolean, selected: boolean) => React.ReactNode;
}

export function ComponentSelector<T extends { id: string }>({
  label, items, selectedId, unlockedIds, onSelect, renderItem,
}: ComponentSelectorProps<T>) {
  return (
    <div className="space-y-2">
      <h4 className="text-sm font-semibold text-gray-300">{label}</h4>
      <div className="grid grid-cols-1 gap-1.5">
        {items.map(item => {
          const unlocked = unlockedIds.has(item.id);
          const selected = selectedId === item.id;
          return (
            <button key={item.id} onClick={() => unlocked && onSelect(item.id)} disabled={!unlocked}
              className={clsx('text-left rounded px-3 py-2 text-xs transition-colors',
                selected ? 'bg-blue-600/30 border border-blue-500 text-blue-200'
                  : unlocked ? 'bg-gray-800/60 border border-gray-700 text-gray-300 hover:bg-gray-700/60'
                  : 'bg-gray-900/40 border border-gray-800 text-gray-600 cursor-not-allowed')}>
              {renderItem(item, unlocked, selected)}
            </button>
          );
        })}
      </div>
    </div>
  );
}

interface StatsPreviewProps {
  stats: ComputedGolemStats | null;
  canAfford: { canAfford: boolean; missing: string };
}

export function StatsPreview({ stats, canAfford }: StatsPreviewProps) {
  if (!stats) return <div className="text-xs text-gray-500 italic">Select all required components to see stats preview.</div>;
  return (
    <div className="space-y-3">
      <div className={clsx('text-xs font-medium px-2 py-1 rounded',
        canAfford.canAfford ? 'text-green-400 bg-green-900/20' : 'text-red-400 bg-red-900/20')}>
        {canAfford.canAfford ? '✓ Can afford summon cost' : `✗ Cannot afford: ${canAfford.missing}`}
      </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">Damage:</span> {stats.baseDamage}</div>
        <div className="text-gray-400"><span className="text-gray-500">Atk Speed:</span> {stats.attackSpeed}/h</div>
        <div className="text-gray-400"><span className="text-gray-500">Armor Pierce:</span> {Math.round(stats.armorPierce * 100)}%</div>
        <div className="text-gray-400"><span className="text-gray-500">Magic Affinity:</span> {Math.round(stats.magicAffinity * 100)}%</div>
        <div className="text-gray-400"><span className="text-gray-500">AoE Targets:</span> {stats.aoeTargets}</div>
        <div className="text-gray-400"><span className="text-gray-500">Spell Slots:</span> {stats.spellSlots}</div>
        <div className="text-gray-400"><span className="text-gray-500">Mana Capacity:</span> {stats.manaCapacity}</div>
        <div className="text-gray-400"><span className="text-gray-500">Mana Regen:</span> {stats.manaRegen}/h</div>
        <div className="text-gray-400"><span className="text-gray-500">Room Duration:</span> {stats.maxRoomDuration} rooms</div>
        <div className="text-gray-400"><span className="text-gray-500">Enchant Cap:</span> {Math.round(stats.enchantmentCapacity)}</div>
        {stats.specialEffect !== 'none' && (
          <div className="col-span-2 text-gray-400"><span className="text-gray-500">Special:</span>{' '}<span className="text-purple-400 capitalize">{stats.specialEffect}</span></div>
        )}
      </div>
      <div className="text-xs"><span className="text-gray-500">Summon Cost:</span>{' '}
        {stats.totalSummonCost.map((c, i) => <span key={i} className="text-gray-400">{formatManaCost(c)}{i < stats.totalSummonCost.length - 1 ? ' + ' : ''}</span>)}
      </div>
      <div className="text-xs"><span className="text-gray-500">Upkeep:</span>{' '}
        {stats.upkeepCostPerHour.map((c, i) => <span key={i} className="text-gray-400">{formatManaCost(c)}{i < stats.upkeepCostPerHour.length - 1 ? ' + ' : ''}/h</span>)}
      </div>
      <div className="text-xs"><span className="text-gray-500">Mana Types:</span>{' '}
        {stats.availableManaTypes.map((mt, i) => <span key={mt} className="text-gray-400">{ELEMENTS[mt]?.sym ?? ''}{mt}{i < stats.availableManaTypes.length - 1 ? ', ' : ''}</span>)}
      </div>
    </div>
  );
}
