<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%- include('partials/favicon') %>
    <title>AI - NCue</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body
    data-ai-explore-dev-guest="<%= (typeof aiExploreDevGuestRestricted !== 'undefined' && aiExploreDevGuestRestricted) ? '1' : '0' %>"
    class="<%= (typeof aiExploreDevGuestRestricted !== 'undefined' && aiExploreDevGuestRestricted) ? 'ai-explore-page ai-explore-dev-guest' : 'ai-explore-page' %>"
  >
    <% var aiGuestDev = typeof aiExploreDevGuestRestricted !== 'undefined' && aiExploreDevGuestRestricted; %>
    <% var _tclOk = typeof taskChecklistMenuAllowed !== 'undefined' && taskChecklistMenuAllowed; %>
    <% var _opsLoggedIn = typeof opsUserEmail !== 'undefined' && opsUserEmail; %>
    <div class="app-shell">
      <%- include('partials/nav', { activeMenu: 'ai-explore', adminMode: typeof adminMode !== 'undefined' ? adminMode : false }) %>
      <div class="content-area">
        <header class="topbar">
          <h1>AI</h1>
          <% if (!_opsLoggedIn) { %>
          <% if (aiGuestDev) { %>
          <span class="top-action-link ai-explore-action-disabled" aria-disabled="true">AI 추가하기</span>
          <% } else { %>
          <a class="top-action-link" href="#">AI 추가하기</a>
          <% } %>
          <% } %>
        </header>
        <main class="container container-ai-full">
          <% if (aiGuestDev) { %>
          <p class="chat-api-warning" style="margin-bottom: 16px">로그인 후 이용 가능합니다.</p>
          <% } %>
          <section class="panel">
            <p class="subtitle">지식 시험이나 지식 보강은 물론, 스킬들을 다양하게 조합한 맞춤형 AI를 탐색하고 사용해보세요.</p>
            <form class="search-bar-wrap" id="aiExploreSearchForm" role="search">
              <input
                type="search"
                id="aiExploreSearch"
                placeholder="제목, 설명으로 검색하세요"
                class="search-input"
                autocomplete="off"
                aria-label="AI 서비스 제목·설명 검색"
                <% if (aiGuestDev) { %>disabled aria-disabled="true"<% } %>
              />
              <div class="ai-type-filters" role="radiogroup" aria-label="AI 타입 필터">
                <label class="ai-type-filter-option">
                  <input type="radio" name="aiTypeFilter" value="all" checked <% if (aiGuestDev) { %>disabled aria-disabled="true"<% } %> />
                  <span>전체</span>
                </label>
                <label class="ai-type-filter-option">
                  <input type="radio" name="aiTypeFilter" value="general" <% if (aiGuestDev) { %>disabled aria-disabled="true"<% } %> />
                  <span>일반</span>
                </label>
                <label class="ai-type-filter-option">
                  <input type="radio" name="aiTypeFilter" value="xscan" <% if (aiGuestDev) { %>disabled aria-disabled="true"<% } %> />
                  <span>XScan</span>
                </label>
                <label class="ai-type-filter-option">
                  <input type="radio" name="aiTypeFilter" value="fscan" <% if (aiGuestDev) { %>disabled aria-disabled="true"<% } %> />
                  <span>FScan</span>
                </label>
              </div>
            </form>
          </section>
          <section class="panel">
            <h2>AI 서비스</h2>
            <div class="ai-card-grid">
              <% if (aiGuestDev) { %>
              <article class="ai-card ai-card-disabled" aria-disabled="true" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>회의록 AI</h3>
                <p>회의록을 자동으로 작성·요약·정리해주는 AI 서비스입니다.</p>
                <div class="tag-row"><span class="tag-chip">#업무관리</span><span class="tag-chip">#회의록</span></div>
              </article>
              <% } else { %>
              <a href="/ai-explore/meeting-minutes" class="ai-card ai-card-link" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>회의록 AI</h3>
                <p>회의록을 자동으로 작성·요약·정리해주는 AI 서비스입니다.</p>
                <div class="tag-row"><span class="tag-chip">#업무관리</span><span class="tag-chip">#회의록</span></div>
              </a>
              <% } %>
              <% if (_tclOk) { %>
              <% if (aiGuestDev) { %>
              <article class="ai-card ai-card-disabled" aria-disabled="true" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>(회의록 기반) 업무 체크리스트 AI</h3>
                <p>회의록에서 추출된 할 일과 개인 업무를 통합 관리하고, 등록·수정·삭제를 통해 완결성을 높이는 AI 비서입니다.</p>
                <div class="tag-row"><span class="tag-chip">#업무관리</span><span class="tag-chip">#체크리스트</span></div>
              </article>
              <% } else { %>
              <a href="/ai-explore/task-checklist" class="ai-card ai-card-link" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>(회의록 기반) 업무 체크리스트 AI</h3>
                <p>회의록에서 추출된 할 일과 개인 업무를 통합 관리하고, 등록·수정·삭제를 통해 완결성을 높이는 AI 비서입니다.</p>
                <div class="tag-row"><span class="tag-chip">#업무관리</span><span class="tag-chip">#체크리스트</span></div>
              </a>
              <% } %>
              <% } %>
              <% if (aiGuestDev) { %>
              <article class="ai-card ai-card-disabled" aria-disabled="true" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>일반 채팅</h3>
                <p>ChatGPT를 이용한 채팅 서비스입니다.</p>
                <div class="tag-row"><span class="tag-chip">#질의응답.</span><span class="tag-chip">ChatGPT</span></div>
              </article>
              <% } else { %>
              <a href="/ai-explore/chat" class="ai-card ai-card-link" data-ai-type="general">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>일반 채팅</h3>
                <p>ChatGPT를 이용한 채팅 서비스입니다.</p>
                <div class="tag-row"><span class="tag-chip">#질의응답.</span><span class="tag-chip">ChatGPT</span></div>
              </a>
              <% } %>
              <% if (aiGuestDev) { %>
              <article class="ai-card ai-card-disabled" aria-disabled="true" data-ai-type="fscan">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>FSCAN 조사각 선정도우미</h3>
                <p>검사 대상물 치수(H/W) 기반으로 FSCAN 시리즈 모델 선정을 돕는 도구입니다.</p>
                <div class="tag-row"><span class="tag-chip">#FSCAN</span><span class="tag-chip">#선정도우미</span></div>
              </article>
              <% } else { %>
              <a href="/ai-explore/fscan" class="ai-card ai-card-link" data-ai-type="fscan">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>FSCAN 조사각 선정도우미</h3>
                <p>검사 대상물 치수(H/W) 기반으로 FSCAN 시리즈 모델 선정을 돕는 도구입니다.</p>
                <div class="tag-row"><span class="tag-chip">#FSCAN</span><span class="tag-chip">#선정도우미</span></div>
              </a>
              <% } %>
            </div>
          </section>
        </main>
      </div>
    </div>
    <script>
      (function () {
        var form = document.getElementById("aiExploreSearchForm");
        var input = document.getElementById("aiExploreSearch");
        var grid = document.querySelector(".ai-card-grid");
        if (!form || !input || !grid) return;

        var devGuest = (document.body.getAttribute("data-ai-explore-dev-guest") || "0") === "1";
        if (devGuest) return;

        var cards = grid.querySelectorAll(".ai-card");
        var typeInputs = form.querySelectorAll('input[name="aiTypeFilter"]');

        function cardTitleDescriptionText(el) {
          var parts = [];
          var h3 = el.querySelector("h3");
          if (h3) parts.push(h3.textContent || "");
          el.querySelectorAll("p").forEach(function (p) {
            if (!p.closest(".tag-row")) parts.push(p.textContent || "");
          });
          return parts.join(" ").replace(/\s+/g, " ").trim().toLowerCase();
        }

        function applyFilter() {
          var q = (input.value || "").trim().toLowerCase();
          var checkedType = form.querySelector('input[name="aiTypeFilter"]:checked');
          var selectedType = checkedType ? String(checkedType.value || "all") : "all";
          cards.forEach(function (el) {
            var text = cardTitleDescriptionText(el);
            var cardType = String(el.getAttribute("data-ai-type") || "general").toLowerCase();
            var textMatched = !q || text.indexOf(q) !== -1;
            var typeMatched = selectedType === "all" || cardType === selectedType;
            var show = textMatched && typeMatched;
            el.hidden = !show;
            el.setAttribute("aria-hidden", show ? "false" : "true");
          });
        }

        input.addEventListener("input", applyFilter);
        input.addEventListener("search", applyFilter);
        typeInputs.forEach(function (el) {
          el.addEventListener("change", applyFilter);
        });

        form.addEventListener("submit", function (e) {
          e.preventDefault();
          applyFilter();
        });

        applyFilter();
      })();
    </script>
  </body>
</html>
