/**
 * 인지검사 안내 화면 (요청사항-001-1)
 *
 * TestRunner 내부에서 가로 풀스크린 상태로 렌더링.
 * 좌측: 검사 정보 (제목, 단계·시간, 설명, 미리보기)
 * 우측: PLAY NOW 버튼
 */
import styled from 'styled-components';
import type { IntroContent } from '../data/tests';

interface Props {
  content: IntroContent;
  onStart: () => void;
}

/* ─── 스타일 ────────────────────────────────────── */

const Wrapper = styled.div`
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  gap: 40px;
  min-height: 0;
`;

const Card = styled.div`
  background: var(--pcnt-card);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 32px 28px;
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
`;

const Title = styled.h2`
  font-size: 22px;
  font-weight: 700;
  color: var(--pcnt-text);
`;

const Subtitle = styled.p`
  font-size: 13px;
  color: var(--pcnt-text-sub);
`;

const Description = styled.p`
  font-size: 14px;
  color: var(--pcnt-text);
  line-height: 1.6;
`;

const PreviewImage = styled.img`
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--pcnt-bg);
`;

const PlayButton = styled.button`
  flex: 0 0 auto;
  width: 140px;
  align-self: stretch;
  background: linear-gradient(180deg, #5b7ffa 0%, #3a54d0 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(58, 84, 208, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: opacity 0.15s;

  &:active {
    opacity: 0.85;
  }
`;

/* ─── 컴포넌트 ─────────────────────────────────── */

export default function IntroScreen({ content, onStart }: Props) {
  const handleStart = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onStart();
  };

  return (
    <Wrapper>
      <Card>
        <Title>{content.title}</Title>
        <Subtitle>{content.subtitle}</Subtitle>
        <Description>{content.description}</Description>
        {content.previewImage && (
          <PreviewImage src={content.previewImage} alt={`${content.title} 미리보기`} />
        )}
      </Card>
      <PlayButton type="button" onClick={handleStart}>
        PLAY
        <br />
        NOW
      </PlayButton>
    </Wrapper>
  );
}