'use client';

import { useCombatStore, usePrestigeStore, fmt } from '@/lib/game/stores';
import { useShallow } from 'zustand/react/shallow';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Mountain, ArrowUp, ArrowDown, LogOut, ChevronDown } from 'lucide-react';
import { getGuardianForFloor, isGuardianFloor } from '@/lib/game/data/guardian-encounters';
import { DebugName } from '@/components/game/debug/debug-context';

interface SpireHeaderProps {
  currentFloor: number;
  roomsCleared: number;
  totalRooms: number;
  onClimbUp: () => void;
  onClimbDown: () => void;
  onExitSpire: () => void;
  isDescending: boolean;
}

export function SpireHeader({
  currentFloor,
  roomsCleared,
  totalRooms,
  onClimbUp,
  onClimbDown,
  onExitSpire,
  isDescending,
}: SpireHeaderProps) {
  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
  const insight = usePrestigeStore((s) => s.insight);
  // ─── Spec: read climbDirection and isDescentComplete ─────────────────────
  const climbDirection = useCombatStore((s) => s.climbDirection);
  const isDescentComplete = useCombatStore((s) => s.isDescentComplete);
  const enterDescentMode = useCombatStore((s) => s.enterDescentMode);

  const guardian = getGuardianForFloor(currentFloor);
  const isGuardian = isGuardianFloor(currentFloor);
  const roomProgress = totalRooms > 0 ? ((roomsCleared) / totalRooms) * 100 : 0;
  const isAscending = climbDirection === 'up';

  return (
    <DebugName name="SpireHeader">
    <Card className="bg-gray-900/80 border-gray-700">
      <CardContent className="py-3 space-y-3">
        {/* Top row: Floor info + controls */}
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <Mountain className="w-6 h-6 text-amber-400" />
            <div>
              <div className="text-xl font-bold text-amber-400">
                Floor {currentFloor}
              </div>
              <div className="text-xs text-gray-400">
                Max: {maxFloorReached} · Insight: {fmt(insight)}
              </div>
            </div>
          </div>

          <div className="flex items-center gap-2">
            {/* ── Spec §4.5: "Descend" button available at any point during ascent ── */}
            {isAscending && (
              <Button
                size="sm"
                variant="outline"
                onClick={enterDescentMode}
                className="border-amber-600 text-amber-400 hover:bg-amber-900/30"
              >
                <ChevronDown className="w-4 h-4 mr-1" />
                Descend
              </Button>
            )}

            {/* Legacy climb buttons (kept for non-spire-mode compatibility) */}
            {!climbDirection && (
              <>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={onClimbUp}
                  disabled={isDescending}
                  className="border-gray-600 hover:border-amber-500"
                >
                  <ArrowUp className="w-4 h-4 mr-1" />
                  Climb Up
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={onClimbDown}
                  disabled={currentFloor <= 1 || isDescending}
                  className="border-gray-600 hover:border-amber-500"
                >
                  <ArrowDown className="w-4 h-4 mr-1" />
                  Climb Down
                </Button>
              </>
            )}

            {/* ── Spec §4.9: "Exit Spire" only visible when isDescentComplete ── */}
            {isDescentComplete && (
              <Button
                size="sm"
                variant="outline"
                onClick={onExitSpire}
                className="border-green-600 text-green-400 hover:bg-green-900/30"
              >
                <LogOut className="w-4 h-4 mr-1" />
                Exit Spire
              </Button>
            )}
          </div>
        </div>

        {/* Guardian name display */}
        {isGuardian && guardian && (
          <div className="text-xs text-red-400 font-semibold">
            🛡️ {guardian.name}
          </div>
        )}

        {/* Room progress */}
        <div>
          <div className="flex items-center justify-between text-xs mb-1">
            <span className="text-gray-400">Rooms Cleared</span>
            <span className="text-gray-500">{roomsCleared} / {totalRooms}</span>
          </div>
          <Progress
            value={roomProgress}
            className="h-2 bg-gray-800"
            style={{ '--progress-bg': '#6366F1' } as React.CSSProperties}
          />
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
