// ============================================================ // REDZ ENGINE — Frontend (app.jsx) // Single-file React app. Loaded by index.html via Babel. // All 8 screens. Talks to the Node/Express API at /api. // ============================================================ const { useState, useEffect, useRef, useCallback } = React; // ─── API helper ───────────────────────────────────────────── const API = '/api'; async function api(path, opts = {}) { const res = await fetch(API + path, { headers: { 'Content-Type': 'application/json' }, ...opts, body: opts.body ? JSON.stringify(opts.body) : undefined, }); if (!res.ok) { let msg = 'Request failed'; try { msg = (await res.json()).error || msg; } catch (e) {} throw new Error(msg); } return res.json(); } // ─── Constants ────────────────────────────────────────────── const STAGES = [ { id: 'idea', label: 'Idea' }, { id: 'sourcing', label: 'Sourcing' }, { id: 'cutting', label: 'Cutting' }, { id: 'episode1', label: 'Episode 1 Engineering' }, { id: 'thumbnail', label: 'Thumbnail' }, { id: 'qc', label: 'QC' }, { id: 'ready', label: 'Ready' }, { id: 'published', label: 'Published' }, ]; const TRACKS = { A: { label: 'A · Repurposed', color: '#E63946' }, B: { label: 'B · Voiceover', color: '#F3C70D' }, C: { label: 'C · Comedy/Pod', color: '#4A9EFF' }, D: { label: 'D · AI Series', color: '#9B59B6' }, }; const QC_ITEMS = [ 'Episode 1 opens with a strong hook (first 3 seconds)', 'Episode 1 ends with an open loop / cliffhanger', 'Thumbnail is high-contrast and readable', 'Arabic text uses سيريز (not سلاسل)', 'Minimum 3 episodes ready', 'Correct account assigned', ]; // ─── Toast ────────────────────────────────────────────────── let toastFn = null; function Toast() { const [msg, setMsg] = useState(null); useEffect(() => { toastFn = (m) => { setMsg(m); setTimeout(() => setMsg(null), 2600); }; }, []); if (!msg) return null; return

{msg}

; } function toast(m) { if (toastFn) toastFn(m); } // ─── Small UI helpers ─────────────────────────────────────── function Spinner() { return

; } function Badge({ children, color }) { return {children}; } function TrackBadge({ track }) { const t = TRACKS[track] || TRACKS.A; return {track}; } function categoryColor(cats, name) { const c = cats.find(x => x.name === name); return c ? c.color : '#8888A8'; } function daysInStage(enteredAt) { if (!enteredAt) return 0; const ms = Date.now() - new Date(enteredAt.replace(' ', 'T') + 'Z').getTime(); return Math.floor(ms / 86400000); } // ════════════════════════════════════════════════════════════ // APP SHELL // ════════════════════════════════════════════════════════════ function App() { const [screen, setScreen] = useState('dashboard'); const [settings, setSettings] = useState({}); const [categories, setCategories] = useState([]); const [dailyCount, setDailyCount] = useState(0); const loadMeta = useCallback(async () => { try { const s = await api('/settings'); setSettings(s); setCategories(JSON.parse(s.categories || '[]')); const dash = await api('/dashboard'); setDailyCount(dash.seriesToday); } catch (e) { console.error(e); } }, []); useEffect(() => { loadMeta(); }, [loadMeta]); const nav = [ { id: 'dashboard', icon: '📊', label: 'Dashboard' }, { id: 'pipeline', icon: '🎬', label: 'Production Pipeline' }, { id: 'accounts', icon: '📱', label: 'Accounts' }, { id: 'research', icon: '🔍', label: 'Research & Ideas' }, { id: 'aistudio', icon: '✍️', label: 'AI Studio' }, { id: 'qc', icon: '✅', label: 'Quality Control' }, { id: 'performance', icon: '📈', label: 'Performance' }, { id: 'video', icon: '✂️', label: 'Video Splitter' }, { id: 'settings', icon: '⚙️', label: 'Settings' }, ]; const titles = { dashboard: 'Dashboard', pipeline: 'Production Pipeline', accounts: 'Accounts', research: 'Research & Ideas', aistudio: 'AI Studio', qc: 'Quality Control', performance: 'Performance', video: 'Video Splitter', settings: 'Settings', }; const screenProps = { settings, categories, reloadMeta: loadMeta }; return (

{titles[screen]}

Today: {dailyCount} / {settings.daily_target || 35} Series

{screen === 'dashboard' && } {screen === 'pipeline' && } {screen === 'accounts' && } {screen === 'research' && } {screen === 'aistudio' && } {screen === 'qc' && } {screen === 'performance' && } {screen === 'video' && } {screen === 'settings' && }

); } // ════════════════════════════════════════════════════════════ // SCREEN 1 — DASHBOARD // ════════════════════════════════════════════════════════════ function Dashboard({ categories, settings, go }) { const [data, setData] = useState(null); const [activity, setActivity] = useState([]); const load = useCallback(async () => { try { setData(await api('/dashboard')); setActivity(await api('/activity')); } catch (e) { toast(e.message); } }, []); useEffect(() => { load(); }, [load]); if (!data) return ; const target = data.dailyTarget || 35; const pct = Math.min(100, Math.round((data.seriesToday / target) * 100)); return (

{/* Top stats */}

Series Today

{data.seriesToday} / {target}

Episodes Today

{data.episodesToday}

~3 per series

In QC

{data.inQc}

awaiting review

Published Today

{data.publishedToday}

live on Redz

{/* Track + Category */}

Production by Track

{Object.keys(TRACKS).map(t => { const count = data.byTrack[t] || 0; const totalT = Object.values(data.byTrack).reduce((a, b) => a + b, 0) || 1; return (

{TRACKS[t].label} {count}

); })}

Production by Category (Today)

{data.byCategory.map(c => (

{c.name} {c.count} / {c.daily_target}

))}

{/* Attention + Wins */}

⚠ Needs Attention

{data.needsAttention.length === 0 &&

Nothing stuck. Everything flowing.

} {data.needsAttention.map(s => (

{s.title} {s.flagged == 1 ? 'flagged' : daysInStage(s.stage_entered_at) + 'd in ' + s.stage}

))}

🏆 Today's Wins

{data.wins.length === 0 &&

No winners logged yet. Track performance to surface them.

} {data.wins.map((w, i) => (

{w.title} {Number(w.ep1_views).toLocaleString()} views

))}

{/* Activity */}

Recent Activity

{activity.map(a => (

{a.message} {a.created_at?.split(' ')[1]?.slice(0, 5)}

))}

); } // ════════════════════════════════════════════════════════════ // SCREEN 2 — PRODUCTION PIPELINE (Kanban) // ════════════════════════════════════════════════════════════ function Pipeline({ categories, onChange }) { const [series, setSeries] = useState([]); const [accounts, setAccounts] = useState([]); const [filters, setFilters] = useState({ category: '', track: '', account_id: '' }); const [detail, setDetail] = useState(null); const [showNew, setShowNew] = useState(false); const dragId = useRef(null); const load = useCallback(async () => { const q = new URLSearchParams(); Object.entries(filters).forEach(([k, v]) => { if (v) q.append(k, v); }); setSeries(await api('/series?' + q.toString())); setAccounts(await api('/accounts')); }, [filters]); useEffect(() => { load(); }, [load]); async function moveStage(id, stage) { try { await api(`/series/${id}/stage`, { method: 'PATCH', body: { stage } }); load(); onChange && onChange(); } catch (e) { toast(e.message); } } function onDrop(stage) { if (dragId.current) { moveStage(dragId.current, stage); dragId.current = null; } } return (

{/* Filters */}

{/* Kanban */}

{STAGES.map(stage => { const items = series.filter(s => s.stage === stage.id); return (

e.preventDefault()} onDrop={() => onDrop(stage.id)}>

{stage.label}

{items.length}

{items.map(s => (

{ dragId.current = s.id; }} onClick={() => setDetail(s)}>

{s.title}

{s.category}

{s.account_name || 'No account'} 2 ? 'stuck' : ''}> {s.episode_count || 0} ep · {daysInStage(s.stage_entered_at)}d

))} {items.length === 0 &&

—

}

); })}

{detail && setDetail(null)} onSaved={() => { setDetail(null); load(); onChange && onChange(); }} />} {showNew && setShowNew(false)} onCreated={() => { setShowNew(false); load(); onChange && onChange(); }} />}

); } function NewSeriesModal({ accounts, categories, onClose, onCreated }) { const [f, setF] = useState({ title: '', category: categories[0]?.name || '', track: 'A', account_id: '', source_link: '', description: '' }); const [saving, setSaving] = useState(false); async function save() { if (!f.title) return toast('Title required'); setSaving(true); try { await api('/series', { method: 'POST', body: { ...f, account_id: f.account_id || null } }); toast('Series created'); onCreated(); } catch (e) { toast(e.message); setSaving(false); } } return (

e.stopPropagation()}>

New Series

Title setF({ ...f, title: e.target.value })} placeholder="Series title…" />

Category

Track

Target Account

Source Link setF({ ...f, source_link: e.target.value })} placeholder="TikTok / YouTube URL…" />

Description

setF({ ...f, description: e.target.value })} /></div>
        </div>
        <div className="modal-foot">
          <button className="btn-ghost btn" onClick={onClose}>Cancel</button>
          <button className="btn" onClick={save} disabled={saving}>{saving ? 'Creating…' : 'Create Series'}</button>
        </div>
      </div>
    </div>
  );
}

return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-lg" onClick={e => e.stopPropagation()}>
        <div className="modal-head"><h2>{s.title}</h2><button className="close-btn" onClick={onClose}>×</button></div>
        <div className="modal-body">
          <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
            <Badge color={categoryColor(categories, s.category)}>{s.category}</Badge>
            <TrackBadge track={s.track} />
            <Badge color="#4A9EFF">{STAGES[curIdx]?.label}</Badge>
          </div>

<div className="field-row">
            <div className="field"><label>Title</label><input value={s.title} onChange={e => setField('title', e.target.value)} /></div>
            <div className="field"><label>Assigned Editor</label><input value={s.assigned_editor || ''} onChange={e => setField('assigned_editor', e.target.value)} /></div>
          </div>
          <div className="field-row">
            <div className="field"><label>Account</label>
              <select value={s.account_id || ''} onChange={e => setField('account_id', e.target.value || null)}>
                <option value="">— none —</option>
                {accounts.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
              </select>
            </div>
            <div className="field"><label>Episodes</label><input type="number" value={s.episode_count || 0} onChange={e => setField('episode_count', parseInt(e.target.value) || 0)} /></div>
          </div>
          <div className="field"><label>Source Link</label><input value={s.source_link || ''} onChange={e => setField('source_link', e.target.value)} /></div>

<div className="field">
            <label>Episode 1 Hook Notes (the trailer formula)</label>
            <textarea value={s.episode1_hook || ''} onChange={e => setField('episode1_hook', e.target.value)}
              placeholder="0-3s: shocking moment… / 3-20s: the promise… / last 5s: open loop…" />
          </div>
          <div className="field"><label>Notes</label><textarea value={s.notes || ''} onChange={e => setField('notes', e.target.value)} /></div>

<div className="field">
            <label>QC Checklist</label>
            {QC_ITEMS.map((item, i) => (
              <div className="check-row" key={i} style={{ direction: 'ltr' }}>
                <input type="checkbox" checked={!!checklist[i]} onChange={() => toggleCheck(i)} />
                <label style={{ direction: 'ltr', textAlign: 'left' }}>{item}</label>
              </div>
            ))}
          </div>

<div className="field">
            <label>Move to Stage</label>
            <select value={s.stage} onChange={e => setField('stage', e.target.value)}>
              {STAGES.map(st => <option key={st.id} value={st.id}>{st.label}</option>)}
            </select>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn-danger btn" onClick={del}>Delete</button>
          <button className="btn-ghost btn" onClick={onClose}>Close</button>
          <button className="btn" onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 3 — ACCOUNTS
// ════════════════════════════════════════════════════════════
function Accounts({ categories }) {
  const [accounts, setAccounts] = useState([]);
  const [showNew, setShowNew] = useState(false);
  const [detail, setDetail] = useState(null);

const load = useCallback(async () => setAccounts(await api('/accounts')), []);
  useEffect(() => { load(); }, [load]);

return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
        <button className="btn" onClick={() => setShowNew(true)}>+ Add Account</button>
      </div>
      <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
        {accounts.map(a => (
          <div key={a.id} className="acct-card" onClick={() => setDetail(a)}>
            <div className="acct-top">
              <div className="acct-pfp" style={{ background: a.pfp_color || '#E63946' }}>{a.name?.[0]}</div>
              <div style={{ flex: 1 }}>
                <div className="acct-name">{a.name}</div>
                <div className="acct-user">@{a.username}</div>
              </div>
              <Badge color={a.status === 'active' ? '#2ECC71' : '#8888A8'}>{a.status}</Badge>
            </div>
            <div className="acct-bio">{a.bio}</div>
            <div className="acct-stats">
              <div className="acct-stat"><b>{a.published_count}</b>Published</div>
              <div className="acct-stat"><b>{a.pipeline_count}</b>In Pipeline</div>
              <div className="acct-stat" style={{ marginLeft: 'auto', textAlign: 'right' }}><span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{a.category}</span></div>
            </div>
          </div>
        ))}
      </div>
      {showNew && <AccountModal categories={categories} onClose={() => setShowNew(false)} onSaved={() => { setShowNew(false); load(); }} />}
      {detail && <AccountModal account={detail} categories={categories} onClose={() => setDetail(null)} onSaved={() => { setDetail(null); load(); }} />}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 4 — RESEARCH & IDEAS
// ════════════════════════════════════════════════════════════
function Research({ categories, onChange }) {
  const [ideas, setIdeas] = useState([]);
  const [accounts, setAccounts] = useState([]);
  const [showNew, setShowNew] = useState(false);
  const [bulk, setBulk] = useState('');

const load = useCallback(async () => {
    setIdeas(await api('/ideas'));
    setAccounts(await api('/accounts'));
  }, []);
  useEffect(() => { load(); }, [load]);

async function approve(id) {
    try { await api(`/ideas/${id}/approve`, { method: 'POST' }); toast('Approved → Pipeline'); load(); onChange && onChange(); }
    catch (e) { toast(e.message); }
  }
  async function reject(id) {
    await api(`/ideas/${id}`, { method: 'DELETE' }); load();
  }
  async function update(id, field, value) {
    await api(`/ideas/${id}`, { method: 'PUT', body: { [field]: value } });
    setIdeas(ideas.map(i => i.id === id ? { ...i, [field]: value } : i));
  }
  async function submitBulk() {
    const links = bulk.split('\n').map(l => l.trim()).filter(Boolean);
    if (!links.length) return;
    await api('/ideas/bulk', { method: 'POST', body: { links } });
    setBulk(''); toast(links.length + ' ideas added'); load();
  }

const RESEARCH_SOURCES = [
    'TikTok Creative Center — trending videos',
    'YouTube Trending — Arabic content',
    'Instagram Reels — niche hashtags',
    'Twitter/X — viral moments by region',
  ];

return (
    <div>
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">Daily Research Checklist</div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(2,1fr)' }}>
          {RESEARCH_SOURCES.map((src, i) => (
            <label key={i} className="check-row" style={{ direction: 'ltr', borderBottom: 'none' }}>
              <input type="checkbox" /><span style={{ fontSize: 13 }}>{src}</span>
            </label>
          ))}
        </div>
      </div>

<div className="grid" style={{ gridTemplateColumns: '1fr 1fr', marginBottom: 18 }}>
        <div className="card">
          <div className="section-title">Quick Add Idea</div>
          <button className="btn" style={{ width: '100%' }} onClick={() => setShowNew(true)}>+ Add Single Idea</button>
        </div>
        <div className="card">
          <div className="section-title">Bulk Paste Links</div>
          <textarea value={bulk} onChange={e => setBulk(e.target.value)} placeholder="Paste one URL per line…" style={{ minHeight: 70 }} />
          <button className="btn" style={{ marginTop: 10 }} onClick={submitBulk}>Add All</button>
        </div>
      </div>

<div className="card">
        <div className="section-title">Ideas Inbox ({ideas.length})</div>
        {ideas.length === 0 && <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>No ideas yet. Add some from your research.</p>}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {ideas.map(idea => (
            <div key={idea.id} className="idea-row">
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>{idea.title || 'Untitled idea'}</div>
                {idea.source_link && <a href={idea.source_link} target="_blank" className="idea-link">{idea.source_link}</a>}
                <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                  {idea.views && <span className="mini-tag">👁 {idea.views}</span>}
                  <select className="mini-select" value={idea.suggested_category || ''} onChange={e => update(idea.id, 'suggested_category', e.target.value)}>
                    <option value="">category…</option>
                    {categories.map(c => <option key={c.name} value={c.name}>{c.name}</option>)}
                  </select>
                  <select className="mini-select" value={idea.suggested_track || ''} onChange={e => update(idea.id, 'suggested_track', e.target.value)}>
                    <option value="">track…</option>
                    {Object.keys(TRACKS).map(t => <option key={t} value={t}>Track {t}</option>)}
                  </select>
                  <span className="mini-tag">Score
                    <input type="number" min="1" max="10" value={idea.ai_score || ''} onChange={e => update(idea.id, 'ai_score', e.target.value)}
                      style={{ width: 38, marginLeft: 5, padding: '2px 4px', height: 'auto', fontSize: 11 }} />
                  </span>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <button className="btn btn-sm" onClick={() => approve(idea.id)}>Approve →</button>
                <button className="btn-ghost btn btn-sm" onClick={() => reject(idea.id)}>Reject</button>
              </div>
            </div>
          ))}
        </div>
      </div>

{showNew && <IdeaModal categories={categories} accounts={accounts} onClose={() => setShowNew(false)} onSaved={() => { setShowNew(false); load(); }} />}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 5 — AI STUDIO
// ════════════════════════════════════════════════════════════
function AIStudio({ categories }) {
  const [tab, setTab] = useState('script');
  const tabs = [
    { id: 'script', label: '📝 Script Generator' },
    { id: 'thumbnail', label: '🖼️ Thumbnail Prompt' },
    { id: 'caption', label: '💬 Caption & Title' },
  ];
  return (
    <div>
      <div className="tabs">
        {tabs.map(t => <button key={t.id} className={'tab' + (tab === t.id ? ' active' : '')} onClick={() => setTab(t.id)}>{t.label}</button>)}
      </div>
      {tab === 'script' && <AITool
        title="Script Generator"
        hint="Generates a 3-episode Arabic voiceover script with the Episode 1 trailer formula built in. Best for Track B."
        endpoint="/ai/script" categories={categories}
        fields={[{ k: 'topic', label: 'Topic / Story Idea', type: 'textarea' }, { k: 'category', label: 'Category', type: 'category' }]}
        rtl />}
      {tab === 'thumbnail' && <AITool
        title="Thumbnail Prompt Generator"
        hint="Generates a detailed image prompt to paste into ChatGPT / DALL-E. Strong expression, max 5 Arabic words, high contrast."
        endpoint="/ai/thumbnail-prompt" categories={categories}
        fields={[{ k: 'title', label: 'Series Title' }, { k: 'moment', label: 'Key Visual Moment / Emotion' }, { k: 'category', label: 'Category', type: 'category' }]} />}
      {tab === 'caption' && <AITool
        title="Caption & Title Generator"
        hint="Generates a Series title + posting caption in pan-Arab Arabic using سيريز, with a unique CTA."
        endpoint="/ai/caption" categories={categories}
        fields={[{ k: 'title', label: 'Series Title' }, { k: 'platform', label: 'Platform', type: 'platform' }]}
        rtl />}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 6 — QUALITY CONTROL
// ════════════════════════════════════════════════════════════
function QualityControl({ categories, onChange }) {
  const [items, setItems] = useState([]);
  const load = useCallback(async () => setItems(await api('/series?stage=qc')), []);
  useEffect(() => { load(); }, [load]);

return (
    <div>
      <div className="qc-header">
        <h2>{items.length} Series Awaiting QC</h2>
        <p>Two non-negotiables: strong hook in first 3 seconds, open loop at the end.</p>
      </div>
      {items.length === 0 && <div className="card"><p style={{ fontSize: 13, color: 'var(--text-muted)', textAlign: 'center', padding: 20 }}>QC queue is clear. 🎉</p></div>}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {items.map(s => <QCCard key={s.id} series={s} categories={categories} onDone={() => { load(); onChange && onChange(); }} />)}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 7 — PERFORMANCE
// ════════════════════════════════════════════════════════════
function Performance({ categories, settings }) {
  const [data, setData] = useState(null);
  const [entry, setEntry] = useState({ series_id: '', ep1_views: '', completion_rate: '', join_rate: '', comments: '' });
  const [publishedSeries, setPublishedSeries] = useState([]);

const load = useCallback(async () => {
    setData(await api('/performance'));
    setPublishedSeries(await api('/series?stage=published'));
  }, []);
  useEffect(() => { load(); }, [load]);

async function submit() {
    if (!entry.series_id) return toast('Pick a series');
    await api('/performance', { method: 'POST', body: entry });
    toast('Performance recorded'); setEntry({ series_id: '', ep1_views: '', completion_rate: '', join_rate: '', comments: '' });
    load();
  }
  async function briefMore(seriesId, title, category, track) {
    await api(`/performance/${seriesId}/amplify`, { method: 'POST', body: { title, category, track } });
    toast('5 new ideas added to research inbox'); 
  }

if (!data) return <Spinner />;
  const threshold = parseInt(settings.performance_threshold) || 10000;

return (
    <div>
      {/* Entry form */}
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">Record Performance (manual entry)</div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div className="field" style={{ flex: 2, minWidth: 200, marginBottom: 0 }}>
            <label>Series</label>
            <select value={entry.series_id} onChange={e => setEntry({ ...entry, series_id: e.target.value })}>
              <option value="">— pick published series —</option>
              {publishedSeries.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
            </select>
          </div>
          <div className="field" style={{ flex: 1, minWidth: 110, marginBottom: 0 }}><label>Ep1 Views</label><input type="number" value={entry.ep1_views} onChange={e => setEntry({ ...entry, ep1_views: e.target.value })} /></div>
          <div className="field" style={{ flex: 1, minWidth: 100, marginBottom: 0 }}><label>Completion %</label><input type="number" value={entry.completion_rate} onChange={e => setEntry({ ...entry, completion_rate: e.target.value })} /></div>
          <div className="field" style={{ flex: 1, minWidth: 90, marginBottom: 0 }}><label>Joins</label><input type="number" value={entry.join_rate} onChange={e => setEntry({ ...entry, join_rate: e.target.value })} /></div>
          <div className="field" style={{ flex: 1, minWidth: 90, marginBottom: 0 }}><label>Comments</label><input type="number" value={entry.comments} onChange={e => setEntry({ ...entry, comments: e.target.value })} /></div>
          <button className="btn" onClick={submit}>Record</button>
        </div>
        <p style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 10 }}>Winner threshold: {threshold.toLocaleString()} Ep1 views (change in Settings)</p>
      </div>

{/* Winners + Underperformers */}
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', marginBottom: 18 }}>
        <div className="card">
          <div className="section-title" style={{ color: 'var(--green)' }}>🏆 Winners</div>
          {data.winners.length === 0 && <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>No winners yet.</p>}
          {data.winners.map(w => (
            <div key={w.id} className="perf-row">
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{w.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--green)' }}>{Number(w.ep1_views).toLocaleString()} views · {w.category}</div>
              </div>
              <button className="btn btn-sm" onClick={() => briefMore(w.series_id, w.title, w.category, w.track)}>Brief 5 More →</button>
            </div>
          ))}
        </div>
        <div className="card">
          <div className="section-title" style={{ color: 'var(--primary)' }}>📉 Underperformers</div>
          {data.underperformers.length === 0 && <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>None flagged.</p>}
          {data.underperformers.map(u => (
            <div key={u.id} className="perf-row">
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{u.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{Number(u.ep1_views).toLocaleString()} views · {u.category}</div>
              </div>
              <span className="stuck">avoid format</span>
            </div>
          ))}
        </div>
      </div>

{/* Breakdown */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
        <div className="card">
          <div className="section-title">By Category</div>
          {data.byCategory.map(c => (
            <div key={c.category} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 12.5 }}>
              <span>{c.category}</span><b style={{ color: 'var(--green)' }}>{c.wins} wins</b>
            </div>
          ))}
          {data.byCategory.length === 0 && <p style={{ fontSize: 12, color: 'var(--text-muted)' }}>No data.</p>}
        </div>
        <div className="card">
          <div className="section-title">By Account</div>
          {data.byAccount.map(a => (
            <div key={a.name} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 12.5 }}>
              <span>{a.name}</span><b>{Number(a.total_views).toLocaleString()}</b>
            </div>
          ))}
          {data.byAccount.length === 0 && <p style={{ fontSize: 12, color: 'var(--text-muted)' }}>No data.</p>}
        </div>
        <div className="card">
          <div className="section-title">By Track</div>
          {data.byTrack.map(t => (
            <div key={t.track} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 12.5 }}>
              <span><TrackBadge track={t.track} /></span><b>{t.wins} wins</b>
            </div>
          ))}
          {data.byTrack.length === 0 && <p style={{ fontSize: 12, color: 'var(--text-muted)' }}>No data.</p>}
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 8 — VIDEO SPLITTER
// ════════════════════════════════════════════════════════════
function VideoSplitter() {
  const [job, setJob] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [mode, setMode] = useState('custom');
  const [segSeconds, setSegSeconds] = useState(60);
  const [timestamps, setTimestamps] = useState('');
  const [parts, setParts] = useState(null);
  const [processing, setProcessing] = useState(false);
  const fileRef = useRef();

async function upload(file) {
    if (!file) return;
    setUploading(true); setParts(null);
    const fd = new FormData();
    fd.append('video', file);
    try {
      const res = await fetch(API + '/video/upload', { method: 'POST', body: fd });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setJob(data); toast('Uploaded: ' + data.duration_formatted);
    } catch (e) { toast(e.message); }
    setUploading(false);
  }

async function split() {
    if (!job) return;
    setProcessing(true); setParts(null);
    try {
      let r;
      if (mode === 'equal') {
        r = await api('/video/split-equal', { method: 'POST', body: { job_id: job.id, segment_seconds: parseInt(segSeconds) } });
      } else {
        const ts = timestamps.split('\n').map(t => t.trim()).filter(Boolean);
        r = await api('/video/split-custom', { method: 'POST', body: { job_id: job.id, timestamps: ts } });
      }
      setParts(r.outputs.map(o => ({ ...o, job_id: job.id }))); toast(r.parts + ' parts created');
    } catch (e) { toast(e.message); }
    setProcessing(false);
  }

return (
    <div>
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">Upload Long Video</div>
        <p style={{ fontSize: 12.5, color: 'var(--text-dim)', marginBottom: 14 }}>
          Splits a long video into Part_01, Part_02, Part_03… in order. Nothing is deleted. Lossless and fast.
          Use <b>Custom Timestamps</b> for videos that are already parts joined together — cut at the natural seams.
        </p>
        <div className="dz" onClick={() => fileRef.current.click()}>
          <input ref={fileRef} type="file" accept="video/*" style={{ display: 'none' }} onChange={e => upload(e.target.files[0])} />
          {uploading ? <Spinner /> : job ? (
            <div><div style={{ fontSize: 28, marginBottom: 8 }}>🎬</div><b>{job.filename}</b><div style={{ color: 'var(--text-dim)', fontSize: 13, marginTop: 4 }}>Duration: {job.duration_formatted} — click to replace</div></div>
          ) : (
            <div><div style={{ fontSize: 28, marginBottom: 8 }}>⬆️</div><b>Click to upload a video</b><div style={{ color: 'var(--text-muted)', fontSize: 12, marginTop: 4 }}>MP4, MOV, etc.</div></div>
          )}
        </div>
      </div>

{job && (
        <div className="card" style={{ marginBottom: 18 }}>
          <div className="section-title">Split Settings</div>
          <div className="tabs" style={{ marginBottom: 16 }}>
            <button className={'tab' + (mode === 'custom' ? ' active' : '')} onClick={() => setMode('custom')}>Custom Timestamps</button>
            <button className={'tab' + (mode === 'equal' ? ' active' : '')} onClick={() => setMode('equal')}>Equal Duration</button>
          </div>
          {mode === 'equal' ? (
            <div className="field">
              <label>Seconds per part</label>
              <input type="number" value={segSeconds} onChange={e => setSegSeconds(e.target.value)} />
              <p style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 6 }}>Note: lossless cuts land on the nearest keyframe, so equal parts are approximate. For exact seams use Custom Timestamps.</p>
            </div>
          ) : (
            <div className="field">
              <label>Cut points (one timestamp per line, HH:MM:SS)</label>
              <textarea value={timestamps} onChange={e => setTimestamps(e.target.value)} placeholder={"00:10:30\n00:21:45\n00:33:10"} style={{ minHeight: 120, fontFamily: 'monospace' }} />
              <p style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 6 }}>Each timestamp is where a new part begins. 2 timestamps = 3 parts.</p>
            </div>
          )}
          <button className="btn" onClick={split} disabled={processing}>{processing ? 'Splitting…' : '✂️ Split Video'}</button>
          {processing && <Spinner />}
        </div>
      )}

{parts && (
        <div className="card">
          <div className="section-title" style={{ color: 'var(--green)' }}>✓ {parts.length} Parts Created</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {parts.map(p => (
              <div key={p.part} className="perf-row">
                <div style={{ flex: 1 }}>
                  <b>{p.filename}</b>
                  <span style={{ color: 'var(--text-dim)', fontSize: 12, marginLeft: 10 }}>{p.start} → {p.end}</span>
                </div>
                <a className="btn btn-sm" href={'/api/video/download/' + p.job_id + '/' + p.filename} download>⬇ Download</a>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 12 }}>Files are saved on the server under outputs/{parts[0]?.job_id}/. Remember: original Part 1 may be a slow intro — consider moving a gripping later moment to the front of Episode 1 as the hook.</p>
        </div>
      )}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SCREEN 9 — SETTINGS
// ════════════════════════════════════════════════════════════
function Settings({ onSaved }) {
  const [s, setS] = useState(null);
  const [cats, setCats] = useState([]);
  const [team, setTeam] = useState([]);
  const [saving, setSaving] = useState(false);

const load = useCallback(async () => {
    const data = await api('/settings');
    setS(data); setCats(JSON.parse(data.categories || '[]'));
    setTeam(await api('/team'));
  }, []);
  useEffect(() => { load(); }, [load]);

if (!s) return <Spinner />;

async function save() {
    setSaving(true);
    try {
      await api('/settings', { method: 'PUT', body: { ...s, categories: JSON.stringify(cats) } });
      toast('Settings saved'); onSaved && onSaved();
    } catch (e) { toast(e.message); }
    setSaving(false);
  }
  function updateCat(i, field, val) { const c = [...cats]; c[i] = { ...c[i], [field]: val }; setCats(c); }
  async function addTeam() {
    const t = await api('/team', { method: 'POST', body: { name: 'New Member', role: 'editor' } });
    setTeam([...team, t]);
  }
  async function updateTeam(id, field, val) {
    await api('/team/' + id, { method: 'PUT', body: { [field]: val } });
    setTeam(team.map(t => t.id === id ? { ...t, [field]: val } : t));
  }
  async function delTeam(id) { await api('/team/' + id, { method: 'DELETE' }); setTeam(team.filter(t => t.id !== id)); }

return (
    <div>
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">General</div>
        <div className="field-row">
          <div className="field"><label>Daily Series Target</label><input type="number" value={s.daily_target} onChange={e => setS({ ...s, daily_target: e.target.value })} /></div>
          <div className="field"><label>Performance Threshold (Ep1 views = winner)</label><input type="number" value={s.performance_threshold} onChange={e => setS({ ...s, performance_threshold: e.target.value })} /></div>
        </div>
        <div className="field-row">
          <div className="field"><label>Track A %</label><input type="number" value={s.track_a_target} onChange={e => setS({ ...s, track_a_target: e.target.value })} /></div>
          <div className="field"><label>Track B %</label><input type="number" value={s.track_b_target} onChange={e => setS({ ...s, track_b_target: e.target.value })} /></div>
          <div className="field"><label>Track C %</label><input type="number" value={s.track_c_target} onChange={e => setS({ ...s, track_c_target: e.target.value })} /></div>
          <div className="field"><label>Track D %</label><input type="number" value={s.track_d_target} onChange={e => setS({ ...s, track_d_target: e.target.value })} /></div>
        </div>
      </div>

<div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">Anthropic API Key (for AI Studio)</div>
        <p style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 10 }}>Used for script, thumbnail-prompt, and caption generation. Stored server-side.</p>
        <input type="password" value={s.anthropic_api_key} onChange={e => setS({ ...s, anthropic_api_key: e.target.value })} placeholder="sk-ant-…" />
      </div>

<div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title">15 Categories & Daily Targets</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {cats.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg)', padding: '8px 10px', borderRadius: 8 }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color, flexShrink: 0 }} />
              <span style={{ flex: 1, fontSize: 12 }}>{c.name}</span>
              <input type="number" value={c.daily_target} onChange={e => updateCat(i, 'daily_target', parseInt(e.target.value) || 0)} style={{ width: 50, padding: '4px 6px', height: 'auto', fontSize: 12 }} />
            </div>
          ))}
        </div>
      </div>

<div className="card" style={{ marginBottom: 18 }}>
        <div className="section-title" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>Team Members</span>
          <button className="btn btn-sm" onClick={addTeam}>+ Add</button>
        </div>
        {team.map(t => (
          <div key={t.id} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border)' }}>
            <input value={t.name} onChange={e => updateTeam(t.id, 'name', e.target.value)} style={{ flex: 1 }} />
            <select value={t.role} onChange={e => updateTeam(t.id, 'role', e.target.value)} style={{ width: 160 }}>
              <option value="ops_manager">Operations Manager</option>
              <option value="editor">Editor</option>
              <option value="qc">QC Reviewer</option>
              <option value="poster">Poster</option>
            </select>
            <button className="btn-ghost btn btn-sm" onClick={() => delTeam(t.id)}>✕</button>
          </div>
        ))}
      </div>

<button className="btn" onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save All Settings'}</button>
    </div>
  );
}

// ─── Mount ──────────────────────────────────────────────────
ReactDOM.createRoot(document.getElementById('root')).render(<App />);