import { useRollStore } from '@/stores/rollStore';
import { DEGREE_COLOR, DEGREE_LABEL } from '@/lib/dice/check';
import { cn } from '@/lib/cn';

/** Floating result of the most recent roll, shared across the whole app. */
export function RollTray() {
  const last = useRollStore((s) => s.last);
  const dismiss = useRollStore((s) => s.dismiss);
  if (!last) return null;

  return (
    <div data-roll-tray className="pointer-events-none fixed bottom-4 right-4 z-50 w-72 print:hidden">
      <div
        key={last.seq}
        className="animate-dice-settle pointer-events-auto rounded-lg border border-line bg-panel p-4 shadow-2xl"
      >
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            {last.label && <div className="truncate text-xs font-medium text-muted">{last.label}</div>}
            {last.degree && (
              <div className={cn('text-xs font-semibold', DEGREE_COLOR[last.degree])}>
                {DEGREE_LABEL[last.degree]}
                {last.dc !== undefined ? ` (DC ${last.dc})` : ''}
              </div>
            )}
          </div>
          <button onClick={dismiss} aria-label="Dismiss roll" className="text-muted hover:text-ink">✕</button>
        </div>
        <div className="mt-1 font-display text-4xl font-bold text-accent">{last.result.total}</div>
        <div className="mt-1 font-mono text-xs text-muted">{last.result.breakdown}</div>
      </div>
    </div>
  );
}
