'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Bug } from 'lucide-react';
import { usePrestigeStore, useUIStore, useGameStore } from '@/lib/game/stores';
import { ELEMENTS } from '@/lib/game/constants';
import { getGuardianForFloor, getAllGuardianFloors } from '@/lib/game/data/guardian-encounters';
import { DebugName } from '@/components/game/debug/debug-context';

// ─── Guardian Pact Row ───────────────────────────────────────────────────────

function GuardianPactRow({ floor, isSigned, onForceSign, onRemove }: {
  floor: number;
  isSigned: boolean;
  onForceSign: () => void;
  onRemove: () => void;
}) {
  const guardian = getGuardianForFloor(floor);
  if (!guardian) return null;

  return (
    <div
      className={`p-2 rounded border flex items-center justify-between ${
        isSigned ? 'border-green-600/50 bg-green-900/20' : 'border-gray-700'
      }`}
      style={{ borderColor: isSigned ? undefined : guardian.color, borderWidth: '1px' }}
    >
      <div>
        <div className="text-sm font-semibold" style={{ color: guardian.color }}>
          {guardian.name}
        </div>
        <div className="text-xs text-gray-400">
          Floor {floor} | {guardian.pact}x multiplier
        </div>
        <div className="text-xs text-gray-500">
          Element: {guardian.element.map(el => ELEMENTS[el]?.name || el).join(' + ')}
        </div>
      </div>
      <div className="flex gap-1">
        {isSigned ? (
          <Button size="sm" variant="destructive" onClick={onRemove} className="text-xs">
            Remove
          </Button>
        ) : (
          <Button size="sm" variant="default" onClick={onForceSign} className="text-xs bg-amber-600 hover:bg-amber-700">
            Force Sign
          </Button>
        )}
      </div>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export function PactDebugSection() {
  const signedPacts = usePrestigeStore((s) => s.signedPacts);
  const signedPactDetails = usePrestigeStore((s) => s.signedPactDetails);
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);

  const addSignedPact = usePrestigeStore((s) => s.addSignedPact);
  const removePact = usePrestigeStore((s) => s.removePact);
  const debugSetSignedPacts = usePrestigeStore((s) => s.debugSetSignedPacts);
  const debugSetPactDetails = usePrestigeStore((s) => s.debugSetPactDetails);
  const addLog = useUIStore((s) => s.addLog);

  const guardianFloors = getAllGuardianFloors();

  const forcePact = (floor: number) => {
    const guardian = getGuardianForFloor(floor);
    if (!guardian) return;

    // Always read fresh state from store to avoid stale closures
    const currentSignedPacts = usePrestigeStore.getState().signedPacts;
    const maxPacts = 1 + (prestigeUpgrades?.pactCapacity || 0);

    if (currentSignedPacts.includes(floor)) {
      addLog(`⚠️ Already signed pact with ${guardian.name}!`);
      return;
    }

    if (currentSignedPacts.length >= maxPacts) {
      addLog(`⚠️ Cannot sign more pacts! Maximum: ${maxPacts}.`);
      return;
    }

    addSignedPact(floor);

    const newSignedPactDetails = {
      ...signedPactDetails,
      [floor]: {
        floor,
        guardianId: guardian.element.join('+'),
        signedAt: { day: useGameStore.getState().day, hour: useGameStore.getState().hour },
        skillLevels: {} as Record<string, number>,
      },
    };
    debugSetPactDetails(newSignedPactDetails);

    addLog(`📜 DEBUG: Pact with ${guardian.name} force-signed!`);
  };

  const removePactHandler = (floor: number) => {
    const guardian = getGuardianForFloor(floor);

    removePact(floor);

    const newSignedPactDetails = { ...signedPactDetails };
    delete newSignedPactDetails[floor];
    debugSetPactDetails(newSignedPactDetails);

    addLog(`\ud83d\udcdc DEBUG: Removed pact with ${guardian ? guardian.name : 'Unknown'}!`);
  };

  const signAllPacts = () => {
    const maxPacts = 1 + (prestigeUpgrades?.pactCapacity || 0);
    guardianFloors.forEach((floor) => {
      // Read fresh state from store to avoid stale closure bug:
      // signedPacts from render-time closure is always the initial value
      // during the loop, so the maxPacts check never triggers.
      const currentSigned = usePrestigeStore.getState().signedPacts;
      if (currentSigned.length >= maxPacts) return;
      if (!currentSigned.includes(floor)) {
        forcePact(floor);
      }
    });
  };

  const clearAllPacts = () => {
    addLog(`📜 DEBUG: Cleared all pacts!`);
    debugSetSignedPacts([]);
    debugSetPactDetails({});
  };

  return (
    <DebugName name="PactDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
            <Bug className="w-4 h-4" />
            Pact Debug
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="flex gap-2 flex-wrap">
              <Button size="sm" variant="outline" onClick={signAllPacts}>
                Sign All Pacts
              </Button>
              <Button size="sm" variant="destructive" onClick={clearAllPacts}>
                Clear All Pacts ({signedPacts.length})
              </Button>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
              {guardianFloors.map((floor) => (
                <GuardianPactRow
                  key={floor}
                  floor={floor}
                  isSigned={signedPacts.includes(floor)}
                  onForceSign={() => forcePact(floor)}
                  onRemove={() => removePactHandler(floor)}
                />
              ))}
            </div>

            <div className="text-xs text-gray-400 pt-2 border-t border-gray-700">
              Signed Pacts: {signedPacts.length} |
              Max Pacts: {1 + (prestigeUpgrades?.pactCapacity || 0)}
            </div>
          </div>
        </CardContent>
      </Card>
    </DebugName>
  );
}

PactDebugSection.displayName = 'PactDebugSection';
