'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Sparkles, Unlock } from 'lucide-react';
import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
import { useAttunementStore } from '@/lib/game/stores';
import { useManaStore } from '@/lib/game/stores';
import { DebugName } from '@/components/game/debug/debug-context';

export function AttunementDebugSection() {
  const attunements = useAttunementStore((s) => s.attunements);
  const debugUnlockAttunement = useAttunementStore((s) => s.debugUnlockAttunement);
  const addAttunementXP = useAttunementStore((s) => s.addAttunementXP);

  const handleUnlockAttunement = (id: string) => {
    if (debugUnlockAttunement) {
      debugUnlockAttunement(id);
      if (id === 'enchanter') {
        useManaStore.getState().unlockElement('transference', 0);
      }
    }
  };

  const handleAddAttunementXP = (id: string, amount: number) => {
    if (addAttunementXP) {
      addAttunementXP(id, amount);
    }
  };

  const handleUnlockAll = () => {
    Object.keys(ATTUNEMENTS_DEF).forEach((id) => {
      handleUnlockAttunement(id);
    });
  };

  return (
    <DebugName name="AttunementDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
            <Sparkles className="w-4 h-4" />
            Attunements
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <Button size="sm" variant="outline" onClick={handleUnlockAll} data-testid="debug-attunement-unlock-all">
            <Unlock className="w-3 h-3 mr-1" /> Unlock All
          </Button>
          {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
            const isActive = attunements?.[id]?.active;
            const level = attunements?.[id]?.level || 1;
            const xp = attunements?.[id]?.experience || 0;

            return (
              <div key={id} data-testid={`debug-attunement-row-${id}`} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
                <div className="flex items-center gap-2">
                  <span>{def.icon}</span>
                  <div>
                    <div className="text-sm font-medium">{def.name}</div>
                    {isActive && (
                      <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
                    )}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleUnlockAttunement(id)}
                    data-testid={`debug-attunement-unlock-${id}`}
                  >
                    <Unlock className="w-3 h-3 mr-1" /> Unlock
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleAddAttunementXP(id, 100)}
                    data-testid={`debug-attunement-add100-${id}`}
                  >
                    +100 XP
                  </Button>
                </div>
              </div>
            );
          })}
        </CardContent>
      </Card>
    </DebugName>
  );
}

AttunementDebugSection.displayName = "AttunementDebugSection";
