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

interface Tenant {
    id: number;
    company_name: string;
    email: string;
}

interface Package {
    id: number;
    name: string;
    price_per_tenant: number;
    price_per_user: number;
}

interface Subscription {
    id: number;
    tenant_id: number;
    package_id: number;
    start_date: string;
    end_date: string;
    billing_cycle: string;
    user_count: number;
    price_per_user: number;
    price_per_tenant: number;
    initial_setup_fee: number;
    discount: number;
    amount: number;
    grand_total: number;
    status: number;
}

interface Props {
    readonly subscription: Subscription;
    readonly tenants: Tenant[];
    readonly packages: Package[];
}

export default function Edit({ subscription, tenants, packages }: Props) {
    return (
        <>
            <Head title="Edit Subscription - Admin Panel" />

            <div className="no-scrollbar rounded-xl p-4">
                <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                    <div className="grid grid-cols-1 gap-1">
                        <h2 className="text-xl font-bold sm:text-2xl">Edit Subscription</h2>
                        <div className="flex items-center text-sm text-gray-600">
                            <span>Administration</span>
                            <span className="mx-2">›</span>
                            <span>Subscriptions</span>
                            <span className="mx-2">›</span>
                            <span>Edit</span>
                        </div>
                    </div>
                </div>

                <div className="space-y-6">
                    <SubscriptionEditForm subscription={subscription} tenants={tenants} packages={packages} />
                </div>
            </div>
        </>
    );
}

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