import type { RefObject } from 'react';
import { CircularProgress } from '@/components/classroom-timer/CircularProgress';
import { TimerControls } from '@/components/classroom-timer/TimerControls';
import { TimerParticles } from '@/components/classroom-timer/TimerParticles';
import type {
  ClassroomTimerActions,
  ClassroomTimerState,
} from '@/components/classroom-timer/types';

type TimerProjectionViewProps = {
  state: ClassroomTimerState;
  actions: ClassroomTimerActions;
  fullscreenRef: RefObject<HTMLDivElement | null>;
};

export function TimerProjectionView({ state, actions, fullscreenRef }: TimerProjectionViewProps) {
  const {
    selectedBackground,
    isFinished,
    progress,
    urgencyColor,
    formattedTime,
    isRunning,
    remainingSeconds,
    totalSeconds,
    soundEnabled,
    fullscreenParticles,
    presets,
  } = state;

  if (!selectedBackground) {
    return null;
  }

  return (
    <div
      ref={fullscreenRef}
      className="fixed inset-0 z-[9999] flex flex-col items-center justify-center cursor-pointer select-none bg-black"
    >
      <img
        src={selectedBackground.image}
        alt=""
        className="absolute inset-0 w-full h-full object-cover"
        style={{ filter: isFinished ? 'brightness(0.3)' : 'brightness(0.7)' }}
      />
      <div className={`absolute inset-0 bg-gradient-to-br ${selectedBackground.overlay}`} />
      <TimerParticles particles={fullscreenParticles} />

      <div className="relative z-10 flex flex-col items-center gap-8">
        <div className="relative">
          <CircularProgress
            progress={progress}
            size={Math.min(window.innerWidth * 0.4, 500)}
            strokeWidth={12}
            ringClass={selectedBackground.ringColor}
            trackClass={selectedBackground.trackColor}
          />
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span
              className={`font-mono font-bold tracking-wider ${urgencyColor}`}
              style={{ fontSize: `${Math.min(window.innerWidth * 0.1, 120)}px` }}
            >
              {formattedTime}
            </span>
            {isFinished && (
              <span className={`text-2xl md:text-4xl font-bold ${selectedBackground.accentColor} animate-bounce mt-2`}>
                Time&apos;s Up!
              </span>
            )}
          </div>
        </div>

        <TimerControls
          isProjection
          isRunning={isRunning}
          isFinished={isFinished}
          remainingSeconds={remainingSeconds}
          totalSeconds={totalSeconds}
          soundEnabled={soundEnabled}
          onStart={actions.handleStart}
          onPause={actions.handlePause}
          onReset={actions.handleReset}
          onToggleSound={() => actions.setSoundEnabled(!soundEnabled)}
          onToggleFullscreen={actions.toggleFullscreen}
        />

        <div className="flex flex-wrap items-center justify-center gap-2 mt-2">
          {presets.slice(0, 6).map((preset) => (
            <button
              type="button"
              key={preset.seconds}
              onClick={() => actions.handleSetTime(preset.seconds)}
              className={`px-4 py-2 rounded-full text-sm font-medium backdrop-blur-md border transition-all ${
                totalSeconds === preset.seconds
                  ? 'bg-white/25 border-white/40 text-white'
                  : 'bg-white/10 border-white/15 text-white/60 hover:bg-white/20 hover:text-white'
              }`}
            >
              {preset.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
