'use client';

import { useMemo } from 'react';
import { DebugName } from '@/components/game/debug/debug-context';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Brain } from 'lucide-react';
import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
import type { DisciplineEffectsResult } from '@/lib/game/effects/discipline-effects';
import { ALL_DISCIPLINES } from '@/lib/game/data/disciplines';
import { getUnlockedPerks } from '@/lib/game/utils/discipline-math';

interface DisciplineStatsSectionProps {
  disciplineEffects: DisciplineEffectsResult;
}

export function DisciplineStatsSection({ disciplineEffects }: DisciplineStatsSectionProps) {
  const disciplines = useDisciplineStore((s) => s.disciplines);
  const activeIds = useDisciplineStore((s) => s.activeIds);

  const disciplineEntries = useMemo(() => {
    return ALL_DISCIPLINES.map((def) => {
      const state = disciplines[def.id] ?? { xp: 0, paused: true };
      const unlockedPerks = getUnlockedPerks(def, state.xp);
      return { def, state, unlockedPerks };
    }).filter(({ def, state }) => state.xp > 0 || activeIds.includes(def.id));
  }, [disciplines, activeIds]);

  if (disciplineEntries.length === 0) return null;

  return (
    <DebugName name="DisciplineStatsSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-crystal)] game-panel-title text-xs flex items-center gap-2">
          <Brain className="w-4 h-4" />
          Disciplines
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {disciplineEntries.map(({ def, state, unlockedPerks }) => {
            const totalEffect = disciplineEffects.bonuses[def.statBonus.stat] ?? 0;

            return (
              <div key={def.id} className="border-b border-[var(--border-subtle)] pb-2 last:border-0">
                <div className="flex justify-between text-sm">
                  <span style={{ color: 'var(--text-secondary)' }}>{def.name}</span>
                  <span style={{ color: activeIds.includes(def.id) ? 'var(--color-success)' : 'var(--text-muted)' }}>
                    {activeIds.includes(def.id) ? 'Active' : 'Paused'} &bull; {state.xp} XP
                  </span>
                </div>
                {totalEffect > 0 && (
                  <div className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>
                    Effect: +{totalEffect.toFixed(2)} {def.statBonus.label}
                  </div>
                )}
                {unlockedPerks.length > 0 && (
                  <div className="mt-1">
                    <span className="text-xs" style={{ color: 'var(--text-muted)' }}>Perks:</span>
                    <ul className="mt-0.5 space-y-0.5">
                      {unlockedPerks.map((perk) => (
                        <li key={perk.id} className="text-xs text-green-500 list-none">&bull; {perk.description}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
