'use client';

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

export function SpireDebugSection() {
  const currentFloor = useCombatStore((s) => s.currentFloor);
  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
  const spireMode = useCombatStore((s) => s.spireMode);
  const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
  const exitSpireMode = useCombatStore((s) => s.exitSpireMode);

  const handleToggleSpireMode = () => {
    if (spireMode) {
      exitSpireMode();
    } else {
      enterSpireMode();
    }
  };

  return (
    <DebugName name="SpireDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-teal-400 text-sm flex items-center gap-2">
            <Castle className="w-4 h-4" />
            Spire Debug
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="text-xs text-gray-400">
            Current Floor: {currentFloor} | Max Reached: {maxFloorReached} | Spire Mode: {spireMode ? 'ON' : 'OFF'}
          </div>

          <div className="flex gap-2 flex-wrap">
            <Button
              size="sm"
              variant={spireMode ? 'default' : 'outline'}
              onClick={handleToggleSpireMode}
            >
              <Eye className="w-3 h-3 mr-1" />
              {spireMode ? 'Exit Spire Mode' : 'Enter Spire Mode'}
            </Button>
          </div>


        </CardContent>
      </Card>
    </DebugName>
  );
}

SpireDebugSection.displayName = "SpireDebugSection";
