'use client';

import { DebugName } from '@/components/game/debug/debug-context';
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';

// ─── 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>
  );
}

// ─── Guardian Pact List ──────────────────────────────────────────────────────

function GuardianPactList({ signedPacts, onForceSign, onRemove }: {
  signedPacts: number[];
  onForceSign: (floor: number) => void;
  onRemove: (floor: number) => void;
}) {
  const guardianFloors = getAllGuardianFloors();

  return (
    <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={() => onForceSign(floor)}
          onRemove={() => onRemove(floor)}
        />
      ))}
    </div>
  );
}

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

export function PactDebug() {
  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 forcePact = (floor: number) => {
    const guardian = getGuardianForFloor(floor);
    if (!guardian) return;

    if (signedPacts.includes(floor)) {
      addLog(`\u26a0\ufe0f Already signed pact with ${guardian.name}!`);
      return;
    }

    const maxPacts = 1 + (prestigeUpgrades?.pactCapacity || 0);
    if (signedPacts.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 clearAllPacts = () => {
    addLog(`📜 DEBUG: Cleared all pacts!`);
    debugSetSignedPacts([]);
    debugSetPactDetails({});
  };

  return (
    <DebugName name="PactDebug">
    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
      <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">
          <p className="text-xs text-gray-400 mb-2">
            Force sign pacts with guardians (bypasses mana costs and signing time)
          </p>

          <GuardianPactList
            signedPacts={signedPacts}
            onForceSign={forcePact}
            onRemove={removePactHandler}
          />

          {signedPacts.length > 0 && (
            <div className="pt-2 border-t border-gray-700">
              <Button size="sm" variant="destructive" onClick={clearAllPacts} className="w-full text-xs">
                Clear All Pacts ({signedPacts.length})
              </Button>
            </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>
  );
}

PactDebug.displayName = 'PactDebug';