'use client';

import React from 'react';
import { CORES, FRAMES, MIND_CIRCUITS, GOLEM_ENCHANTMENTS } from '@/lib/game/data/golems';
import type { GolemLoadoutEntry } from './types';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import clsx from 'clsx';

// ─── Loadout Entry Card ──────────────────────────────────────────────────────

interface LoadoutCardProps {
  entry: GolemLoadoutEntry;
  onToggle: (designId: string) => void;
  onRemove: (designId: string) => void;
}

const LoadoutCard: React.FC<LoadoutCardProps> = React.memo(({
  entry,
  onToggle,
  onRemove,
}) => {
  const core = CORES[entry.design.coreId];
  const frame = FRAMES[entry.design.frameId];
  const circuit = MIND_CIRCUITS[entry.design.mindCircuitId];
  const enchantments = entry.design.enchantmentIds
    .map(id => GOLEM_ENCHANTMENTS[id])
    .filter(Boolean);

  return (
    <div className={clsx(
      'rounded-lg border p-3 space-y-2 transition-colors',
      entry.enabled
        ? 'bg-gray-800/50 border-gray-600'
        : 'bg-gray-900/50 border-gray-800 opacity-70',
    )}>
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <h4 className="font-semibold text-sm text-gray-100 truncate">{entry.design.name}</h4>
          <p className="text-[10px] text-gray-500 mt-0.5">
            {core?.name ?? '?'} + {frame?.name ?? '?'} + {circuit?.name ?? '?'}
            {enchantments.length > 0 && ` + ${enchantments.length} enchantment(s)`}
          </p>
        </div>
        <Badge className={clsx(
          'text-[10px] px-1.5 py-0 shrink-0',
          entry.enabled ? 'bg-green-700' : 'bg-gray-700',
        )}>
          {entry.enabled ? 'Enabled' : 'Disabled'}
        </Badge>
      </div>

      <div className="flex items-center gap-2 pt-1">
        <button
          onClick={() => onToggle(entry.designId)}
          className={clsx(
            'rounded px-2.5 py-1 text-xs font-medium transition-colors',
            entry.enabled
              ? 'bg-red-600/80 text-white hover:bg-red-500'
              : 'bg-green-600/80 text-white hover:bg-green-500',
          )}
        >
          {entry.enabled ? 'Disable' : 'Enable'}
        </button>
        <button
          onClick={() => onRemove(entry.designId)}
          className="rounded px-2.5 py-1 text-xs font-medium bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
        >
          Remove
        </button>
      </div>
    </div>
  );
});

LoadoutCard.displayName = 'LoadoutCard';

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

export interface GolemLoadoutPanelProps {
  loadout: GolemLoadoutEntry[];
  onToggle: (designId: string) => void;
  onRemove: (designId: string) => void;
}

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

export const GolemLoadoutPanel: React.FC<GolemLoadoutPanelProps> = ({
  loadout,
  onToggle,
  onRemove,
}) => {
  return (
    <ScrollArea className="h-[560px] rounded border border-gray-700 p-3">
      {loadout.length === 0 ? (
        <div className="text-center text-gray-500 py-8">
          <p>No golem designs saved yet.</p>
          <p className="text-xs mt-1">Use the Design Builder to create and save golem designs.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {loadout.map(entry => (
            <LoadoutCard
              key={entry.designId}
              entry={entry}
              onToggle={onToggle}
              onRemove={onRemove}
            />
          ))}
        </div>
      )}
    </ScrollArea>
  );
};

GolemLoadoutPanel.displayName = 'GolemLoadoutPanel';
