app.py

"""
app.py - 剧本工坊 Screenwright 工作台 (UI v2)
布局: 左小说原文素材台 | 右剧本纸张画布 / YAML 源码 / 人物表
"""
import html
import inspect

import streamlit as st
import yaml

import converter
import fountain
import validator


def material_panel():
    """Return a container that keeps border styling on newer Streamlit versions.

    Streamlit 1.28 does not support st.container(border=True); the project
    environment uses a newer version, but users may launch with global Python.
    """
    if "border" in inspect.signature(st.container).parameters:
        return st.container(border=True)
    return st.container()


SVG_ICONS = {
    "book": (
        '<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H7a3 3 0 0 0-3 3V5.5Z"/>'
        '<path d="M4 19a3 3 0 0 1 3-3h13"/>'
        '<path d="M8 7h8"/>'
    ),
    "chapters": (
        '<path d="M5 4h10a2 2 0 0 1 2 2v13H7a2 2 0 0 0-2 2V4Z"/>'
        '<path d="M8 8h6"/>'
        '<path d="M8 12h5"/>'
        '<path d="M19 8v13"/>'
    ),
    "check": (
        '<path d="M9 11.5 12 14 20 5"/>'
        '<path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10"/>'
    ),
    "clapper": (
        '<path d="M4 11h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8Z"/>'
        '<path d="M4 11 6.5 4h11.8L20 11"/>'
        '<path d="m8 4-2 7"/>'
        '<path d="m13 4-2 7"/>'
        '<path d="m18 4-2 7"/>'
    ),
    "compass": (
        '<circle cx="12" cy="12" r="9"/>'
        '<path d="m15.5 8.5-2.1 5.9-5.9 2.1 2.1-5.9 5.9-2.1Z"/>'
    ),
    "film": (
        '<rect x="4" y="3" width="16" height="18" rx="2"/>'
        '<path d="M8 3v18"/>'
        '<path d="M16 3v18"/>'
        '<path d="M4 8h4"/>'
        '<path d="M16 8h4"/>'
        '<path d="M4 16h4"/>'
        '<path d="M16 16h4"/>'
    ),
    "save": (
        '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12l2 2v14a2 2 0 0 1-2 2Z"/>'
        '<path d="M7 21v-8h10v8"/>'
        '<path d="M7 3v5h9"/>'
    ),
    "users": (
        '<path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/>'
        '<circle cx="9.5" cy="7" r="4"/>'
        '<path d="M22 21v-2a4 4 0 0 0-3-3.87"/>'
        '<path d="M16 3.13a4 4 0 0 1 0 7.75"/>'
    ),
}


def svg_icon(name, extra_class=""):
    classes = "sw-icon" + (f" {extra_class}" if extra_class else "")
    return (
        f'<span class="{classes}" aria-hidden="true">'
        f'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" '
        f'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
        f'{SVG_ICONS[name]}</svg></span>'
    )


def section_heading(icon_name, text):
    st.markdown(
        f'<h2 class="sw-section-title">{svg_icon(icon_name)}<span>{html.escape(text)}</span></h2>',
        unsafe_allow_html=True,
    )

# ---------------------------------------------------------------------------
# 页面配置 + 极简样式 (专业感,非花哨)
# ---------------------------------------------------------------------------
st.set_page_config(page_title="剧本工坊 Screenwright", layout="wide")

st.markdown(
    """
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@300;400;500;600;700&display=swap');

      /* 全局与背景重写 */
      .block-container {
          padding-top: 2.5rem !important;
          padding-bottom: 2.5rem !important;
          max-width: 1400px !important;
      }
      :root {
          --sw-panel-empty-height: 560px;
          --sw-panel-ready-height: 650px;
          --sw-result-height: 480px;
      }
      .stApp {
          background-color: #f7f9fc !important;
      }
      [data-testid="stAppViewContainer"] {
          background-color: #f7f9fc !important;
      }
      [data-testid="stHeader"] {
          background-color: #f7f9fc !important;
      }

      /* st.container(border=True) 独立面板定制 */
      div[data-testid="stVerticalBlockBorder"] {
          background-color: #ffffff !important;
          border: 1px solid #e2e8f0 !important;
          border-radius: 12px !important;
          padding: 1.5rem !important;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
      }

      /* 字体统一 */
      .stApp, p, span, label, li, h1, h2, h3, h4, h5, h6 {
          font-family: 'Outfit', -apple-system, sans-serif !important;
      }

      /* 标题栏定制 */
      .main-title-container {
          margin-bottom: 1.5rem !important;
          padding-bottom: 0.5rem !important;
          border-bottom: 1px solid #e2e8f0 !important;
      }
      .main-title {
          display: flex !important;
          align-items: center !important;
          gap: 0.6rem !important;
          font-weight: 700 !important;
          font-size: 2.2rem !important;
          color: #0f172a !important;
          margin: 0 !important;
          letter-spacing: 0 !important;
      }
      .sub-title {
          font-size: 0.95rem !important;
          color: #64748b !important;
          margin-top: 0.35rem !important;
      }
      .sw-icon {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 1.05em !important;
          height: 1.05em !important;
          color: currentColor !important;
          flex: 0 0 auto !important;
      }
      .sw-icon svg {
          width: 100% !important;
          height: 100% !important;
          stroke-width: 1.8 !important;
      }
      .sw-title-icon {
          width: 1.45rem !important;
          height: 1.45rem !important;
          color: #475569 !important;
          opacity: 0.78 !important;
          transform: translateY(0.03em) !important;
          filter: none !important;
      }
      .sw-section-title {
          display: flex !important;
          align-items: center !important;
          gap: 0.55rem !important;
          color: #1e293b !important;
          font-size: 1.65rem !important;
          line-height: 1.2 !important;
          font-weight: 700 !important;
          margin: 0 0 0.9rem !important;
          letter-spacing: 0 !important;
      }
      .sw-section-title .sw-icon {
          width: 1.05rem !important;
          height: 1.05rem !important;
          color: #64748b !important;
          opacity: 0.82 !important;
          transform: translateY(0.04em) !important;
      }

      /* 顶部状态栏 */
      .sw-status-bar {
          display: flex !important;
          justify-content: space-around !important;
          background-color: #ffffff !important;
          border: 1px solid #e2e8f0 !important;
          border-radius: 12px !important;
          padding: 1rem !important;
          margin-bottom: 2rem !important;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
      }
      .sw-status-item {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          flex-grow: 1 !important;
          border-right: 1px solid #e2e8f0 !important;
          text-align: center !important;
      }
      .sw-status-item:last-child {
          border-right: none !important;
      }
      .sw-status-label {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 0.35rem !important;
          font-size: 0.78rem !important;
          color: #64748b !important;
          text-transform: none !important;
          font-weight: 500 !important;
          margin-bottom: 0.25rem !important;
          letter-spacing: 0 !important;
      }
      .sw-status-label .sw-icon {
          width: 0.95rem !important;
          height: 0.95rem !important;
          color: #5b6ee1 !important;
      }
      .sw-status-value {
          font-size: 1.1rem !important;
          font-weight: 600 !important;
          color: #0f172a !important;
      }
      .status-val-ok {
          color: #16a34a !important;
      }
      .status-val-fail {
          color: #dc2626 !important;
      }
      .status-val-none {
          color: #94a3b8 !important;
      }

      /* 分段控制器风格 Tab */
      div[data-baseweb="tab-list"] {
          background-color: #e2e8f0 !important;
          padding: 3px !important;
          border-radius: 8px !important;
          border: 1px solid #cbd5e1 !important;
          width: fit-content !important;
          margin-bottom: 1.25rem !important;
          gap: 0px !important;
      }
      div[data-baseweb="tab-list"] button[data-baseweb="tab"] {
          border: none !important;
          border-radius: 6px !important;
          padding: 6px 16px !important;
          font-size: 0.88rem !important;
          font-weight: 500 !important;
          color: #475569 !important;
          background-color: transparent !important;
          transition: all 0.2s ease !important;
      }
      div[data-baseweb="tab-list"] button[data-baseweb="tab"][aria-selected="true"] {
          background-color: #ffffff !important;
          color: #0f172a !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
          font-weight: 600 !important;
      }
      div[data-baseweb="tab-list"] button[data-baseweb="tab"]:hover {
          color: #0f172a !important;
      }
      div[data-baseweb="tab-border"] {
          display: none !important;
      }

      /* 精致按钮样式 */
      div[data-testid="stButton"] button {
          background-color: #1e293b !important;
          color: #ffffff !important;
          border: 1px solid #1e293b !important;
          border-radius: 8px !important;
          padding: 0.5rem 1rem !important;
          font-family: 'Outfit', sans-serif !important;
          font-weight: 500 !important;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
          width: 100% !important;
      }
      div[data-testid="stButton"] button:hover {
          background-color: #334155 !important;
          border-color: #334155 !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(30, 41, 59, 0.12) !important;
      }
      div[data-testid="stButton"] button:active {
          transform: translateY(0) !important;
      }

      /* 核心动作按钮 */
      div[data-testid="stButton"] button[kind="primary"] {
          background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
          border: none !important;
          font-weight: 600 !important;
      }
      div[data-testid="stButton"] button[kind="primary"]:hover {
          background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
      }

      /* 下载/辅助按钮 */
      div[data-testid="stDownloadButton"] button {
          background-color: #ffffff !important;
          color: #1e293b !important;
          border: 1px solid #e2e8f0 !important;
          border-radius: 8px !important;
          padding: 0.5rem 1rem !important;
          font-family: 'Outfit', sans-serif !important;
          font-weight: 500 !important;
          transition: all 0.2s ease !important;
          width: 100% !important;
      }
      div[data-testid="stDownloadButton"] button:hover {
          background-color: #f8fafc !important;
          border-color: #cbd5e1 !important;
          color: #0f172a !important;
      }

      /* 输入框/文本框 */
      div[data-testid="stTextArea"] textarea {
          border-radius: 8px !important;
          font-family: 'Outfit', -apple-system, sans-serif !important;
          font-size: 0.92rem !important;
          border: 1px solid #e2e8f0 !important;
          background-color: #ffffff !important;
          color: #334155 !important;
          transition: border-color 0.2s, box-shadow 0.2s !important;
      }
      div[data-testid="stTextArea"] textarea:focus {
          border-color: #1e293b !important;
          box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08) !important;
      }

      /* YAML 编辑器定制 (针对性覆盖) */
      div[data-testid="stTextArea"]:has(textarea[aria-label="YAML 源码内容"]) textarea {
          font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
          background-color: #0f172a !important;
          color: #cbd5e1 !important;
          border: 1px solid #334155 !important;
          border-top: none !important;
          border-bottom-left-radius: 8px !important;
          border-bottom-right-radius: 8px !important;
          border-top-left-radius: 0px !important;
          border-top-right-radius: 0px !important;
          padding: 1.2rem !important;
          font-size: 0.85rem !important;
          line-height: 1.6 !important;
      }
      div[data-testid="stTextArea"]:has(textarea[aria-label="YAML 源码内容"]) textarea:focus {
          border-color: #475569 !important;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
      }

      /* macOS 控制栏外观 */
      .code-editor-header {
          background-color: #1e293b !important;
          border-top-left-radius: 8px !important;
          border-top-right-radius: 8px !important;
          padding: 10px 16px !important;
          display: flex !important;
          align-items: center !important;
          border-bottom: 1px solid #2d3748 !important;
          margin-bottom: 0px !important;
      }
      .code-editor-header .dot {
          width: 10px !important;
          height: 10px !important;
          border-radius: 50% !important;
          display: inline-block !important;
          margin-right: 6px !important;
      }
      .code-editor-header .dot-red { background-color: #ef4444 !important; }
      .code-editor-header .dot-yellow { background-color: #eab308 !important; }
      .code-editor-header .dot-green { background-color: #22c55e !important; }
      .code-editor-header .editor-title {
          color: #94a3b8 !important;
          font-family: 'JetBrains Mono', Courier, monospace !important;
          font-size: 0.82rem !important;
          margin-left: 12px !important;
          font-weight: 500 !important;
      }

      /* 下拉框与上传器微调 */
      div[data-baseweb="select"] {
          border-radius: 8px !important;
      }
      div[data-testid="stFileUploader"] section {
          background-color: #ffffff !important;
          border: 1.5px dashed #cbd5e1 !important;
          border-radius: 8px !important;
          padding: 1rem !important;
      }
      div[data-testid="stFileUploaderDropzone"],
      section[data-testid="stFileUploaderDropzone"],
      section[data-testid="stFileUploadDropzone"] {
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          gap: 1rem !important;
          min-height: 88px !important;
          color: transparent !important;
          font-size: 0 !important;
      }
      div[data-testid="stFileUploaderDropzone"] [data-testid="stMarkdownContainer"],
      section[data-testid="stFileUploaderDropzone"] [data-testid="stMarkdownContainer"],
      section[data-testid="stFileUploadDropzone"] [data-testid="stMarkdownContainer"],
      div[data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"],
      section[data-testid="stFileUploaderDropzone"] [data-testid="stFileUploaderDropzoneInstructions"],
      section[data-testid="stFileUploadDropzone"] [data-testid="stFileUploaderDropzoneInstructions"],
      div[data-testid="stFileUploaderDropzone"] small,
      section[data-testid="stFileUploaderDropzone"] small,
      section[data-testid="stFileUploadDropzone"] small {
          display: none !important;
          height: 0 !important;
          margin: 0 !important;
      }
      div[data-testid="stFileUploaderDropzone"] svg,
      section[data-testid="stFileUploaderDropzone"] svg,
      section[data-testid="stFileUploadDropzone"] svg {
          color: #94a3b8 !important;
          font-size: 1rem !important;
          flex: 0 0 auto !important;
      }
      div[data-testid="stFileUploaderDropzone"]::before,
      section[data-testid="stFileUploaderDropzone"]::before,
      section[data-testid="stFileUploadDropzone"]::before {
          content: "拖拽 .txt 文件到这里，或点击选择文件" !important;
          color: #334155 !important;
          font-family: 'Outfit', -apple-system, sans-serif !important;
          font-size: 0.95rem !important;
          font-weight: 500 !important;
          flex: 1 1 auto !important;
      }
      div[data-testid="stFileUploaderDropzone"] button,
      section[data-testid="stFileUploaderDropzone"] button,
      section[data-testid="stFileUploadDropzone"] button {
          font-size: 0 !important;
          color: transparent !important;
          min-width: 92px !important;
      }
      div[data-testid="stFileUploaderDropzone"] button *,
      section[data-testid="stFileUploaderDropzone"] button *,
      section[data-testid="stFileUploadDropzone"] button * {
          font-size: 0 !important;
          color: transparent !important;
      }
      div[data-testid="stFileUploaderDropzone"] button::after,
      section[data-testid="stFileUploaderDropzone"] button::after,
      section[data-testid="stFileUploadDropzone"] button::after {
          content: "选择文件" !important;
          font-size: 0.9rem !important;
          color: #334155 !important;
      }
      div[data-testid="stFileUploaderDropzone"] > button,
      section[data-testid="stFileUploaderDropzone"] > button,
      section[data-testid="stFileUploadDropzone"] > button {
          display: none !important;
      }
      div[data-testid="stFileUploaderDropzone"]::after,
      section[data-testid="stFileUploaderDropzone"]::after,
      section[data-testid="stFileUploadDropzone"]::after {
          content: "选择文件" !important;
          color: #334155 !important;
          background-color: #ffffff !important;
          border: 1px solid #cbd5e1 !important;
          border-radius: 8px !important;
          padding: 0.45rem 0.85rem !important;
          font-size: 0.9rem !important;
          font-weight: 500 !important;
          white-space: nowrap !important;
      }

      /* A4 实体纸张排版剧本模拟 */
      .sw-result-pane {
          height: var(--sw-result-height) !important;
          min-height: var(--sw-result-height) !important;
          max-height: var(--sw-result-height) !important;
          overflow-y: auto !important;
          padding-right: 0.25rem !important;
      }
      .sw-preview-pane {
          background: linear-gradient(180deg, rgba(247, 249, 252, 0.4), rgba(247, 249, 252, 0)) !important;
      }
      .sw-preview {
          font-family: 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif !important;
          background-color: #faf6f0 !important;
          color: #1a1a1a !important;
          padding: 2.25rem 3rem !important;
          border-radius: 12px !important;
          border: 1px solid #e2e8f0 !important;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04), inset 0 0 40px rgba(0,0,0,0.01) !important;
          line-height: 1.75 !important;
          max-width: 800px !important;
          max-height: none !important;
          overflow: visible !important;
          margin: 0.25rem auto 0 !important;
      }
      .sw-preview-title-block {
          text-align: center !important;
          padding: 0.5rem 0 1.25rem !important;
      }
      .sw-preview-title {
          font-family: 'Outfit', 'Songti SC', 'SimSun', serif !important;
          font-size: 1.8rem !important;
          font-weight: bold !important;
          margin-bottom: 0.75rem !important;
          color: #000000 !important;
      }
      .sw-preview-logline {
          font-family: 'Outfit', 'Songti SC', 'SimSun', serif !important;
          font-size: 0.95rem !important;
          font-style: italic !important;
          color: #4b5563 !important;
          max-width: 600px !important;
          margin: 0 auto !important;
      }
      .sw-preview-divider {
          border: none !important;
          border-top: 1px solid #cbd5e1 !important;
          margin: 1.5rem 0 !important;
      }
      .sw-preview-scene-heading {
          display: flex !important;
          justify-content: flex-start !important;
          align-items: baseline !important;
          gap: 0.75rem !important;
          font-family: 'Outfit', 'Songti SC', 'SimSun', serif !important;
          font-weight: bold !important;
          font-size: 1.05rem !important;
          border-bottom: 1px solid #cbd5e1 !important;
          padding-bottom: 3px !important;
          margin-top: 1.8rem !important;
          margin-bottom: 1rem !important;
          color: #000000 !important;
      }
      .sw-preview-scene-number {
          font-weight: bold !important;
          flex: 0 0 auto !important;
      }
      .sw-preview-scene-slugline {
          flex-grow: 1 !important;
          text-align: left !important;
          padding-left: 0 !important;
      }
      .sw-preview-scene-summary {
          font-family: 'Outfit', sans-serif !important;
          font-size: 0.85rem !important;
          background-color: #f1f5f9 !important;
          border-left: 3px solid #64748b !important;
          padding: 6px 12px !important;
          border-radius: 4px !important;
          margin-bottom: 1.2rem !important;
          color: #475569 !important;
      }
      .sw-preview-element {
          margin-bottom: 0.8rem !important;
      }
      .sw-preview-action {
          text-align: justify !important;
          white-space: pre-wrap !important;
      }
      .sw-preview-dialogue {
          margin-top: 1rem !important;
          margin-bottom: 1rem !important;
          text-align: left !important;
          max-width: 86% !important;
          margin-left: 8% !important;
          margin-right: 0 !important;
      }
      .sw-preview-character {
          display: inline !important;
          font-weight: bold !important;
          text-align: left !important;
      }
      .sw-preview-parenthetical {
          display: inline-block !important;
          font-style: italic !important;
          text-align: left !important;
          font-size: 0.88rem !important;
          color: #64748b !important;
          margin-right: 0.5rem !important;
          margin-bottom: 0.1rem !important;
      }
      .sw-preview-delivery {
          display: inline-block !important;
          font-style: italic !important;
          text-align: left !important;
          font-size: 0.85rem !important;
          color: #4b5563 !important;
          margin-right: 0.5rem !important;
          margin-bottom: 0.1rem !important;
      }
      .sw-preview-dialogue-text {
          display: inline !important;
          width: auto !important;
          text-align: left !important;
          margin: 0 !important;
          white-space: pre-wrap !important;
      }
      .sw-preview-dialogue-colon {
          display: inline !important;
          font-weight: 600 !important;
      }
      .sw-preview-transition {
          text-align: right !important;
          font-weight: bold !important;
          text-transform: uppercase !important;
          color: #4b5563 !important;
          padding-right: 5% !important;
      }
      .sw-preview-shot {
          font-style: italic !important;
          font-weight: bold !important;
      }
      .sw-preview-scene-notes {
          font-family: 'Outfit', sans-serif !important;
          font-size: 0.82rem !important;
          color: #64748b !important;
          margin-top: 0.8rem !important;
          padding-top: 0.4rem !important;
          border-top: 1px dashed #cbd5e1 !important;
      }
      .sw-preview-scene-divider {
          border: none !important;
          border-top: 1px dashed #cbd5e1 !important;
          margin: 1.5rem 0 !important;
      }

      /* 校验状态徽章 */
      .sw-badge-ok {
          display: inline-flex !important;
          align-items: center !important;
          background-color: #e8f5e9 !important;
          color: #2e7d32 !important;
          padding: 6px 16px !important;
          border-radius: 20px !important;
          font-weight: 600 !important;
          font-size: 0.82rem !important;
          border: 1px solid #c8e6c9 !important;
          margin-bottom: 1rem !important;
      }
      .sw-badge-fail {
          display: inline-flex !important;
          align-items: center !important;
          background-color: #ffebee !important;
          color: #c62828 !important;
          padding: 6px 16px !important;
          border-radius: 20px !important;
          font-weight: 600 !important;
          font-size: 0.82rem !important;
          border: 1px solid #ffcdd2 !important;
          margin-bottom: 1rem !important;
      }

      /* 复古人物档案索引卡 */
      .sw-char-grid {
          display: grid !important;
          grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
          gap: 0.9rem !important;
          padding: 0.5rem 0 !important;
      }
      .sw-char-card {
          background-color: #fcfaf7 !important; /* 米黄复古纸色 */
          border: 1px solid #e4d8c4 !important; /* 牛皮纸线框 */
          border-top: 4px solid #94a3b8 !important; /* 顶部默认索引签颜色 */
          border-radius: 6px !important;
          padding: 1rem !important;
          position: relative !important;
          box-shadow: 2px 2px 8px rgba(0,0,0,0.03) !important;
          transition: all 0.2s ease !important;
      }
      .sw-char-card:hover {
          transform: translateY(-2px) !important;
          box-shadow: 4px 8px 16px rgba(139, 92, 26, 0.08) !important;
          border-color: #d4af37 !important;
      }
      .sw-char-card-header {
          display: flex !important;
          align-items: center !important;
          margin-bottom: 0.75rem !important;
          border-bottom: 1px dashed #e4d8c4 !important;
          padding-bottom: 0.5rem !important;
      }
      .sw-char-avatar {
          width: 38px !important;
          height: 38px !important;
          background: #f1ebd9 !important;
          color: #8b5a2b !important;
          border-radius: 4px !important; /* 相片风格直角 */
          border: 1px solid #e4d8c4 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-weight: bold !important;
          font-size: 1rem !important;
          margin-right: 0.75rem !important;
      }
      .sw-char-card-title-block {
          display: flex !important;
          flex-direction: column !important;
      }
      .sw-char-name {
          font-weight: 700 !important;
          font-size: 1rem !important;
          color: #2c1d11 !important; /* 复古棕褐 */
      }
      .sw-char-role {
          font-size: 0.68rem !important;
          font-weight: 600 !important;
          padding: 1px 6px !important;
          border-radius: 3px !important;
          width: fit-content !important;
          margin-top: 0.15rem !important;
      }
      .sw-role-main {
          background-color: #fef3c7 !important;
          color: #b45309 !important;
          border: 1px solid #fde68a !important;
      }
      .sw-role-sub {
          background-color: #f1f5f9 !important;
          color: #475569 !important;
          border: 1px solid #e2e8f0 !important;
      }
      /* 主角卡片顶部金条 */
      .sw-char-card:has(.sw-role-main) {
          border-top: 4px solid #d4af37 !important;
      }
      .sw-char-card-body {
          display: flex !important;
          flex-direction: column !important;
          gap: 0.5rem !important;
      }
      .sw-char-info-item {
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          font-size: 0.8rem !important;
          gap: 0.75rem !important;
      }
      .sw-char-info-label {
          color: #8b7355 !important;
          font-weight: 500 !important;
      }
      .sw-char-info-value {
          font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
          color: #2c1d11 !important;
          font-size: 0.75rem !important;
          background-color: #fcfcfc !important;
          padding: 1px 5px !important;
          border-radius: 3px !important;
          border: 1px solid #e4d8c4 !important;
          max-width: 68% !important;
          text-align: right !important;
          word-break: break-word !important;
      }
      .sw-char-info-value-aliases {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 0.2rem !important;
          justify-content: flex-end !important;
      }
      .sw-char-alias-badge {
          background-color: #fdfcf7 !important;
          color: #8b7355 !important;
          border: 1px solid #e4d8c4 !important;
          padding: 0px 5px !important;
          border-radius: 3px !important;
          font-size: 0.72rem !important;
      }
      .sw-char-alias-none {
          color: #bfb09c !important;
          font-size: 0.75rem !important;
      }
      .sw-char-info-value-scene {
          font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
          font-size: 0.75rem !important;
          color: #5c6b73 !important;
      }
      .sw-char-description {
          color: #5c6b73 !important;
          font-size: 0.8rem !important;
          line-height: 1.6 !important;
          border-top: 1px dashed #e4d8c4 !important;
          margin-top: 0.25rem !important;
          padding-top: 0.55rem !important;
      }
      .sw-empty-chars {
          text-align: center !important;
          color: #94a3b8 !important;
          padding: 2rem 0 !important;
          font-size: 0.9rem !important;
      }
      .sw-empty-result {
          box-sizing: border-box !important;
          width: 100% !important;
          background-color: transparent !important;
          border: none !important;
          border-radius: 0 !important;
          padding: 0.25rem !important;
          min-height: 240px !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          box-shadow: none !important;
      }
      .sw-empty-result-kicker {
          color: #64748b !important;
          font-size: 0.82rem !important;
          font-weight: 600 !important;
          letter-spacing: 0 !important;
          text-transform: uppercase !important;
          margin-bottom: 0.75rem !important;
      }
      .sw-empty-result-title {
          color: #0f172a !important;
          font-size: 1.4rem !important;
          font-weight: 700 !important;
          margin-bottom: 0.6rem !important;
      }
      .sw-empty-result-copy {
          color: #64748b !important;
          font-size: 0.95rem !important;
          line-height: 1.8 !important;
          max-width: 520px !important;
      }
      .sw-source-panel-marker,
      .sw-output-panel-marker {
          display: none !important;
      }
      div[data-testid="element-container"]:has(.sw-source-panel-marker),
      div[data-testid="element-container"]:has(.sw-output-panel-marker) {
          display: none !important;
          height: 0 !important;
          margin: 0 !important;
      }
      div[data-testid="stVerticalBlockBorder"]:has(.sw-source-panel-marker),
      div[data-testid="stVerticalBlockBorder"]:has(.sw-output-panel-marker),
      div[data-testid="stVerticalBlockBorderWrapper"]:has(.sw-source-panel-marker),
      div[data-testid="stVerticalBlockBorderWrapper"]:has(.sw-output-panel-marker) {
          min-height: var(--sw-panel-empty-height) !important;
      }
      div[data-testid="stVerticalBlockBorder"]:has(.sw-panel-ready),
      div[data-testid="stVerticalBlockBorderWrapper"]:has(.sw-panel-ready) {
          min-height: var(--sw-panel-ready-height) !important;
      }

      /* 窄屏响应式适配 */
      @media screen and (max-width: 992px) {
          .sw-status-bar {
              flex-wrap: wrap !important;
              gap: 1rem !important;
          }
          .sw-status-item {
              border-right: none !important;
              flex-basis: 40% !important;
              margin-bottom: 0.5rem !important;
          }
          .sw-preview {
              padding: 2rem 2.5rem !important;
              margin: 0.5rem auto !important;
          }
      }
      @media screen and (max-width: 576px) {
          .sw-status-item {
              flex-basis: 100% !important;
          }
          .sw-preview {
              padding: 1.5rem 1.5rem !important;
          }
      }
    </style>
    """,
    unsafe_allow_html=True,
)

# ---------------------------------------------------------------------------
# 会话状态
# ---------------------------------------------------------------------------
for k, v in {
    "data": None,           # 转换出的剧本 dict
    "yaml_text": "",        # YAML 文本(可编辑)
    "valid": None,          # (是否通过, 错误列表)
    "last_valid_yaml": "",  # 上一次合法的 YAML (供撤销)
}.items():
    st.session_state.setdefault(k, v)

# ---------------------------------------------------------------------------
# 顶部标题栏
# ---------------------------------------------------------------------------
st.markdown(
    f"""
    <div class="main-title-container">
      <h1 class="main-title">{svg_icon("clapper", "sw-title-icon")}<span>剧本工坊 · Screenwright</span></h1>
      <div class="sub-title">AI 小说改编工作台 — 把中文小说转换成结构化、可校验、可编辑的现代剧本</div>
    </div>
    """,
    unsafe_allow_html=True,
)

# ---------------------------------------------------------------------------
# 作品状态栏 (Workpiece Status Bar)
# ---------------------------------------------------------------------------
def render_status_bar(target):
    data = st.session_state.data
    if data:
        meta = data.get("metadata", {})
        ch_list = meta.get("source_chapters", [])
        ch_count = len(ch_list) if ch_list else 1
        char_count = len(data.get("characters", []))
        scene_count = len(data.get("scenes", []))
        ok, errors = st.session_state.valid or (False, [])
        valid_str = "✓ 通过" if ok else f"✗ 失败 ({len(errors)})"
        valid_class = "status-val-ok" if ok else "status-val-fail"
        export_str = "已就绪"
    else:
        ch_count = 0
        char_count = 0
        scene_count = 0
        valid_str = "无数据"
        valid_class = "status-val-none"
        export_str = "未启用"

    target.markdown(
        f"""
        <div class="sw-status-bar">
          <div class="sw-status-item">
            <span class="sw-status-label">{svg_icon("chapters")}转换章节</span>
            <span class="sw-status-value">{ch_count} 章</span>
          </div>
          <div class="sw-status-item">
            <span class="sw-status-label">{svg_icon("users")}识别角色</span>
            <span class="sw-status-value">{char_count} 人</span>
          </div>
          <div class="sw-status-item">
            <span class="sw-status-label">{svg_icon("film")}剧本场次</span>
            <span class="sw-status-value">{scene_count} 场</span>
          </div>
          <div class="sw-status-item">
            <span class="sw-status-label">{svg_icon("check")}结构校验</span>
            <span class="sw-status-value {valid_class}">{valid_str}</span>
          </div>
          <div class="sw-status-item">
            <span class="sw-status-label">{svg_icon("save")}导出状态</span>
            <span class="sw-status-value">{export_str}</span>
          </div>
        </div>
        """,
        unsafe_allow_html=True,
    )


status_bar = st.empty()
render_status_bar(status_bar)

left, right = st.columns([1, 1], gap="large")

# ===========================================================================
# 左侧:小说原文输入
# ===========================================================================
with left:
    section_heading("book", "原文素材台")
    with material_panel():
        left_panel_state = "sw-panel-ready" if st.session_state.data is not None else "sw-panel-empty"
        st.markdown(
            f'<div class="sw-source-panel-marker {left_panel_state}"></div>',
            unsafe_allow_html=True,
        )
        source = st.radio("输入方式", ["粘贴文本", "上传 txt"], horizontal=True)

        text = ""
        if source == "粘贴文本":
            text = st.text_area("粘贴小说全文", height=200, placeholder="把小说粘贴到这里…")
        else:
            up = st.file_uploader("上传 .txt 文件", type=["txt"], label_visibility="visible")
            if up:
                text = up.read().decode("utf-8", errors="ignore")

        chapters = converter.split_chapters(text) if text.strip() else []

        if chapters:
            st.success(f"识别到 {len(chapters)} 章")
            scope = st.radio(
                "转换范围",
                ["全部章节", "仅选中章节"],
                horizontal=True,
            )
            if scope == "仅选中章节":
                idx = st.selectbox(
                    "选择章节",
                    range(len(chapters)),
                    format_func=lambda i: f"第 {i + 1} 章 · {chapters[i]['title']}",
                )
                chapter_body = chapters[idx]["body"]
                with st.expander("查看本章原文", expanded=False):
                    st.text(chapter_body)
            else:
                idx, chapter_body = 0, ""
            n_ch = len(chapters) if scope.startswith("全部") else 1
            generate = st.button(
                f"生成剧本（{n_ch} 章）", type="primary", use_container_width=True
            )
        else:
            idx, chapter_body, generate, scope = 0, "", False, ""

# ===========================================================================
# 生成逻辑
# ===========================================================================
if generate and chapters:
    active_status = None
    try:
        with st.status("转换中…", expanded=True) as status:
            active_status = status

            def _progress(stage):
                status.write(stage)

            if scope.startswith("全部"):
                data = converter.convert_novel(text, progress=_progress)
            else:
                data = converter.generate_screenplay_json(
                    chapter_body, chapter_number=idx + 1, progress=_progress
                )
            ok, errors = validator.validate(data)
            yaml_text = converter.json_to_yaml(data)

            st.session_state.data = data
            st.session_state.valid = (ok, errors)
            st.session_state.yaml_text = yaml_text
            if ok:
                st.session_state.last_valid_yaml = yaml_text
            status.update(label="转换完成 ✓", state="complete")
            render_status_bar(status_bar)
    except Exception as e:
        if active_status is not None:
            active_status.write(f"错误：{e}")
            active_status.update(label="转换失败", state="error", expanded=True)
        st.error(f"转换失败：{e}")

# ===========================================================================
# 右侧:剧本预览 / YAML / 人物表
# ===========================================================================
ROLE_LABELS = {
    "protagonist": "主角",
    "antagonist": "反派",
    "supporting": "配角",
    "minor": "次要",
}


def scene_display_name(scene_id):
    text = str(scene_id or "").strip()
    if not text:
        return "未记录"
    if text.lower().startswith("scene_"):
        suffix = text.rsplit("_", 1)[-1]
        if suffix.isdigit():
            return f"第 {int(suffix)} 场"
    return text


with right:
    data = st.session_state.data

    if data is None:
        section_heading("compass", "等待生成")
        with material_panel():
            st.markdown(
                '<div class="sw-output-panel-marker sw-panel-empty"></div>',
                unsafe_allow_html=True,
            )
            st.markdown(
                """
                <div class="sw-empty-result">
                  <div class="sw-empty-result-kicker">输出工作区</div>
                  <div class="sw-empty-result-title">载入小说后，这里会生成剧本结果</div>
                  <div class="sw-empty-result-copy">
                    左侧粘贴文本或上传 TXT 后即可生成。完成后这里会出现剧本预览、YAML 源码和人物表三个视图，并支持一键导出 YAML / Fountain。
                  </div>
                </div>
                """,
                unsafe_allow_html=True,
            )
    else:
        section_heading("clapper", "输出结果")
        with material_panel():
            st.markdown(
                '<div class="sw-output-panel-marker sw-panel-ready"></div>',
                unsafe_allow_html=True,
            )
            ok, errors = st.session_state.valid
            if ok:
                st.markdown('<span class="sw-badge-ok">✓ 结构校验通过</span>', unsafe_allow_html=True)
            else:
                st.markdown(f'<span class="sw-badge-fail">✗ 校验未通过（{len(errors)} 项）</span>', unsafe_allow_html=True)
                with st.expander("查看校验错误"):
                    for e in errors:
                        st.write("- " + e)

            tab_preview, tab_yaml, tab_chars = st.tabs(["剧本预览", "YAML 源码", "人物表"])

            with tab_preview:
                md = converter.render_preview(data)
                st.markdown(
                    f'<div class="sw-result-pane sw-preview-pane"><div class="sw-preview">{md}</div></div>',
                    unsafe_allow_html=True,
                )

            with tab_yaml:
                st.markdown(
                    """
                    <div class="code-editor-header">
                      <span class="dot dot-red"></span>
                      <span class="dot dot-yellow"></span>
                      <span class="dot dot-green"></span>
                      <span class="editor-title">screenplay.yaml</span>
                    </div>
                    """,
                    unsafe_allow_html=True,
                )
                edited = st.text_area("YAML 源码内容", value=st.session_state.yaml_text, height=300, label_visibility="collapsed")
                c1, c2, c3 = st.columns(3)
                with c1:
                    if st.button("重新校验", use_container_width=True):
                        try:
                            reparsed = yaml.safe_load(edited)
                            ok2, errors2 = validator.validate(reparsed)
                            st.session_state.yaml_text = edited
                            st.session_state.valid = (ok2, errors2)
                            if ok2:
                                st.session_state.data = reparsed
                                st.session_state.last_valid_yaml = edited
                                st.success("✓ 校验通过")
                            else:
                                st.error(f"✗ {len(errors2)} 项错误：\n" + "\n".join(errors2[:5]))
                        except yaml.YAMLError as ye:
                            st.error(f"YAML 格式错误（多半是缩进）：{ye}")
                            st.info("可点「撤销到上次合法版本」恢复")
                with c2:
                    title = data.get("metadata", {}).get("title", "screenplay")
                    st.download_button(
                        "下载 YAML",
                        data=edited,
                        file_name=f"{title}.screenplay.yaml",
                        mime="text/yaml",
                        use_container_width=True,
                    )
                with c3:
                    try:
                        export_data = yaml.safe_load(edited)
                        export_ok, _ = validator.validate(export_data)
                    except yaml.YAMLError:
                        export_data, export_ok = None, False

                    if export_ok:
                        export_title = export_data.get("metadata", {}).get("title", title)
                        st.download_button(
                            "导出 Fountain",
                            data=fountain.to_fountain(export_data),
                            file_name=f"{export_title}.fountain",
                            mime="text/plain",
                            use_container_width=True,
                        )
                    else:
                        st.button(
                            "导出 Fountain",
                            disabled=True,
                            use_container_width=True,
                            help="YAML 校验通过后可导出 Fountain",
                        )
                if st.session_state.last_valid_yaml and st.session_state.last_valid_yaml != edited:
                    if st.button("撤销到上次合法版本"):
                        st.session_state.yaml_text = st.session_state.last_valid_yaml
                        st.rerun()

            with tab_chars:
                chars = data.get("characters", [])
                if chars:
                    cards = []
                    for c in chars:
                        name = html.escape(str(c.get("name") or "未命名人物"))
                        role = str(c.get("role") or "未知角色")
                        role_label = html.escape(ROLE_LABELS.get(role, role))
                        role_class = "sw-role-main" if role == "protagonist" or "主角" in role_label else "sw-role-sub"
                        aliases = c.get("aliases") or []
                        alias_text = "、".join(str(alias) for alias in aliases) if aliases else "无"
                        alias_text = html.escape(alias_text)
                        first_scene = html.escape(scene_display_name(c.get("first_appearance")))
                        description = html.escape(str(c.get("description") or "未填写"))
                        avatar = html.escape(name[:1] or "人")
                        cards.append(
                            f'<div class="sw-char-card">'
                            f'<div class="sw-char-card-header">'
                            f'<div class="sw-char-avatar">{avatar}</div>'
                            f'<div class="sw-char-card-title-block">'
                            f'<div class="sw-char-name">{name}</div>'
                            f'<div class="sw-char-role {role_class}">{role_label}</div>'
                            f'</div></div>'
                            f'<div class="sw-char-card-body">'
                            f'<div class="sw-char-info-item">'
                            f'<span class="sw-char-info-label">别名/代称</span>'
                            f'<span class="sw-char-info-value">{alias_text}</span>'
                            f'</div>'
                            f'<div class="sw-char-info-item">'
                            f'<span class="sw-char-info-label">首次登场</span>'
                            f'<span class="sw-char-info-value sw-char-info-value-scene">{first_scene}</span>'
                            f'</div>'
                            f'<div class="sw-char-description">{description}</div>'
                            f'</div></div>'
                        )
                    st.markdown(
                        '<div class="sw-result-pane"><div class="sw-char-grid">'
                        + "".join(cards)
                        + "</div></div>",
                        unsafe_allow_html=True,
                    )
                else:
                    st.markdown("<div class='sw-result-pane'><div class='sw-empty-chars'>（无人物）</div></div>", unsafe_allow_html=True)