'use client';

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useShallow } from 'zustand/react/shallow';
import { usePrestigeStore } from '@/lib/game/stores/prestigeStore';
import { useManaStore } from '@/lib/game/stores/manaStore';
import { useUIStore } from '@/lib/game/stores/uiStore';
import { GUARDIANS, ELEMENTS } from '@/lib/game/constants';
import type { GuardianDef, GuardianBoon } from '@/lib/game/types';
import { DebugName } from '@/components/game/debug/debug-context';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
import clsx from 'clsx';

// ─── Helpers ─────────────────────────────────────────────────────────────────

type GuardianStatus = 'undefeated' | 'defeated' | 'signed';

function getGuardianStatus(floor: number, defeated: number[], signed: number[]): GuardianStatus {
  if (signed.includes(floor)) return 'signed';
  if (defeated.includes(floor)) return 'defeated';
  return 'undefeated';
}

function formatHours(hours: number): string {
  return `${hours}h`;
}

// ─── Guardian Card ───────────────────────────────────────────────────────────

interface GuardianCardProps {
  floor: number;
  guardian: GuardianDef;
  status: GuardianStatus;
  canAfford: boolean;
  hasSlot: boolean;
  isRitualActive: boolean;
  ritualProgress: number;
  onStartRitual: (floor: number) => void;
}

const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
  floor,
  guardian,
  status,
  canAfford,
  hasSlot,
  isRitualActive,
  ritualProgress,
  onStartRitual,
}) => {
  const elemDef = ELEMENTS[guardian.element];
  const elemColor = elemDef?.color ?? '#888';
  const elemSym = elemDef?.sym ?? '';

  const statusConfig: Record<GuardianStatus, { label: string; color: string; bg: string }> = {
    undefeated: { label: 'Undefeated', color: 'text-gray-400', bg: 'bg-gray-800/50' },
    defeated: { label: 'Pact Available', color: 'text-amber-400', bg: 'bg-amber-900/20' },
    signed: { label: 'Pact Signed', color: 'text-green-400', bg: 'bg-green-900/20' },
  };

  const sc = statusConfig[status];
  const ritualTime = guardian.pactTime;
  const ritualComplete = ritualProgress >= ritualTime;

  return (
    <Card
      className={clsx(
        'border transition-colors',
        status === 'signed' && 'border-green-600/40',
        status === 'defeated' && 'border-amber-600/40',
        status === 'undefeated' && 'border-gray-700/60',
      )}
    >
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <CardTitle className="text-sm flex items-center gap-2" style={{ color: elemColor }}>
              <span>{elemSym}</span>
              <span className="truncate">{guardian.name}</span>
            </CardTitle>
            <div className="text-xs text-gray-500 mt-0.5">Floor {floor} · {elemDef?.name ?? guardian.element}</div>
          </div>
          <Badge className={clsx('text-[10px] px-1.5 py-0 shrink-0', sc.bg, sc.color)}>
            {sc.label}
          </Badge>
        </div>
      </CardHeader>

      <CardContent className="space-y-3">
        {/* Stats */}
        <div className="grid grid-cols-3 gap-2 text-xs">
          <div className="flex items-center gap-1 text-gray-400">
            <Shield className="w-3 h-3" />
            <span>HP: {guardian.hp.toLocaleString()}</span>
          </div>
          <div className="flex items-center gap-1 text-gray-400">
            <Swords className="w-3 h-3" />
            <span>PWR: {guardian.power.toLocaleString()}</span>
          </div>
          <div className="flex items-center gap-1 text-gray-400">
            <Shield className="w-3 h-3" />
            <span>ARM: {Math.round((guardian.armor ?? 0) * 100)}%</span>
          </div>
        </div>

        {/* Boons */}
        <div className="space-y-1">
          <div className="text-xs font-medium text-gray-300 flex items-center gap-1">
            <Sparkles className="w-3 h-3" /> Boons
          </div>
          <div className="flex flex-wrap gap-1">
            {guardian.boons.map((boon: GuardianBoon, i: number) => (
              <span
                key={i}
                className="px-1.5 py-0.5 text-[10px] rounded border border-gray-600/50 text-gray-300"
              >
                {boon.desc}
              </span>
            ))}
          </div>
        </div>

        {/* Unique Perk */}
        <div className="text-xs text-gray-400">
          <span className="text-gray-500">Perk:</span> {guardian.uniquePerk}
        </div>

        {/* Pact Cost */}
        <div className="flex items-center gap-3 text-xs text-gray-400">
          <div className="flex items-center gap-1">
            <Clock className="w-3 h-3" />
            <span>{formatHours(guardian.pactTime)}</span>
          </div>
          <div>
            <span className="text-gray-500">Cost:</span> {guardian.pactCost.toLocaleString()} mana
          </div>
        </div>

        {/* Ritual Progress */}
        {isRitualActive && (
          <div className="space-y-1">
            <div className="flex justify-between text-xs">
              <span className="text-amber-400">Ritual in progress…</span>
              <span className="text-gray-400">{ritualProgress}/{ritualTime}h</span>
            </div>
            <div className="w-full bg-gray-700 rounded-full h-1.5">
              <div
                className="bg-amber-500 h-1.5 rounded-full transition-all"
                style={{ width: `${Math.min(100, (ritualProgress / ritualTime) * 100)}%` }}
              />
            </div>
            {ritualComplete && (
              <div className="text-xs text-green-400 flex items-center gap-1">
                <Check className="w-3 h-3" /> Ritual complete — pact will be signed on next tick
              </div>
            )}
          </div>
        )}

        {/* Action Button */}
        {status === 'defeated' && !isRitualActive && (
          <button
            onClick={() => onStartRitual(floor)}
            disabled={!canAfford || !hasSlot}
            className={clsx(
              'w-full rounded px-3 py-1.5 text-xs font-medium transition-colors flex items-center justify-center gap-1',
              canAfford && hasSlot
                ? 'bg-amber-600/80 text-white hover:bg-amber-500'
                : 'bg-gray-700 text-gray-500 cursor-not-allowed',
            )}
          >
            {!canAfford ? (
              <><Lock className="w-3 h-3" /> Not enough mana</>
            ) : !hasSlot ? (
              <><Lock className="w-3 h-3" /> No pact slots</>
            ) : (
              <><ChevronRight className="w-3 h-3" /> Begin Pact Ritual</>
            )}
          </button>
        )}
      </CardContent>
    </Card>
  );
});

GuardianCard.displayName = 'GuardianCard';

// ─── Floor Tier Groups ──────────────────────────────────────────────────────

interface FloorTier {
  label: string;
  floors: number[];
}

function groupFloorsByTier(floors: number[]): FloorTier[] {
  const tiers: FloorTier[] = [
    { label: 'Early Spire (10–40)', floors: [] },
    { label: 'Mid Spire (50–60)', floors: [] },
    { label: 'Late Spire (80–100)', floors: [] },
  ];
  for (const f of floors) {
    if (f <= 40) tiers[0].floors.push(f);
    else if (f <= 60) tiers[1].floors.push(f);
    else tiers[2].floors.push(f);
  }
  return tiers.filter(t => t.floors.length > 0);
}

// ─── Main Tab ────────────────────────────────────────────────────────────────

export const GuardianPactsTab: React.FC = () => {
  const [mounted, setMounted] = useState(false);
  const [activeTier, setActiveTier] = useState<string>('all');

  const {
    defeatedGuardians,
    signedPacts,
    pactSlots,
    pactRitualFloor,
    pactRitualProgress,
    startPactRitual,
  } = usePrestigeStore(useShallow(s => ({
    defeatedGuardians: s.defeatedGuardians,
    signedPacts: s.signedPacts,
    pactSlots: s.pactSlots,
    pactRitualFloor: s.pactRitualFloor,
    pactRitualProgress: s.pactRitualProgress,
    startPactRitual: s.startPactRitual,
  })));

  const rawMana = useManaStore(s => s.rawMana);
  const addLog = useUIStore(s => s.addLog);

  useEffect(() => {
    setMounted(true);
  }, []);

  const guardianFloors = useMemo(
    () => Object.keys(GUARDIANS).map(Number).sort((a, b) => a - b),
    [],
  );

  const tiers = useMemo(() => groupFloorsByTier(guardianFloors), [guardianFloors]);

  const filteredFloors = useMemo(() => {
    if (activeTier === 'all') return guardianFloors;
    const tier = tiers.find(t => t.label === activeTier);
    return tier ? tier.floors : guardianFloors;
  }, [activeTier, guardianFloors, tiers]);

  const handleStartRitual = useCallback((floor: number) => {
    const guardian = GUARDIANS[floor];
    if (!guardian) return;

    const success = startPactRitual(floor, rawMana);
    if (success) {
      addLog(`📜 Began pact ritual with ${guardian.name}…`);
    } else {
      addLog(`⚠️ Cannot start pact ritual with ${guardian.name}.`);
    }
  }, [startPactRitual, rawMana, addLog]);

  // Cumulative boon summary from signed pacts
  const cumulativeBoons = useMemo(() => {
    const boonMap: Record<string, number> = {};
    for (const floor of signedPacts) {
      const guardian = GUARDIANS[floor];
      if (!guardian) continue;
      for (const boon of guardian.boons) {
        boonMap[boon.type] = (boonMap[boon.type] || 0) + boon.value;
      }
    }
    return boonMap;
  }, [signedPacts]);

  if (!mounted) {
    return (
      <div className="flex items-center justify-center p-8 text-gray-500">
        Loading guardian pacts…
      </div>
    );
  }

  return (
    <DebugName name="GuardianPactsTab">
      <div className="space-y-4">
        {/* Header Summary */}
        <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
          <CardContent className="py-3">
            <div className="flex flex-wrap items-center gap-4 text-xs">
              <div className="flex items-center gap-1.5">
                <Shield className="w-3.5 h-3.5 text-amber-400" />
                <span className="text-gray-400">Pact Slots:</span>
                <span className="text-gray-200">{signedPacts.length} / {pactSlots}</span>
              </div>
              <div className="flex items-center gap-1.5">
                <Check className="w-3.5 h-3.5 text-green-400" />
                <span className="text-gray-400">Signed:</span>
                <span className="text-green-400">{signedPacts.length}</span>
              </div>
              <div className="flex items-center gap-1.5">
                <Swords className="w-3.5 h-3.5 text-red-400" />
                <span className="text-gray-400">Defeated:</span>
                <span className="text-red-400">{defeatedGuardians.length}</span>
              </div>
            </div>

            {/* Cumulative Boons */}
            {signedPacts.length > 0 && (
              <div className="mt-2 pt-2 border-t border-gray-700/50">
                <div className="text-xs text-gray-400 mb-1">Active Boon Effects:</div>
                <div className="flex flex-wrap gap-1">
                  {Object.entries(cumulativeBoons).map(([type, value]) => (
                    <span
                      key={type}
                      className="px-1.5 py-0.5 text-[10px] rounded border border-green-600/30 text-green-300 bg-green-900/20"
                    >
                      {type}: +{value}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Tier Filter */}
        <div className="flex gap-2 flex-wrap">
          <button
            onClick={() => setActiveTier('all')}
            className={clsx(
              'rounded px-3 py-1 text-xs font-medium transition-colors',
              activeTier === 'all'
                ? 'bg-amber-600 text-white'
                : 'text-gray-400 hover:text-gray-200',
            )}
          >
            All ({guardianFloors.length})
          </button>
          {tiers.map((tier) => (
            <button
              key={tier.label}
              onClick={() => setActiveTier(tier.label)}
              className={clsx(
                'rounded px-3 py-1 text-xs font-medium transition-colors',
                activeTier === tier.label
                  ? 'bg-amber-600 text-white'
                  : 'text-gray-400 hover:text-gray-200',
              )}
            >
              {tier.label} ({tier.floors.length})
            </button>
          ))}
        </div>

        {/* Guardian Cards */}
        <ScrollArea className="h-[500px] rounded border border-gray-700 p-3">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {filteredFloors.map((floor) => {
              const guardian = GUARDIANS[floor];
              if (!guardian) return null;
              const status = getGuardianStatus(floor, defeatedGuardians, signedPacts);
              const isRitualActive = pactRitualFloor === floor;
              const hasSlot = signedPacts.length < pactSlots;
              const canAfford = rawMana >= guardian.pactCost;

              return (
                <GuardianCard
                  key={floor}
                  floor={floor}
                  guardian={guardian}
                  status={status}
                  canAfford={canAfford}
                  hasSlot={hasSlot}
                  isRitualActive={isRitualActive}
                  ritualProgress={pactRitualProgress}
                  onStartRitual={handleStartRitual}
                />
              );
            })}
          </div>
        </ScrollArea>
      </div>
    </DebugName>
  );
};

GuardianPactsTab.displayName = 'GuardianPactsTab';
