import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Shield, ArrowLeft, Check, AlertCircle } 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 Role {
    id: number;
    name: string;
    display_name: string;
}

interface Props {
    role: Role;
    groupedPermissions: GroupedPermission[];
    currentPermissions: string[];
}

export default function RoleEdit({ role, groupedPermissions, currentPermissions }: Props) {
    const { data, setData, put, processing, errors } = useForm({
        name: role.name,
        display_name: role.display_name || '',
        permissions: currentPermissions,
    });

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        put(route('roles.update', role.id));
    };

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: '系統管理', href: '#' },
                { label: '角色與權限', href: route('roles.index') },
                { label: '編輯角色', href: route('roles.edit', role.id), isPage: true },
            ]}
        >
            <Head title={`編輯角色 - ${role.name}`} />

            <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"
                                    value={data.name}
                                    onChange={e => setData('name', e.target.value)}
                                    className="font-mono bg-gray-50"
                                    disabled={role.name === 'super-admin'}
                                />
                                {errors.name && (
                                    <p className="text-sm text-red-500">{errors.name}</p>
                                )}
                                {role.name === 'super-admin' ? (
                                    <div className="flex items-center gap-2 text-amber-600 text-sm mt-2">
                                        <AlertCircle className="h-4 w-4" />
                                        <span>超級管理員角色名稱不可修改</span>
                                    </div>
                                ) : (
                                    <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>
    );
}
