'use client';

import { useMemo } from 'react';
import { useSearchParams } from 'next/navigation';
import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
import { SOUND_PRESETS } from '@/entities/session';
import { useImmersionMode } from '@/features/immersion-mode';
import { cn } from '@/shared/lib/cn';
import { SpaceChromeWidget } from '@/widgets/space-chrome';
import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';

export const SpaceSkeletonWidget = () => {
  const searchParams = useSearchParams();

  const roomId = searchParams.get('room') ?? ROOM_THEMES[0].id;
  const goal = searchParams.get('goal') ?? '오늘은 한 조각만 집중해요';
  const timerLabel = searchParams.get('timer') ?? '25/5';
  const soundFromQuery = searchParams.get('sound');

  const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
  const { isImmersionMode, toggleImmersionMode, exitImmersionMode } = useImmersionMode();
  const initialSoundPresetId =
    SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
    SOUND_PRESETS[0].id;

  return (
    <div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
      <div
        aria-hidden
        className="absolute inset-0 w-full"
        style={getRoomBackgroundStyle(room)}
      />
      <div
        aria-hidden
        className={cn(
          'absolute inset-0 w-full transition-colors',
          isImmersionMode ? 'bg-slate-950/72' : 'bg-slate-950/62',
        )}
      />
      <div
        aria-hidden
        className={cn(
          'absolute inset-0 w-full transition-opacity',
          isImmersionMode ? 'opacity-48' : 'opacity-35',
        )}
        style={{
          backgroundImage:
            "url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 2px)",
        }}
      />
      <div
        aria-hidden
        className={cn(
          'absolute inset-0 w-full transition-opacity',
          isImmersionMode ? 'opacity-88' : 'opacity-62',
        )}
        style={{
          background:
            'radial-gradient(120% 90% at 50% 50%, rgba(2,6,23,0) 24%, rgba(2,6,23,0.78) 100%)',
        }}
      />

      <div className="relative z-10 flex min-h-screen flex-col pr-14">
        <SpaceChromeWidget
          roomName={room.name}
          vibeLabel={room.vibeLabel}
          isImmersionMode={isImmersionMode}
          onExitRequested={exitImmersionMode}
        />

        <main className="flex-1" />
      </div>

      <SpaceTimerHudWidget
        timerLabel={timerLabel}
        goal={goal}
        isImmersionMode={isImmersionMode}
      />

      <SpaceToolsDockWidget
        roomName={room.name}
        activeMembers={room.activeMembers}
        presence={room.presence}
        initialSoundPresetId={initialSoundPresetId}
        isImmersionMode={isImmersionMode}
        onToggleImmersionMode={toggleImmersionMode}
      />
    </div>
  );
};