// guide-page.jsx — 앱 내 사용 가이드 페이지 (#/guide)
// SettingsPage(#/admin)와 같은 admin-page / settings-tabs 레이아웃을 재사용한다.
// index.html에서 app.jsx보다 먼저 로드되어 window.GuidePage로 노출된다.

const GUIDE_ROLE_LABEL = { editor: "담당자", executive: "경영진", admin: "관리자" };

function GuideRoleBadge({ role, myRole }) {
  return (
    <span className={`guide-role-badge ${role === myRole ? "me" : ""}`}>
      {GUIDE_ROLE_LABEL[role] || role}
    </span>
  );
}

function GuideStartSection({ role, signedIn }) {
  return (
    <div className="guide-section">
      <h2>이 현황판은 무엇인가요?</h2>
      <p>
        경영진 지시사항이 계획 보고 이후 완료될 때까지의 진행 과정을 기록하는 공통 현황판입니다.
        지시사항과 처리 방향이 한곳에 남아, 경영진과 담당자가 업무가 실제로 어떻게 진행되고
        있는지 같은 화면에서 확인합니다.
      </p>

      <h3>로그인 방법</h3>
      <ol>
        <li>등록된 회사 이메일 주소를 입력합니다.</li>
        <li>메일로 받은 6자리 인증코드를 입력합니다.</li>
        <li>같은 브라우저에서 계속 사용하면 로그인 상태가 자동 연장됩니다.</li>
      </ol>
      <div className="guide-callout warn">
        인증코드 메일이 오지 않으면 관리자에게 이메일 등록 여부를 먼저 확인해 주세요.
        등록된 활성 사용자만 로그인할 수 있습니다.
      </div>

      <h3>세 가지 권한</h3>
      <table>
        <thead><tr><th>권한</th><th>설명</th></tr></thead>
        <tbody>
          <tr>
            <td><GuideRoleBadge role="editor" myRole={role} /></td>
            <td>본인 담당 업무를 중심으로 확인하고 진행 이력을 기록합니다. 완료 처리와 마감일 변경은 요청을 보내 승인을 받습니다.</td>
          </tr>
          <tr>
            <td><GuideRoleBadge role="executive" myRole={role} /></td>
            <td>업무를 지시하고 담당자를 지정합니다. 내가 지시한 업무의 완료 요청·마감일 변경 요청을 승인 또는 반려하고, 완료 상태로 직접 변경할 수 있습니다.</td>
          </tr>
          <tr>
            <td><GuideRoleBadge role="admin" myRole={role} /></td>
            <td>사용자, 부서, 공휴일, 알림, 백업을 설정 화면에서 관리합니다.</td>
          </tr>
        </tbody>
      </table>

      {!signedIn && (
        <div className="guide-callout">
          로그인하면 업무 보기, 등록·수정, 요청·승인 등 나머지 가이드를 볼 수 있습니다.
        </div>
      )}

      {signedIn && (
        <React.Fragment>
          <h3>화면 구성</h3>
          <ul>
            <li><b>상단 요약 카드</b> — 전체 / 진행중 / 지연 / 보류 / 완료 건수를 보여줍니다. 카드를 누르면 해당 상태만 필터됩니다.</li>
            <li><b>업무 목록</b> — 부서별 섹션으로 묶이고, 부서 안에서는 팀별로 다시 묶입니다.</li>
            <li><b>좌측 사이드바</b> — 부서 섹션으로 바로 이동합니다.</li>
            <li><b>우측 상단 버튼</b> — 새 업무 등록, 가이드, 설정(관리자만), 로그아웃.</li>
          </ul>
        </React.Fragment>
      )}
    </div>
  );
}

function GuideViewSection() {
  return (
    <div className="guide-section">
      <h2>업무 보기</h2>

      <h3>상태</h3>
      <table>
        <thead><tr><th>상태</th><th>의미</th></tr></thead>
        <tbody>
          <tr><td>진행중</td><td>현재 진행하고 있는 업무</td></tr>
          <tr><td>보류</td><td>자료 대기, 외부 회신, 의사결정 대기처럼 멈춘 이유가 있는 업무</td></tr>
          <tr><td>지연</td><td>마감일이 지나면 자동으로 표시됩니다</td></tr>
          <tr><td>완료</td><td>경영진 승인(또는 경영진 직접 처리)으로 끝난 업무</td></tr>
        </tbody>
      </table>

      <h3>필터와 검색</h3>
      <ul>
        <li>상단 요약 카드나 상태 칩을 누르면 해당 상태만 좁혀 봅니다.</li>
        <li>검색창에서 제목, 상세 내용, 메모, 부서 기준으로 검색합니다.</li>
        <li>내 업무만 보기 등의 필터를 함께 쓸 수 있습니다.</li>
      </ul>

      <h3>지난 완료 업무 숨김</h3>
      <p>
        완료 후 2주가 지난 업무는 기본 화면에서 자동으로 숨겨집니다. 삭제되는 것이 아니며,
        목록 상단의 <b>“지난 완료 N건 숨김 · 보기”</b> 버튼으로 언제든 다시 볼 수 있습니다.
        검색할 때는 숨겨진 업무도 검색 결과에 포함됩니다.
      </p>

      <h3>부서·팀별 그룹</h3>
      <p>
        업무 목록은 부서 단위 섹션으로 묶이고, 섹션 안에서는 팀별로 다시 묶입니다.
        섹션 제목을 누르면 접거나 펼 수 있고, 좌측 사이드바에서 부서로 바로 이동할 수 있습니다.
      </p>
    </div>
  );
}

function GuideEditSection({ role }) {
  return (
    <div className="guide-section">
      <h2>업무 등록과 수정</h2>

      <h3>새 업무 등록</h3>
      <p>우측 상단 <b>+ 새 업무</b> 버튼을 누르고 아래 항목을 입력합니다.</p>
      <ul>
        <li>제목</li>
        <li>부서(다중 선택) — 선택한 부서에 소속된 담당자가 자동으로 배정됩니다.</li>
        <li>상위 업무(선택) — 큰 업무 아래 세부 업무를 둘 때 지정합니다. 상위-하위 1단계까지만 허용됩니다.</li>
        <li>지시자, 지시일</li>
        <li>마감일</li>
        <li>지시사항(지시받은 핵심 내용), 이행방안(완료까지의 실행 방안과 진행 단계)</li>
      </ul>

      <h3>담당자는 어떻게 정해지나요?</h3>
      <p>담당자는 직접 고르는 항목이 아니라, 선택한 부서에 따라 자동으로 정해집니다.</p>
      <ul>
        <li>부서를 선택하면 그 부서에 연결된 담당자가 자동으로 배정됩니다.</li>
        <li>여러 부서를 선택하면 각 부서의 담당자가 함께 배정됩니다.</li>
        <li>담당자가 연결되지 않은 부서만 선택하면 업무를 등록할 수 없습니다.</li>
        <li>경영진 본인은 담당자로 지정되지 않습니다.</li>
      </ul>

      <h3>상태 변경</h3>
      <ul>
        <li>업무 카드를 열어 상태 버튼을 선택하고 <b>저장</b>을 누르면 변경됩니다.</li>
        <li><b>완료 상태로의 직접 변경은 경영진만 가능합니다.</b> 담당자와 관리자는 “완료 요청”을 보냅니다. (요청·승인 탭 참고)</li>
        <li>상태가 바뀌면 변경 이력이 코멘트로 함께 남습니다.</li>
      </ul>

      <h3>수정·삭제 권한</h3>
      <ul>
        <li>담당자는 본인이 담당자로 지정된 업무를 수정할 수 있습니다.</li>
        <li>경영진과 관리자는 담당자, 부서, 업무 내용 등 더 넓은 범위를 수정할 수 있고, 업무 삭제도 가능합니다.</li>
      </ul>
    </div>
  );
}

function GuideRequestSection({ role }) {
  return (
    <div className="guide-section">
      <h2>요청과 승인</h2>
      <p>
        완료 처리와 마감일 변경은 <b>요청 → 지시자(경영진) 승인</b> 절차를 거칩니다.
        업무를 지시한 경영진이 그 업무의 요청을 승인하거나 반려합니다.
      </p>

      <h3>완료 요청 보내기 <GuideRoleBadge role="editor" myRole={role} /></h3>
      <ol>
        <li>업무 카드를 열고 상태 영역의 <b>완료 요청</b> 버튼을 누릅니다.</li>
        <li>이행 내용, 결과, 완료 판단 또는 남은 후속 업무를 작성합니다. 경영진이 승인 여부를 판단할 수 있도록 구체적으로 적어야 합니다.</li>
        <li><b>완료 요청 보내기</b>를 누르면 지시자에게 알림 메일이 발송됩니다.</li>
        <li>승인되면 업무가 완료 상태로 바뀝니다. 반려되면 반려 사유를 확인하고 보완한 뒤 다시 요청합니다.</li>
      </ol>

      <h3>마감일 변경 요청 <GuideRoleBadge role="editor" myRole={role} /></h3>
      <ol>
        <li>업무 카드의 마감일 옆 <b>변경 요청</b>을 누릅니다.</li>
        <li>새 마감일과 변경 사유를 입력하고 <b>요청 보내기</b>를 누릅니다.</li>
        <li>승인되면 마감일이 새 날짜로 바뀝니다.</li>
      </ol>

      <h3>대기 중 요청 취소</h3>
      <p>
        요청을 보내면 <b>“요청 대기중”</b> 표시가 뜹니다. 아직 결정되지 않은 요청은
        <b> 취소</b> 버튼으로 거둘 수 있습니다. 같은 종류의 요청은 한 번에 하나만 보낼 수 있습니다.
      </p>

      <h3>승인·반려 처리 <GuideRoleBadge role="executive" myRole={role} /></h3>
      <ol>
        <li>내가 지시한 업무에 요청이 오면 알림 메일이 발송되고, 업무 카드 상단에 요청 내용이 표시됩니다.</li>
        <li>요청 내용(완료 보고 또는 새 마감일과 사유)을 확인합니다.</li>
        <li><b>승인</b>을 누르면 즉시 반영됩니다 — 완료 상태 전환 또는 마감일 변경.</li>
        <li><b>반려</b>를 누르면 반려 사유를 남길 수 있고, 담당자가 사유를 확인해 보완합니다.</li>
      </ol>
    </div>
  );
}

function GuideNotifySection() {
  return (
    <div className="guide-section">
      <h2>코멘트와 알림</h2>

      <h3>코멘트로 진행 이력 남기기</h3>
      <p>
        업무 카드의 지시 내용 영역에서 코멘트를 추가하면 진행 이력처럼 누적되고,
        작성자와 작성 시각이 함께 남습니다. 중간 확인, 검토, 조율 과정을 코멘트로 남겨 두면
        업무가 어디까지 진행됐는지 질문을 받아도 기록을 보고 바로 설명할 수 있습니다.
      </p>

      <h3>알림 메일</h3>
      <p>다음 상황에서 관련된 사용자에게 알림 메일이 발송됩니다.</p>
      <ul>
        <li>업무 배정 — 담당자로 새로 지정됐을 때</li>
        <li>업무 등록, 상태 변경, 코멘트 등록</li>
        <li>완료 요청, 마감일 변경 요청과 그 승인·반려</li>
      </ul>

      <h3>정기 메일</h3>
      <ul>
        <li>매일 아침(한국시간 오전 7시) 진행 현황 브리핑과 마감 임박·지연 알림이 자동 발송됩니다.</li>
        <li>주간 요약 메일이 별도로 발송됩니다.</li>
        <li>마감 임박 기준은 공휴일을 제외한 영업일로 계산됩니다.</li>
      </ul>
      <div className="guide-callout">
        관리자가 알림 메일을 꺼 두면 화면 상단에 안내 배너가 표시됩니다. 이때 업무 관련 메일은
        발송되지 않지만 로그인 인증코드는 계속 발송됩니다.
      </div>
    </div>
  );
}

function GuideWritingSection() {
  return (
    <div className="guide-section">
      <h2>작성 요령</h2>
      <p>현황판은 계획 보고서가 아니라, 계획 이후 완료까지의 이행 과정을 남기는 공통 기록입니다.</p>

      <h3>사용 흐름</h3>
      <ol>
        <li><b>지시사항 확인</b> — 업무의 기준을 다시 확인합니다.</li>
        <li><b>이행방안 작성</b> — 완료까지의 실행방안과 진행 단계를 남깁니다.</li>
        <li><b>진행이력 기록</b> — 완료 전까지 과정을 코멘트로 기록합니다.</li>
        <li><b>완료 요청</b> — 끝나면 확인을 요청합니다.</li>
      </ol>

      <h3>지시사항은 짧게</h3>
      <p>해야 할 일, 필요한 결과물, 마감일이 들어가면 충분합니다.</p>
      <div className="guide-callout">예) 6월 말까지 신규 거래처별 매출 현황을 정리해 보고할 것.</div>

      <h3>이행방안은 완료 계획으로</h3>
      <p>지시사항을 어떻게 이행할지, 완료까지 필요한 진행 단계, 각 단계의 산출물과 공유 시점을 적습니다.</p>
      <div className="guide-callout">
        예) 매출 자료 취합 → 거래처별 분류 → 특이사항 확인 → 6/25 초안 공유 → 피드백 반영 후 최종 보고로 완료하겠습니다.
      </div>

      <h3>진행이력은 과정과 결과를 남깁니다</h3>
      <ul>
        <li><b>진행한 중간 업무</b> — 예) 신규 거래처 12곳의 6월 매출 자료를 취합했습니다.</li>
        <li><b>확인된 결과</b> — 예) 3개 거래처에서 전월 대비 매출 하락이 확인됐고, 원인은 단가 조정 영향으로 보입니다.</li>
        <li><b>다음 액션</b> — 예) 담당자에게 사유를 확인한 뒤, 대응 방안을 포함해 최종 보고에 반영하겠습니다.</li>
      </ul>

      <h3>승인받기 좋은 완료 요청</h3>
      <p>완료 요청에는 아래 세 가지가 들어가야 경영진이 바로 판단할 수 있습니다.</p>
      <table>
        <thead><tr><th>항목</th><th>예시</th></tr></thead>
        <tbody>
          <tr><td>이행 내용</td><td>지시받은 매출 현황을 거래처별로 정리하고, 전월 대비 변동 사유를 확인했습니다.</td></tr>
          <tr><td>결과</td><td>3개 거래처의 매출 하락 원인이 단가 조정 영향으로 확인됐습니다.</td></tr>
          <tr><td>완료 판단 / 후속 업무</td><td>분석표와 요약 보고를 공유했으며, 추가 확인이 필요한 항목은 별도 후속 업무로 등록하겠습니다.</td></tr>
        </tbody>
      </table>

      <h3>입력 전 확인 목록</h3>
      <ul>
        <li>지시사항을 이해했나요?</li>
        <li>이행방안이 구체적인가요?</li>
        <li>중간 업무와 결과를 남겼나요?</li>
        <li>완료 요청에 결과를 적었나요?</li>
      </ul>
    </div>
  );
}

function GuideAdminSection() {
  return (
    <div className="guide-section">
      <h2>관리자 설정</h2>
      <p>우측 상단 <b>설정</b> 버튼으로 들어가는 설정 화면은 관리자만 사용할 수 있습니다.</p>

      <h3>사용자</h3>
      <ul>
        <li>이메일, 이름, 권한(담당자/경영진/관리자)을 입력해 사용자를 등록합니다.</li>
        <li>비활성화한 사용자는 더 이상 로그인할 수 없습니다.</li>
        <li>본인 계정은 화면에서 직접 삭제하거나 변경할 수 없습니다.</li>
      </ul>

      <h3>부서</h3>
      <ul>
        <li>부서 추가, 이름 변경, 상위 부서 지정, 비활성화가 가능합니다.</li>
        <li>업무에서 사용 중인 부서는 삭제가 제한될 수 있으므로 삭제보다 비활성화를 우선 사용합니다.</li>
      </ul>

      <h3>공휴일</h3>
      <p>공휴일은 정기 메일의 영업일 계산에 사용됩니다. 마감 임박 기준은 공휴일을 제외한 영업일로 계산됩니다.</p>

      <h3>알림</h3>
      <p>
        업무 배정, 등록, 상태 변경, 댓글, 완료 요청, 마감일 변경 요청 알림 메일을 한 번에 켜고 끕니다.
        꺼도 로그인 인증코드는 계속 발송됩니다.
      </p>

      <h3>백업</h3>
      <p>
        백업 탭에서 업무, 코멘트, 이력, 사용자, 부서, 공휴일 데이터를 엑셀 파일로 내려받을 수 있습니다.
        업무 데이터는 Google Sheet로도 자동 백업됩니다.
      </p>
    </div>
  );
}

function GuidePage({ currentUser }) {
  const role = currentUser ? currentUser.role : null;
  const signedIn = !!currentUser;

  const TABS = [
    { key: "start", label: "시작하기", render: () => <GuideStartSection role={role} signedIn={signedIn} /> },
  ];
  if (currentUser) {
    TABS.push(
      { key: "view", label: "업무 보기", render: () => <GuideViewSection /> },
      { key: "edit", label: "업무 등록·수정", render: () => <GuideEditSection role={role} /> },
      { key: "requests", label: "요청·승인", render: () => <GuideRequestSection role={role} /> },
      { key: "notify", label: "코멘트·알림", render: () => <GuideNotifySection /> },
      { key: "writing", label: "작성 요령", render: () => <GuideWritingSection /> },
    );
    if (role === "admin") {
      TABS.push({ key: "admin", label: "관리자", render: () => <GuideAdminSection /> });
    }
  }

  const [activeTab, setActiveTab] = React.useState("start");
  const current = TABS.find((t) => t.key === activeTab) || TABS[0];

  return (
    <div className="admin-page">
      <header className="admin-page-hdr">
        <button className="auth-link" onClick={() => { window.location.hash = "#/"; }}>
          {signedIn ? "← 대시보드" : "← 로그인으로"}
        </button>
        <h1>사용 가이드</h1>
      </header>

      {TABS.length > 1 && (
        <div className="settings-tabs">
          {TABS.map((t) => (
            <button
              key={t.key}
              className={`settings-tab ${current.key === t.key ? "active" : ""}`}
              onClick={() => setActiveTab(t.key)}
            >
              {t.label}
            </button>
          ))}
        </div>
      )}

      <div className="admin-page-body guide-body">{current.render()}</div>
    </div>
  );
}

window.GuidePage = GuidePage;