/**
 * Support — 고객 지원 페이지 (Phase4)
 * 시안: D:\0040_Dev\0040_SC_301\0040_Debug\subpages\support.html
 * 상단 타이틀: 기존 TopAppBar 사용
 * 하단 메뉴: 시안의 푸터 사용 (기존 하단메뉴 미사용)
 * "가이드 보기 →" 버튼 → /info/test-guide
 * FAQ 아코디언 토글
 */
import { useState } from 'react';
import { Link } from 'react-router-dom';
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;
  max-width: 720px;
  margin: 0 auto;
`;

/* Hero */
const Hero = styled.section`
  text-align: center;
  padding: 16px 0;
`;

const HeroTitle = styled.h2`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md3-primary);
  margin: 0 0 12px;
  line-height: 1.2;

  @media (min-width: 600px) {
    font-size: 40px;
  }
`;

const HeroText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-on-surface-variant);
  margin: 0 auto;
  max-width: 640px;
`;

/* Quick Links Bento */
const QuickLinks = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

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

const QuickLinkCard = styled(Link)`
  background: var(--md3-surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;

  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 104, 95, 0.2);
  }
`;

const QuickCard = styled.div`
  background: var(--md3-surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const IconWrap = styled.div<{ $color?: string }>`
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: ${(p) => p.$color ?? 'rgba(0, 104, 95, 0.1)'};
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
`;

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

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

const CardFooter = styled.div`
  display: flex;
  align-items: center;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--md3-primary);
  margin-top: 12px;
`;

const ContactItems = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const ArrowIcon = styled(MatIcon).attrs({ size: 18 })`
  margin-left: 4px;
  color: var(--md3-primary);
`;

const MailIcon = styled(MatIcon).attrs({ size: 20 })`
  margin-right: 8px;
  color: var(--md3-on-surface-variant);
`;

const CallIcon = styled(MatIcon).attrs({ size: 20 })`
  margin-right: 8px;
  color: var(--md3-on-surface-variant);
`;

const ContactRow = styled.div`
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--md3-surface-container);
  border-radius: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  color: var(--md3-on-surface-variant);
`;

/* FAQ Section */
const FaqSection = styled.section`
  background: var(--md3-surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--md3-outline-variant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
`;

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

const FaqTitleIcon = styled(MatIcon).attrs({ size: 32 })`
  color: var(--md3-primary);
`;

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

const FaqList = styled.div`
  display: flex;
  flex-direction: column;
`;

const FaqItem = styled.div`
  border-bottom: 1px solid rgba(188, 201, 198, 0.3);
  padding: 12px 0;

  &:last-child {
    border-bottom: none;
  }
`;

const FaqButton = styled.button`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  gap: 12px;
`;

const FaqQuestion = styled.span`
  flex: 1;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--md3-on-surface);
  transition: color 0.15s;

  &:hover {
    color: var(--md3-primary);
  }
`;

const FaqIcon = styled(MatIcon).attrs({ size: 24 })<{ $open: boolean }>`
  color: var(--md3-on-surface-variant);
  transition: transform 0.3s;
  flex-shrink: 0;
  transform: ${(p) => (p.$open ? 'rotate(180deg)' : 'rotate(0deg)')};
`;

const FaqAnswer = styled.div<{ $open: boolean }>`
  overflow: hidden;
  max-height: ${(p) => (p.$open ? '500px' : '0')};
  opacity: ${(p) => (p.$open ? 1 : 0)};
  transition: max-height 0.3s ease, opacity 0.3s ease;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-on-surface-variant);
  padding-top: ${(p) => (p.$open ? '8px' : '0')};
`;

/* 푸터 - 시안의 푸터 사용 */
const Footer = styled.footer`
  margin-top: 48px;
  padding: 24px 0 16px;
  border-top: 1px solid var(--md3-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;

  @media (min-width: 600px) {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
`;

const FooterLinks = styled.nav`
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  flex: 1;

  @media (min-width: 768px) {
    justify-content: flex-start;
  }
`;

const FooterLink = styled(Link)`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--md3-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s;

  &:hover {
    color: var(--md3-primary);
  }

  &.primary {
    color: var(--md3-primary);
    text-decoration: underline;
  }
`;

const FooterCopyright = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md3-primary);
`;

interface FaqItemType {
  q: string;
  a: string;
}

const FAQ_DATA: FaqItemType[] = [
  {
    q: '평가 진행 중 인터넷 연결이 끊기면 어떻게 되나요?',
    a: 'pCNT 시스템은 각 문항 응답 시마다 데이터를 실시간으로 자동 저장합니다. 연결이 끊긴 경우, 다시 로그인하시면 중단된 부분부터 이어서 검사를 진행하실 수 있습니다.',
  },
  {
    q: '스마트폰 대신 태블릿으로 검사를 진행해도 되나요?',
    a: '정확한 시각적 인지와 터치 조작을 위해 최소 10인치 이상의 태블릿 사용을 권장합니다. 다만 pCNT는 스마트폰에 최적화 되어 있습니다.',
  },
  {
    q: '검사 결과는 언제 확인할 수 있나요?',
    a: '검사가 완료되면 즉시 분석 시스템을 통해 결과가 처리되며 대시보드에서 상세결과 리포트를 확인 할 수 있습니다.',
  },
];

export default function Support() {
  const [openIdx, setOpenIdx] = useState<number | null>(null);

  const toggle = (i: number) => setOpenIdx((prev) => (prev === i ? null : i));

  return (
    <Container>
      {/* Hero Section */}
      <Hero>
        <HeroTitle>고객 지원</HeroTitle>
        <HeroText>
          무엇을 도와드릴까요? 검사 가이드부터 기술 지원까지 필요한 정보를 확인하세요.
        </HeroText>
      </Hero>

      {/* Quick Links Bento */}
      <QuickLinks>
        {/* 검사 가이드 카드 - /info/test-guide로 링크 */}
        <QuickLinkCard to="/info/test-guide">
          <IconWrap>
            <MatIcon name="menu_book" filled size={24} color="var(--md3-primary)" />
          </IconWrap>
          <CardTitle>검사 가이드 (Test Guide)</CardTitle>
          <CardText>
            pCNT 인지 평가의 정확한 진행 방법과 유의사항을 상세히 안내해 드립니다.
            처음 검사를 진행하시는 분들은 반드시 확인해 주세요.
          </CardText>
          <CardFooter>
            가이드 보기 <ArrowIcon name="arrow_forward" />
          </CardFooter>
        </QuickLinkCard>

        {/* 기술 지원 문의 카드 */}
        <QuickCard>
          <IconWrap $color="rgba(146, 70, 40, 0.1)">
            <MatIcon name="support_agent" filled size={24} color="var(--md3-tertiary)" />
          </IconWrap>
          <CardTitle style={{ color: 'var(--md3-tertiary)' }}>기술 지원 문의</CardTitle>
          <CardText style={{ marginBottom: 0 }}>
            검사 진행 중 시스템 오류나 기기 문제가 발생한 경우 즉시 문의해 주세요.
          </CardText>
          <ContactItems>
            <ContactRow>
              <MailIcon name="mail" />
              <span>askatoim@gmail.com</span>
            </ContactRow>
            <ContactRow>
              <CallIcon name="call" />
              <span>0000-0000 (평일 09:00 - 18:00)</span>
            </ContactRow>
          </ContactItems>
        </QuickCard>
      </QuickLinks>

      {/* FAQ Section */}
      <FaqSection>
        <FaqHeader>
          <FaqTitleIcon name="help" filled />
          <FaqTitle>자주 묻는 질문 (FAQ)</FaqTitle>
        </FaqHeader>
        <FaqList>
          {FAQ_DATA.map((item, i) => (
            <FaqItem key={i}>
              <FaqButton type="button" onClick={() => toggle(i)} aria-expanded={openIdx === i}>
                <FaqQuestion>{item.q}</FaqQuestion>
                <FaqIcon $open={openIdx === i} name="expand_more" />
              </FaqButton>
              <FaqAnswer $open={openIdx === i}>{item.a}</FaqAnswer>
            </FaqItem>
          ))}
        </FaqList>
      </FaqSection>

      {/* 푸터 - 시안의 푸터 사용 */}
      <Footer>
        <FooterLinks>
          <FooterLink to="/info/privacy-policy">Privacy Policy</FooterLink>
          <FooterLink to="/info/terms-of-service">Terms of Service</FooterLink>
          <FooterLink to="/info/research">Research</FooterLink>
          <FooterLink className="primary" to="/info/support">
            Support
          </FooterLink>
        </FooterLinks>
        <FooterCopyright>© 2024 pCNT askato Lab. All rights reserved.</FooterCopyright>
      </Footer>
    </Container>
  );
}