static/script-editor.js

// 💡 [수정] 프로그램 실행 시 기본으로 1단계가 존재하도록 초기값 설정
let currentScript = [{
    credit: "출처 입력\n@username",
    idiom: "✓ 핵심 표현",
    meaning: "; 뜻을 입력하세요",
    en: "",
    ko: "",
    pron: "",
    prompt_top: "stand-up comedian, highly detailed",
    prompt_bottom: "audience reacting, cinematic lighting"
  }];
  let assetStates = {};
  let currentPreviewTurn = 0;

// 🎨 숏폼 자막 타이포그래피 글로벌 설정 (별표 효과 포함)
let styleConfig = {
  english: {
    font: 'SUIT', size: 80, baseColor: '#FFFFFF', bgColor: '#000000', bgOpacity: 0.85,
    highlights: {
      1: { color: '#FFF200', desc: '주제(노랑)' },
      2: { color: '#00E5FF', desc: '패턴(시안)' },
      3: { color: '#FF3B30', desc: '주의(빨강)' },
      4: { color: '#4CD964', desc: '어휘(초록)' },
      5: { color: '#FF2D55', desc: '뉘앙스(핑크)' }
    }
  },
  korean: { font: 'SeoulNamsanM', size: 55, color: '#FFFFFF', outlineColor: '#000000', outlineWidth: 3 },
  pronunciation: { font: 'SchoolSafeDictation', size: 65, color: '#FF3B30', outlineColor: '#000000', outlineWidth: 2 }
};

// ✨ [엔진] 별표 개수 기반 멀티 스타일 자막 변환 함수
function parseAsteriskToHTML(text) {
  if (!text) return "";
  let html = text;
  html = html.replace(/\*{5}(.*?)\*{5}/g, `<span class="font-bold" style="color: ${styleConfig.english.highlights[5].color};">$1</span>`);
  html = html.replace(/\*{4}(.*?)\*{4}/g, `<span class="font-bold" style="color: ${styleConfig.english.highlights[4].color};">$1</span>`);
  html = html.replace(/\*{3}(.*?)\*{3}/g, `<span class="font-bold underline" style="color: ${styleConfig.english.highlights[3].color};">$1</span>`);
  html = html.replace(/\*{2}(.*?)\*{2}/g, `<span class="font-bold" style="color: ${styleConfig.english.highlights[2].color};">$1</span>`);
  html = html.replace(/\*(.*?)\*/g, `<span class="font-bold" style="color: ${styleConfig.english.highlights[1].color};">$1</span>`);
  return html;
}

// [패널 1] AI 대본 생성 엔진
async function generateScript() {
  const topic = document.getElementById('topicInput').value;
  if(!topic) { alert("주제를 입력해주세요."); return; }
  
  const btn = event.currentTarget;
  btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> 생성 중...';
  btn.disabled = true;

  try {
    const response = await fetch('/api/studio/generate-script', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ topic: topic })
    });

    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
    const data = await response.json();
    
    currentScript = data.dialogue.map((turn) => ({
      credit: turn.credit || "지미 카\n@jimmycarr",
      idiom: turn.idiom || "✓ 핵심 표현",
      meaning: turn.meaning || "; 뜻을 입력하세요",
      en: turn.en || "",
      ko: turn.ko || "",
      pron: turn.ko_pron || turn.pron || "",
      prompt_top: turn.image_prompt_top || turn.image_prompt || "stand-up comedian, highly detailed",
      prompt_bottom: turn.image_prompt_bottom || "audience reacting, cinematic lighting"
    }));
    
    renderScriptPanel();
    renderAssetPanel();
  } catch (error) {
    console.error("대본 생성 에러:", error);
    // 💡 [수정] AI 생성 실패 시(Mock 데이터) 기본 4단계 기획에 맞춰 출력
    currentScript = [
      {
        credit: "지미 카\n@jimmycarr", idiom: "✓ test the water(s)", meaning: "; 분위기를 살피다 / 반응을 떠보다",
        en: "I'll just, I'll *test the water* first.", ko: "그냥 분위기 한 번 볼게", pron: "아을저스, 아을테스더 워럴 퍼스더",
        prompt_top: "stand-up comedian holding a microphone", prompt_bottom: "crowd of people smiling"
      },
      {
        credit: "지미 카\n@jimmycarr", idiom: "✓ make a move", meaning: "; 행동을 취하다 / 다가가다",
        en: "Before I actually **make a move**, you know?", ko: "본격적으로 행동하기 전에 말이야.", pron: "비포 아이 액츄얼리 메이커 무브, 유 노?",
        prompt_top: "man looking thoughtful, cinematic lighting", prompt_bottom: "close up of a person's eyes"
      },
      {
        credit: "지미 카\n@jimmycarr", idiom: "✓ play it safe", meaning: "; 안전하게 가다 / 무리하지 않다",
        en: "It's always better to ***play it safe***.", ko: "언제나 안전하게 가는 게 낫지.", pron: "이츠 올웨이즈 베러 투 플레이 잇 세이프.",
        prompt_top: "a cautious person, dark background", prompt_bottom: "audience nodding in agreement"
      },
      {
        credit: "지미 카\n@jimmycarr", idiom: "✓ go all in", meaning: "; 올인하다 / 다 걸다",
        en: "Then I'll just ****go all in****.", ko: "그러고 나서 싹 다 걸어버릴 거야.", pron: "덴 아을저스 고 올 인.",
        prompt_top: "casino chips, aggressive lighting", prompt_bottom: "people cheering loudly"
      }
    ];
    renderScriptPanel();
    renderAssetPanel();
  } finally {
    btn.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> AI 생성';
    btn.disabled = false;
  }
}

// [패널 1] 대본 에디터 UI 렌더링
function renderScriptPanel() {
  const container = document.getElementById('scriptContainer');
  container.innerHTML = "";
  
  currentScript.forEach((turn, idx) => {
    // 💡 [수정] 카드 우측 상단에 X(삭제) 버튼 추가
    const html = `
      <div class="bg-neutral-800 rounded-xl p-4 border border-neutral-700 shadow-md relative space-y-3">
        <div class="absolute -left-2 -top-2 bg-neutral-700 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full font-mono font-bold shadow-md">${idx+1}</div>
        
        <button onclick="deleteScriptTurn(${idx})" class="absolute -right-2 -top-2 bg-neutral-900 border border-neutral-700 text-neutral-400 hover:bg-red-600 hover:text-white hover:border-red-500 w-6 h-6 flex items-center justify-center rounded-full transition-colors shadow-md text-[10px]" title="이 단계 삭제">
          <i class="fa-solid fa-xmark"></i>
        </button>
        
        <div class="grid grid-cols-2 gap-2 pt-1">
          <div>
            <label class="block text-[10px] text-gray-500 font-bold mb-1">🏷️ 상단 출처 표기 (Credit)</label>
            <textarea onchange="updateScriptData(${idx}, 'credit', this.value)" class="w-full bg-neutral-950 border border-neutral-700 rounded p-1.5 text-xs text-gray-300 font-mono h-12 leading-tight resize-none">${turn.credit}</textarea>
          </div>
          <div class="space-y-1.5">
            <div>
              <label class="block text-[10px] text-yellow-500 font-bold">⭐ 핵심 표현 (Idiom)</label>
              <input onchange="updateScriptData(${idx}, 'idiom', this.value)" type="text" class="w-full bg-neutral-950 border border-neutral-700 rounded px-2 py-1 text-xs text-white font-bold" value="${turn.idiom}">
            </div>
            <div>
              <label class="block text-[10px] text-neutral-400 font-bold">💬 표현 뜻 (Meaning)</label>
              <input onchange="updateScriptData(${idx}, 'meaning', this.value)" type="text" class="w-full bg-neutral-950 border border-neutral-700 rounded px-2 py-1 text-xs text-neutral-400" value="${turn.meaning}">
            </div>
          </div>
        </div>
        
        <div class="space-y-2 border-t border-neutral-700/60 pt-2">
          <div>
            <label class="block text-[10px] text-blue-400 font-bold mb-0.5">🇺🇸 영어 문장 (Sentence)</label>
            <textarea id="textarea_en_${idx}" onchange="updateScriptData(${idx}, 'en', this.value)" class="w-full bg-neutral-950 border border-neutral-700 rounded p-2 text-xs text-white resize-none font-medium" rows="2">${turn.en}</textarea>
          </div>
          <div>
            <label class="block text-[10px] text-emerald-400 font-bold mb-0.5">🇰🇷 한국어 해석 (Translation)</label>
            <input id="textarea_ko_${idx}" onchange="updateScriptData(${idx}, 'ko', this.value)" type="text" class="w-full bg-neutral-950 border border-neutral-700 rounded px-2 py-1.5 text-xs text-gray-300" value="${turn.ko}">
          </div>
          <div>
            <label class="block text-[10px] text-purple-400 font-bold mb-0.5">🗣️ 한글 발음 표기 (Pronunciation)</label>
            <input id="textarea_pron_${idx}" onchange="updateScriptData(${idx}, 'pron', this.value)" type="text" class="w-full bg-neutral-950 border border-neutral-700 rounded px-2 py-1.5 text-xs text-purple-300 font-mono" value="${turn.pron}">
          </div>
        </div>
      </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
  });
}

// 🗑️ [신규 추가] 수동으로 특정 단계(Turn) 삭제 함수
function deleteScriptTurn(idx) {
  if (currentScript.length <= 1) {
    alert("최소 1개의 단계는 유지해야 합니다.");
    return;
  }
  
  if (confirm(`정말로 ${idx + 1}단계를 삭제하시겠습니까?`)) {
    // 해당 인덱스의 대본 및 에셋 데이터 삭제
    currentScript.splice(idx, 1);
    
    // 에셋 데이터도 동기화하여 삭제하고 인덱스 재정렬
    const newAssetStates = {};
    currentScript.forEach((_, newIdx) => {
      newAssetStates[newIdx] = assetStates[newIdx >= idx ? newIdx + 1 : newIdx];
    });
    assetStates = newAssetStates;

    // 프리뷰 인덱스가 범위를 벗어나면 조정
    if (currentPreviewTurn >= currentScript.length) {
      currentPreviewTurn = Math.max(0, currentScript.length - 1);
    }
    
    localStorage.setItem('studio_current_script', JSON.stringify(currentScript));
    
    renderScriptPanel();
    renderAssetPanel();
    updatePreviewScreen();
  }
}

function updateScriptData(idx, field, value) {
  currentScript[idx][field] = value;
  localStorage.setItem('studio_current_script', JSON.stringify(currentScript));
  updatePreviewScreen();
}

// 💊 [패널 1] 수동으로 새로운 대본 단계(Turn) 추가 함수
function addScriptTurn() {
  // 1. 빈 데이터 배열에 밀어넣기
  currentScript.push({
    credit: "출처 입력\n@username",
    idiom: "✓ 핵심 표현",
    meaning: "; 뜻을 입력하세요",
    en: "",
    ko: "",
    pron: "",
    prompt_top: "stand-up comedian, highly detailed",
    prompt_bottom: "audience reacting, cinematic lighting"
  });
  
  // 2. 패널 다시 그리기 (1번, 2번 패널 동시 동기화)
  renderScriptPanel();
  renderAssetPanel();
  
  // 3. 사용자가 방금 추가한 맨 아래쪽으로 스크롤 부드럽게 이동
  setTimeout(() => {
    const container = document.getElementById('scriptContainer');
    if (container) {
      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
    }
  }, 50);
}

// 🎨 테마 프리셋 적용 함수
function applyThemePreset(theme) {
  if (theme === 'variety') {
    // 예능형: 강렬한 흰색 + 두꺼운 검은 테두리, 발음은 빨간색
    styleConfig.korean.color = '#FFFFFF';
    styleConfig.korean.outlineColor = '#000000';
    styleConfig.pronunciation.color = '#FF3B30';
    styleConfig.pronunciation.outlineColor = '#000000';
  } else if (theme === 'docu') {
    // 다큐형: 차분한 연회색 + 테두리 없음, 발음은 어두운 회색
    styleConfig.korean.color = '#E5E5E5';
    styleConfig.korean.outlineColor = 'transparent';
    styleConfig.pronunciation.color = '#A3A3A3';
    styleConfig.pronunciation.outlineColor = 'transparent';
  } else if (theme === 'trendy') {
    // 트렌디팝: 네온 느낌의 시안색 + 어두운 보라색 테두리
    styleConfig.korean.color = '#00E5FF';
    styleConfig.korean.outlineColor = '#1A0B2E';
    styleConfig.pronunciation.color = '#FF2D55';
    styleConfig.pronunciation.outlineColor = '#1A0B2E';
  }
  
  // 변경된 설정을 미리보기 화면에 즉시 렌더링
  updatePreviewScreen();
}