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

interface Tenant {
    id: number;
    company_name: string;
    email: string;
    payment_methods?: PaymentMethod[];
}

interface PaymentMethod {
    id: number;
    type: number;
    card_brand?: string;
    card_last_four?: string;
    bank_name?: string;
    account_last_four?: string;
    provider?: string;
}

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

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

export default function Create({ tenants, packages }: Props) {
    return (
        <>
            <Head title="Create 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">Create 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>Create</span>
                        </div>
                    </div>
                </div>

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

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