'use client';

import { GameCard } from '@/components/ui/game-card';
import { SectionHeader } from '@/components/ui/section-header';
import { ActionButton } from '@/components/ui/action-button';
import { Trash2 } from 'lucide-react';
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
import type { SavedDesignsProps } from './types';
import { DebugName } from '@/components/game/debug/debug-context';

export function SavedDesigns({
  enchantmentDesigns,
  selectedDesign,
  setSelectedDesign,
  deleteDesign,
}: SavedDesignsProps) {
  return (
    <DebugName name="SavedDesigns">
    <GameCard variant="default" className="lg:col-span-2">
      <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
      {enchantmentDesigns.length === 0 ? (
        <div className="text-center text-[var(--text-muted)] py-4">
          No saved designs yet
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {enchantmentDesigns.map(design => (
            <div
              key={design.id}
              className={`p-3 rounded border cursor-pointer transition-all
                ${selectedDesign === design.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={() => setSelectedDesign(design.id)}
              role="button"
              tabIndex={0}
              aria-label={`Select design: ${design.name}`}
            >
              <div className="flex justify-between items-start">
                <div>
                  <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
                  <div className="text-xs text-[var(--text-muted)]">
                    {EQUIPMENT_TYPES[design.equipmentType]?.name}
                  </div>
                </div>
                <ActionButton
                  size="sm"
                  variant="ghost"
                  className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
                  onClick={(e) => {
                    e.stopPropagation();
                    deleteDesign(design.id);
                  }}
                  aria-label={`Delete design: ${design.name}`}
                >
                  <Trash2 className="w-4 h-4" />
                </ActionButton>
              </div>
              <div className="mt-2 text-xs text-[var(--text-muted)]">
                {design.effects.length} effects | {design.totalCapacityUsed} cap
              </div>
            </div>
          ))}
        </div>
      )}
    </GameCard>
    </DebugName>
  );
}

SavedDesigns.displayName = 'SavedDesigns';