leocrm/frontend/src/pages/DocumentSettings.tsx

/**
 * Document Settings — Verwaltungsoberfläche für den Dokumente-Generator
 * (Phase L): Briefpapiere + Druckvorlagen mit Drag&Drop-Block-Editor.
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FileText, Layers } from 'lucide-react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Skeleton } from '@/components/ui/Skeleton';
import { useToast } from '@/components/ui/Toast';
import {
  useLetterheads,
  usePrintTemplates,
  useCreateLetterhead,
  useDeleteLetterhead,
  useCreatePrintTemplate,
  useDeletePrintTemplate,
} from '@/api/documents';
import { LetterheadEditor } from '@/components/documents/LetterheadEditor';
import { PrintTemplateEditor } from '@/components/documents/PrintTemplateEditor';
import type { Letterhead, PrintTemplate } from '@/api/documents';

export function DocumentSettingsPage() {
  const { t } = useTranslation();
  const toast = useToast();
  const [tab, setTab] = useState<'letterheads' | 'templates'>('letterheads');
  const [editingLetterhead, setEditingLetterhead] = useState<Letterhead | 'new' | null>(null);
  const [editingTemplate, setEditingTemplate] = useState<PrintTemplate | 'new' | null>(null);

  const { data: letterheads = [], isLoading: lhLoading } = useLetterheads();
  const { data: templates = [], isLoading: tplLoading } = usePrintTemplates();
  const createLh = useCreateLetterhead();
  const deleteLh = useDeleteLetterhead();
  const createTpl = useCreatePrintTemplate();
  const deleteTpl = useDeletePrintTemplate();

  return (
    <div className="max-w-6xl mx-auto space-y-6" data-testid="document-settings-page">
      <div className="flex items-center gap-3">
        <FileText className="w-6 h-6 text-primary-600" aria-hidden="true" />
        <div>
          <h1 className="text-2xl font-bold text-secondary-900">{t('settings.documents', 'Dokumente')}</h1>
          <p className="text-sm text-secondary-500">
            {t('documents.settings.subtitle', 'Briefpapiere und Druckvorlagen mit Drag&Drop-Editor verwalten')}
          </p>
        </div>
      </div>

      <div className="flex gap-2" role="tablist" aria-label={t('documents.settings.tabs', 'Dokumente-Bereiche')}>
        <button
          role="tab"
          aria-selected={tab === 'letterheads'}
          onClick={() => setTab('letterheads')}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
            tab === 'letterheads' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
          }`}
          data-testid="documents-tab-letterheads"
        >
          {t('documents.letterheads', 'Briefpapiere')} ({letterheads.length})
        </button>
        <button
          role="tab"
          aria-selected={tab === 'templates'}
          onClick={() => setTab('templates')}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
            tab === 'templates' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
          }`}
          data-testid="documents-tab-templates"
        >
          {t('documents.printTemplates', 'Druckvorlagen')} ({templates.length})
        </button>
      </div>

      {tab === 'letterheads' && (
        <Card className="p-4">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-secondary-900">{t('documents.letterheads', 'Briefpapiere')}</h2>
            <Button
              size="sm"
              icon={<FileText className="w-4 h-4" aria-hidden="true" />}
              onClick={() => setEditingLetterhead('new')}
              data-testid="documents-create-letterhead"
            >
              {t('documents.letterhead.create', 'Neues Briefpapier')}
            </Button>
          </div>
          {lhLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-12 w-full" />
              <Skeleton className="h-12 w-full" />
            </div>
          ) : letterheads.length === 0 ? (
            <p className="text-sm text-secondary-500 py-8 text-center">
              {t('documents.letterhead.empty', 'Noch kein Briefpapier angelegt.')}
            </p>
          ) : (
            <ul className="divide-y divide-secondary-100" data-testid="documents-letterhead-list">
              {letterheads.map((lh) => (
                <li key={lh.id} className="flex items-center justify-between py-3 gap-3">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-secondary-900 truncate">{lh.name}</span>
                      {lh.is_default && (
                        <span className="text-xs px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
                          {t('documents.letterhead.default', 'Standard')}
                        </span>
                      )}
                    </div>
                    <p className="text-xs text-secondary-500 truncate">{lh.description || '—'}</p>
                  </div>
                  <div className="flex gap-2 shrink-0">
                    <Button size="sm" variant="secondary" onClick={() => setEditingLetterhead(lh)}>
                      {t('common.edit', 'Bearbeiten')}
                    </Button>
                    <Button
                      size="sm"
                      variant="danger"
                      onClick={async () => {
                        if (!window.confirm(t('documents.letterhead.deleteConfirm', 'Briefpapier wirklich löschen?'))) return;
                        try {
                          await deleteLh.mutateAsync(lh.id);
                          toast.success(t('documents.letterhead.deleted', 'Briefpapier gelöscht'));
                        } catch (e) {
                          toast.error(t('common.error', 'Fehler beim Löschen'));
                        }
                      }}
                      aria-label={t('common.delete', 'Löschen')}
                    >
                      {t('common.delete', 'Löschen')}
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </Card>
      )}

      {tab === 'templates' && (
        <Card className="p-4">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-secondary-900">{t('documents.printTemplates', 'Druckvorlagen')}</h2>
            <Button
              size="sm"
              icon={<Layers className="w-4 h-4" aria-hidden="true" />}
              onClick={() => setEditingTemplate('new')}
              data-testid="documents-create-template"
            >
              {t('documents.template.create', 'Neue Vorlage')}
            </Button>
          </div>
          {tplLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-12 w-full" />
              <Skeleton className="h-12 w-full" />
            </div>
          ) : templates.length === 0 ? (
            <p className="text-sm text-secondary-500 py-8 text-center">
              {t('documents.template.empty', 'Noch keine Druckvorlage angelegt.')}
            </p>
          ) : (
            <ul className="divide-y divide-secondary-100" data-testid="documents-template-list">
              {templates.map((tpl) => {
                const lh = letterheads.find((l) => l.id === tpl.letterhead_id);
                return (
                  <li key={tpl.id} className="flex items-center justify-between py-3 gap-3">
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-secondary-900 truncate">{tpl.name}</span>
                        <span className="text-xs px-2 py-0.5 rounded-full bg-secondary-100 text-secondary-600">
                          {tpl.entity_type}
                        </span>
                        <span className="text-xs text-secondary-400">{tpl.blocks.length} Blöcke</span>
                      </div>
                      <p className="text-xs text-secondary-500 truncate">
                        {lh ? `${t('documents.letterhead', 'Briefpapier')}: ${lh.name}` : t('documents.template.noLetterhead', 'Ohne Briefpapier')}
                      </p>
                    </div>
                    <div className="flex gap-2 shrink-0">
                      <Button size="sm" variant="secondary" onClick={() => setEditingTemplate(tpl)}>
                        {t('common.edit', 'Bearbeiten')}
                      </Button>
                      <Button
                        size="sm"
                        variant="danger"
                        onClick={async () => {
                          if (!window.confirm(t('documents.template.deleteConfirm', 'Vorlage wirklich löschen?'))) return;
                          try {
                            await deleteTpl.mutateAsync(tpl.id);
                            toast.success(t('documents.template.deleted', 'Vorlage gelöscht'));
                          } catch (e) {
                            toast.error(t('common.error', 'Fehler beim Löschen'));
                          }
                        }}
                        aria-label={t('common.delete', 'Löschen')}
                      >
                        {t('common.delete', 'Löschen')}
                      </Button>
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </Card>
      )}

      {editingLetterhead && (
        <LetterheadEditor
          letterhead={editingLetterhead === 'new' ? null : editingLetterhead}
          onClose={() => setEditingLetterhead(null)}
        />
      )}
      {editingTemplate && (
        <PrintTemplateEditor
          template={editingTemplate === 'new' ? null : editingTemplate}
          letterheads={letterheads}
          onClose={() => setEditingTemplate(null)}
        />
      )}
    </div>
  );
}