import AdminLayout from '@admin/layouts/admin/admin-layout';
import { Head } from '@inertiajs/react';
import { ReactNode } from 'react';
import SaasAppInstanceForm from './SaasAppInstanceForm';

interface SaasAppInstance {
    id: number;
    uid: string;
    name: string;
    slug: string;
    url: string;
    host?: string;
    port?: number;
    type: 'public' | 'private';
    status: number;
    is_default: boolean;
    description?: string;
    settings?: {
        api_key?: string;
        api_secret?: string;
        webhook_url?: string;
        max_tenants?: number;
        features?: string[];
    };
    metadata?: Record<string, unknown>;
    created_at: string;
    updated_at: string;
}

interface Props {
    readonly saasAppInstance: SaasAppInstance;
    readonly statuses?: { label: string; value: number }[];
    readonly types?: { label: string; value: string }[];
    readonly error?: string;
    readonly errors?: Record<string, string>;
}

export default function Edit({ saasAppInstance, statuses, types, error, errors }: Props) {
    return (
        <>
            <Head title={`Edit Application Instance: ${saasAppInstance.name} - Admin Panel`} />

            <div className="space-y-6">
                <SaasAppInstanceForm
                    saasAppInstance={saasAppInstance}
                    statuses={statuses}
                    types={types}
                    error={error}
                    errors={errors}
                    isEdit={true}
                />
            </div>
        </>
    );
}

Edit.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Edit', href: '#' },
        ]}
    >
        {page}
    </AdminLayout>
);
