import { ContactDetailsPage } from '@admin/components/contact-details/ContactDetailsPage';
import AppLayout from '@admin/layouts/app-layout';
import { usePage } from '@inertiajs/react';
import { ReactNode } from 'react';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

interface ContactDetails {
    source?: string;
    contact_group?: string;
    industry?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    zip_code?: string;
    company?: string;
    designation?: string;
    website?: string;
    manager_id?: number;
    tax_id?: string;
    company_size?: string;
    founded_year?: string;
    department?: string;
    linkedin?: string;
    birthday?: string;
    notes?: string;
}

interface Contact {
    id: number;
    uid: string;
    name: string;
    email: string;
    phone: string;
    type: number;
    type_label?: string;
    category: number;
    status: number;
    avatar?: string;
    created_at?: string;
    details?: ContactDetails;
    company_details?: {
        logo?: string;
        website?: string;
        industry?: string;
        company_size?: string;
    };
    individual_details?: {
        profile_photo?: string;
        occupation?: string;
    };
    manager?: {
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
    };
    assigned_users?: Array<{
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
        type?: string;
        role?: string;
    }>;
}

interface ContactOption {
    id: number;
    name: string;
}

type ShowProps = {
    contact: Contact;
    availableContacts: ContactOption[];
};

function Show() {
    const { contact, availableContacts } = usePage<ShowProps>().props;
    return (
        <ContactDetailsPage
            contact={contact}
            availableContacts={availableContacts}
            pageTitle="Contact Details"
            contactAbleType={'App\\Models\\Contact'}
        />
    );
}

Show.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Contacts', href: route('contacts.index') },
            { title: 'Contact Details', href: '#' },
        ]}
        title="Contact Details"
    >
        {page}
    </AppLayout>
);

export default Show;