// share.jsx — 외부 공유/내보내기: 패키지 다운로드(안전) + 외부 링크 공유(운영자 보안 설정 필요)

const { Icon, Pill, Button } = window.RAlly;

const Share = ({ go }) => {
  const [trackId, setTrackId] = React.useState(null);
  const [track, setTrack] = React.useState(null);
  React.useEffect(() => {
    window.RAlly.resolveTrackId().then((tid) => {
      setTrackId(tid);
      if (tid) fetch('/api/track/' + tid + '/detail').then((r) => r.json())
        .then((d) => { if (d.track) setTrack(d.track); }).catch(() => {});
    });
  }, []);
  const name = (track && track.name) || '트랙';

  return (
    <div className="page" style={{ maxWidth: 820, margin: '0 auto' }}>
      <div className="page__head">
        <div>
          <div className="row" style={{ gap: 8, marginBottom: 6 }}>
            <Pill variant="coral">내보내기 · 공유</Pill>
          </div>
          <div className="page__title">문서 내보내기 / 외부 공유</div>
          <div className="page__sub"><b style={{ color: 'var(--ink)' }}>{name}</b>의 생성 문서를 내보내거나 외부(RA·심사기관)와 공유합니다.</div>
        </div>
      </div>

      {/* 패키지 다운로드 — 안전, 실제 동작 */}
      <div className="card card--pad" style={{ marginBottom: 14 }}>
        <div className="row" style={{ gap: 10, marginBottom: 8 }}>
          <Icon name="download" size={18} style={{ color: 'var(--coral)' }} />
          <div style={{ fontWeight: 700, color: 'var(--navy)', fontSize: 15 }}>전체 문서 패키지 (.zip)</div>
          <Pill variant="coral" style={{ marginLeft: 'auto' }}>바로 가능</Pill>
        </div>
        <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>
          생성된 모든 문서(.docx)와 관리대장(.xlsx)을 카테고리 폴더로 묶어 내려받습니다. RA·심사기관 전달용.
        </div>
        <Button variant="primary" icon="download" disabled={!trackId} onClick={() => { if (trackId) window.location.href = '/api/track/' + trackId + '/download'; }}>패키지 다운로드 (.zip)</Button>
      </div>

      {/* 인증 패키지 화면 연결 */}
      <div className="card card--pad" style={{ marginBottom: 14 }}>
        <div className="row" style={{ gap: 10, marginBottom: 8 }}>
          <Icon name="trophy" size={18} style={{ color: 'var(--navy)' }} />
          <div style={{ fontWeight: 700, color: 'var(--navy)', fontSize: 15 }}>인증 제출 패키지 구성 보기</div>
        </div>
        <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>카테고리별 준비도와 제출 구성을 확인합니다.</div>
        <Button variant="soft" iconRight="arrow_right" onClick={() => go('cert')}>인증 패키지로 →</Button>
      </div>

      {/* 외부 링크 공유 — 보안상 운영자 설정 필요(정직) */}
      <div className="card card--pad" style={{ background: 'var(--coral-soft)', borderColor: 'var(--coral-line)' }}>
        <div className="row" style={{ gap: 10, marginBottom: 8 }}>
          <Icon name="link" size={18} style={{ color: 'var(--coral-2)' }} />
          <div style={{ fontWeight: 700, color: 'var(--coral-2)', fontSize: 15 }}>외부 링크 공유</div>
          <Pill style={{ marginLeft: 'auto' }}>운영 설정 필요</Pill>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: '#4a2618' }}>
          외부에 읽기 전용 링크로 공유하는 기능은 <b>접근권한·만료·보안 설정</b>이 필요합니다.
          보안상 자동으로 켜지 않으며, 운영 단계에서 인증·권한 연동 후 활성화됩니다.
          현재는 위의 <b>패키지 다운로드</b>로 파일을 받아 전달하시는 것이 안전합니다.
        </div>
      </div>

      <div className="muted" style={{ fontSize: 11.5, marginTop: 12, padding: '0 4px' }}>
        ※ 내보낸 문서는 RAlly가 자동 작성한 초안입니다. 증거값([입력 필요])을 채우고 RA 검토 후 제출하십시오.
      </div>
    </div>
  );
};

window.RAlly.Share = Share;