leocrm/frontend/src/pages/ContactDetailPage.tsx

/**
 * Contact Detail Page — loads a single contact by ID from route params.
 */

import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ContactDetail } from '@/components/contacts/ContactDetail';
import { ContactEditForm } from '@/components/contacts/ContactEditForm';
import { useWindowStore } from '@/store/windowStore';
import { useUnifiedContact, type UnifiedContact } from '@/api/hooks';
import { Button } from '@/components/ui/Button';
import { ChevronLeft, FileText } from 'lucide-react';
import { PrintButton } from '@/components/common/PrintButton';
import { DocumentGenerationDialog } from '@/components/documents/DocumentGenerationDialog';
import { usePermission } from '@/hooks/usePermission';
import { useAuthStore } from '@/store/authStore';

export function ContactDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: contact, isLoading } = useUnifiedContact(id);
  const openWindow = useWindowStore((s) => s.openWindow);
  const { hasPermission } = usePermission();
  const authUser = useAuthStore((state) => state.user);
  const [docDialogOpen, setDocDialogOpen] = useState(false);
  const canAccess = (perm: string): boolean => {
    return hasPermission(perm);
  };

  const handleEdit = () => {
    if (contact) {
      openWindow({
        title: t('contacts.edit'),
        type: 'contact-edit',
        component: ContactEditForm,
        componentProps: {
          contact,
          onClose: () => {},
          onSaved: () => {},
        },
      });
    }
  };

  const handleDeleted = () => {
    navigate('/contacts');
  };

  return (
    <div className="flex flex-col h-full" data-testid="contact-detail-page">
      <div className="flex items-center gap-2 px-4 py-2 border-b border-secondary-200 bg-white">
        <button
          onClick={() => navigate('/contacts')}
          className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
          aria-label={t('common.back')}
        >
          <ChevronLeft className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
          <span>{t('contacts.title')}</span>
        </button>
        <div className="flex-1" />
        {canAccess('contacts:read') && <PrintButton targetId="contact-detail" />}
        {canAccess('reports:generate') && (
          <button
            onClick={() => setDocDialogOpen(true)}
            className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
            aria-label={t('documents.dialog.title', 'Dokument erstellen')}
            title={t('documents.dialog.title', 'Dokument erstellen')}
            data-testid="contact-detail-document-button"
          >
            <FileText className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
          </button>
        )}
      </div>
      <div className="flex-1 overflow-y-auto" id="contact-detail">
        <ContactDetail
          contact={contact ?? null}
          loading={isLoading}
          onEdit={canAccess('contacts:write') ? handleEdit : undefined}
          onDeleted={handleDeleted}
        />
      </div>
      {contact && (
        <DocumentGenerationDialog
          open={docDialogOpen}
          onClose={() => setDocDialogOpen(false)}
          entityType={contact.type === 'company' ? 'company' : 'contact'}
          entityId={contact.id}
          entityLabel={contact.displayname}
        />
      )}
    </div>
  );
}