from flask import Flask, render_template_string

app = Flask(__name__)

HTML = r"""
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novelinha Writer</title>

<style>
:root{
  --bg:#080812;
  --card:#17172a;
  --card2:#22223d;
  --text:#f7f7ff;
  --muted:#aaaad0;
  --pink:#ff3d8b;
  --purple:#8f5cff;
  --danger:#ff4d6d;
  --blue:#4cc9f0;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:radial-gradient(circle at top,#2b155c,transparent 35%),var(--bg);
  color:var(--text);
  font-family:system-ui,Arial,sans-serif;
}

.app{
  max-width:760px;
  margin:auto;
  padding:14px 14px 120px;
}

.header{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(8,8,18,.9);
  backdrop-filter:blur(12px);
  padding:14px 0;
}

h1{
  margin:0;
  font-size:23px;
}

small,.muted{
  color:var(--muted);
}

.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  margin-top:14px;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
}

label{
  display:block;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  margin:10px 0 6px;
}

input,textarea,select{
  width:100%;
  background:#0f0f20;
  color:white;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:13px;
  font-size:16px;
  outline:none;
}

textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.45;
}

button{
  border:0;
  border-radius:15px;
  padding:13px;
  color:white;
  font-weight:900;
  font-size:15px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
}

button.secondary{
  background:#292943;
}

button.danger{
  background:var(--danger);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:12px;
}

.tabs button{
  font-size:13px;
  padding:10px;
}

.hidden{
  display:none;
}

.scene,.episode{
  background:#101020;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  margin-top:10px;
}

.scene-title,.episode-title{
  font-weight:900;
  color:var(--blue);
}

.scene-text{
  white-space:pre-wrap;
  margin-top:8px;
  line-height:1.45;
}

.actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.actions button{
  padding:9px 11px;
  font-size:13px;
  border-radius:12px;
}

.output{
  white-space:pre-wrap;
  background:#070711;
  border-radius:15px;
  padding:14px;
  min-height:150px;
  line-height:1.5;
}

.toast{
  position:fixed;
  bottom:86px;
  left:50%;
  transform:translateX(-50%);
  background:white;
  color:#111;
  padding:11px 16px;
  border-radius:999px;
  font-weight:900;
  display:none;
  z-index:20;
}

.bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:12px;
  background:rgba(8,8,18,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.08);
}

.bottom-inner{
  max-width:760px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media(max-width:430px){
  h1{font-size:21px}
  .grid{grid-template-columns:1fr}
}
</style>
</head>

<body>
<div class="app">

  <div class="header">
    <h1>🎭 Novelinha Writer</h1>
    <small>Episódios com cenas salvas separadamente.</small>

    <div class="tabs">
      <button onclick="aba('episodios')">📚 Episódios</button>
      <button onclick="aba('editor')">✍️ Cena</button>
      <button onclick="aba('final')">🎧 Exportar</button>
    </div>
  </div>

  <section id="aba-episodios">
    <div class="card">
      <h3>📚 Episódios</h3>

      <label>Novo episódio</label>
      <input id="novoTitulo" placeholder="Ex: Episódio 1 — A chegada de Marina">

      <div class="grid">
        <button onclick="criarEpisodio()">➕ Criar episódio</button>
        <button class="secondary" onclick="renomearEpisodio()">✏️ Renomear atual</button>
      </div>

      <div id="listaEpisodios"></div>
    </div>

    <div class="card">
      <h3>🎬 Cenas do episódio atual</h3>
      <div id="listaCenas"></div>
    </div>
  </section>

  <section id="aba-editor" class="hidden">
    <div class="card">
      <h3>✍️ Adicionar cena ao episódio atual</h3>
      <small id="epAtualNome"></small>

      <label>Tipo da cena</label>
      <select id="tipo">
        <option>Hook inicial</option>
        <option>Drama</option>
        <option>Confronto</option>
        <option>Revelação</option>
        <option>Suspense</option>
        <option>Cliffhanger</option>
      </select>

      <label>Tempo</label>
      <input id="tempo" type="number" placeholder="Ex: 5">

      <label>Narração</label>
      <textarea id="narracao" placeholder="Escreva a narração da cena..."></textarea>
      <small id="contador">0 palavras</small>

      <label>Visual opcional</label>
      <textarea id="visual" placeholder="Ex: Lucas no chão, Marina observando..."></textarea>

      <div class="grid">
        <button onclick="adicionarCena()">➕ Salvar cena</button>
        <button class="secondary" onclick="limparCampos()">🧹 Limpar</button>
      </div>
    </div>
  </section>

  <section id="aba-final" class="hidden">
    <div class="card">
      <h3>🎧 Exportar episódio atual</h3>
      <small id="exportTitulo"></small>

      <label>Narração limpa</label>
      <div class="output" id="saidaNarracao"></div>

      <div class="grid">
        <button onclick="copiarNarracao()">📋 Copiar narração</button>
        <button class="secondary" onclick="baixarNarracao()">⬇️ Baixar narração</button>
        <button onclick="copiarTudo()">📋 Copiar tudo</button>
        <button class="secondary" onclick="baixarTudo()">⬇️ Baixar tudo</button>
      </div>
    </div>
  </section>

</div>

<div class="bottom">
  <div class="bottom-inner">
    <button onclick="salvar()">💾 Salvar</button>
    <button class="danger" onclick="apagarTudo()">🗑️ Apagar tudo</button>
  </div>
</div>

<div class="toast" id="toast">Salvo!</div>
<textarea id="copyHelper" style="position:fixed;left:-9999px;top:-9999px;"></textarea>

<script>
let episodios = JSON.parse(localStorage.getItem("novelinha_episodios") || "[]");
let epAtual = Number(localStorage.getItem("novelinha_ep_atual") || 0);

if(epAtual >= episodios.length) epAtual = 0;

const narracaoInput = document.getElementById("narracao");
narracaoInput.addEventListener("input", atualizarContador);

function aba(nome){
  document.getElementById("aba-episodios").classList.add("hidden");
  document.getElementById("aba-editor").classList.add("hidden");
  document.getElementById("aba-final").classList.add("hidden");
  document.getElementById("aba-" + nome).classList.remove("hidden");
  render();
}

function toast(msg){
  const t = document.getElementById("toast");
  t.innerText = msg;
  t.style.display = "block";
  setTimeout(() => t.style.display = "none", 1500);
}

function salvar(){
  localStorage.setItem("novelinha_episodios", JSON.stringify(episodios));
  localStorage.setItem("novelinha_ep_atual", epAtual);
  toast("Salvo!");
}

function criarEpisodio(){
  const titulo = document.getElementById("novoTitulo").value.trim();

  if(!titulo){
    toast("Digite o título.");
    return;
  }

  episodios.push({
    titulo: titulo,
    cenas: []
  });

  epAtual = episodios.length - 1;
  document.getElementById("novoTitulo").value = "";
  salvar();
  render();
}

function selecionarEpisodio(i){
  epAtual = i;
  salvar();
  render();
}

function renomearEpisodio(){
  if(!episodios.length){
    toast("Crie um episódio primeiro.");
    return;
  }

  const novo = prompt("Novo nome:", episodios[epAtual].titulo);
  if(!novo) return;

  episodios[epAtual].titulo = novo.trim();
  salvar();
  render();
}

function apagarEpisodio(i){
  if(!confirm("Apagar este episódio e todas as cenas dele?")) return;

  episodios.splice(i, 1);

  if(epAtual >= episodios.length) epAtual = Math.max(0, episodios.length - 1);

  salvar();
  render();
}

function episodioAtual(){
  if(!episodios.length) return null;
  return episodios[epAtual];
}

function adicionarCena(){
  const ep = episodioAtual();

  if(!ep){
    toast("Crie um episódio primeiro.");
    aba("episodios");
    return;
  }

  const narracao = document.getElementById("narracao").value.trim();

  if(!narracao){
    toast("Escreva a narração.");
    return;
  }

  ep.cenas.push({
    tipo: document.getElementById("tipo").value,
    tempo: document.getElementById("tempo").value,
    narracao: narracao,
    visual: document.getElementById("visual").value.trim()
  });

  salvar();
  limparCampos();
  aba("episodios");
}

function editarCena(i){
  const ep = episodioAtual();
  const c = ep.cenas[i];

  document.getElementById("tipo").value = c.tipo;
  document.getElementById("tempo").value = c.tempo;
  document.getElementById("narracao").value = c.narracao;
  document.getElementById("visual").value = c.visual;

  ep.cenas.splice(i, 1);
  salvar();
  atualizarContador();
  aba("editor");
}

function removerCena(i){
  const ep = episodioAtual();

  if(!confirm("Remover esta cena?")) return;

  ep.cenas.splice(i, 1);
  salvar();
  render();
}

function subirCena(i){
  const ep = episodioAtual();
  if(i === 0) return;

  [ep.cenas[i - 1], ep.cenas[i]] = [ep.cenas[i], ep.cenas[i - 1]];
  salvar();
  render();
}

function descerCena(i){
  const ep = episodioAtual();
  if(i === ep.cenas.length - 1) return;

  [ep.cenas[i + 1], ep.cenas[i]] = [ep.cenas[i], ep.cenas[i + 1]];
  salvar();
  render();
}

function limparCampos(){
  document.getElementById("tempo").value = "";
  document.getElementById("narracao").value = "";
  document.getElementById("visual").value = "";
  atualizarContador();
}

function contarPalavras(texto){
  return texto.trim() ? texto.trim().split(/\s+/).length : 0;
}

function atualizarContador(){
  document.getElementById("contador").innerText =
    contarPalavras(narracaoInput.value) + " palavras";
}

function narracaoCompleta(){
  const ep = episodioAtual();
  if(!ep) return "";
  return ep.cenas.map(c => c.narracao.trim()).join("\n\n");
}

function tudoCompleto(){
  const ep = episodioAtual();
  if(!ep) return "";

  let texto = ep.titulo + "\n\n";

  ep.cenas.forEach((c, i) => {
    texto += "CENA " + (i + 1) + " — " + c.tipo + "\n";
    if(c.tempo) texto += "Tempo: " + c.tempo + "s\n";

    texto += "\nNARRAÇÃO:\n";
    texto += c.narracao.trim() + "\n";

    if(c.visual){
      texto += "\nVISUAL:\n";
      texto += c.visual.trim() + "\n";
    }

    texto += "\n--------------------\n\n";
  });

  return texto;
}

function copiarTexto(texto){
  const helper = document.getElementById("copyHelper");
  helper.value = texto;
  helper.focus();
  helper.select();
  helper.setSelectionRange(0, 999999);

  try{
    document.execCommand("copy");
    toast("Copiado!");
  }catch(e){
    toast("Não conseguiu copiar.");
  }
}

function copiarNarracao(){
  const texto = narracaoCompleta();

  if(!texto.trim()){
    toast("Nada para copiar.");
    return;
  }

  copiarTexto(texto);
}

function copiarTudo(){
  const texto = tudoCompleto();

  if(!texto.trim()){
    toast("Nada para copiar.");
    return;
  }

  copiarTexto(texto);
}

function baixarArquivo(texto, nome){
  const blob = new Blob([texto], {type:"text/plain;charset=utf-8"});
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");

  a.href = url;
  a.download = nome;
  a.click();

  URL.revokeObjectURL(url);
}

function nomeSeguro(nome){
  return nome
    .toLowerCase()
    .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "");
}

function baixarNarracao(){
  const ep = episodioAtual();
  const texto = narracaoCompleta();

  if(!ep || !texto.trim()){
    toast("Nada para baixar.");
    return;
  }

  baixarArquivo(texto, nomeSeguro(ep.titulo) + "_narracao.txt");
}

function baixarTudo(){
  const ep = episodioAtual();
  const texto = tudoCompleto();

  if(!ep || !texto.trim()){
    toast("Nada para baixar.");
    return;
  }

  baixarArquivo(texto, nomeSeguro(ep.titulo) + "_completo.txt");
}

function apagarTudo(){
  if(!confirm("Apagar todos os episódios?")) return;

  episodios = [];
  epAtual = 0;
  localStorage.removeItem("novelinha_episodios");
  localStorage.removeItem("novelinha_ep_atual");
  render();
  toast("Tudo apagado.");
}

function escapeHtml(text){
  return String(text).replace(/[&<>"']/g, m => ({
    "&":"&amp;",
    "<":"&lt;",
    ">":"&gt;",
    '"':"&quot;",
    "'":"&#039;"
  })[m]);
}

function render(){
  const listaEpisodios = document.getElementById("listaEpisodios");
  const listaCenas = document.getElementById("listaCenas");
  const epNome = document.getElementById("epAtualNome");
  const exportTitulo = document.getElementById("exportTitulo");
  const saida = document.getElementById("saidaNarracao");

  if(!episodios.length){
    listaEpisodios.innerHTML = "<p class='muted'>Nenhum episódio criado.</p>";
    listaCenas.innerHTML = "<p class='muted'>Crie um episódio antes de adicionar cenas.</p>";
    epNome.innerText = "Nenhum episódio selecionado.";
    exportTitulo.innerText = "Nenhum episódio selecionado.";
    saida.innerText = "";
    return;
  }

  const ep = episodioAtual();

  listaEpisodios.innerHTML = episodios.map((e, i) => `
    <div class="episode">
      <div class="episode-title">${i === epAtual ? "✅ " : ""}${i + 1}. ${escapeHtml(e.titulo)}</div>
      <small>${e.cenas.length} cena(s)</small>

      <div class="actions">
        <button class="secondary" onclick="selecionarEpisodio(${i})">Abrir</button>
        <button class="danger" onclick="apagarEpisodio(${i})">Apagar</button>
      </div>
    </div>
  `).join("");

  epNome.innerText = "Episódio atual: " + ep.titulo;
  exportTitulo.innerText = ep.titulo;

  if(!ep.cenas.length){
    listaCenas.innerHTML = "<p class='muted'>Este episódio ainda não tem cenas.</p>";
  }else{
    listaCenas.innerHTML = ep.cenas.map((c, i) => `
      <div class="scene">
        <div class="scene-title">${i + 1}. ${escapeHtml(c.tipo)}</div>
        <small>${c.tempo ? c.tempo + "s" : "sem tempo"} · ${contarPalavras(c.narracao)} palavras</small>

        <div class="scene-text">${escapeHtml(c.narracao)}</div>

        ${c.visual ? `<small>🎨 ${escapeHtml(c.visual)}</small>` : ""}

        <div class="actions">
          <button class="secondary" onclick="editarCena(${i})">Editar</button>
          <button class="secondary" onclick="subirCena(${i})">↑</button>
          <button class="secondary" onclick="descerCena(${i})">↓</button>
          <button class="danger" onclick="removerCena(${i})">Remover</button>
        </div>
      </div>
    `).join("");
  }

  saida.innerText = narracaoCompleta();
}

render();
atualizarContador();
</script>
</body>
</html>
"""

@app.route("/")
def home():
    return render_template_string(HTML)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=False)
