'use client'

import { useState, type ReactNode } from 'react'
import { documentText } from '@/lib/i18n/documents'

/**
 * Umschalter zwischen Aktenblatt und Bearbeitung.
 *
 * Beide Bäume kommen fertig gerendert vom Server herein; hier wird nur
 * umgeschaltet. Das Blatt bleibt damit das, was es ist — ein Formular —, ohne
 * dass die Bearbeitung es mit Eingabefeldern zerlegt.
 */
export function SheetSwitch({
  sheet,
  editor,
  canEdit,
}: {
  sheet: ReactNode
  editor: ReactNode
  canEdit: boolean
}) {
  const [modus, setModus] = useState<'blatt' | 'bearbeiten'>('blatt')

  return (
    <div>
      <div className="no-print mb-6 flex flex-wrap items-center gap-4 border-b border-line pb-2 font-condensed text-xs">
        <button
          type="button"
          onClick={() => setModus('blatt')}
          aria-current={modus === 'blatt'}
          className={modus === 'blatt' ? 'text-accent' : 'text-text-dim'}
        >
          {documentText.sheet}
        </button>
        {canEdit ? (
          <button
            type="button"
            onClick={() => setModus('bearbeiten')}
            aria-current={modus === 'bearbeiten'}
            className={modus === 'bearbeiten' ? 'text-accent' : 'text-text-dim'}
          >
            {documentText.edit}
          </button>
        ) : null}
        <button
          type="button"
          onClick={() => {
            setModus('blatt')
            // Ein Bild vom Bildschirm ist kein Export. Der PDF-Export mit
            // Wasserzeichen und Protokolleintrag kommt in Phase 8.
            requestAnimationFrame(() => window.print())
          }}
          className="ml-auto text-text-dim"
        >
          {documentText.print}
        </button>
      </div>

      {modus === 'blatt' ? sheet : <div className="no-print">{editor}</div>}
    </div>
  )
}