import { PageCrudWrapper } from '@/components/PageCrudWrapper';
import { rolesConfig } from '@/config/crud/roles';
import { RolePermissionCheckboxGroup } from '@/components/RolePermissionCheckboxGroup';
import { PermissionBadges } from '@/components/PermissionBadges';
import { useEffect, useState } from 'react';
import { usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

export default function RolesPage() {
  const { t } = useTranslation();
  const { permissions, flash, auth } = usePage().props as any;
  const [config, setConfig] = useState(rolesConfig);
  


  // Customize the form fields to handle permissions properly
  useEffect(() => {
    if (permissions) {
      // With tDynamic, we don't need to translate the config here
      setConfig({
        ...rolesConfig,
        table: {
          ...rolesConfig.table,
          columns: [
            ...rolesConfig.table.columns,
            {
              key: 'permissions',
              label: t('Permissions'),
              render: (value, row) => <PermissionBadges permissions={value || []} />
            }
          ]
        },
        form: {
          ...rolesConfig.form,
          fields: [
            ...rolesConfig.form.fields.map(field => {
              if (field.name === 'label') {
                return {
                  ...field,
                  render: (fieldConfig, formData, onChange) => {
                    const isDisabled = formData?.id && !formData?.is_editable;
                    return (
                      <input
                        type="text"
                        className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${isDisabled ? 'disabled:cursor-not-allowed disabled:opacity-50' : ''}`}
                        value={formData.label || ''}
                        onChange={(e) => onChange('label', e.target.value)}
                        disabled={isDisabled}
                        placeholder="Enter role name"
                        required
                      />
                    );
                  }
                };
              }
              return field;
            }).filter(field => field.name !== 'permissions'),
            {
              name: 'permissions',
              label: t('Role Permissions'),
              type: 'custom',
              colSpan: 12,
              render: (field, formData, onChange) => {
                return (
                  <div className="mt-4" id="permissions">
                    <h3 className="text-lg font-medium mb-2">{t("Manage Permissions")}</h3>
                    <p className="text-sm text-gray-500 mb-4">
                      {t("Select permissions for this role. You can select all permissions at once or manage them by module.")}
                      {auth.user?.type !== 'superadmin' && (
                        <span className="block mt-1 text-amber-600">
                          {t("Note: Only permissions for modules available to your role are shown.")}
                        </span>
                      )}
                    </p>
                    <RolePermissionCheckboxGroup
                      permissions={permissions}
                      selectedPermissions={formData.permissions || []}
                      onChange={(selected) => {
                        onChange('permissions', selected);
                      }}
                    />
                  </div>
                );
              }
            }
          ]
        },

      });
    }
  }, [permissions, t]);

  const breadcrumbs = [
    { title: t('Dashboard'), href: route('dashboard') },
    { title: t('Staff'), href: route('roles.index') },
    { title: t('Roles') }
  ];

  return (
    <PageCrudWrapper 
      config={config} 
      url="/roles" 
      breadcrumbs={breadcrumbs}
    />
  );
}