'use client';

import { GameCard } from '@/components/ui/game-card';
import { SectionHeader } from '@/components/ui/section-header';
import { ActionButton } from '@/components/ui/action-button';
import { Progress } from '@/components/ui/progress';
import { ScrollArea } from '@/components/ui/scroll-area';
import type { EquipmentTypeSelectorProps } from './types';
import { DebugName } from '@/components/game/debug/debug-context';

export function EquipmentTypeSelector({
  ownedEquipmentTypes,
  selectedEquipmentType,
  setSelectedEquipmentType,
  designProgress,
  cancelDesign,
}: EquipmentTypeSelectorProps) {
  return (
    <DebugName name="EquipmentTypeSelector">
    <GameCard variant="default">
      <SectionHeader title="1. Select Equipment Type" />
      {designProgress ? (
        <div className="space-y-3">
          <div className="text-sm text-[var(--text-secondary)]">
            Designing for: {designProgress.equipmentType}
          </div>
          <div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
          <Progress
            value={(designProgress.progress / designProgress.required) * 100}
            className="h-3 bg-[var(--bg-sunken)]"
          />
          <div className="flex justify-between text-xs text-[var(--text-muted)]">
            <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
            <ActionButton size="sm" variant="ghost" onClick={() => cancelDesign(1)}>Cancel</ActionButton>
          </div>
        </div>
      ) : (
        <ScrollArea className="h-64">
          <div className="grid grid-cols-2 gap-2">
            {ownedEquipmentTypes.map(type => (
              <div
                key={type.id}
                className={`p-2 rounded border cursor-pointer transition-all
                  ${selectedEquipmentType === type.id
                    ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                    : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                  }`}
                onClick={() => setSelectedEquipmentType(type.id)}
                role="button"
                tabIndex={0}
                aria-label={`Select ${type.name}`}
              >
                <div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
                <div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
              </div>
            ))}
          </div>
          {ownedEquipmentTypes.length === 0 && (
            <div className="text-center text-[var(--text-muted)] py-4 text-sm">
              No equipment blueprints owned. Craft or find equipment blueprints first.
            </div>
          )}
        </ScrollArea>
      )}
    </GameCard>
    </DebugName>
  );
}

EquipmentTypeSelector.displayName = 'EquipmentTypeSelector';
