// 이 파일이 하는 일: 문서 하나를 iframe으로 크게 띄우는 뷰어.
// 주소의 :slug로 문서를 찾아 filePath의 HTML을 그대로 보여준다.
import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import client from '../api/client';

export default function DocViewerPage() {
  const { slug } = useParams();
  const navigate = useNavigate();
  const [doc, setDoc] = useState(null);
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    // 문서 목록에서 slug가 일치하는 것을 찾는다.
    // (단건 조회 API가 없으므로 목록 API를 재사용 — 문서 수가 적어 충분하다.)
    client
      .get('/documents')
      .then((res) => {
        const found = res.data.find((d) => d.slug === slug);
        if (found) {
          setDoc(found);
        } else {
          setNotFound(true);
        }
      })
      .catch(() => setNotFound(true));
  }, [slug]);

  if (notFound) {
    return (
      <div>
        <p className="empty">문서를 찾을 수 없어요.</p>
        <button className="btn" onClick={() => navigate('/docs')}>
          문서 목록으로
        </button>
      </div>
    );
  }

  if (!doc) {
    return <p className="empty">불러오는 중...</p>;
  }

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        {/* whiteSpace: nowrap — 모바일에서 버튼 글자가 "뒤로가/기"로 꺾이는 것 방지 */}
        <button className="btn" style={{ whiteSpace: 'nowrap', flexShrink: 0 }} onClick={() => navigate(-1)}>
          ← 뒤로가기
        </button>
        <h1 className="page-title" style={{ marginBottom: 0 }}>{doc.title}</h1>
      </div>
      {/* 학습 포인트: 기존 HTML 자산 재사용 —
          학습 문서들은 이미 완성된 정적 HTML(public/docs/*.html)이다.
          React로 다시 만들 필요 없이 iframe으로 "액자에 넣듯" 보여주면
          문서의 자체 스타일도 그대로 살고 앱 CSS와 충돌하지도 않는다. */}
      <iframe
        src={`/docs/${doc.filePath}`}
        title={doc.title}
        style={{
          width: '100%',
          height: 'calc(100vh - 180px)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius)',
          background: '#fff',
        }}
      />
    </div>
  );
}
