'use client'

import type { SceneInstance, ScenesCatalog, Scene } from '@prisma/client'

type SceneWithCatalog = SceneInstance & {
  catalog: ScenesCatalog
  scene: Pick<Scene, 'id' | 'wordCount' | 'status'> | null
}

interface EditorPaneProps {
  scene: SceneWithCatalog | null
  storyId: string
  readOnly: boolean
}

export function EditorPane({ scene, storyId, readOnly }: EditorPaneProps) {
  if (!scene) {
    return (
      <main className="flex-1 flex items-center justify-center bg-editor-paper">
        <div className="text-center text-muted-foreground">
          <p className="text-sm">No scenes yet.</p>
          <p className="text-xs mt-1">
            Answer the guided questions to generate your scene structure.
          </p>
        </div>
      </main>
    )
  }

  return (
    <main className="flex-1 overflow-y-auto bg-editor-paper">
      <div className="mx-auto max-w-page py-12 px-16">
        {/* Screenplay page look */}
        <div className="bg-editor-bg shadow-sm rounded-sm min-h-[11in] p-[1in] pl-[1.5in] font-screenplay text-[12pt] leading-[1]">
          {/* Scene heading */}
          <div className="uppercase font-bold mb-6 text-sm">
            {scene.sceneHeading ?? scene.catalog.slugline}
          </div>

          {/*
            TODO: Replace with full Tiptap editor instance
            This placeholder shows where the editor will be mounted.
            The Tiptap editor will:
            - Connect to Hocuspocus for real-time collaboration
            - Load the scene's Yjs document
            - Apply custom screenplay nodes (Section 24.1)
            - Handle Tab-cycling between element types
            - Show remote cursors and presence
          */}
          <div className="min-h-[8in] text-sm">
            {scene.editorText ? (
              <p className="whitespace-pre-wrap">{scene.editorText}</p>
            ) : (
              <p className="text-muted-foreground/50 italic">
                {readOnly
                  ? 'This scene is empty.'
                  : 'Start writing your scene...'}
              </p>
            )}
          </div>
        </div>
      </div>
    </main>
  )
}