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