import { css, keyframes } from '@emotion/react';
import { useEffect } from 'react';

interface IntroSplashProps {
  onDone: () => void;
}

const fade = keyframes`
  0% { opacity: 0; }
  14%, 82% { opacity: 1; }
  100% { opacity: 0; }
`;

const rise = keyframes`
  from { transform: translateY(16px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
`;

const overlayStyle = css`
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, #27364f, #05070d 62%);
  color: white;
  animation: ${fade} 1.55s ease-in-out forwards;
  cursor: pointer;
`;

const contentStyle = css`
  text-align: center;
`;

const iconsStyle = css`
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 34px;
  margin-bottom: 18px;

  span {
    opacity: 0;
    animation: ${rise} 0.36s ease-out forwards;
  }

  span:nth-of-type(2) { animation-delay: 0.16s; }
  span:nth-of-type(3) { animation-delay: 0.32s; }
  span:nth-of-type(4) { animation-delay: 0.48s; }
`;

const lineStyle = css`
  font-size: 16px;
  line-height: 1.5;
  font-weight: 800;
  opacity: 0;
  animation: ${rise} 0.36s 0.68s ease-out forwards;
`;

export function IntroSplash({ onDone }: IntroSplashProps) {
  useEffect(() => {
    const timer = window.setTimeout(onDone, 1550);
    return () => window.clearTimeout(timer);
  }, [onDone]);

  return (
    <div
      css={overlayStyle}
      role="button"
      tabIndex={0}
      onClick={onDone}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') onDone();
      }}
    >
      <div css={contentStyle}>
        <div css={iconsStyle}>
          <span>🔥</span>
          <span>💧</span>
          <span>🌪️</span>
          <span>🌱</span>
        </div>
        <div css={lineStyle}>당신이 세상의 첫 불꽃입니다</div>
      </div>
    </div>
  );
}
