<?php
require __DIR__ . '/auth.php';

// Déconnexion
if (isset($_GET['logout'])) {
    $_SESSION = [];
    session_destroy();
    header('Location: index.php');
    exit;
}
// Connexion
$loginError = '';
if (!app_is_auth() && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['app_pw'])) {
    if (app_verify((string) $_POST['app_pw'])) {
        session_regenerate_id(true);
        $_SESSION['app_auth'] = true;
        header('Location: index.php');
        exit;
    }
    $loginError = 'Mot de passe incorrect.';
}
if (!app_is_auth()) {
    include __DIR__ . '/login.php';
    exit;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Régie — Studio de messages téléphoniques</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/app.css?v=6">
</head>
<body>

<div class="scanline" aria-hidden="true"></div>

<header class="topbar">
  <div class="brand">
    <span class="led" id="statusLed" title="État API"></span>
    <div class="brand-txt">
      <h1>RÉGIE</h1>
      <p>Studio de messages téléphoniques · TTS&nbsp;+&nbsp;musique de fond</p>
    </div>
  </div>
  <div class="top-right">
    <button class="balance" id="balance" type="button" title="Cliquer pour rafraîchir le solde" hidden>
      <span class="bal-label">crédits</span>
      <span class="bal-val" id="balVal">—</span>
      <span class="bal-bar"><i id="balBar"></i></span>
    </button>
    <button class="btn ghost" id="openConfig" type="button">
      <span class="gear">⚙</span> <span class="cfg-txt">Configuration</span>
    </button>
  </div>
</header>

<main class="console">

  <!-- VOIE 01 — VOIX -->
  <section class="strip" id="strip-voice">
    <div class="strip-rail">
      <span class="strip-no">01</span>
      <span class="strip-label">VOIX</span>
    </div>
    <div class="strip-body">
      <div class="row between">
        <h2>Choix de la voix <span class="lang-pill">FR</span></h2>
        <button class="btn small" id="loadVoices" type="button">Charger les voix</button>
      </div>
      <div id="voiceList" class="voice-grid">
        <p class="hint" id="voiceHint">Renseigne ta clé API dans la configuration, puis charge les voix ElevenLabs.</p>
      </div>

      <div class="test-zone">
        <label class="field-label" for="testText">Phrase de test</label>
        <div class="row gap">
          <input type="text" id="testText" class="inp"
                 placeholder="Bonjour et bienvenue, votre appel est important pour nous…"
                 value="Bonjour et bienvenue. Votre appel est important pour nous, un conseiller va vous répondre.">
          <button class="btn signal" id="btnTest" type="button" disabled>▶ Tester</button>
        </div>
        <audio id="testPlayer" controls hidden></audio>
      </div>
    </div>
  </section>

  <!-- VOIE 02 — MESSAGE -->
  <section class="strip" id="strip-text">
    <div class="strip-rail">
      <span class="strip-no">02</span>
      <span class="strip-label">MESSAGE</span>
    </div>
    <div class="strip-body">
      <h2>Texte du message</h2>
      <textarea id="msgText" class="inp area" rows="5"
        placeholder="Saisis ici le texte qui sera lu par la voix…">Bienvenue chez Suppinfo. Nos bureaux sont actuellement fermés. Vous pouvez nous laisser un message après le bip, nous vous rappellerons dans les plus brefs délais. Merci et à bientôt.</textarea>
      <div class="row between sub">
        <span class="hint" id="charCount">0 caractère</span>
        <span class="hint cost" id="costEst"></span>
      </div>
    </div>
  </section>

  <!-- VOIE 03 — MUSIQUE -->
  <section class="strip" id="strip-music">
    <div class="strip-rail">
      <span class="strip-no">03</span>
      <span class="strip-label">MUSIQUE</span>
    </div>
    <div class="strip-body">
      <h2>Musique de fond</h2>
      <div class="tabs" role="tablist">
        <button class="tab active" data-src="none" type="button">Aucune</button>
        <button class="tab" data-src="upload" type="button">Importer un fichier</button>
        <button class="tab" data-src="youtube" type="button">Lien YouTube</button>
      </div>

      <div class="src-panel" data-panel="upload" hidden>
        <input type="file" id="musicFile" accept="audio/*,.mp3,.wav,.m4a,.aac,.ogg,.flac" hidden>
        <button class="btn" id="pickFile" type="button">Choisir un fichier…</button>
        <span class="hint">MP3, WAV, M4A… — 60 Mo max</span>
      </div>

      <div class="src-panel col" data-panel="youtube" hidden>
        <div class="row gap full">
          <input type="url" id="ytUrl" class="inp" placeholder="https://www.youtube.com/watch?v=…">
          <button class="btn" id="btnYt" type="button">Importer</button>
        </div>
        <span class="hint">L'audio est extrait automatiquement. Assure-toi d'avoir le droit d'utiliser ce contenu.</span>
        <details class="cookies-box" id="cookiesBox">
          <summary>YouTube bloque le serveur ? <span class="ck-state" id="ckState">cookies non configurés</span></summary>
          <p class="hint">Le serveur étant sur IP datacenter, YouTube demande une vérification « anti-robot ». Importe un fichier <code>cookies.txt</code> exporté depuis ton navigateur (extension « Get cookies.txt LOCALLY »), de préférence avec un compte Google secondaire.</p>
          <div class="row gap">
            <input type="file" id="cookiesFile" accept=".txt" hidden>
            <button class="btn small" id="pickCookies" type="button">Importer cookies.txt</button>
            <button class="btn small ghost" id="delCookies" type="button" hidden>Supprimer</button>
          </div>
        </details>
      </div>

      <div id="musicStatus" class="music-status" hidden>
        <span class="dot"></span>
        <span id="musicName">—</span>
        <span class="badge" id="musicDur"></span>
        <button class="btn tiny ghost" id="clearMusic" type="button">retirer</button>
      </div>
    </div>
  </section>

  <!-- VOIE 04 — MIXAGE -->
  <section class="strip" id="strip-mix">
    <div class="strip-rail">
      <span class="strip-no">04</span>
      <span class="strip-label">MIXAGE</span>
    </div>
    <div class="strip-body">
      <h2>Réglages du mixage</h2>
      <div class="faders">
        <div class="fader">
          <label for="fVol">Volume musique</label>
          <input type="range" id="fVol" min="0" max="0.6" step="0.01" value="0.18">
          <output id="oVol">18%</output>
        </div>
        <div class="fader">
          <label for="fIntro">Intro musique</label>
          <input type="range" id="fIntro" min="0" max="8" step="0.5" value="2">
          <output id="oIntro">2.0 s</output>
        </div>
        <div class="fader">
          <label for="fTail">Fin musique</label>
          <input type="range" id="fTail" min="0" max="10" step="0.5" value="3">
          <output id="oTail">3.0 s</output>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" id="cDuck" checked>
        <span class="track"><span class="knob"></span></span>
        <span>Ducking auto — la musique baisse quand la voix parle</span>
      </label>
    </div>
  </section>

  <!-- SORTIE -->
  <section class="master">
    <div class="master-meter" aria-hidden="true">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    <div class="master-main">
      <div class="master-head">
        <h2>Générer le message</h2>
        <span class="fmt-tag">Sortie WAV · 8 kHz · mono · 16-bit (G.711)</span>
      </div>
      <button class="btn master-btn" id="btnGenerate" type="button">⏺ Produire le message</button>
      <div id="result" class="result" hidden>
        <audio id="outPlayer" controls></audio>
        <div class="row gap">
          <a id="dlLink" class="btn signal" download>⤓ Télécharger le WAV</a>
          <span class="badge" id="outDur"></span>
        </div>
      </div>
    </div>
  </section>

</main>

<!-- Modale configuration -->
<div class="modal" id="configModal" hidden>
  <div class="modal-card">
    <div class="row between">
      <h2>Configuration</h2>
      <button class="btn tiny ghost" id="closeConfig" type="button">✕</button>
    </div>

    <label class="field-label" for="cfgKey">Clé API ElevenLabs</label>
    <input type="password" id="cfgKey" class="inp" placeholder="xi-api-key…" autocomplete="off">
    <p class="hint">Stockée côté serveur, jamais renvoyée en clair.</p>

    <label class="field-label" for="cfgModel">Modèle</label>
    <select id="cfgModel" class="inp">
      <option value="eleven_multilingual_v2">Multilingual v2 (recommandé FR)</option>
      <option value="eleven_turbo_v2_5">Turbo v2.5 (rapide)</option>
      <option value="eleven_flash_v2_5">Flash v2.5 (très rapide)</option>
    </select>

    <div class="cfg-grid">
      <div class="fader sm">
        <label for="cfgStab">Stabilité</label>
        <input type="range" id="cfgStab" min="0" max="1" step="0.05" value="0.5">
        <output id="oStab">0.50</output>
      </div>
      <div class="fader sm">
        <label for="cfgSim">Similarité</label>
        <input type="range" id="cfgSim" min="0" max="1" step="0.05" value="0.75">
        <output id="oSim">0.75</output>
      </div>
      <div class="fader sm">
        <label for="cfgStyle">Style</label>
        <input type="range" id="cfgStyle" min="0" max="1" step="0.05" value="0">
        <output id="oStyle">0.00</output>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" id="cfgBoost" checked>
      <span class="track"><span class="knob"></span></span>
      <span>Speaker boost</span>
    </label>

    <label class="field-label" for="cfgPw">Mot de passe d'accès</label>
    <input type="password" id="cfgPw" class="inp" placeholder="Laisser vide pour ne pas changer" autocomplete="new-password">
    <p class="hint">Mot de passe unique pour toute l'app. Par défaut : <code>regie2026</code> — change-le.</p>

    <button class="btn signal block" id="saveConfig" type="button">Enregistrer</button>
    <a class="btn ghost block" href="index.php?logout=1">Se déconnecter</a>
  </div>
</div>

<div id="toast" class="toast" hidden></div>

<script src="assets/app.js?v=7"></script>
</body>
</html>
