'use client';

import { useCombatStore, usePrestigeStore, fmt } from '@/lib/game/stores';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Mountain, ArrowUp, ArrowDown, LogOut } from 'lucide-react';
import { GUARDIANS } from '@/lib/game/constants';
import { isGuardianFloor, getExtendedGuardian } from '@/lib/game/data/guardian-encounters';

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

export function SpireHeader({
  currentFloor,
  floorHP,
  floorMaxHP,
  roomsCleared,
  totalRooms,
  onClimbUp,
  onClimbDown,
  onExitSpire,
  isDescending,
}: SpireHeaderProps) {
  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
  const { insight } = usePrestigeStore((s) => ({ insight: s.insight }));

  const guardian = GUARDIANS[currentFloor] || getExtendedGuardian(currentFloor);
  const isGuardian = isGuardianFloor(currentFloor);
  const hpPercent = floorMaxHP > 0 ? (floorHP / floorMaxHP) * 100 : 100;
  const roomProgress = totalRooms > 0 ? ((roomsCleared) / totalRooms) * 100 : 0;

  return (
    <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">
            <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>
            {currentFloor === 1 && (
              <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>

        {/* Floor HP bar */}
        <div>
          <div className="flex items-center justify-between text-xs mb-1">
            <span className={isGuardian ? 'text-red-400 font-semibold' : 'text-gray-400'}>
              {isGuardian && guardian ? `🛡️ ${guardian.name}` : 'Floor HP'}
            </span>
            <span className="text-gray-500">
              {fmt(floorHP)} / {fmt(floorMaxHP)}
            </span>
          </div>
          <Progress
            value={hpPercent}
            className="h-3 bg-gray-800"
            style={{
              '--progress-bg': isGuardian ? '#EF4444' : '#F59E0B',
            } as React.CSSProperties}
          />
        </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>
  );
}
