'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
import { Sparkles, Unlock } from 'lucide-react';
import type { GameStore } from '@/lib/game/types';

interface AttunementDebugProps {
  store: GameStore;
}

export function AttunementDebug({ store }: AttunementDebugProps) {
  const handleUnlockAttunement = (id: string) => {
    // Debug action to unlock attunements
    if (store.debugUnlockAttunement) {
      store.debugUnlockAttunement(id);
    }
  };
  
  const handleAddAttunementXP = (id: string, amount: number) => {
    if (store.debugAddAttunementXP) {
      store.debugAddAttunementXP(id, amount);
    }
  };

  return (
    <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">
        {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
          const isActive = store.attunements?.[id]?.active;
          const level = store.attunements?.[id]?.level || 1;
          const xp = store.attunements?.[id]?.experience || 0;
          
          return (
            <div key={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-1">
                {!isActive && (
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleUnlockAttunement(id)}
                  >
                    <Unlock className="w-3 h-3" />
                  </Button>
                )}
                {isActive && (
                  <>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleAddAttunementXP(id, 50)}
                    >
                      +50 XP
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleAddAttunementXP(id, 500)}
                    >
                      +500 XP
                    </Button>
                  </>
                )}
              </div>
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
}