import React, { useMemo } from 'react'
import { Link } from 'react-router-dom'
import FormActionBar from './FormActionBar'
import { useFormEditorActions } from '../context/FormEditorActionsContext'

/**
 * Vollseiten-Editor: sticky Kopfzeile (Desktop) + Mobile-Dock via FormEditorActionsProvider.
 */
export default function PageFormEditorChrome({
  title,
  backTo,
  backLabel = 'Zurück',
  actionConfig,
  children,
  testId,
}) {
  useFormEditorActions(actionConfig)

  const headerBar = useMemo(() => {
    if (!actionConfig) return null
    return (
      <FormActionBar
        {...actionConfig}
        placement="top"
        variant="page"
      />
    )
  }, [actionConfig])

  return (
    <div className="page-form-editor" data-testid={testId}>
      <header className="page-form-editor__header">
        <div className="page-form-editor__intro">
          {backTo ? (
            <Link to={backTo} className="page-form-editor__back">
              ← {backLabel}
            </Link>
          ) : null}
          <h1 className="page-form-editor__title">{title}</h1>
        </div>
        {headerBar ? (
          <div className="page-form-editor__header-actions">{headerBar}</div>
        ) : null}
      </header>
      <div className="page-form-editor__body">{children}</div>
    </div>
  )
}