/**
 * 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 { ContactEditModal } from '@/components/contacts/ContactEditModal';
import { useUnifiedContact, type UnifiedContact } from '@/api/hooks';
import { Button } from '@/components/ui/Button';
import { ChevronLeft } from 'lucide-react';

export function ContactDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: contact, isLoading } = useUnifiedContact(id);
  const [editModalOpen, setEditModalOpen] = React.useState(false);
  const [editingContact, setEditingContact] = React.useState<UnifiedContact | null>(null);

  const handleEdit = () => {
    if (contact) {
      setEditingContact(contact);
      setEditModalOpen(true);
    }
  };

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

  const handleSaved = () => {
    setEditModalOpen(false);
    setEditingContact(null);
  };

  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>
      <div className="flex-1 overflow-y-auto">
        <ContactDetail
          contact={contact ?? null}
          loading={isLoading}
          onEdit={handleEdit}
          onDeleted={handleDeleted}
        />
      </div>
      <ContactEditModal
        open={editModalOpen}
        onClose={() => setEditModalOpen(false)}
        contact={editingContact}
        onSaved={handleSaved}
      />
    </div>
  );
}
