'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DebugName } from '@/components/game/debug/debug-context';
import { Trophy } from 'lucide-react';
import { fmtDec } from '@/lib/game/stores';
import { ELEMENTS } from '@/lib/game/constants';
import { usePrestigeStore, useManaStore } from '@/lib/game/stores';

interface PactStatusSectionProps {
  pactMultiplier: number;
  pactInsightMultiplier: number;
}

export function PactStatusSection({ pactMultiplier, pactInsightMultiplier }: PactStatusSectionProps) {
  const signedPacts = usePrestigeStore((s) => s.signedPacts);
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
  const elements = useManaStore((s) => s.elements);
  
  const pactInterferenceMitigation = prestigeUpgrades?.pactInterferenceMitigation || 0;
  
  return (
    <DebugName name="PactStatusSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-light)] game-panel-title text-xs flex items-center gap-2">
          <Trophy className="w-4 h-4" />
          Pact Status
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Pact Slots:</span>
              <span style={{ color: 'var(--mana-light)' }}>{signedPacts.length} / {1 + (prestigeUpgrades.pactCapacity || 0)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Damage Multiplier:</span>
              <span style={{ color: 'var(--mana-light)' }}>×{fmtDec(pactMultiplier, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Insight Multiplier:</span>
              <span style={{ color: 'var(--mana-crystal)' }}>×{fmtDec(pactInsightMultiplier, 2)}</span>
            </div>
            {signedPacts.length > 1 && (
              <>
                <div className="flex justify-between text-sm">
                  <span style={{ color: 'var(--text-muted)' }}>Interference Mitigation:</span>
                  <span style={{ color: 'var(--color-success)' }}>{Math.min(pactInterferenceMitigation, 5) * 10}%</span>
                </div>
                {pactInterferenceMitigation >= 5 && (
                  <div className="flex justify-between text-sm">
                    <span style={{ color: 'var(--mana-crystal)' }}>Synergy Bonus:</span>
                    <span style={{ color: 'var(--mana-crystal)' }}>+{(pactInterferenceMitigation - 5) * 10}%</span>
                  </div>
                )}
              </>
            )}
          </div>
          <div className="space-y-2">
            <div className="text-sm" style={{ color: 'var(--text-muted)' }}>Unlocked Mana Types:</div>
            <div className="flex flex-wrap gap-1">
              {Object.keys(elements).map((id) => {
                const state = elements[id];
                if (!state.unlocked) return null;
                const elem = ELEMENTS[id];
                return (
                  <span key={id} className="px-2 py-1 text-xs rounded border transition-colors" style={{ borderColor: `${elem?.color}60`, color: elem?.color }}>
                    {elem?.sym} {elem?.name}
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}