/**
 * TestGuide — 테스트 가이드 페이지 (Phase 2)
 * 공용 TopAppBar + BottomNav (Layout에 포함됨)
 * 시안: 0040_Debug/subpages/testguide.html
 */
import styled from 'styled-components';
import MatIcon from '../../components/MatIcon';

const Container = styled.div`
  padding: 16px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
`;

const PageTitle = styled.h2`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md3-on-surface);
  margin: 0 0 12px;
`;

const PageSubtitle = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-secondary);
  margin: 0;
`;

const Section = styled.section`
  display: flex;
  flex-direction: column;
  gap: 24px;
`;

const SectionHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
`;

const SectionTitle = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0;
`;

const Card = styled.div`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
`;

const BodyText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-secondary);
  margin: 0 0 16px;
`;

/* 설문 진행 타임라인 */
const Steps = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  margin-bottom: 16px;

  &::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 11px;
    width: 2px;
    background: var(--md3-surface-variant);
  }
`;

const Step = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
`;

const StepBadge = styled.div<{ $primary?: boolean }>`
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: ${(p) => (p.$primary ? 'var(--md3-primary)' : 'var(--md3-surface-variant)')};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
`;

const StepBadgeText = styled.span`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--md3-on-primary);
  line-height: 1;
`;

const StepTitle = styled.h4`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0;
`;

const TipBanner = styled.div`
  background: var(--md3-surface-container-low);
  border-radius: 12px;
  padding: 12px;
  border-left: 4px solid var(--md3-status-normal, #10b981);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface);

  strong {
    font-weight: 600;
  }
`;

/* 5가지 인지검사 카드 그리드 */
const TestGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
`;

const TestCard = styled.article`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  border-left: 4px solid var(--md3-primary-container);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
`;

const TestHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
`;

const TestIcon = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md3-primary-container);
  color: var(--md3-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
`;

const TestName = styled.h4`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0;
`;

const TestBody = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  flex: 1;

  p {
    margin: 0;
    color: var(--md3-on-surface-variant);
  }

  strong {
    color: var(--md3-on-surface);
    font-weight: 600;
  }
`;

/* 공통 유의사항 */
const WarningCard = styled.div`
  background: var(--md3-surface-container);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
`;

const WarningHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
`;

const WarningTitle = styled.h3`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--md3-on-surface);
  margin: 0;
`;

const WarningList = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);
`;

const WarningRow = styled.li`
  display: flex;
  align-items: flex-start;
  gap: 8px;
`;

interface TestInfo {
  key: string;
  name: string;
  icon: string;
  goal: string;
  method: string;
  steps: string;
}

const TESTS: TestInfo[] = [
  {
    key: 'MC',
    name: 'MC (소근육)',
    icon: 'touch_app',
    goal: '양손 소근육 속도/정확도',
    method: '방향(왼손 탭/오른쪽 스와이프)에 따른 동작',
    steps: '6단계, 단계당 10초',
  },
  {
    key: 'EP',
    name: 'EP (얼굴표정)',
    icon: 'sentiment_satisfied',
    goal: '감정 인식 및 구분',
    method: '표정 일치 여부 선택',
    steps: '50단계',
  },
  {
    key: 'CST',
    name: 'CST (카드정렬)',
    icon: 'style',
    goal: '주의력 및 실행기능',
    method: '목표 카드 배열 드래그 배치',
    steps: '30단계',
  },
  {
    key: 'NB',
    name: 'NB (N-Back)',
    icon: '123',
    goal: '작업 기억력',
    method: 'N단계 전 숫자와 일치 여부 판단',
    steps: '78단계',
  },
  {
    key: 'MR',
    name: 'MR (회전도형)',
    icon: 'transform',
    goal: '공간지각능력',
    method: '도형 회전 일치 여부 판단',
    steps: '50단계',
  },
];

export default function TestGuide() {
  return (
    <Container>
      {/* 헤더 */}
      <section>
        <PageTitle>테스트 가이드</PageTitle>
        <PageSubtitle>
          정확한 정서·인지 및 심리 평가를 위한 진행 안내입니다.
        </PageSubtitle>
      </section>

      {/* 섹션 1: 설문 진행방법 */}
      <Section>
        <SectionHeader>
          <MatIcon name="assignment" filled size={24} color="var(--md3-primary)" />
          <SectionTitle>설문 진행방법</SectionTitle>
        </SectionHeader>
        <Card>
          <BodyText>
            PHQ, OCI, AQ, GAD-7, SPIN, ASRS, EPS. 설문은 4~5지 선다형 및 감정 슬라이더 방식으로 진행됩니다.
          </BodyText>
          <Steps>
            <Step>
              <StepBadge $primary>
                <StepBadgeText>1</StepBadgeText>
              </StepBadge>
              <StepTitle>[시작] 버튼 터치</StepTitle>
            </Step>
            <Step>
              <StepBadge $primary>
                <StepBadgeText>2</StepBadgeText>
              </StepBadge>
              <StepTitle>질문 응답</StepTitle>
            </Step>
            <Step>
              <StepBadge $primary>
                <StepBadgeText>3</StepBadgeText>
              </StepBadge>
              <StepTitle>다음 질문으로 이동</StepTitle>
            </Step>
            <Step>
              <StepBadge>
                <MatIcon name="check" size={16} color="var(--md3-on-surface-variant)" />
              </StepBadge>
              <StepTitle>설문 완료</StepTitle>
            </Step>
          </Steps>
          <TipBanner>
            <MatIcon name="lightbulb" filled size={20} color="var(--md3-status-normal, #10b981)" />
            <p>
              <strong>Tip:</strong> 설문은 솔직하게 답변해야 정확한 결과를 얻을 수 있습니다.
            </p>
          </TipBanner>
        </Card>
      </Section>

      {/* 섹션 2: 5가지 인지검사 진행방법 */}
      <Section>
        <SectionHeader>
          <MatIcon name="psychology" filled size={24} color="var(--md3-primary)" />
          <SectionTitle>5가지 인지검사 진행방법</SectionTitle>
        </SectionHeader>
        <BodyText>
          MC, EP, CST, NB, MR 검사의 목표와 방법을 안내합니다.
        </BodyText>
        <TestGrid>
          {TESTS.map((t) => (
            <TestCard key={t.key}>
              <TestHeader>
                <TestIcon>
                  <MatIcon name={t.icon} size={22} />
                </TestIcon>
                <TestName>{t.name}</TestName>
              </TestHeader>
              <TestBody>
                <p>
                  <strong>Goal:</strong> {t.goal}
                </p>
                <p>
                  <strong>Method:</strong> {t.method}
                </p>
                <p>
                  <strong>Steps:</strong> {t.steps}
                </p>
              </TestBody>
            </TestCard>
          ))}
        </TestGrid>
      </Section>

      {/* 섹션 3: 공통 유의사항 */}
      <Section>
        <WarningCard>
          <WarningHeader>
            <MatIcon name="warning" filled size={24} color="var(--md3-status-warning, #dc2626)" />
            <WarningTitle>공통 유의사항</WarningTitle>
          </WarningHeader>
          <WarningList>
            <WarningRow>
              <MatIcon name="check_circle" size={18} color="var(--md3-primary)" />
              <span>빠르고 정확하게 대응하세요.</span>
            </WarningRow>
            <WarningRow>
              <MatIcon name="check_circle" size={18} color="var(--md3-primary)" />
              <span>실수를 했더라도 다음 단계로 진행됩니다.</span>
            </WarningRow>
            <WarningRow>
              <MatIcon name="check_circle" size={18} color="var(--md3-primary)" />
              <span>조용한 환경에서 진행 권장.</span>
            </WarningRow>
            <WarningRow>
              <MatIcon name="check_circle" size={18} color="var(--md3-primary)" />
              <span>종합 결과에서 13개 지표와 216가지 성향 확인 가능.</span>
            </WarningRow>
          </WarningList>
        </WarningCard>
      </Section>
    </Container>
  );
}