import RoleForm from '@/components/all-forms/RoleForm';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/app-layout';
import { Head, Link, router, usePage } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import type { ReactNode } from 'react';

declare const route: (...args: any[]) => string;

export default function Create() {
    const { modulePermissions } = usePage<any>().props;

    const handleSubmit = (formData: any) => {
        router.post(route('roles.store'), formData, {
            onError: (errors) => console.error('Validation errors:', errors),
        });
    };

    return (
        <>
            <Head title="Create Role" />
            <div className="no-scrollbar rounded-xl p-2 sm:p-4">

                {/* Page header */}
                <div className="mb-6 flex items-start gap-4">
                    <Button
                        variant="outline"
                        size="sm"
                        asChild
                        className="mt-1 shrink-0"
                    >
                        <Link href={route('roles.index')}>
                            <ArrowLeft className="h-4 w-4" />
                        </Link>
                    </Button>
                    <div>
                        <h1 className="text-xl font-bold sm:text-2xl">Create Role</h1>
                        <div className="flex items-center text-sm text-gray-600">
                            <span>Platform</span>
                            <span className="mx-2">›</span>
                            <Link href={route('roles.index')} className="hover:text-gray-900">Roles</Link>
                            <span className="mx-2">›</span>
                            <span>Create</span>
                        </div>
                    </div>
                </div>

                <RoleForm
                    modulePermissions={modulePermissions as any}
                    onSubmit={handleSubmit}
                    submitButtonText="Create Role"
                    isEdit={false}
                    isView={false}
                />
            </div>
        </>
    );
}

Create.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Roles', href: route('roles.index') },
            { title: 'Create', href: '#' },
        ]}
        title="Create Role"
    >
        {page}
    </AppLayout>
);
