'use client';

import { fmt, fmtDec } from '@/lib/game/stores';
import { DebugName } from '@/components/game/debug/debug-context';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Droplet } from 'lucide-react';
import type { ComputedEffects } from '@/lib/game/effects/upgrade-effects.types';

export interface ManaStatsData {
  maxMana: number;
  baseRegen: number;
  effectiveRegen: number;
  clickMana: number;
  meditationMultiplier: number;
  meditationCap: number;
  upgradeEffects: ComputedEffects;
  incursionStrength: number;
  rawMana: number;
  hasSteadyStream: boolean;
  hasManaTorrent: boolean;
  hasDesperateWells: boolean;
  manaCascadeBonus: number;
  manaWaterfallBonus: number;
  hasFlowSurge: boolean;
  hasManaOverflow: boolean;
  hasEternalFlow: boolean;
  disciplineMaxManaBonus: number;
}

interface ManaStatsSectionProps {
  stats: ManaStatsData;
  elemMax: number;
}

export function ManaStatsSection({ stats, elemMax }: ManaStatsSectionProps) {
  const {
    maxMana,
    baseRegen,
    effectiveRegen,
    clickMana,
    meditationMultiplier,
    upgradeEffects,
    incursionStrength,
    rawMana,
    hasSteadyStream,
    hasManaTorrent,
    hasDesperateWells,
    manaCascadeBonus,
    manaWaterfallBonus,
    hasFlowSurge,
    hasManaOverflow,
    hasEternalFlow,
    disciplineMaxManaBonus,
  } = stats;

  return (
    <DebugName name="ManaStatsSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-water)] game-panel-title text-xs flex items-center gap-2">
          <Droplet className="w-4 h-4" />
          Mana Stats
        </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)' }}>Base Max Mana:</span>
              <span style={{ color: 'var(--text-secondary)' }}>100</span>
            </div>
            {upgradeEffects.maxManaBonus > 0 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-light)' }}>Upgrade Mana Bonus:</span>
                <span style={{ color: 'var(--mana-light)' }}>+{fmt(upgradeEffects.maxManaBonus)}</span>
              </div>
            )}
            {upgradeEffects.maxManaMultiplier > 1 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-light)' }}>Upgrade Mana Multiplier:</span>
                <span style={{ color: 'var(--mana-light)' }}>×{fmtDec(upgradeEffects.maxManaMultiplier, 2)}</span>
              </div>
            )}
            {disciplineMaxManaBonus > 0 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-crystal)' }}>Discipline Mana Bonus:</span>
                <span style={{ color: 'var(--mana-crystal)' }}>+{fmt(disciplineMaxManaBonus)}</span>
              </div>
            )}
            <div className="flex justify-between text-sm font-semibold border-t border-[var(--border-subtle)] pt-2">
              <span style={{ color: 'var(--text-secondary)' }}>Total Max Mana:</span>
              <span style={{ color: 'var(--mana-water)' }}>{fmt(maxMana)}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Base Regen:</span>
              <span style={{ color: 'var(--text-secondary)' }}>2/hr</span>
            </div>
            <div className="flex justify-between text-sm font-semibold border-t border-[var(--border-subtle)] pt-2">
              <span style={{ color: 'var(--text-secondary)' }}>Computed Base Regen:</span>
              <span style={{ color: 'var(--mana-water)' }}>{fmtDec(baseRegen, 2)}/hr</span>
            </div>
            {upgradeEffects.regenBonus > 0 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-light)' }}>Upgrade Regen Bonus:</span>
                <span style={{ color: 'var(--mana-light)' }}>+{fmtDec(upgradeEffects.regenBonus, 2)}/hr</span>
              </div>
            )}
            {upgradeEffects.permanentRegenBonus > 0 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-light)' }}>Permanent Regen Bonus:</span>
                <span style={{ color: 'var(--mana-light)' }}>+{fmtDec(upgradeEffects.permanentRegenBonus, 2)}/hr</span>
              </div>
            )}
            {upgradeEffects.regenMultiplier > 1 && (
              <div className="flex justify-between text-sm">
                <span style={{ color: 'var(--mana-light)' }}>Upgrade Regen Multiplier:</span>
                <span style={{ color: 'var(--mana-light)' }}>×{fmtDec(upgradeEffects.regenMultiplier, 2)}</span>
              </div>
            )}
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Click Mana Value:</span>
              <span style={{ color: 'var(--mana-crystal)' }}>+{clickMana}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Meditation Multiplier:</span>
              <span className={`font-semibold ${meditationMultiplier > 1.5 ? 'text-[var(--mana-stellar)]' : 'text-[var(--text-secondary)]'}`}>
                {fmtDec(meditationMultiplier, 2)}x
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Meditation Cap:</span>
              <span style={{ color: 'var(--text-secondary)' }}>{fmtDec(stats.meditationCap, 1)}x</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Incursion Strength:</span>
              <span style={{ color: 'var(--color-danger)' }}>{Math.round(incursionStrength * 100)}%</span>
            </div>
            <div className="flex justify-between text-sm font-semibold border-t border-[var(--border-subtle)] pt-2">
              <span style={{ color: 'var(--text-secondary)' }}>Effective Regen:</span>
              <span style={{ color: 'var(--color-success)' }} className="font-semibold">{fmtDec(effectiveRegen, 2)}/hr</span>
            </div>
          </div>
        </div>
        {/* Special Effects */}
        {(hasSteadyStream || hasManaTorrent ||
          hasDesperateWells || manaCascadeBonus > 0 ||
          manaWaterfallBonus > 0) && (
          <>
            <div className="mt-3 mb-2"><span className="text-xs text-[var(--mana-light)] game-panel-title">Special Effects</span></div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              {hasSteadyStream && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Steady Stream:</span>
                  <span style={{ color: 'var(--color-success)' }}>Immune to incursion</span>
                </div>
              )}
              {manaCascadeBonus > 0 && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Mana Cascade:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(manaCascadeBonus, 2)}/hr</span>
                </div>
              )}
              {manaWaterfallBonus > 0 && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Mana Waterfall:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(manaWaterfallBonus, 2)}/hr</span>
                </div>
              )}
              {hasFlowSurge && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Flow Surge:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>Clicks +100% regen for 1hr</span>
                </div>
              )}
              {hasManaOverflow && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Mana Overflow:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>Raw can exceed max by 20%</span>
                </div>
              )}
              {hasEternalFlow && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Eternal Flow:</span>
                  <span style={{ color: 'var(--color-success)' }}>Regen immune to ALL penalties</span>
                </div>
              )}
              {hasManaTorrent && rawMana > maxMana * 0.75 && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Mana Torrent:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>+50% regen (high mana)</span>
                </div>
              )}
              {hasDesperateWells && rawMana < maxMana * 0.25 && (
                <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                  <span style={{ color: 'var(--text-secondary)' }}>Desperate Wells:</span>
                  <span style={{ color: 'var(--mana-crystal)' }}>+50% regen (low mana)</span>
                </div>
              )}
            </div>
          </>
        )}
        {/* Element Max */}
        <div className="mt-3 pt-3 border-t border-[var(--border-subtle)]">
          <div className="flex justify-between text-sm">
            <span style={{ color: 'var(--text-muted)' }}>Element Capacity:</span>
            <span style={{ color: 'var(--color-success)' }}>{elemMax}</span>
          </div>
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
