<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('대화형 검색')}"></head>
<body>
<nav th:replace="~{fragments/layout :: nav}"></nav>
<main class="container page-shell">
  <section class="page-heading compact-heading">
    <h1 class="h3">대화형 검색</h1>
    <details class="explanation-details">
      <summary>도움말</summary>
      <p>질문을 MCP tool로 라우팅하고, 권한 태그·행 접근 제한·ORDS 결과를 답변으로 정리합니다.</p>
    </details>
  </section>

  <section th:if="${runtimeError}" class="alert alert-warning">
    <strong th:text="${runtimeError.title()}">DB 연결 설정이 필요합니다.</strong>
    <span th:text="${runtimeError.message()}">message</span>
  </section>

  <section class="content-band chat-shell">
    <div class="chat-message assistant-message">
      <strong>질문 실행</strong>
      <p>추천 질문을 선택하거나 질문을 직접 입력하세요.</p>
      <details class="explanation-details">
        <summary>세션과 조회 결과 설명 보기</summary>
        <p>Bearer Token 원문을 붙여 넣거나 사용자를 선택해 10분 검증 세션으로 실제 ORDS 행 접근 결과를 조회할 수 있습니다.</p>
      </details>
    </div>

    <div id="mcp-chatbot-result" class="chat-thread">
      <div class="text-muted">대화 결과가 여기에 표시됩니다.</div>
    </div>

    <form hx-post="/mcp-chatbot" hx-target="#mcp-chatbot-result" hx-swap="beforeend" class="chat-form">
      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
      <input type="hidden" name="contextPath" value="vpd-live">
      <div class="chat-form-row">
        <label>
          Limit
          <input class="form-control" name="limit" type="number" min="1" max="500" value="50">
        </label>
      </div>
      <label>
        Bearer Token 원문
        <input class="form-control" name="bearerToken" type="password" autocomplete="off"
               placeholder="비우면 라우팅만 확인합니다.">
      </label>
      <label>
        검증 세션 사용자 (선택)
        <select class="form-select" name="tempUserId">
          <option value="">원문 토큰 사용</option>
          <option th:each="user : ${users}" th:value="${user.userId()}" th:text="${user.username()}"></option>
        </select>
        <span class="form-hint">선택하면 질문 처리 중에만 검증 세션을 발급하고 완료 후 즉시 폐기합니다.</span>
      </label>
      <label>
        질문
        <textarea class="form-control" id="mcp-chat-question" name="question" rows="3"
                  placeholder="예: BOARD_POSTS에서 이 토큰으로 보이는 행과 ASO 마스킹 컬럼을 요약해줘." required></textarea>
      </label>
      <div class="question-presets" aria-label="질문 예시">
        <button class="btn rw-btn-secondary question-preset" type="button"
                  data-question="기술 태그 권한에 따라 CB_V_SEARCH_DOCUMENTS에서 이 토큰으로 보이는 문서 행 수와 주요 컬럼을 요약해줘.">
          문서 조회 요약
        </button>
        <button class="btn rw-btn-secondary question-preset" type="button"
                  data-question="CB_V_SEARCH_DOCUMENTS에서 행 접근 정책이 제외한 행과 contents 표시 보호 여부를 구분하고, 보이는 dept_code와 owner_emp_no를 정리해줘.">
          민감 컬럼 확인
        </button>
        <button class="btn rw-btn-secondary question-preset" type="button"
                  data-question="CB_VECTOR_SEARCH_DOCUMENTS에서 SPRING_BOOT 또는 ORACLE_VPD 태그 권한으로 검색 가능한 검색 단위와 행 접근 결과를 요약해줘.">
          태그 벡터 검색
        </button>
        <button class="btn rw-btn-secondary question-preset" type="button"
                  data-question="질문과 가장 가까운 ORDS 행 접근 MCP tool을 선택하고, 선택 근거와 필요한 bearer token 흐름만 보여줘.">
          라우팅만 확인
        </button>
      </div>
      <button class="btn rw-btn-primary" type="submit">질문 보내기</button>
    </form>
  </section>
</main>
<script>
  document.querySelectorAll('.question-preset').forEach((button) => {
    button.addEventListener('click', () => {
      const question = document.getElementById('mcp-chat-question');
      question.value = button.dataset.question || '';
      question.focus();
    });
  });
</script>
</body>
</html>
