{label}

); } function RemixScreen({ uiLang, onSendToStudio }) { const T = TXT_REMIX[uiLang] || TXT_REMIX.vi; // input | analyzing | analyzed | rewriting | done | error const [phase, setPhase] = React.useState("input"); const [url, setUrl] = React.useState(""); const [langA, setLangA] = React.useState(uiLang === "vi" ? "Vietnamese" : "English"); const [langB, setLangB] = React.useState(uiLang === "vi" ? "English" : "Vietnamese"); const [instructions, setInstructions] = React.useState(""); const [analysis, setAnalysis] = React.useState(null); // {transcript, source_lang, explanation} const [script, setScript] = React.useState(""); const [error, setError] = React.useState(null); const wrap = { maxWidth: 880, margin: "0 auto", padding: "0 24px" }; const readDetail = async (res) => { let detail = `${res.status}`; try { const j = await res.json(); detail = j.detail || detail; } catch (e) {} if (res.status === 422) detail = T.noTranscript; return detail; }; // ── Step 1: analyze ──────────────────────────────────────────────────────── const analyze = async () => { if (!url.trim()) return; setError(null); setScript(""); setAnalysis(null); setPhase("analyzing"); try { const res = await fetch("/api/remix/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ youtube_url: url.trim(), language_a: langA }), }); if (!res.ok) throw new Error(await readDetail(res)); setAnalysis(await res.json()); setPhase("analyzed"); } catch (e) { setError(String(e.message || e)); setPhase("error"); } }; // ── Step 2: rewrite ──────────────────────────────────────────────────────── const rewrite = async () => { if (!analysis) return; setError(null); setPhase("rewriting"); try { const res = await fetch("/api/remix/rewrite", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ transcript: analysis.transcript, explanation: analysis.explanation, language_b: langB, instructions: instructions, }), }); if (!res.ok) throw new Error(await readDetail(res)); const data = await res.json(); setScript(data.script); setPhase("done"); } catch (e) { setError(String(e.message || e)); setPhase("error"); } }; const reset = () => { setPhase("input"); setUrl(""); setInstructions(""); setAnalysis(null); setScript(""); setError(null); }; // ── ANALYZING / REWRITING ────────────────────────────────────────────────── if (phase === "analyzing") return

; if (phase === "rewriting") return

; // ── ERROR ────────────────────────────────────────────────────────────────── if (phase === "error") { return (

⚠ {T.failed}

{error}

{analysis && }

); } // ── STEP 1: INPUT ────────────────────────────────────────────────────────── if (phase === "input") { return (

{T.title}

{T.subtitle}

setUrl(e.target.value)} placeholder={T.urlPlaceholder} style={rmxInput} onKeyDown={(e) => { if (e.key === "Enter") analyze(); }} />

); } // ── STEP 2 panel (reused by analyzed + done) ─────────────────────────────── const a = analysis || {}; const step2Panel = (

{T.step2Title}

setInstructions(e.target.value)}
          placeholder={T.instructionsPlaceholder}
          style={{ ...rmxInput, resize: "vertical", lineHeight: 1.5 }} />
      </RmxField>
      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 14 }}>
        <button onClick={rewrite} style={rmxBtn(true)}>
          {phase === "done" ? T.rewriteAgain : T.rewrite} →
        </button>
      </div>
    </section>
  );

const analysisCards = (
    <React.Fragment>
      <RmxResultCard title={`${T.explanation} (${langA})`} body={a.explanation} T={T} maxHeight={280} />
      <RmxResultCard
        title={a.source_lang ? `${T.transcript} · ${T.sourceLang}: ${a.source_lang}` : T.transcript}
        body={a.transcript} T={T} mono maxHeight={220} />
    </React.Fragment>
  );

// ── STEP 2: ANALYZED (ready to rewrite) ────────────────────────────────────
  if (phase === "analyzed") {
    return (
      <div style={wrap}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
          <h1 style={{ fontSize: 22, fontWeight: 700, color: "var(--fg-0)", margin: "8px 0 0" }}>✅ {T.explanation}</h1>
          <button onClick={reset} style={rmxBtn(false)}>{T.newJob}</button>
        </div>
        {step2Panel}
        {analysisCards}
        <div style={{ height: 40 }} />
      </div>
    );
  }

// ── DONE ───────────────────────────────────────────────────────────────────
  return (
    <div style={wrap}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, color: "var(--fg-0)", margin: "8px 0 0" }}>✅ {T.newScript}</h1>
        <button onClick={reset} style={rmxBtn(false)}>{T.newJob}</button>
      </div>

<RmxResultCard title={`${T.newScript} (${langB})`} body={script} T={T} accent maxHeight={360}
        extraActions={
          <button onClick={() => onSendToStudio && onSendToStudio(script, langB)}
            style={{ ...rmxBtn(true), padding: "5px 12px", fontSize: 12 }}>→ {T.sendToStudio}</button>
        } />

{step2Panel}
      {analysisCards}
      <div style={{ height: 40 }} />
    </div>
  );
}

{title}

{T.title}

{T.step2Title}