/**
 * 검사내역 상세(상세열람페이지) — 무료 요약 + 유료 상세 리포트 (PRD §3.9)
 * 심리프로파일/강약점/솔루션 텍스트는 10% 확대 (3자리 코드/지표 점수 제외)
 * Phase D-3: MD3 디자인 토큰 + 공용 컴포넌트(PillButton, StatusBadge, InfoBanner, MatIcon, Gauge) 적용
 */
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';
import { http } from '../lib/api';
import Gauge, { type IndicatorBiotype } from '../components/Gauge';
import PillButton from '../components/PillButton';
import InfoBanner from '../components/InfoBanner';

interface Indicator {
  code: string;
  name: string;
  t: number;
  band: string;
  score: number;
  z: number;
  ztograph: number;
  S: number | null;
  C: number | null;
  wAdj: number | null;
  cT?: number;
  biotype: IndicatorBiotype | null;
  active: boolean;
  gate: string | null;
}
interface HistoryResp {
  history: { round: number; testDate: string; status: string; paid: boolean };
  analysis?: {
    headState: { state: string; label: string; avgcnt: number; abovecnt: number; significant: number; biotype: string };
    nxIq: { nxPercentile: number; band: string; nxIq: number; cT: number };
    overallBiotype: IndicatorBiotype;
    indicators: Indicator[];
    profile?: { code: string; type: string; summary: string };
    profileFull?: {
      code: string; type: string; summary: string;
      perTen: string; workLearnSty: string; execCtrl: string;
      strengthList: string[]; weaknessList: string[];
      cognTrnTip: string; behaBrkTip: string; recoJob: string;
    };
  };
}

const Container = styled.div`
  padding-top: 16px;
`;

const Card = styled.div`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border: 1px solid var(--md3-outline-variant);
`;

const LockedCard = styled(InfoBanner)`
  && {
    text-align: center;
    padding: 32px 20px;
    background: var(--md3-surface-container-highest);
    border: 1px solid var(--md3-outline-variant);
    border-radius: 16px;
    margin-bottom: 16px;
  }
`;

const LockIcon = styled.div`
  font-size: 48px;
  margin-bottom: 12px;
`;

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

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

const ProfileCode = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--md3-primary);
  letter-spacing: 4px;
  margin-bottom: 8px;
`;

const ProfileType = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--md3-on-surface);
  margin-bottom: 4px;
`;

const ProfileSummary = styled.div`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 14px;
  color: var(--md3-on-surface-variant);
  line-height: 1.6;
  margin-bottom: 16px;
`;

const SectionSubtitle = styled.h4`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--md3-on-surface);
  margin: 20px 0 8px;
`;

const BodyText = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--md3-on-surface);
  margin: 0 0 12px;
`;

const List = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0 0 16px;

  li {
    font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
    font-size: 14px;
    color: var(--md3-on-surface);
    line-height: 1.6;
    padding: 6px 0;
    border-bottom: 1px solid var(--md3-outline-variant);
    position: relative;
    padding-left: 16px;

    &::before {
      content: '·';
      position: absolute;
      left: 0;
      color: var(--md3-primary);
      font-weight: 700;
    }

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

const StrengthList = styled(List)`
  li {
    color: var(--md3-on-surface);
  }
`;

const WeaknessList = styled(List)`
  li {
    color: var(--md3-on-surface);
  }
`;

const IndicatorsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
`;

const EmptyState = styled.div`
  text-align: center;
  padding: 60px 16px;
  color: var(--md3-on-surface-variant);
`;

const PageTitle = styled.h2`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--md3-on-surface);
  margin: 0 0 16px;
`;

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

const SectionDesc = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;
  color: var(--md3-on-surface-variant);
  margin: 0 0 16px;
`;

const BiotypeSummary = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;
  color: var(--md3-on-surface-variant);
  margin: 0 0 16px;

  b {
    color: var(--md3-on-surface);
  }
`;

const ActionButton = styled(PillButton)`
  && {
    width: 100%;
  }
`;

export default function HistoryDetail() {
  const { round } = useParams();
  const nav = useNavigate();
  const [data, setData] = useState<HistoryResp | null>(null);

  useEffect(() => {
    http.get<HistoryResp>(`/api/history/${round}`).then(setData).catch(() => nav('/error/404'));
  }, [round, nav]);

  if (!data) {
    return (
      <Container>
        <EmptyState>불러오는 중…</EmptyState>
      </Container>
    );
  }

  if (!data.analysis) {
    return (
      <Container>
        <EmptyState>
          <p style={{ fontWeight: 700, fontSize: 16, marginBottom: 8 }}>
            {data.history.round}회차 검사는 아직 완료되지 않았습니다.
          </p>
          <p style={{ fontSize: 13 }}>상태: {data.history.status}</p>
        </EmptyState>
      </Container>
    );
  }

  const a = data.analysis;
  const paid = data.history.paid;

  return (
    <Container>
      <PageTitle>{round}회차 상세 리포트</PageTitle>

      {!paid && (
        <LockedCard type="warning" dismissible={false} showIcon={false}>
          <LockIcon>🔒</LockIcon>
          <LockTitle>상세 프로파일 잠김</LockTitle>
          <LockDesc>결제 시 강점/약점 상세 분석과 전문가 해설을 볼 수 있습니다.</LockDesc>
          <ActionButton variant="primary" rightIcon="shopping_cart" onClick={() => nav(`/checkout/${round}`)}>
            상세 리포트 열기
          </ActionButton>
        </LockedCard>
      )}

      {paid && a.profileFull && (
        <Card>
          <ProfileCode>{a.profileFull.code}</ProfileCode>
          <ProfileType>{a.profileFull.type}</ProfileType>
          <ProfileSummary>{a.profileFull.summary}</ProfileSummary>

          <SectionSubtitle>성격 성향</SectionSubtitle>
          <BodyText>{a.profileFull.perTen}</BodyText>

          <SectionSubtitle>업무/학습스타일</SectionSubtitle>
          <BodyText>{a.profileFull.workLearnSty}</BodyText>

          <SectionSubtitle>실행 및 제어력</SectionSubtitle>
          <BodyText>{a.profileFull.execCtrl}</BodyText>

          <SectionSubtitle>강점</SectionSubtitle>
          <StrengthList>{a.profileFull.strengthList.map((s, i) => <li key={i}>{s}</li>)}</StrengthList>

          <SectionSubtitle>약점</SectionSubtitle>
          <WeaknessList>{a.profileFull.weaknessList.map((s, i) => <li key={i}>{s}</li>)}</WeaknessList>

          <SectionSubtitle>pCNT 뇌-성장 솔루션</SectionSubtitle>

          <SectionSubtitle>인지 훈련 팁</SectionSubtitle>
          <BodyText>{a.profileFull.cognTrnTip}</BodyText>

          <SectionSubtitle>행동 브레이크 팁</SectionSubtitle>
          <BodyText>{a.profileFull.behaBrkTip}</BodyText>

          <SectionSubtitle>추천 직업</SectionSubtitle>
          <BodyText>{a.profileFull.recoJob}</BodyText>
        </Card>
      )}

      {paid && (
        <Card>
          <SectionTitle>지표별 표준점수</SectionTitle>
          <SectionDesc>
            T-score(범위 0~100, 50=평균)·높을수록 나쁨<br />
            밴드: 정상:60이하 , 경계:60~70, 유의:70 이상
          </SectionDesc>

          {a.overallBiotype && (
            <BiotypeSummary>
              당신의 전체 바이오타입: <b>{a.overallBiotype.label}</b>
              <br />
              {a.overallBiotype.message}
            </BiotypeSummary>
          )}

          <IndicatorsGrid>
            {a.indicators.map((i) => (
              <Gauge key={i.code} t={i.t} band={i.band} label={i.name} biotype={i.biotype} />
            ))}
          </IndicatorsGrid>
        </Card>
      )}
    </Container>
  );
}