Mana-Loop/src/components/game/AttunementStatus.tsx

'use client';

import { useMemo } from 'react';
import { useAttunementStore } from '@/lib/game/stores';
import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

const SLOT_LABELS: Record<string, string> = {
  rightHand: 'R. Hand',
  leftHand: 'L. Hand',
  head: 'Head',
  back: 'Back',
  chest: 'Chest',
  leftLeg: 'L. Leg',
  rightLeg: 'R. Leg',
};

export function AttunementStatus() {
  const attunements = useAttunementStore((s) => s.attunements);

  const attunementOrder = useMemo(() => {
    const map = new Map<string, number>();
    Object.values(ATTUNEMENTS_DEF).forEach((d, i) => map.set(d.id, i));
    return map;
  }, []);

  const activeAttunements = useMemo(() => {
    return Object.entries(attunements)
      .filter(([, state]) => state.active)
      .sort(([, a], [, b]) => (attunementOrder.get(a.id) ?? 0) - (attunementOrder.get(b.id) ?? 0));
  }, [attunements, attunementOrder]);

  const xpForNext = (level: number) => {
    if (level <= 1) return 0;
    if (level === 2) return 1000;
    return Math.floor(1000 * Math.pow(2, level - 2) * (level >= 3 ? 1.25 : 1));
  };

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between">
        <span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
        <span className="text-[10px] text-[var(--text-muted)]">{activeAttunements.length} active</span>
      </div>
      <Separator className="bg-[var(--border-subtle)]" />
      <div className="space-y-1.5">
        {activeAttunements.length === 0 ? (
          <div className="text-[10px] text-[var(--text-muted)] italic">No attunements active</div>
        ) : (
          activeAttunements.map(([id, state]) => {
            const def = ATTUNEMENTS_DEF[id];
            if (!def) return null;
            const nextXp = xpForNext(state.level);
            const xpProgress = nextXp > 0 ? (state.experience / nextXp) * 100 : 0;

            return (
              <TooltipProvider key={id}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <div className="flex items-center gap-2 p-1.5 rounded bg-[var(--bg-sunken)]/50 border border-[var(--border-subtle)]">
                      <span className="text-sm">{def.icon}</span>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5">
                          <span className="text-[11px] font-medium text-[var(--text-primary)] truncate">
                            {def.name}
                          </span>
                          <span className="text-[10px] text-[var(--text-secondary)] font-mono">
                            Lv.{state.level}
                          </span>
                        </div>
                        <div className="text-[10px] text-[var(--text-muted)]">
                          <span className="capitalize">{SLOT_LABELS[def.slot] || def.slot}</span>
                          {nextXp > 0 && (
                            <span className="ml-1.5 font-mono">
                              {Math.floor(state.experience).toLocaleString()}/{nextXp.toLocaleString()} XP
                            </span>
                          )}
                        </div>
                        {nextXp > 0 && (
                          <div className="w-full h-0.5 bg-[var(--border-subtle)] rounded-full mt-0.5 overflow-hidden">
                            <div
                              className="h-full transition-all duration-500"
                              style={{
                                width: `${Math.min(100, xpProgress)}%`,
                                backgroundColor: def.color,
                                opacity: 0.7,
                              }}
                            />
                          </div>
                        )}
                      </div>
                    </div>
                  </TooltipTrigger>
                  <TooltipContent side="right">
                    <p className="text-xs max-w-[220px]">{def.desc}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            );
          })
        )}
      </div>
    </div>
  );
}

AttunementStatus.displayName = 'AttunementStatus';