AIHostingTycoon/apps/web/src/pages/AchievementsPage.tsx

import { useGameStore } from '@/store';
import { ACHIEVEMENT_DEFINITIONS } from '@token-empire/game-engine';
import { formatNumber } from '@token-empire/shared';
import {
  Trophy, Lock, Server, Brain, Rocket, DollarSign, Sprout, Users,
  Globe, Sparkles, TrendingUp, Building2, Atom, Cpu, FlaskConical,
  GitBranch, Zap,
} from 'lucide-react';
import type { AchievementCondition } from '@token-empire/shared';

const ICON_MAP: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
  Trophy, Server, Brain, Rocket, DollarSign, Sprout, Users,
  Globe, Sparkles, TrendingUp, Building2, Atom, Cpu, FlaskConical,
  GitBranch, Zap,
};

function resolveField(state: Record<string, unknown>, path: string): number {
  const parts = path.split('.');
  let current: unknown = state;
  for (const part of parts) {
    if (current == null || typeof current !== 'object') return 0;
    current = (current as Record<string, unknown>)[part];
  }
  return typeof current === 'number' ? current : 0;
}

function getProgress(state: Record<string, unknown>, condition: AchievementCondition): { current: number; target: number; pct: number } | null {
  if (condition.field.startsWith('meta._')) return null;
  if (condition.operator === 'gt' && condition.value === 0) {
    const current = resolveField(state, condition.field);
    return { current, target: 1, pct: current > 0 ? 100 : 0 };
  }
  if (condition.operator === 'gte' || condition.operator === 'eq') {
    const current = resolveField(state, condition.field);
    const pct = condition.value > 0 ? Math.min(100, (current / condition.value) * 100) : (current > 0 ? 100 : 0);
    return { current, target: condition.value, pct };
  }
  return null;
}

export function AchievementsPage() {
  const unlocked = useGameStore((s) => s.achievements.unlocked);
  const unlockedIds = new Set(unlocked.map(a => a.id));
  const state = useGameStore.getState() as unknown as Record<string, unknown>;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Achievements</h2>
        <span className="text-sm text-surface-400">
          {unlocked.length} / {ACHIEVEMENT_DEFINITIONS.length} unlocked
        </span>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {ACHIEVEMENT_DEFINITIONS.map(def => {
          const isUnlocked = unlockedIds.has(def.id);
          const IconComponent = ICON_MAP[def.icon] ?? Trophy;
          const progress = !isUnlocked ? getProgress(state, def.condition) : null;

          return (
            <div
              key={def.id}
              className={`rounded-xl border p-4 transition-all ${
                isUnlocked
                  ? 'bg-surface-900 border-accent/40 shadow-lg shadow-accent/5'
                  : 'bg-surface-900/50 border-surface-700 opacity-60'
              }`}
            >
              <div className="flex items-start gap-3">
                <div className={`p-2 rounded-lg ${isUnlocked ? 'bg-accent/20 text-accent-light' : 'bg-surface-800 text-surface-500'}`}>
                  {isUnlocked ? <IconComponent size={20} /> : <Lock size={20} />}
                </div>
                <div className="flex-1 min-w-0">
                  <h4 className={`font-semibold text-sm ${isUnlocked ? '' : 'text-surface-400'}`}>{def.name}</h4>
                  <p className="text-xs text-surface-400 mt-0.5">{def.description}</p>
                  {isUnlocked && (
                    <p className="text-xs text-accent mt-1">Unlocked</p>
                  )}
                  {!isUnlocked && progress && progress.target > 0 && (
                    <div className="mt-2">
                      <div className="flex justify-between text-[10px] text-surface-500 mb-0.5">
                        <span>{formatNumber(progress.current)} / {formatNumber(progress.target)}</span>
                        <span>{Math.floor(progress.pct)}%</span>
                      </div>
                      <div className="h-1 bg-surface-700 rounded-full overflow-hidden">
                        <div className="h-full bg-accent/50 rounded-full transition-all" style={{ width: `${progress.pct}%` }} />
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}