import { Timer } from 'lucide-react';

import { useClassroomTimer } from '@/business/classroom-timer/hooks';
import { TimerAnimations } from '@/components/classroom-timer/TimerAnimations';
import { TimerDisplay } from '@/components/classroom-timer/TimerDisplay';
import { TimerProjectionView } from '@/components/classroom-timer/TimerProjectionView';
import { TimerSettingsPanel } from '@/components/classroom-timer/TimerSettingsPanel';
import { TimerTips } from '@/components/classroom-timer/TimerTips';
import { StatePanel } from '@/components/ui/state-panel';
import { getOptionalErrorMessage } from '@/shared/errors/errorMessages';
import type { UserRole } from '@/shared/types/app';

interface ClassroomTimerProps {
  readonly userRole: UserRole;
}

const ClassroomTimer = ({ userRole }: ClassroomTimerProps) => {
  const timer = useClassroomTimer(userRole);
  const contentErrorMessage = getOptionalErrorMessage(timer.state.contentError);

  if (timer.state.isContentLoading) {
    return (
      <StatePanel tone="cyan" loading>
        Loading classroom timer content...
      </StatePanel>
    );
  }

  if (contentErrorMessage || !timer.state.selectedBackground || !timer.state.selectedSound) {
    return (
      <StatePanel tone="red" role="alert">
        Classroom timer content could not be loaded from the backend.
        {contentErrorMessage && <span className="block mt-2">{contentErrorMessage}</span>}
      </StatePanel>
    );
  }

  return (
    <div className="space-y-6">
      <TimerAnimations />

      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/30">
            <Timer size={20} className="text-white" />
          </div>
          Classroom Timer
        </h2>
        <p className="text-sm text-slate-400 mt-1">
          Visual countdown timer with sensory backgrounds - perfect for transitions, work time, and breaks.
          Project on the big screen.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <TimerDisplay state={timer.state} actions={timer.actions} />
        <TimerSettingsPanel state={timer.state} actions={timer.actions} />
      </div>

      <TimerTips state={timer.state} />

      {timer.state.isFullscreen && (
        <TimerProjectionView
          state={timer.state}
          actions={timer.actions}
          fullscreenRef={timer.refs.fullscreenRef}
        />
      )}
    </div>
  );
};

export default ClassroomTimer;
