'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Trophy, CheckCircle, RotateCcw } from 'lucide-react';
import { useCombatStore } from '@/lib/game/stores';
import { ACHIEVEMENTS } from '@/lib/game/data/achievements';
import { DebugName } from '@/components/game/debug/debug-context';

export function AchievementDebugSection() {
  const achievements = useCombatStore((s) => s.achievements);

  const unlockedCount = achievements?.unlocked?.length || 0;
  const totalCount = Object.keys(ACHIEVEMENTS).length;

  const handleUnlockAll = () => {
    useCombatStore.setState({
      achievements: {
        unlocked: Object.keys(ACHIEVEMENTS),
        progress: Object.fromEntries(
          Object.keys(ACHIEVEMENTS).map((id) => [id, ACHIEVEMENTS[id].requirement.value])
        ),
      },
    });
  };

  const handleResetAll = () => {
    useCombatStore.setState({
      achievements: {
        unlocked: [],
        progress: {},
      },
    });
  };

  return (
    <DebugName name="AchievementDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-yellow-400 text-sm flex items-center gap-2">
            <Trophy className="w-4 h-4" />
            Achievement Debug
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="text-xs text-gray-400">
            Unlocked: {unlockedCount} / {totalCount}
          </div>

          <div className="flex gap-2 flex-wrap">
            <Button size="sm" variant="outline" onClick={handleUnlockAll}>
              <CheckCircle className="w-3 h-3 mr-1" /> Unlock All
            </Button>
            <Button size="sm" variant="destructive" onClick={handleResetAll}>
              <RotateCcw className="w-3 h-3 mr-1" /> Reset All
            </Button>
          </div>

          <div className="space-y-1 max-h-48 overflow-y-auto">
            {Object.entries(ACHIEVEMENTS).map(([id, def]) => {
              const isUnlocked = achievements?.unlocked?.includes(id);
              return (
                <div
                  key={id}
                  className={`flex items-center justify-between p-2 rounded text-xs ${
                    isUnlocked ? 'bg-green-900/20 border border-green-600/50' : 'bg-gray-800/50'
                  }`}
                >
                  <div>
                    <span className="font-medium">{def.name}</span>
                    <span className="text-gray-500 ml-2">({def.category})</span>
                  </div>
                  {isUnlocked && (
                    <CheckCircle className="w-3 h-3 text-green-400" />
                  )}
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>
    </DebugName>
  );
}

AchievementDebugSection.displayName = "AchievementDebugSection";