{% extends "base.html" %}
{% load static %}

{% block title %}Computer Audio Capture | {{ project_name }}{% endblock %}
{% block meta_description %}Capture microphone input and browser-approved tab or system audio locally before connecting the workflow to Ytel.{% endblock %}

{% block content %}
<header class="page-hero audio-hero">
  <div class="container">
    <div class="row align-items-end g-4">
      <div class="col-lg-8">
        <span class="eyebrow">Computer audio first</span>
        <h1 class="page-title mt-3 mb-3">Capture mic input and shared output audio in the browser.</h1>
        <p class="hero-copy mb-0">This prototype lets you test call audio capture before the Ytel-specific integration. Your browser will ask permission for the microphone and for a tab/window/screen with audio.</p>
      </div>
      <div class="col-lg-4">
        <aside class="glass-card audio-guardrail" aria-label="Audio capture guardrails">
          <strong>Privacy guardrail</strong>
          <p>No silent background listening. Audio stays local on this page until we add an explicit upload or transcription step.</p>
        </aside>
      </div>
    </div>
  </div>
</header>

<section class="section-pad">
  <div class="container">
    <div class="row g-4">
      <div class="col-xl-8">
        <article class="audio-console glass-card" aria-labelledby="capture-title">
          <div class="panel-heading">
            <span>Step 1</span>
            <h2 id="capture-title">Connect audio sources</h2>
          </div>

          <div class="audio-status-grid mb-4" aria-live="polite">
            <div class="audio-source-card" data-source-card="mic">
              <span class="status-pill muted" id="mic-status">Not connected</span>
              <h3>Microphone input</h3>
              <p>Captures your voice or headset microphone.</p>
              <div class="audio-meter" aria-hidden="true"><span id="mic-meter"></span></div>
            </div>
            <div class="audio-source-card" data-source-card="system">
              <span class="status-pill muted" id="system-status">Not connected</span>
              <h3>Computer/tab output</h3>
              <p>Use browser screen sharing and select a source with audio enabled.</p>
              <div class="audio-meter" aria-hidden="true"><span id="system-meter"></span></div>
            </div>
            <div class="audio-source-card" data-source-card="mix">
              <span class="status-pill muted" id="mix-status">Waiting</span>
              <h3>Combined recording mix</h3>
              <p>Records whichever approved sources are active.</p>
              <div class="audio-meter" aria-hidden="true"><span id="mix-meter"></span></div>
            </div>
          </div>

          <div class="audio-actions">
            <button class="btn btn-signal" type="button" id="connect-mic">Enable microphone</button>
            <button class="btn btn-outline-signal" type="button" id="connect-system">Share computer/tab audio</button>
            <button class="btn btn-signal" type="button" id="start-recording" disabled>Start local recording</button>
            <button class="btn btn-outline-signal danger" type="button" id="stop-recording" disabled>Stop recording</button>
            <button class="btn btn-light reset-btn" type="button" id="reset-audio" disabled>Reset</button>
          </div>

          <div class="recording-result mt-4" id="recording-result" hidden>
            <div>
              <span class="small-label">Local test file</span>
              <h3 class="mb-2">Recording ready</h3>
              <p class="text-muted-custom mb-3">Preview it here or download it. Next, we can add secure upload + transcription.</p>
            </div>
            <audio controls id="recording-preview"></audio>
            <a class="btn btn-outline-signal" id="download-recording" download="reliefsignal-audio-test.webm">Download WebM</a>
          </div>

          <video id="shared-video-preview" playsinline muted hidden></video>
        </article>
      </div>

      <div class="col-xl-4">
        <aside class="detail-panel h-100" aria-labelledby="how-title">
          <div class="panel-heading">
            <span>Notes</span>
            <h2 id="how-title">How this works</h2>
          </div>
          <ul class="readiness-list audio-note-list">
            <li><span>Mic</span><strong>Browser permission</strong></li>
            <li><span>Output audio</span><strong>Share tab/screen audio</strong></li>
            <li><span>Storage</span><strong>Local browser blob</strong></li>
            <li><span>Next step</span><strong>Upload/transcribe</strong></li>
          </ul>
          <div class="audio-tip mt-4">
            <strong>Best first test</strong>
            <p>Open the Ytel webphone or any sample call audio in a browser tab, then choose that tab when clicking <em>Share computer/tab audio</em>. In Chrome, make sure the share dialog has audio enabled.</p>
          </div>
          <div class="audio-tip subtle mt-3">
            <strong>Browser limitation</strong>
            <p>Some browsers only share tab audio, not full device output. If system audio is not available, use a Chrome tab source or a virtual audio device later.</p>
          </div>
        </aside>
      </div>
    </div>

    <div class="row g-4 mt-1">
      <div class="col-lg-7">
        <section class="detail-panel" aria-labelledby="event-log-title">
          <div class="panel-heading">
            <span>Live</span>
            <h2 id="event-log-title">Capture log</h2>
          </div>
          <ol class="audio-log" id="audio-log" aria-live="polite">
            <li>Ready. Connect the microphone or shared audio source to begin.</li>
          </ol>
        </section>
      </div>
      <div class="col-lg-5">
        <section class="detail-panel" aria-labelledby="next-title">
          <div class="panel-heading">
            <span>After test</span>
            <h2 id="next-title">Recommended next slice</h2>
          </div>
          <p class="text-muted-custom">Once capture works on your computer, the next practical build is a secure upload/transcription endpoint that turns the local recording into a pilot call transcript.</p>
          <a class="btn btn-signal" href="{% url 'call_create' %}">Open intake form</a>
        </section>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block head %}
<script src="{% static 'js/audio-capture.js' %}?v={{ deployment_timestamp }}" defer></script>
{% endblock %}