resolutionflow/frontend/src/pages/ScriptManagePage.tsx

import { useState } from 'react'
import { ScriptTemplateListView } from '@/components/script-editor/ScriptTemplateListView'
import { ScriptTemplateEditor } from '@/components/script-editor/ScriptTemplateEditor'

export default function ScriptManagePage() {
  const [mode, setMode] = useState<'list' | 'edit'>('list')
  const [editingId, setEditingId] = useState<string | null>(null)

  const handleEdit = (id: string) => {
    setEditingId(id)
    setMode('edit')
  }

  const handleCreate = () => {
    setEditingId(null)
    setMode('edit')
  }

  const handleBack = () => {
    setEditingId(null)
    setMode('list')
  }

  const handleSaved = () => {
    setEditingId(null)
    setMode('list')
  }

  return (
    <div className="h-full overflow-y-auto">
      <div className="p-6 max-w-5xl mx-auto">
        {mode === 'list' ? (
          <ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} />
        ) : (
          <ScriptTemplateEditor
            templateId={editingId}
            onBack={handleBack}
            onSaved={handleSaved}
          />
        )}
      </div>
    </div>
  )
}