resources/js/Pages/Admin/Role/Create.tsx

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Shield, ArrowLeft, Check } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { FormEvent } from 'react';
import PermissionSelector, { GroupedPermission } from './PermissionSelector';

interface Props {
    groupedPermissions: GroupedPermission[];
}

export default function RoleCreate({ groupedPermissions }: Props) {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        display_name: '',
        permissions: [] as string[],
    });

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        post(route('roles.store'));
    };

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: '系統管理', href: '#' },
                { label: '角色與權限', href: route('roles.index') },
                { label: '建立角色', href: route('roles.create'), isPage: true },
            ]}
        >
            <Head title="建立角色" />

            <div className="container mx-auto p-6 max-w-7xl">
                <form onSubmit={handleSubmit} className="space-y-6">
                    {/* Header Area */}
                    <div>
                        <Link href={route('roles.index')}>
                            <Button
                                variant="outline"
                                type="button"
                                className="gap-2 button-outlined-primary mb-2"
                            >
                                <ArrowLeft className="h-4 w-4" />
                                返回角色與權限
                            </Button>
                        </Link>

                        <div className="flex items-center justify-between">
                            <div>
                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                                    <Shield className="h-6 w-6 text-primary-main" />
                                    建立新角色
                                </h1>
                                <p className="text-gray-500 mt-1">
                                    設定角色名稱並分配對應的操作權限
                                </p>
                            </div>
                            <Button
                                type="submit"
                                className="button-filled-primary"
                                disabled={processing}
                            >
                                <Check className="h-4 w-4 mr-2" />
                                儲存角色
                            </Button>
                        </div>
                    </div>

                    {/* Role Name */}
                    <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="space-y-2">
                                <Label htmlFor="display_name">顯示名稱 (中文/自定義)</Label>
                                <Input
                                    id="display_name"
                                    placeholder="例如：行政管理員"
                                    value={data.display_name}
                                    onChange={e => setData('display_name', e.target.value)}
                                />
                                {errors.display_name && (
                                    <p className="text-sm text-red-500">{errors.display_name}</p>
                                )}
                                <p className="text-xs text-gray-500">
                                    這是在介面上看到的名稱。
                                </p>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="name">英文代號 (系統識別用)</Label>
                                <Input
                                    id="name"
                                    placeholder="e.g. sales-manager"
                                    value={data.name}
                                    onChange={e => setData('name', e.target.value)}
                                    className="font-mono"
                                />
                                {errors.name && (
                                    <p className="text-sm text-red-500">{errors.name}</p>
                                )}
                                <p className="text-xs text-gray-500">
                                    請使用英文字母與連字號，例如: <code>warehouse-staff</code>
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* Permissions Matrix */}
                    <div className="space-y-4">
                        <h2 className="text-lg font-bold text-grey-0">權限設定</h2>
                        <PermissionSelector
                            groupedPermissions={groupedPermissions}
                            selectedPermissions={data.permissions}
                            onChange={(permissions) => setData('permissions', permissions)}
                        />
                    </div>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}