'use client';

import clsx from 'clsx';
import { Hammer, Sparkles } from 'lucide-react';
import { DebugName } from '@/components/game/debug/debug-context';
import { useCraftingStore } from '@/lib/game/stores/craftingStore';
import type { CraftingAttunement } from '@/lib/game/stores/craftingStore.types';
import { FabricatorSubTab } from './CraftingTab/FabricatorSubTab';
import { EnchanterSubTab } from './CraftingTab/EnchanterSubTab';

interface CraftingSubTab {
  key: CraftingAttunement;
  label: string;
  icon: typeof Hammer;
}

const CRAFTING_SUB_TABS: CraftingSubTab[] = [
  { key: 'fabricator', label: 'Fabricator', icon: Hammer },
  { key: 'enchanter', label: 'Enchanter', icon: Sparkles },
];

export function CraftingTab() {
  const activeSubTab = useCraftingStore((s) => s.activeCraftingSubTab);
  const setActiveSubTab = useCraftingStore((s) => s.setActiveCraftingSubTab);

  return (
    <DebugName name="CraftingTab">
      <div className="space-y-4">
        {/* Sub-tab bar — same clsx pattern as DisciplinesTab */}
        <div className="flex gap-2">
          {CRAFTING_SUB_TABS.map(({ key, label, icon: Icon }) => (
            <button
              key={key}
              onClick={() => setActiveSubTab(key)}
              className={clsx('rounded px-3 py-1 text-sm font-medium flex items-center gap-1.5', {
                'bg-amber-600 text-white': activeSubTab === key,
                'text-gray-400 hover:text-gray-200': activeSubTab !== key,
              })}
            >
              <Icon className="w-3.5 h-3.5" />
              {label}
            </button>
          ))}
        </div>

        {/* Sub-tab content */}
        {activeSubTab === 'fabricator' && <FabricatorSubTab />}
        {activeSubTab === 'enchanter' && <EnchanterSubTab />}
      </div>
    </DebugName>
  );
}

CraftingTab.displayName = 'CraftingTab';