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

/** A nat-20 / critical-success is a crit; a nat-1 / critical-failure is a fumble. */
function critKind(roll: TrayRoll): 'crit' | 'fumble' | null {
  if (roll.degree === 'critical-success') return 'crit';
  if (roll.degree === 'critical-failure') return 'fumble';
  const n = naturalD20(roll.result);
  if (n === 20) return 'crit';
  if (n === 1) return 'fumble';
  return null;
}

/** 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;

  const crit = critKind(last);

  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={cn(
          'pointer-events-auto rounded-lg border bg-panel p-4 shadow-2xl',
          crit === 'crit' && 'animate-crit animate-crit-glow border-warning',
          crit === 'fumble' && 'animate-fumble border-danger',
          !crit && 'animate-dice-settle border-line',
        )}
      >
        <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>}
            {crit === 'crit' && <div className="text-xs font-bold uppercase tracking-wide text-warning">✦ Critical ✦</div>}
            {crit === 'fumble' && <div className="text-xs font-bold uppercase tracking-wide text-danger">✦ Fumble ✦</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={cn('mt-1 font-display text-4xl font-bold', crit === 'crit' ? 'text-warning' : crit === 'fumble' ? 'text-danger' : 'text-accent')}>{last.result.total}</div>
        <div className="mt-1 font-mono text-xs text-muted">{last.result.breakdown}</div>
      </div>
    </div>
  );
}
