leocrm/frontend/src/components/documents/PrintTemplateEditor.tsx

/**
 * PrintTemplateEditor — Druckvorlagen-Editor (Phase L2).
 *
 * Combines a letterhead reference, an entity type (selects the module's
 * placeholder palette) and the drag&drop block composition (BlockEditor).
 */

import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { useToast } from '@/components/ui/Toast';
import {
  useCreatePrintTemplate,
  useUpdatePrintTemplate,
  useDocumentPlaceholders,
  type DocBlock,
  type Letterhead,
  type PrintTemplate,
} from '@/api/documents';
import { BlockEditor } from './BlockEditor';

interface PrintTemplateEditorProps {
  template: PrintTemplate | null;
  letterheads: Letterhead[];
  onClose: () => void;
}

export function PrintTemplateEditor({ template, letterheads, onClose }: PrintTemplateEditorProps) {
  const { t } = useTranslation();
  const toast = useToast();

  const [name, setName] = useState(template?.name ?? '');
  const [description, setDescription] = useState(template?.description ?? '');
  const [letterheadId, setLetterheadId] = useState<string>(template?.letterhead_id ?? '');
  const [entityType, setEntityType] = useState<string>(template?.entity_type ?? 'contact');
  const [blocks, setBlocks] = useState<DocBlock[]>(template?.blocks ?? []);

  const createMutation = useCreatePrintTemplate();
  const updateMutation = useUpdatePrintTemplate();

  // discover available entity types from the placeholder registry
  const { data: placeholderMap } = useDocumentPlaceholders();
  const entityTypes = useMemo(() => Object.keys(placeholderMap ?? {}).sort(), [placeholderMap]);

  useEffect(() => {
    if (template) {
      setName(template.name);
      setDescription(template.description);
      setLetterheadId(template.letterhead_id ?? '');
      setEntityType(template.entity_type);
      setBlocks(template.blocks ?? []);
    }
  }, [template]);

  const selectedLetterhead = useMemo(
    () => letterheads.find((l) => l.id === letterheadId) ?? null,
    [letterheads, letterheadId]
  );

  const handleSave = async () => {
    if (!name.trim()) {
      toast.error(t('documents.template.nameRequired', 'Name ist erforderlich'));
      return;
    }
    const input = {
      name: name.trim(),
      description,
      letterhead_id: letterheadId || null,
      entity_type: entityType,
      blocks,
      output_format: 'pdf' as const,
    };
    try {
      if (template) {
        await updateMutation.mutateAsync({ id: template.id, input });
        toast.success(t('documents.template.saved', 'Vorlage gespeichert'));
      } else {
        await createMutation.mutateAsync(input);
        toast.success(t('documents.template.created', 'Vorlage angelegt'));
      }
      onClose();
    } catch (e) {
      toast.error(t('documents.template.saveFailed', 'Speichern fehlgeschlagen — Blöcke prüfen'));
    }
  };

  return (
    <Modal
      open
      onClose={onClose}
      title={template ? t('documents.template.edit', 'Vorlage bearbeiten') : t('documents.template.create', 'Neue Druckvorlage')}
      size="xl"
    >
      <div className="space-y-4" data-testid="print-template-editor">
        {/* Meta */}
        <div className="grid grid-cols-3 gap-3">
          <div>
            <label className="text-xs font-medium text-secondary-500" htmlFor="tpl-name">{t('common.name', 'Name')}</label>
            <Input id="tpl-name" value={name} onChange={(e) => setName(e.target.value)} data-testid="template-name-input" />
          </div>
          <div>
            <label className="text-xs font-medium text-secondary-500" htmlFor="tpl-desc">{t('common.description', 'Beschreibung')}</label>
            <Input id="tpl-desc" value={description} onChange={(e) => setDescription(e.target.value)} />
          </div>
          <div>
            <label className="text-xs font-medium text-secondary-500" htmlFor="tpl-letterhead">{t('documents.letterhead', 'Briefpapier')}</label>
            <select
              id="tpl-letterhead"
              className="mt-1 w-full rounded-md border border-secondary-300 px-3 py-2 text-sm"
              value={letterheadId}
              onChange={(e) => setLetterheadId(e.target.value)}
              data-testid="template-letterhead-select"
            >
              <option value="">{t('documents.template.noLetterhead', 'Ohne Briefpapier')}</option>
              {letterheads.map((l) => (
                <option key={l.id} value={l.id}>{l.name}</option>
              ))}
            </select>
          </div>
        </div>

        {/* Entity type */}
        <div className="max-w-xs">
          <label className="text-xs font-medium text-secondary-500" htmlFor="tpl-entity">{t('documents.template.entityType', 'Datenquelle (Modul)')}</label>
          <select
            id="tpl-entity"
            className="mt-1 w-full rounded-md border border-secondary-300 px-3 py-2 text-sm"
            value={entityType}
            onChange={(e) => setEntityType(e.target.value)}
            data-testid="template-entity-type-select"
          >
            {(entityTypes.length > 0 ? entityTypes : ['contact']).map((et) => (
              <option key={et} value={et}>{et}</option>
            ))}
          </select>
          <p className="text-[10px] text-secondary-400 mt-1">
            {t('documents.template.entityTypeHint', 'Bestimmt die verfügbaren Platzhalter (Modul-Beitrag)')}
          </p>
        </div>

        {/* Block editor (content blocks + letterhead frame preview) */}
        <BlockEditor
          blocks={blocks}
          onChange={setBlocks}
          entityType={entityType}
          letterheadConfig={selectedLetterhead?.config ?? null}
        />

        {/* Actions */}
        <div className="flex justify-end gap-2 pt-2 border-t border-secondary-100">
          <Button variant="secondary" onClick={onClose}>{t('common.cancel', 'Abbrechen')}</Button>
          <Button
            onClick={handleSave}
            isLoading={createMutation.isPending || updateMutation.isPending}
            data-testid="template-save"
          >
            {t('common.save', 'Speichern')}
          </Button>
        </div>
      </div>
    </Modal>
  );
}