'use client';

import React from 'react';
import {
  CORES, ALL_CORES, FRAMES, ALL_FRAMES,
  MIND_CIRCUITS, ALL_MIND_CIRCUITS,
  GOLEM_ENCHANTMENTS, ALL_GOLEM_ENCHANTMENTS,
} from '@/lib/game/data/golems';
import type {
  CoreDefinition, FrameDefinition, MindCircuitDefinition,
  GolemEnchantmentDefinition, ComputedGolemStats,
} from '@/lib/game/data/golems/types';
import { ELEMENTS } from '@/lib/game/constants/elements';
import { SPELLS_DEF } from '@/lib/game/constants/spells';
import type { SpellDef } from '@/lib/game/types/spells';
import { ScrollArea } from '@/components/ui/scroll-area';
import clsx from 'clsx';
import { formatRequirement } from './golemancy-utils';
import { ComponentSelector, StatsPreview } from './GolemancySharedComponents';

export interface GolemDesignBuilderProps {
  selectedCoreId: string | null;
  selectedFrameId: string | null;
  selectedCircuitId: string | null;
  selectedEnchantmentIds: string[];
  selectedSpells: string[];
  designName: string;
  selectedManaTypes: string[];
  unlockedCoreIds: Set<string>;
  unlockedFrameIds: Set<string>;
  unlockedCircuitIds: Set<string>;
  computedStats: ComputedGolemStats | null;
  affordability: { canAfford: boolean; missing: string };
  enchantmentCapacity: number;
  usedEnchantmentCapacity: number;
  golemSlots: number;
  enabledCount: number;
  onSelectCore: (id: string) => void;
  onSelectFrame: (id: string) => void;
  onSelectCircuit: (id: string) => void;
  onToggleEnchantment: (id: string) => void;
  onToggleSpell: (id: string) => void;
  onToggleManaType: (type: string) => void;
  onDesignNameChange: (name: string) => void;
  onSaveDesign: () => void;
}

/** How many mana types a core tier allows the player to pick */
function coreManaTypeSlots(core: CoreDefinition | null): number {
  if (!core) return 0;
  switch (core.id) {
    case 'intermediate': return 2;
    case 'advanced': return 3;
    case 'guardian': return 4;
    default: return 0; // basic = fixed earth
  }
}

export const GolemDesignBuilder: React.FC<GolemDesignBuilderProps> = ({
  selectedCoreId, selectedFrameId, selectedCircuitId,
  selectedEnchantmentIds, selectedSpells, designName, selectedManaTypes,
  unlockedCoreIds, unlockedFrameIds, unlockedCircuitIds,
  computedStats, affordability, enchantmentCapacity, usedEnchantmentCapacity,
  onSelectCore, onSelectFrame, onSelectCircuit, onToggleEnchantment,
  onToggleSpell, onToggleManaType,
  onDesignNameChange, onSaveDesign,
}) => {
  const canSaveDesign = selectedCoreId && selectedFrameId && selectedCircuitId && affordability.canAfford;
  const selectedCore = selectedCoreId ? CORES[selectedCoreId] ?? null : null;
  const selectedFrame = selectedFrameId ? FRAMES[selectedFrameId] ?? null : null;
  const selectedCircuit = selectedCircuitId ? MIND_CIRCUITS[selectedCircuitId] ?? null : null;

  const manaSlots = coreManaTypeSlots(selectedCore);
  const showManaSelector = manaSlots > 0;
  const showSpellSelector = (selectedCircuit?.spellSlots ?? 0) > 0;
  const spellSlots = selectedCircuit?.spellSlots ?? 0;

  // Filter spells to only those whose element matches selected mana types
  const availableSpells = React.useMemo(() => {
    if (!showSpellSelector || selectedManaTypes.length === 0) return [];
    const spells: SpellDef[] = [];
    for (const spell of Object.values(SPELLS_DEF)) {
      if (selectedManaTypes.includes(spell.elem)) {
        spells.push(spell);
      }
    }
    return spells;
  }, [showSpellSelector, selectedManaTypes]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <ScrollArea className="h-[560px] rounded border border-gray-700 p-3">
        <div className="space-y-4">
          <div className="space-y-1">
            <label className="text-xs text-gray-400">Design Name</label>
            <input type="text" value={designName} onChange={e => onDesignNameChange(e.target.value)}
              placeholder="Enter a name for this golem..."
              className="w-full rounded bg-gray-800 border border-gray-700 px-3 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-blue-500" />
          </div>

          <ComponentSelector label="1. Core (Power Source)" items={ALL_CORES} selectedId={selectedCoreId} unlockedIds={unlockedCoreIds} onSelect={onSelectCore}
            renderItem={(core: CoreDefinition, unlocked: boolean) => (
              <div>
                <div className="flex items-center justify-between">
                  <span className="font-medium">{core.name}</span>
                  <span className="text-gray-500">T{core.tier}</span>
                </div>
                <p className="text-gray-500 mt-0.5">{core.description}</p>
                <div className="flex gap-2 mt-1 text-gray-500">
                  <span>Cap: {core.manaCapacity}</span><span>Regen: {core.manaRegen}/h</span><span>Duration: {core.maxRoomDuration}r</span>
                </div>
                {!unlocked && <p className="text-red-400 mt-0.5">🔒 {formatRequirement(core.unlockRequirement)}</p>}
              </div>
            )} />

          {/* Mana Type Selector — shown for Intermediate / Advanced / Guardian cores */}
          {showManaSelector && (
            <div className="space-y-2">
              <h4 className="text-sm font-semibold text-gray-300">
                1b. Select Mana Types
                <span className="text-gray-500 font-normal ml-2">
                  {selectedManaTypes.length}/{manaSlots} selected
                </span>
              </h4>
              <div className="grid grid-cols-2 gap-1.5">
                {Object.entries(ELEMENTS).map(([key, elem]) => {
                  const isSelected = selectedManaTypes.includes(key);
                  const canSelect = isSelected || selectedManaTypes.length < manaSlots;
                  return (
                    <button key={key} onClick={() => onToggleManaType(key)} disabled={!canSelect}
                      className={clsx('text-left rounded px-3 py-1.5 text-xs transition-colors flex items-center gap-2',
                        isSelected ? 'bg-blue-600/30 border border-blue-500 text-blue-200'
                          : canSelect ? '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')}>
                      <span>{elem.sym}</span>
                      <span>{elem.name}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          <ComponentSelector label="2. Frame (Combat Body)" items={ALL_FRAMES} selectedId={selectedFrameId} unlockedIds={unlockedFrameIds} onSelect={onSelectFrame}
            renderItem={(frame: FrameDefinition, unlocked: boolean) => (
              <div>
                <div className="flex items-center justify-between">
                  <span className="font-medium">{frame.name}</span>
                  {frame.element && <span style={{ color: ELEMENTS[frame.element]?.color ?? '#888' }}>{ELEMENTS[frame.element]?.sym ?? ''} {frame.element}</span>}
                </div>
                <p className="text-gray-500 mt-0.5">{frame.description}</p>
                <div className="flex gap-2 mt-1 text-gray-500 flex-wrap">
                  <span>DMG: {frame.baseDamage}</span><span>SPD: {frame.attackSpeed}/h</span>
                  <span>AP: {Math.round(frame.armorPierce * 100)}%</span><span>MA: {Math.round(frame.magicAffinity * 100)}%</span>
                  {frame.aoeTargets > 1 && <span>AoE: {frame.aoeTargets}</span>}
                  {frame.specialEffect !== 'none' && <span className="text-purple-400 capitalize">{frame.specialEffect}</span>}
                </div>
                {!unlocked && <p className="text-red-400 mt-0.5">🔒 {formatRequirement(frame.unlockRequirement)}</p>}
              </div>
            )} />

          <ComponentSelector label="3. Mind Circuit (Behavior)" items={ALL_MIND_CIRCUITS} selectedId={selectedCircuitId} unlockedIds={unlockedCircuitIds} onSelect={onSelectCircuit}
            renderItem={(circuit: MindCircuitDefinition, unlocked: boolean) => (
              <div>
                <div className="flex items-center justify-between">
                  <span className="font-medium">{circuit.name}</span>
                  <span className="text-gray-500">Slots: {circuit.spellSlots}</span>
                </div>
                <p className="text-gray-500 mt-0.5">{circuit.description}</p>
                <div className="flex gap-2 mt-1 text-gray-500"><span className="capitalize">Behavior: {circuit.behavior}</span></div>
                {!unlocked && <p className="text-red-400 mt-0.5">🔒 {formatRequirement(circuit.unlockRequirement)}</p>}
              </div>
            )} />

          {/* Spell Selector — shown when circuit has spell slots */}
          {showSpellSelector && (
            <div className="space-y-2">
              <h4 className="text-sm font-semibold text-gray-300">
                3b. Select Spells
                <span className="text-gray-500 font-normal ml-2">
                  {selectedSpells.length}/{spellSlots} selected
                </span>
              </h4>
              {selectedManaTypes.length === 0 ? (
                <p className="text-xs text-yellow-400">Select mana types on the core first to see available spells.</p>
              ) : availableSpells.length === 0 ? (
                <p className="text-xs text-gray-500">No spells available for selected mana types.</p>
              ) : (
                <div className="grid grid-cols-1 gap-1.5">
                  {availableSpells.map(spell => {
                    const isSelected = selectedSpells.includes(spell.name);
                    const canSelect = isSelected || selectedSpells.length < spellSlots;
                    const elemDef = ELEMENTS[spell.elem];
                    return (
                      <button key={spell.name} onClick={() => onToggleSpell(spell.name)} disabled={!canSelect}
                        className={clsx('text-left rounded px-3 py-2 text-xs transition-colors',
                          isSelected ? 'bg-green-600/30 border border-green-500 text-green-200'
                            : canSelect ? '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')}>
                        <div className="flex items-center justify-between">
                          <span className="font-medium">{spell.name}</span>
                          <span className="text-gray-500">
                            {elemDef?.sym} {spell.elem} · {spell.dmg} dmg · {spell.cost.amount} {spell.cost.type === 'raw' ? 'raw' : spell.cost.element}
                          </span>
                        </div>
                        {spell.desc && <p className="text-gray-500 mt-0.5">{spell.desc}</p>}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {selectedCore && selectedFrame && selectedCircuit && (
            <div className="space-y-2">
              <h4 className="text-sm font-semibold text-gray-300">4. Enchantments (Optional)
                <span className="text-gray-500 font-normal ml-2">{usedEnchantmentCapacity}/{Math.round(enchantmentCapacity)} capacity</span>
              </h4>
              {usedEnchantmentCapacity > enchantmentCapacity && <p className="text-xs text-red-400">Over capacity! Remove enchantments to save design.</p>}
              <div className="grid grid-cols-1 gap-1.5">
                {ALL_GOLEM_ENCHANTMENTS.map(enchant => {
                  const isSelected = selectedEnchantmentIds.includes(enchant.id);
                  const canAdd = !isSelected && usedEnchantmentCapacity + enchant.capacityCost <= enchantmentCapacity;
                  return (
                    <button key={enchant.id} onClick={() => onToggleEnchantment(enchant.id)} disabled={!isSelected && !canAdd}
                      className={clsx('text-left rounded px-3 py-2 text-xs transition-colors',
                        isSelected ? 'bg-purple-600/30 border border-purple-500 text-purple-200'
                          : canAdd ? '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')}>
                      <div className="flex items-center justify-between">
                        <span className="font-medium">{enchant.name}</span>
                        <span className="text-gray-500">Cost: {enchant.capacityCost}</span>
                      </div>
                      <p className="text-gray-500 mt-0.5">{enchant.description}</p>
                      <p className="text-gray-600 mt-0.5">Effect: {enchant.effect}</p>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          <div className="pt-2 border-t border-gray-700">
            <button onClick={onSaveDesign} disabled={!canSaveDesign}
              className={clsx('w-full rounded px-4 py-2 text-sm font-medium transition-colors',
                canSaveDesign ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-gray-700 text-gray-500 cursor-not-allowed')}>
              {canSaveDesign ? 'Save Design' : 'Select all required components'}
            </button>
          </div>
        </div>
      </ScrollArea>

      <div className="rounded border border-gray-700 p-4">
        <h3 className="text-sm font-semibold text-gray-200 mb-3">Stats Preview</h3>
        <StatsPreview stats={computedStats} canAfford={affordability} />
      </div>
    </div>
  );
};

GolemDesignBuilder.displayName = 'GolemDesignBuilder';
