/**
 * Research — 연구 페이지 (Phase4)
 * 시안: D:\0040_Dev\0040_SC_301\0040_Debug\subpages\research.html
 * 상단 타이틀: 기존 TopAppBar 사용
 * 하단 메뉴: 시안의 푸터 사용 (기존 하단메뉴 미사용)
 * "View Research Papers" 버튼 → "We're preparing." 팝업 (우측 상단 [x] 닫기)
 */
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;
`;

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

const HeroTitle = styled.h1`
  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;
`;

const BentoGrid = styled.section`
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

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

const PersonaCard = 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);
  position: relative;
  overflow: hidden;

  @media (min-width: 600px) {
    grid-column: span 8;
  }
`;

const TestsCard = styled.div`
  background: var(--md3-primary-container);
  color: var(--md3-on-primary-container);
  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;
  justify-content: space-between;
  gap: 16px;

  @media (min-width: 600px) {
    grid-column: span 4;
  }
`;

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

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

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

const BodySm = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);
  margin: 0 0 16px;
  max-width: 28rem;
`;

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

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

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

const TestsText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
  margin: 0 0 12px;
  color: var(--md3-on-primary-container);
`;

const TestsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;

  & > div {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    color: var(--md3-on-primary-container);
  }

  & > div:last-child {
    grid-column: span 2;
  }
`;

const ModulesSection = styled.section`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

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

const ModulesGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;

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

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

const ModuleCard = styled.div<{ $accent: string }>`
  background: var(--md3-surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-left: 4px solid ${(p) => p.$accent};
  display: flex;
  flex-direction: column;
  gap: 12px;
`;

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

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

const BarTrack = styled.div`
  width: 100%;
  background: var(--md3-surface-variant);
  border-radius: 9999px;
  height: 6px;
`;

const BarFill = styled.div<{ $width: string; $color: string }>`
  width: ${(p) => p.$width};
  background: ${(p) => p.$color};
  height: 6px;
  border-radius: 9999px;
`;

const ModuleMeta = styled.span`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--md3-secondary);
`;

const InsightsGrid = styled.section`
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

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

const PartnershipCard = 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;
  justify-content: center;
  gap: 12px;
`;

const InsightsCard = styled.div`
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
`;

const DecorBg = styled.div`
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(var(--md3-primary) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
`;

const InsightsInner = styled.div`
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
`;

const IconBig = styled(MatIcon).attrs({ size: 32 })`
  color: var(--md3-primary);
  margin-bottom: 12px;
`;

const InsightsTitle = 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 InsightsText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--md3-on-surface-variant);
  margin: 0;
`;

const TagRow = styled.div`
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
`;

const Tag = styled.span`
  background: var(--md3-surface-container-high);
  color: var(--md3-on-surface);
  padding: 4px 12px;
  border-radius: 8px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
`;

const PapersButton = styled.button`
  align-self: flex-start;
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  border: none;
  border-radius: 9999px;
  padding: 8px 24px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    transform: scale(0.95);
  }
`;

/* 팝업 오버레이 */
const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
`;

const Popup = styled.div`
  position: relative;
  background: var(--md3-surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
`;

const PopupClose = styled.button`
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--md3-on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background: var(--md3-surface-variant);
  }

  &:active {
    background: var(--md3-outline-variant);
  }
`;

const PopupText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--md3-on-surface);
  margin: 8px 0 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 FooterBrand = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md3-primary);
`;

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: 12px;
  font-weight: 500;
  color: var(--md3-secondary);
`;

interface ModuleInfo {
  title: string;
  text: string;
  width: string;
  color: string;
  accent: string;
  meta: string;
}

const MODULES: ModuleInfo[] = [
  {
    title: 'Memory & Cognition (MC)',
    text: 'Evaluates short-term recall and working memory capacity under controlled cognitive load.',
    width: '85%',
    color: 'var(--md3-status-normal)',
    accent: 'var(--md3-status-normal)',
    meta: '85% Clinical Efficacy',
  },
  {
    title: 'Executive Processing (EP)',
    text: 'Measures planning, cognitive flexibility, and inhibitory control essential for daily functioning.',
    width: '92%',
    color: 'var(--md3-status-normal)',
    accent: 'var(--md3-status-normal)',
    meta: '92% Predictive Accuracy',
  },
  {
    title: 'Cognitive Speed Tracking (CST)',
    text: 'Assesses information processing speed and reaction time in dynamic visual environments.',
    width: '78%',
    color: 'var(--md3-status-borderline)',
    accent: 'var(--md3-status-borderline)',
    meta: '78% Baseline Variation',
  },
  {
    title: 'Neuro-Behavioral (NB)',
    text: 'Analyzes affective responses and behavioral regulation during simulated stress tasks.',
    width: '88%',
    color: 'var(--md3-status-normal)',
    accent: 'var(--md3-status-normal)',
    meta: '88% Reliability Score',
  },
  {
    title: 'Motor Response (MR)',
    text: 'Quantifies fine motor precision and hand-eye coordination anomalies often preceding cognitive decline.',
    width: '65%',
    color: 'var(--md3-status-warning)',
    accent: 'var(--md3-status-warning)',
    meta: '65% Early Indicator Sensitivity',
  },
];

export default function Research() {
  const [popupOpen, setPopupOpen] = useState(false);

  return (
    <Container>
      {/* Hero Section */}
      <Hero>
        <HeroTitle>Clinical Methodology &amp; Insights</HeroTitle>
        <HeroText>
          Our approach to neurocognitive assessment is rooted in rigorous empirical research, validating
          our 216 persona profiles and core testing paradigms to ensure clinical relevance and precision.
        </HeroText>
      </Hero>

      {/* Bento Grid: Core Components */}
      <BentoGrid>
        <PersonaCard>
          <CardHeader>
            <HeaderIcon name="groups" />
            <CardTitle>216 Persona Profiles</CardTitle>
          </CardHeader>
          <BodySm>
            Developed through extensive clustering analysis of patient behavioral data, our 216 distinct
            cognitive profiles allow for highly personalized intervention strategies and predictive tracking.
          </BodySm>
          <CheckList>
            <CheckRow>
              <MatIcon name="check_circle" size={16} color="var(--md3-status-normal)" />
              <span>Validated across diverse demographic cohorts.</span>
            </CheckRow>
            <CheckRow>
              <MatIcon name="check_circle" size={16} color="var(--md3-status-normal)" />
              <span>Continuously refined via machine learning models.</span>
            </CheckRow>
          </CheckList>
        </PersonaCard>

        <TestsCard>
          <div>
            <TestsTitle>Core Tests</TestsTitle>
            <TestsText>Validating five fundamental domains of cognitive function.</TestsText>
          </div>
          <TestsGrid>
            <div>MC</div>
            <div>EP</div>
            <div>CST</div>
            <div>NB</div>
            <div>MR</div>
          </TestsGrid>
        </TestsCard>
      </BentoGrid>

      {/* Detailed Test Modules */}
      <ModulesSection>
        <SectionTitle>Neurocognitive Test Paradigms</SectionTitle>
        <ModulesGrid>
          {MODULES.map((m) => (
            <ModuleCard key={m.title} $accent={m.accent}>
              <ModuleTitle>{m.title}</ModuleTitle>
              <ModuleText>{m.text}</ModuleText>
              <BarTrack>
                <BarFill $width={m.width} $color={m.color} />
              </BarTrack>
              <ModuleMeta>{m.meta}</ModuleMeta>
            </ModuleCard>
          ))}
        </ModulesGrid>
      </ModulesSection>

      {/* Academic Partnerships & Insights */}
      <InsightsGrid>
        <PartnershipCard>
          <IconBig name="school" />
          <CardTitle>Academic Partnerships</CardTitle>
          <BodySm>
            Our platform is built on collaborative research with leading neurological institutes. We share
            anonymized, aggregate data to advance the broader understanding of cognitive health trajectories
            and support clinical trials globally.
          </BodySm>
          <TagRow>
            <Tag>University Networks</Tag>
            <Tag>Clinical Trials</Tag>
          </TagRow>
        </PartnershipCard>

        <InsightsCard>
          <DecorBg />
          <InsightsInner>
            <div>
              <InsightsTitle>Data-Driven Insights</InsightsTitle>
              <InsightsText>
                Leveraging over 100,000 anonymized assessment sessions to refine our scoring algorithms and
                identify subtle predictive markers of cognitive change before clinical symptoms emerge.
              </InsightsText>
            </div>
            <PapersButton type="button" onClick={() => setPopupOpen(true)}>
              View Research Papers
            </PapersButton>
          </InsightsInner>
        </InsightsCard>
      </InsightsGrid>

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

      {/* View Research Papers 팝업 */}
      {popupOpen && (
        <Overlay onClick={() => setPopupOpen(false)}>
          <Popup onClick={(e) => e.stopPropagation()}>
            <PopupClose type="button" onClick={() => setPopupOpen(false)} aria-label="닫기">
              <MatIcon name="close" size={20} />
            </PopupClose>
            <PopupText>We're preparing.</PopupText>
          </Popup>
        </Overlay>
      )}
    </Container>
  );
}