Mana-Loop/src/components/game/tabs/DebugTab/GolemDebugSection.tsx

'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Bug, Wand2 } from 'lucide-react';
import { useCombatStore } from '@/lib/game/stores';
import { GOLEMS_DEF } from '@/lib/game/data/golems';
import { DebugName } from '@/components/game/debug/debug-context';

export function GolemDebugSection() {
  const golemancy = useCombatStore((s) => s.golemancy);
  const setEnabledGolems = useCombatStore((s) => s.setEnabledGolems);

  const enabledGolems = golemancy?.enabledGolems || [];

  const handleEnableAll = () => {
    setEnabledGolems(Object.keys(GOLEMS_DEF));
  };

  const handleDisableAll = () => {
    setEnabledGolems([]);
  };

  const handleToggleGolem = (golemId: string) => {
    if (enabledGolems.includes(golemId)) {
      setEnabledGolems(enabledGolems.filter(id => id !== golemId));
    } else {
      setEnabledGolems([...enabledGolems, golemId]);
    }
  };

  return (
    <DebugName name="GolemDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
            <Bug className="w-4 h-4" />
            Golem Debug
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex gap-2 flex-wrap">
            <Button size="sm" variant="outline" onClick={handleEnableAll}>
              <Wand2 className="w-3 h-3 mr-1" /> Enable All Golems
            </Button>
            <Button size="sm" variant="outline" onClick={handleDisableAll}>
              Disable All Golems
            </Button>
          </div>
          <div className="text-xs text-gray-400">
            Enabled: {enabledGolems.length} / {Object.keys(GOLEMS_DEF).length}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
            {Object.entries(GOLEMS_DEF).map(([id, def]) => {
              const isEnabled = enabledGolems.includes(id);
              return (
                <div
                  key={id}
                  className={`p-2 rounded border flex items-center justify-between ${
                    isEnabled ? 'border-orange-600/50 bg-orange-900/20' : 'border-gray-700'
                  }`}
                >
                  <div>
                    <div className="text-sm font-medium">{def.name}</div>
                    <div className="text-xs text-gray-400">{def.baseManaType}</div>
                  </div>
                  <Button
                    size="sm"
                    variant={isEnabled ? 'default' : 'outline'}
                    onClick={() => handleToggleGolem(id)}
                  >
                    {isEnabled ? 'On' : 'Off'}
                  </Button>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>
    </DebugName>
  );
}

GolemDebugSection.displayName = "GolemDebugSection";