import { cn } from '@/shared/lib/cn';
import { Restart30sAction } from '@/features/restart-30s';

interface SpaceTimerHudWidgetProps {
  timerLabel: string;
  goal: string;
  className?: string;
  isImmersionMode?: boolean;
}

const HUD_ACTIONS = [
  { id: 'start', label: '시작', icon: '▶' },
  { id: 'pause', label: '일시정지', icon: '⏸' },
  { id: 'reset', label: '리셋', icon: '↺' },
] as const;

export const SpaceTimerHudWidget = ({
  timerLabel,
  goal,
  className,
  isImmersionMode = false,
}: SpaceTimerHudWidgetProps) => {
  return (
    <div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
      <div className="mx-auto w-full max-w-xl pointer-events-auto">
        <section
          className={cn(
            'flex h-16 items-center justify-between gap-3 rounded-2xl px-3.5 transition-colors',
            isImmersionMode
              ? 'border border-white/6 bg-black/16 backdrop-blur-md'
              : 'border border-white/10 bg-black/25 backdrop-blur-sm',
          )}
        >
          <div className="min-w-0">
            <div className="flex items-baseline gap-2">
              <span
                className={cn(
                  'text-[11px] font-semibold uppercase tracking-[0.16em]',
                  isImmersionMode ? 'text-white/45' : 'text-white/62',
                )}
              >
                Focus
              </span>
              <span
                className={cn(
                  'text-2xl font-semibold tracking-tight',
                  isImmersionMode ? 'text-white/72' : 'text-white',
                )}
              >
                25:00
              </span>
              <span className={cn('text-[11px]', isImmersionMode ? 'text-white/42' : 'text-white/62')}>
                {timerLabel}
              </span>
            </div>
            <p className={cn('truncate text-[11px]', isImmersionMode ? 'text-white/44' : 'text-white/58')}>
              목표: {goal}
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <div className="flex items-center gap-1.5">
              {HUD_ACTIONS.map((action) => (
                <button
                  key={action.id}
                  type="button"
                  title={action.label}
                  className={cn(
                    'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
                    isImmersionMode
                      ? 'border-white/10 bg-white/5 text-white/64 hover:bg-white/10'
                      : 'border-white/15 bg-white/8 text-white/82 hover:bg-white/14',
                  )}
                >
                  <span aria-hidden>{action.icon}</span>
                  <span className="sr-only">{action.label}</span>
                </button>
              ))}
            </div>
            <Restart30sAction />
          </div>
        </section>
      </div>
    </div>
  );
};