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

import React 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 } from 'lucide-react';
import { PrintButton } from '@/components/common/PrintButton';

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 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" />
        <PrintButton targetId="contact-detail" />
      </div>
      <div className="flex-1 overflow-y-auto" id="contact-detail">
        <ContactDetail
          contact={contact ?? null}
          loading={isLoading}
          onEdit={handleEdit}
          onDeleted={handleDeleted}
        />
      </div>
    </div>
  );
}