import { createSignal, For, onMount, Show } from 'solid-js'
import { useData } from '../context/data'
import {
  CREATE_CUSTOM_ROLE_MUTATION,
  DELETE_CUSTOM_ROLE_MUTATION,
  GET_COMMUNITY_ROLES_QUERY
} from '../graphql/queries'
import formStyles from '../styles/Form.module.css'
import styles from '../styles/RoleManager.module.css'

interface Role {
  id: string
  name: string
  description: string
  icon: string
}

interface RoleSettings {
  default_roles: string[]
  available_roles: string[]
}

interface RoleManagerProps {
  communityId?: number
  roleSettings: RoleSettings
  onRoleSettingsChange: (settings: RoleSettings) => void
  customRoles: Role[]
  onCustomRolesChange: (roles: Role[]) => void
}

const STANDARD_ROLES = [
  { id: 'reader', name: 'Читатель', description: 'Может читать и комментировать', icon: '👁️' },
  { id: 'author', name: 'Автор', description: 'Может создавать публикации', icon: '✍️' },
  { id: 'artist', name: 'Художник', description: 'Может быть credited artist', icon: '🎨' },
  { id: 'expert', name: 'Эксперт', description: 'Может добавлять доказательства', icon: '🧠' },
  { id: 'editor', name: 'Редактор', description: 'Может модерировать контент', icon: '📝' },
  { id: 'admin', name: 'Администратор', description: 'Полные права', icon: '👑' }
]

const RoleManager = (props: RoleManagerProps) => {
  const { queryGraphQL } = useData()
  const [showAddRole, setShowAddRole] = createSignal(false)
  const [newRole, setNewRole] = createSignal<Role>({ id: '', name: '', description: '', icon: '🔖' })
  const [errors, setErrors] = createSignal<Record<string, string>>({})

  // Загружаем роли при монтировании компонента
  onMount(async () => {
    if (props.communityId) {
      try {
        const rolesData = await queryGraphQL(GET_COMMUNITY_ROLES_QUERY, {
          community: props.communityId
        })

        if (rolesData?.adminGetRoles) {
          const standardRoleIds = STANDARD_ROLES.map((r) => r.id)
          const customRolesList = rolesData.adminGetRoles
            .filter((role: Role) => !standardRoleIds.includes(role.id))
            .map((role: Role) => ({
              id: role.id,
              name: role.name,
              description: role.description || '',
              icon: '🔖'
            }))
          props.onCustomRolesChange(customRolesList)
        }
      } catch (error) {
        console.error('Ошибка загрузки ролей:', error)
      }
    }
  })

  const getAllRoles = () => [...STANDARD_ROLES, ...props.customRoles]

  const isRoleDisabled = (roleId: string) => roleId === 'admin'

  const validateNewRole = (): boolean => {
    const role = newRole()
    const newErrors: Record<string, string> = {}

    if (!role.id.trim()) {
      newErrors.newRoleId = 'ID роли обязательно'
    } else if (!/^[a-z0-9_-]+$/.test(role.id)) {
      newErrors.newRoleId = 'ID может содержать только латинские буквы, цифры, дефисы и подчеркивания'
    } else if (getAllRoles().some((r) => r.id === role.id)) {
      newErrors.newRoleId = 'Роль с таким ID уже существует'
    }

    if (!role.name.trim()) {
      newErrors.newRoleName = 'Название роли обязательно'
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const addCustomRole = async () => {
    if (!validateNewRole()) return

    const role = newRole()

    if (props.communityId) {
      try {
        const result = await queryGraphQL(CREATE_CUSTOM_ROLE_MUTATION, {
          role: {
            id: role.id,
            name: role.name,
            description: role.description,
            icon: role.icon,
            community_id: props.communityId
          }
        })

        if (result?.adminCreateCustomRole?.success) {
          props.onCustomRolesChange([...props.customRoles, role])

          props.onRoleSettingsChange({
            ...props.roleSettings,
            available_roles: [...props.roleSettings.available_roles, role.id]
          })

          resetNewRoleForm()
        } else {
          setErrors({ newRoleId: result?.adminCreateCustomRole?.error || 'Ошибка создания роли' })
        }
      } catch (error) {
        console.error('Ошибка создания роли:', error)
        setErrors({ newRoleId: 'Ошибка создания роли' })
      }
    } else {
      props.onCustomRolesChange([...props.customRoles, role])
      props.onRoleSettingsChange({
        ...props.roleSettings,
        available_roles: [...props.roleSettings.available_roles, role.id]
      })
      resetNewRoleForm()
    }
  }

  const removeCustomRole = async (roleId: string) => {
    if (props.communityId) {
      try {
        const result = await queryGraphQL(DELETE_CUSTOM_ROLE_MUTATION, {
          role_id: roleId,
          community_id: props.communityId
        })

        if (result?.adminDeleteCustomRole?.success) {
          updateRolesAfterRemoval(roleId)
        } else {
          console.error('Ошибка удаления роли:', result?.adminDeleteCustomRole?.error)
        }
      } catch (error) {
        console.error('Ошибка удаления роли:', error)
      }
    } else {
      updateRolesAfterRemoval(roleId)
    }
  }

  const updateRolesAfterRemoval = (roleId: string) => {
    props.onCustomRolesChange(props.customRoles.filter((r) => r.id !== roleId))
    props.onRoleSettingsChange({
      available_roles: props.roleSettings.available_roles.filter((r) => r !== roleId),
      default_roles: props.roleSettings.default_roles.filter((r) => r !== roleId)
    })
  }

  const resetNewRoleForm = () => {
    setNewRole({ id: '', name: '', description: '', icon: '🔖' })
    setShowAddRole(false)
    setErrors({})
  }

  const toggleAvailableRole = (roleId: string) => {
    if (isRoleDisabled(roleId)) return

    const current = props.roleSettings
    const newAvailable = current.available_roles.includes(roleId)
      ? current.available_roles.filter((r) => r !== roleId)
      : [...current.available_roles, roleId]

    const newDefault = newAvailable.includes(roleId)
      ? current.default_roles
      : current.default_roles.filter((r) => r !== roleId)

    props.onRoleSettingsChange({
      available_roles: newAvailable,
      default_roles: newDefault
    })
  }

  const toggleDefaultRole = (roleId: string) => {
    if (isRoleDisabled(roleId)) return

    const current = props.roleSettings
    const newDefault = current.default_roles.includes(roleId)
      ? current.default_roles.filter((r) => r !== roleId)
      : [...current.default_roles, roleId]

    props.onRoleSettingsChange({
      ...current,
      default_roles: newDefault
    })
  }

  return (
    <div class={styles.roleManager}>
      {/* Доступные роли */}
      <div class={styles.section}>
        <div class={styles.sectionHeader}>
          <h3 class={styles.sectionTitle}>
            <span class={styles.icon}>🎭</span>
            Доступные роли в сообществе
          </h3>
        </div>
        <p class={styles.sectionDescription}>
          Выберите роли, которые могут быть назначены в этом сообществе
        </p>

        <div class={styles.rolesGrid}>
          <For each={getAllRoles()}>
            {(role) => (
              <div
                class={`${styles.roleCard} ${props.roleSettings.available_roles.includes(role.id) ? styles.selected : ''} ${isRoleDisabled(role.id) ? styles.disabled : ''}`}
                onClick={() => !isRoleDisabled(role.id) && toggleAvailableRole(role.id)}
              >
                <div class={styles.roleHeader}>
                  <span class={styles.roleIcon}>{role.icon}</span>
                  <div class={styles.roleActions}>
                    <Show when={props.customRoles.some((r) => r.id === role.id)}>
                      <button
                        type="button"
                        class={styles.removeButton}
                        onClick={(e) => {
                          e.stopPropagation()
                          void removeCustomRole(role.id)
                        }}
                      >
                        ❌
                      </button>
                    </Show>
                    <div class={styles.checkbox}>
                      <input
                        type="checkbox"
                        checked={props.roleSettings.available_roles.includes(role.id)}
                        disabled={isRoleDisabled(role.id)}
                        onChange={() => toggleAvailableRole(role.id)}
                      />
                    </div>
                  </div>
                </div>
                <div class={styles.roleContent}>
                  <div class={styles.roleName}>{role.name}</div>
                  <div class={styles.roleDescription}>{role.description}</div>
                  <Show when={isRoleDisabled(role.id)}>
                    <div class={styles.disabledNote}>Системная роль</div>
                  </Show>
                </div>
              </div>
            )}
          </For>
        </div>

        <div class={styles.addRoleForm}>
          {/* Форма добавления новой роли */}
          <Show
            when={showAddRole()}
            fallback={
              <button type="button" class={styles.addButton} onClick={() => setShowAddRole(true)}>
                <span>➕</span>
                Добавить роль
              </button>
            }
          >
            <h4 class={styles.addRoleTitle}>Добавить новую роль</h4>

            <div class={styles.addRoleFields}>
              <div class={styles.fieldGroup}>
                <label class={formStyles.label}>
                  <span class={formStyles.labelText}>
                    <span class={formStyles.labelIcon}>🆔</span>
                    ID роли
                    <span class={formStyles.required}>*</span>
                  </span>
                </label>
                <input
                  type="text"
                  class={`${formStyles.input} ${errors().newRoleId ? formStyles.error : ''}`}
                  value={newRole().id}
                  onInput={(e) => setNewRole((prev) => ({ ...prev, id: e.currentTarget.value }))}
                  placeholder="my_custom_role"
                />
                <Show when={errors().newRoleId}>
                  <span class={formStyles.fieldError}>
                    <span class={formStyles.errorIcon}>⚠️</span>
                    {errors().newRoleId}
                  </span>
                </Show>
              </div>

              <div class={styles.fieldGroup}>
                <label class={formStyles.label}>
                  <span class={formStyles.labelText}>
                    <span class={formStyles.labelIcon}>📝</span>
                    Название
                    <span class={formStyles.required}>*</span>
                  </span>
                </label>
                <input
                  type="text"
                  class={`${formStyles.input} ${errors().newRoleName ? formStyles.error : ''}`}
                  value={newRole().name}
                  onInput={(e) => setNewRole((prev) => ({ ...prev, name: e.currentTarget.value }))}
                  placeholder="Моя роль"
                />
                <Show when={errors().newRoleName}>
                  <span class={formStyles.fieldError}>
                    <span class={formStyles.errorIcon}>⚠️</span>
                    {errors().newRoleName}
                  </span>
                </Show>
              </div>

              <div class={styles.fieldGroup}>
                <label class={formStyles.label}>
                  <span class={formStyles.labelText}>
                    <span class={formStyles.labelIcon}>📄</span>
                    Описание
                  </span>
                </label>
                <input
                  type="text"
                  class={formStyles.input}
                  value={newRole().description}
                  onInput={(e) => setNewRole((prev) => ({ ...prev, description: e.currentTarget.value }))}
                  placeholder="Описание роли"
                />
              </div>

              <div class={styles.fieldGroup}>
                <label class={formStyles.label}>
                  <span class={formStyles.labelText}>
                    <span class={formStyles.labelIcon}>🎭</span>
                    Иконка
                  </span>
                </label>
                <input
                  type="text"
                  class={formStyles.input}
                  value={newRole().icon}
                  onInput={(e) => setNewRole((prev) => ({ ...prev, icon: e.currentTarget.value }))}
                  placeholder="🔖"
                />
              </div>
            </div>

            <div class={styles.addRoleActions}>
              <button type="button" class={styles.cancelButton} onClick={resetNewRoleForm}>
                Отмена
              </button>
              <button type="button" class={styles.primaryButton} onClick={addCustomRole}>
                Добавить роль
              </button>
            </div>
          </Show>
        </div>
      </div>

      {/* Дефолтные роли */}
      <div class={styles.section}>
        <h3 class={styles.sectionTitle}>
          <span class={styles.icon}>⭐</span>
          Дефолтные роли для новых пользователей
          <span class={styles.required}>*</span>
        </h3>
        <p class={styles.sectionDescription}>
          Роли, которые автоматически назначаются при вступлении в сообщество
        </p>

        <div class={styles.rolesGrid}>
          <For each={getAllRoles().filter((role) => props.roleSettings.available_roles.includes(role.id))}>
            {(role) => (
              <div
                class={`${styles.roleCard} ${props.roleSettings.default_roles.includes(role.id) ? styles.selected : ''} ${isRoleDisabled(role.id) ? styles.disabled : ''}`}
                onClick={() => !isRoleDisabled(role.id) && toggleDefaultRole(role.id)}
              >
                <div class={styles.roleHeader}>
                  <span class={styles.roleIcon}>{role.icon}</span>
                  <div class={styles.checkbox}>
                    <input
                      type="checkbox"
                      checked={props.roleSettings.default_roles.includes(role.id)}
                      disabled={isRoleDisabled(role.id)}
                      onChange={() => toggleDefaultRole(role.id)}
                    />
                  </div>
                </div>
                <div class={styles.roleContent}>
                  <div class={styles.roleName}>{role.name}</div>
                  <Show when={isRoleDisabled(role.id)}>
                    <div class={styles.disabledNote}>Системная роль</div>
                  </Show>
                </div>
              </div>
            )}
          </For>
        </div>
      </div>
    </div>
  )
}

export default RoleManager