<!doctype html>
<!-- Copyright (c) Microsoft Corporation.
 Licensed under the MIT License. -->

<html>
  <head>
    <meta charset="utf-8" />
    <title>TypeAgent Page Q&A</title>
    <link rel="stylesheet" href="../vendor/bootstrap/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="pageQnA.css" />
  </head>
  <body>
    <div class="container-fluid p-3 h-100 d-flex flex-column">
      <!-- Header Section -->
      <div class="knowledge-header rounded">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="mb-1"><i class="bi bi-chat-dots"></i> Page Q&A</h4>
            <small id="connectionStatus">
              <span class="status-indicator status-connected"></span>
              Connected to TypeAgent
            </small>
          </div>
          <div class="page-status">
            <small id="knowledgeStatus" class="text-muted">
              <i class="bi bi-hourglass-split"></i>
              Checking page knowledge...
            </small>
          </div>
        </div>
      </div>

      <!-- Current Page Info -->
      <div class="knowledge-card card">
        <div
          class="card-header d-flex justify-content-between align-items-center"
        >
          <h6 class="mb-0"><i class="bi bi-globe"></i> Current Page</h6>
        </div>
        <div class="card-body">
          <div id="currentPageInfo">
            <div class="text-center text-muted">
              <i class="bi bi-hourglass-split"></i>
              <p class="mb-0">Loading page information...</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Knowledge Extraction Progress (Hidden by default) -->
      <div id="extractionProgress" class="knowledge-card card d-none">
        <div class="card-header">
          <h6 class="mb-0"><i class="bi bi-gear"></i> Extracting Knowledge</h6>
        </div>
        <div class="card-body">
          <div class="d-flex align-items-center mb-2">
            <div class="spinner-border spinner-border-sm me-2"></div>
            <span id="knowledgeStatusMessage">Retrieving page content...</span>
          </div>
          <div class="progress" style="height: 6px">
            <div
              id="knowledgeProgressBar"
              class="progress-bar"
              style="width: 0%"
              role="progressbar"
              aria-valuenow="0"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="d-flex justify-content-between small text-muted mt-1">
            <span id="knowledgeProgressText">0 of 0 items processed</span>
            <span id="timeElapsed">0s</span>
          </div>
        </div>
      </div>

      <!-- Suggested Questions Section -->
      <div id="suggestedQuestionsSection" class="knowledge-card card d-none">
        <div class="card-header">
          <h6 class="mb-0">
            <i class="bi bi-lightbulb"></i> Suggested Questions
          </h6>
        </div>
        <div class="card-body">
          <div id="pageQuestions">
            <h6 class="small text-muted mb-2">About this page:</h6>
            <div id="pageQuestionsList" class="question-list mb-3"></div>
          </div>
          <div id="graphQuestions">
            <h6 class="small text-muted mb-2">Explore related content:</h6>
            <div id="graphQuestionsList" class="question-list"></div>
          </div>
          <div id="questionsLoading" class="text-center text-muted">
            <div class="spinner-border spinner-border-sm me-2"></div>
            Generating questions...
          </div>
        </div>
      </div>

      <!-- Chat Section -->
      <div
        id="chatSection"
        class="knowledge-card card flex-grow-1 d-flex flex-column d-none"
      >
        <div class="card-header">
          <h6 class="mb-0"><i class="bi bi-chat-text"></i> Ask Questions</h6>
        </div>
        <div class="card-body d-flex flex-column p-0">
          <!-- Chat History -->
          <div id="chatHistory" class="chat-history flex-grow-1">
            <div class="chat-welcome">
              <div class="text-center text-muted p-3">
                <i class="bi bi-chat-dots h3"></i>
                <p class="mb-0">
                  Ask questions about this page or explore related content!
                </p>
              </div>
            </div>
          </div>

          <!-- Chat Input -->
          <div class="chat-input-container">
            <div class="input-group">
              <input
                type="text"
                id="chatInput"
                class="form-control"
                placeholder="Ask a question about this page..."
                disabled
              />
              <button
                id="sendButton"
                class="btn btn-primary"
                type="button"
                disabled
              >
                <i class="bi bi-send"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Error Section -->
      <div id="errorSection" class="knowledge-card card d-none">
        <div class="card-header bg-danger text-white">
          <h6 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Error</h6>
        </div>
        <div class="card-body">
          <div id="errorMessage" class="text-danger"></div>
          <button id="retryButton" class="btn btn-outline-primary btn-sm mt-2">
            <i class="bi bi-arrow-clockwise"></i> Retry
          </button>
        </div>
      </div>
    </div>

    <!-- Scripts -->
    <script type="module" src="pageQnA.js"></script>
  </body>
</html>
