import { useState, useEffect } from 'react'
import {
  Plus, Pencil, Trash2, Search, Shield, User as UserIcon,
  Sparkles, Mail, Phone, Eye, EyeOff, CheckCircle2, AlertCircle,
  Lock, Check, X as XIcon, Wrench,
} from 'lucide-react'
import { api } from '../lib/api'
import { useAuth } from '../contexts/AuthContext'
import type { User } from '../types'
import { cn } from '../lib/utils'
import { Modal } from '../components/ui/Modal'

// ── Types ──────────────────────────────────────────────────────────────────────

type StaffRole = 'hotel_admin' | 'hotel_manager' | 'housekeeper' | 'receptionist' | 'accountant' | 'security' | 'technician'

interface StaffUser {
  id: string
  firstName: string
  lastName: string
  email: string
  phone?: string
  role: StaffRole
  position: string
  isActive: boolean
  createdAt: string
  lastLogin?: string
  avatarColor: string
}

interface ModulePermission {
  key: string
  label: string
  description?: string
}

interface RolePermissions {
  id: string
  name: string
  color: string
  isSystem: boolean
  permissions: Record<string, boolean>
}

// ── Constants ──────────────────────────────────────────────────────────────────

const ROLE_META: Record<StaffRole, { label: string; color: string; icon: React.ElementType }> = {
  hotel_admin:   { label: 'Сис. администратор', color: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300', icon: Shield },
  hotel_manager: { label: 'Менеджер',           color: 'bg-brand-100 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300',     icon: Shield },
  receptionist:  { label: 'Ресепшн',            color: 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',             icon: UserIcon },
  housekeeper:   { label: 'Горничная',           color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300', icon: Sparkles },
  accountant:    { label: 'Бухгалтер',           color: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300', icon: UserIcon },
  security:      { label: 'Охрана',              color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300', icon: Shield },
  technician:    { label: 'Тех. специалист',     color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',     icon: Wrench },
}

const AVATAR_COLORS = [
  '#4F46E5', '#059669', '#2563EB', '#7C3AED',
  '#DC2626', '#D97706', '#DB2777', '#0891B2',
]

const DEFAULT_POSITIONS: Record<StaffRole, string[]> = {
  hotel_admin:   ['Генеральный директор', 'Владелец отеля', 'Управляющий директор'],
  hotel_manager: ['Управляющий', 'Заместитель управляющего', 'Менеджер смены'],
  receptionist:  ['Старший администратор', 'Администратор', 'Ночной администратор'],
  housekeeper:   ['Старшая горничная', 'Горничная', 'Уборщик'],
  accountant:    ['Главный бухгалтер', 'Бухгалтер', 'Финансовый менеджер'],
  security:      ['Начальник охраны', 'Охранник', 'Контролёр доступа'],
  technician:    ['Технический специалист', 'Электрик', 'Сантехник', 'Инженер по оборудованию'],
}

const MODULE_GROUPS: { group: string; modules: ModulePermission[] }[] = [
  {
    group: 'Фронт-офис',
    modules: [
      { key: 'calendar',    label: 'Календарь',         description: 'Просмотр и управление сеткой бронирований' },
      { key: 'bookings',    label: 'Бронирования',       description: 'Создание, редактирование, отмена броней' },
      { key: 'guests',      label: 'Гости',              description: 'Карточки гостей, история, лояльность' },
      { key: 'rooms',       label: 'Номерной фонд',      description: 'Номера, категории, тарифы' },
      { key: 'availability',label: 'Доступность',        description: 'Ограничения и стоп-продажи' },
    ],
  },
  {
    group: 'Операции',
    modules: [
      { key: 'housekeeping', label: 'Горничные',         description: 'Задания на уборку, статусы номеров' },
      { key: 'maintenance',  label: 'Техобслуживание',   description: 'Заявки на ремонт и обслуживание' },
      { key: 'room_service', label: 'Сервис в номер',    description: 'Заказы еды и услуг в номер' },
      { key: 'rental',       label: 'Аренда объектов',   description: 'Корт, баня, конференц-залы' },
    ],
  },
  {
    group: 'Продажи и финансы',
    modules: [
      { key: 'pos',         label: 'Кассовый терминал', description: 'POS, смены, оплаты' },
      { key: 'tariffs',     label: 'Тарифы',             description: 'Тарифы и ценовые планы' },
      { key: 'pricing',     label: 'Динамические цены',  description: 'Правила динамического ценообразования' },
      { key: 'discounts',   label: 'Скидки',             description: 'Промокоды и скидочные кампании' },
      { key: 'loyalty',     label: 'Лояльность',         description: 'Баллы, уровни, программа лояльности' },
      { key: 'reports',     label: 'Отчёты',             description: 'Финансовые и операционные отчёты' },
    ],
  },
  {
    group: 'Маркетинг и каналы',
    modules: [
      { key: 'channels',    label: 'Каналы продаж',     description: 'OTA, менеджер каналов' },
      { key: 'reviews',     label: 'Отзывы',             description: 'Управление отзывами гостей' },
      { key: 'website',     label: 'Сайт и виджет',     description: 'Сайт отеля и виджет бронирования' },
    ],
  },
  {
    group: 'Администрирование',
    modules: [
      { key: 'users',       label: 'Сотрудники',         description: 'Управление пользователями и ролями' },
      { key: 'documents',   label: 'Документы',          description: 'Шаблоны договоров и документов' },
      { key: 'settings',    label: 'Настройки',          description: 'Настройки отеля и системы' },
    ],
  },
]

const ALL_MODULE_KEYS = MODULE_GROUPS.flatMap(g => g.modules.map(m => m.key))

const allPerms = (v: boolean) =>
  Object.fromEntries(ALL_MODULE_KEYS.map(k => [k, v]))

const INITIAL_ROLE_PERMISSIONS: RolePermissions[] = [
  {
    id: 'rp_hotel_admin',
    name: 'Сис. администратор',
    color: '#7C3AED',
    isSystem: true,
    permissions: allPerms(true),
  },
  {
    id: 'rp_manager',
    name: 'Менеджер',
    color: '#4F46E5',
    isSystem: true,
    permissions: allPerms(true),
  },
  {
    id: 'rp_receptionist',
    name: 'Ресепшн',
    color: '#0EA5E9',
    isSystem: true,
    permissions: {
      ...allPerms(false),
      calendar: true, bookings: true, guests: true, rooms: true,
      housekeeping: true, room_service: true, rental: true,
      pos: true, reviews: true,
    },
  },
  {
    id: 'rp_housekeeper',
    name: 'Горничная',
    color: '#10B981',
    isSystem: true,
    permissions: {
      ...allPerms(false),
      housekeeping: true, rooms: true, maintenance: true,
    },
  },
  {
    id: 'rp_accountant',
    name: 'Бухгалтер',
    color: '#7C3AED',
    isSystem: true,
    permissions: {
      ...allPerms(false),
      reports: true, pos: true, discounts: true, tariffs: true, pricing: true, loyalty: true,
    },
  },
  {
    id: 'rp_security',
    name: 'Охрана',
    color: '#F97316',
    isSystem: true,
    permissions: {
      ...allPerms(false),
      calendar: true, bookings: true,
    },
  },
  {
    id: 'rp_technician',
    name: 'Тех. специалист',
    color: '#D97706',
    isSystem: true,
    permissions: {
      ...allPerms(false),
      housekeeping: true, rooms: true, maintenance: true,
    },
  },
]

// ── Helpers ────────────────────────────────────────────────────────────────────

function mapRole(r: string): StaffRole {
  if (r === 'housekeeper')  return 'housekeeper'
  if (r === 'receptionist') return 'receptionist'
  if (r === 'accountant')   return 'accountant'
  if (r === 'security')     return 'security'
  if (r === 'technician')   return 'technician'
  if (r === 'hotel_admin')  return 'hotel_admin'
  return 'hotel_manager'
}

function toStaffUser(u: User): StaffUser {
  const parts = u.name.trim().split(' ')
  const firstName = parts[0] ?? ''
  const lastName = parts.slice(1).join(' ')
  const role = mapRole(u.role)
  const colorIndex = Math.abs(u.id.charCodeAt(0) + u.id.charCodeAt(1)) % AVATAR_COLORS.length
  return {
    id:          u.id,
    firstName,
    lastName,
    email:       u.email,
    phone:       u.phone ?? '',
    role,
    position:    u.position ?? DEFAULT_POSITIONS[role]?.[0] ?? '',
    isActive:    u.active ?? true,
    createdAt:   u.createdAt?.slice(0, 10) ?? '',
    avatarColor: AVATAR_COLORS[colorIndex],
  }
}

// ── User Modal ─────────────────────────────────────────────────────────────────

function UserModal({
  open, user, onClose, onSave,
}: {
  open: boolean
  user?: StaffUser
  onClose: () => void
  onSave: (u: StaffUser, password?: string) => void
}) {
  const [form, setForm] = useState({
    firstName:   user?.firstName  ?? '',
    lastName:    user?.lastName   ?? '',
    email:       user?.email      ?? '',
    phone:       user?.phone      ?? '',
    role:        (user?.role      ?? 'receptionist') as StaffRole,
    position:    user?.position   ?? '',
    isActive:    user?.isActive   ?? true,
    avatarColor: user?.avatarColor ?? AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)],
  })
  const [password, setPassword] = useState('')
  const [showPass, setShowPass] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const isNew = !user

  const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
    setForm(prev => ({ ...prev, [k]: v }))

  const validate = () => {
    const e: Record<string, string> = {}
    if (!form.firstName.trim()) e.firstName = 'Введите имя'
    if (!form.lastName.trim())  e.lastName  = 'Введите фамилию'
    if (!form.email.trim())     e.email     = 'Введите email'
    if (!form.position.trim())  e.position  = 'Введите должность'
    if (isNew && password.length < 6) e.password = 'Минимум 6 символов'
    setErrors(e)
    return Object.keys(e).length === 0
  }

  const handleSave = () => {
    if (!validate()) return
    onSave({
      ...form,
      id: user?.id ?? '',
      createdAt: user?.createdAt ?? new Date().toISOString().slice(0, 10),
      lastLogin: user?.lastLogin,
    }, password || undefined)
  }

  const suggestions = DEFAULT_POSITIONS[form.role]

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={isNew ? 'Новый сотрудник' : 'Редактировать сотрудника'}
      size="lg"
      footer={
        <>
          <button onClick={onClose} className="btn-secondary">Отмена</button>
          <button onClick={handleSave} className="btn-primary">
            {isNew ? 'Создать' : 'Сохранить'}
          </button>
        </>
      }
    >
      <div className="space-y-4">
        {/* Avatar color + name */}
        <div className="flex items-center gap-4">
          <div
            className="w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold shrink-0"
            style={{ backgroundColor: form.avatarColor }}
          >
            {(form.firstName[0] ?? '?').toUpperCase()}
          </div>
          <div className="flex gap-1.5 flex-wrap">
            {AVATAR_COLORS.map(c => (
              <button
                key={c}
                type="button"
                onClick={() => set('avatarColor', c)}
                className={cn(
                  'w-6 h-6 rounded-lg transition-all',
                  form.avatarColor === c && 'ring-2 ring-offset-1 ring-slate-400',
                )}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Имя *</label>
            <input type="text" className={cn('input', errors.firstName && 'border-red-400')}
              placeholder="Иван" value={form.firstName} onChange={e => set('firstName', e.target.value)} />
            {errors.firstName && <p className="mt-1 text-xs text-red-500">{errors.firstName}</p>}
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Фамилия *</label>
            <input type="text" className={cn('input', errors.lastName && 'border-red-400')}
              placeholder="Иванов" value={form.lastName} onChange={e => set('lastName', e.target.value)} />
            {errors.lastName && <p className="mt-1 text-xs text-red-500">{errors.lastName}</p>}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email *</label>
            <input type="email" className={cn('input', errors.email && 'border-red-400')}
              placeholder="staff@hotel.ru" value={form.email} onChange={e => set('email', e.target.value)} />
            {errors.email && <p className="mt-1 text-xs text-red-500">{errors.email}</p>}
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Телефон</label>
            <input type="tel" className="input"
              placeholder="+7 (999) 000-00-00" value={form.phone} onChange={e => set('phone', e.target.value)} />
          </div>
        </div>

        {/* Role */}
        <div>
          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Роль в системе *</label>
          {form.role === 'hotel_admin' ? (
            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
              <Lock size={12} className="text-purple-500 dark:text-purple-400 shrink-0" />
              <span className="text-xs font-medium text-purple-700 dark:text-purple-300">Сис. администратор — роль нельзя изменить</span>
            </div>
          ) : (
            <div className="grid grid-cols-3 gap-2">
              {(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][])
                .filter(([id]) => id !== 'hotel_admin')
                .map(([id, meta]) => (
                  <button
                    key={id}
                    type="button"
                    onClick={() => { set('role', id); set('position', '') }}
                    className={cn(
                      'flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-xs font-medium border text-left transition-colors',
                      form.role === id
                        ? 'bg-brand-600 border-brand-600 text-white'
                        : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
                    )}
                  >
                    <meta.icon size={12} />
                    {meta.label}
                  </button>
                ))}
            </div>
          )}
        </div>

        {/* Position */}
        <div>
          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Должность *</label>
          <input type="text" className={cn('input mb-1.5', errors.position && 'border-red-400')}
            placeholder="Например: Старший администратор" value={form.position}
            onChange={e => set('position', e.target.value)} />
          {errors.position && <p className="mt-1 text-xs text-red-500">{errors.position}</p>}
          <div className="flex flex-wrap gap-1.5 mt-1">
            {suggestions.map(s => (
              <button
                key={s}
                type="button"
                onClick={() => set('position', s)}
                className={cn(
                  'text-xs px-2 py-0.5 rounded-full border transition-colors',
                  form.position === s
                    ? 'bg-brand-600 border-brand-600 text-white'
                    : 'border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:border-brand-400 hover:text-brand-600',
                )}
              >
                {s}
              </button>
            ))}
          </div>
        </div>

        {/* Password */}
        <div>
          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
            {isNew ? 'Пароль *' : 'Новый пароль (оставьте пустым, чтобы не менять)'}
          </label>
          <div className="relative">
            <input
              type={showPass ? 'text' : 'password'}
              className={cn('input pr-10', errors.password && 'border-red-400')}
              placeholder="••••••••"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
            <button type="button" onClick={() => setShowPass(v => !v)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
              {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
            </button>
          </div>
          {errors.password && <p className="mt-1 text-xs text-red-500">{errors.password}</p>}
        </div>

        {/* Active toggle */}
        <div className="flex items-center justify-between p-3 rounded-lg bg-slate-50 dark:bg-slate-700/40">
          <div>
            <p className="text-sm font-medium text-slate-900 dark:text-slate-100">Активный сотрудник</p>
            <p className="text-xs text-slate-500 dark:text-slate-400">Неактивные не могут войти в систему</p>
          </div>
          <button
            type="button"
            onClick={() => set('isActive', !form.isActive)}
            className={cn('relative w-11 h-6 rounded-full transition-colors', form.isActive ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600')}
          >
            <div className={cn('absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform', form.isActive ? 'left-[22px]' : 'left-0.5')} />
          </button>
        </div>
      </div>
    </Modal>
  )
}

// ── Roles & Permissions Tab ────────────────────────────────────────────────────

function RolesTab() {
  // hotel_admin always has all permissions — excluded from the editable list
  const editableRoles = INITIAL_ROLE_PERMISSIONS.filter(r => r.id !== 'rp_hotel_admin')
  const [roles, setRoles] = useState<RolePermissions[]>(editableRoles)
  const [selectedRoleId, setSelectedRoleId] = useState<string>(editableRoles[0].id)
  const [newRoleName, setNewRoleName] = useState('')
  const [addingRole, setAddingRole] = useState(false)
  const [deleteId, setDeleteId] = useState<string | null>(null)

  const selectedRole = roles.find(r => r.id === selectedRoleId) ?? roles[0]

  const togglePerm = (key: string) => {
    setRoles(prev => prev.map(r =>
      r.id === selectedRoleId
        ? { ...r, permissions: { ...r.permissions, [key]: !r.permissions[key] } }
        : r
    ))
  }

  const setAllPerms = (v: boolean) => {
    setRoles(prev => prev.map(r =>
      r.id === selectedRoleId
        ? { ...r, permissions: allPerms(v) }
        : r
    ))
  }

  const createRole = () => {
    const name = newRoleName.trim()
    if (!name) return
    const colors = ['#EC4899', '#14B8A6', '#F59E0B', '#6366F1', '#84CC16']
    const newRole: RolePermissions = {
      id: `rp_${Date.now()}`,
      name,
      color: colors[roles.length % colors.length],
      isSystem: false,
      permissions: allPerms(false),
    }
    setRoles(prev => [...prev, newRole])
    setSelectedRoleId(newRole.id)
    setNewRoleName('')
    setAddingRole(false)
  }

  const deleteRole = (id: string) => {
    setRoles(prev => prev.filter(r => r.id !== id))
    setDeleteId(null)
    if (selectedRoleId === id) {
      setSelectedRoleId(roles.find(r => r.id !== id)?.id ?? '')
    }
  }

  const activeCount = Object.values(selectedRole?.permissions ?? {}).filter(Boolean).length
  const totalCount  = ALL_MODULE_KEYS.length

  return (
    <div className="flex flex-col sm:flex-row gap-5 items-start">
      {/* Role list */}
      <div className="w-full sm:w-52 shrink-0">
        <div className="card overflow-hidden">
          <div className="p-3 border-b border-slate-100 dark:border-slate-700">
            <p className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Роли</p>
          </div>
          <div className="divide-y divide-slate-100 dark:divide-slate-700">
            {roles.map(role => (
              <div
                key={role.id}
                onClick={() => setSelectedRoleId(role.id)}
                className={cn(
                  'flex items-center justify-between px-3 py-2.5 cursor-pointer transition-colors',
                  selectedRoleId === role.id
                    ? 'bg-brand-50 dark:bg-brand-900/20'
                    : 'hover:bg-slate-50 dark:hover:bg-slate-700/30',
                )}
              >
                <div className="flex items-center gap-2 min-w-0">
                  <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: role.color }} />
                  <span className={cn(
                    'text-sm font-medium truncate',
                    selectedRoleId === role.id
                      ? 'text-brand-700 dark:text-brand-300'
                      : 'text-slate-700 dark:text-slate-300',
                  )}>
                    {role.name}
                  </span>
                </div>
                <div className="flex items-center gap-1 shrink-0 ml-1">
                  {role.isSystem && (
                    <Lock size={10} className="text-slate-300 dark:text-slate-600" />
                  )}
                  {!role.isSystem && (
                    <button
                      onClick={e => { e.stopPropagation(); setDeleteId(role.id) }}
                      className="p-0.5 rounded text-slate-300 hover:text-red-500 transition-colors"
                    >
                      <XIcon size={12} />
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Add role */}
          <div className="p-3 border-t border-slate-100 dark:border-slate-700">
            {addingRole ? (
              <div className="flex gap-1.5">
                <input
                  autoFocus
                  type="text"
                  className="input text-xs py-1.5 px-2 flex-1 min-w-0"
                  placeholder="Название роли"
                  value={newRoleName}
                  onChange={e => setNewRoleName(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter') createRole(); if (e.key === 'Escape') setAddingRole(false) }}
                />
                <button onClick={createRole} className="p-1.5 rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors shrink-0">
                  <Check size={12} />
                </button>
                <button onClick={() => setAddingRole(false)} className="p-1.5 rounded-lg bg-slate-100 dark:bg-slate-700 text-slate-500 hover:text-slate-700 transition-colors shrink-0">
                  <XIcon size={12} />
                </button>
              </div>
            ) : (
              <button
                onClick={() => setAddingRole(true)}
                className="flex items-center gap-1.5 text-xs text-brand-600 dark:text-brand-400 hover:text-brand-700 transition-colors w-full"
              >
                <Plus size={12} />
                Добавить роль
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Permissions editor */}
      {selectedRole && (
        <div className="flex-1 min-w-0">
          <div className="card overflow-hidden">
            {/* Header */}
            <div className="p-4 border-b border-slate-100 dark:border-slate-700 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-4 h-4 rounded-full" style={{ backgroundColor: selectedRole.color }} />
                <h3 className="font-semibold text-slate-900 dark:text-slate-100">{selectedRole.name}</h3>
                <span className="text-xs text-slate-500 dark:text-slate-400">
                  {activeCount} из {totalCount} разделов
                </span>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setAllPerms(false)}
                  className="text-xs text-slate-500 dark:text-slate-400 hover:text-red-600 transition-colors px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20"
                >
                  Снять все
                </button>
                <button
                  onClick={() => setAllPerms(true)}
                  className="text-xs text-slate-500 dark:text-slate-400 hover:text-brand-600 transition-colors px-2 py-1 rounded hover:bg-brand-50 dark:hover:bg-brand-900/20"
                >
                  Выбрать все
                </button>
              </div>
            </div>

            {/* Module groups */}
            <div className="p-4 space-y-5">
              {MODULE_GROUPS.map(group => (
                <div key={group.group}>
                  <p className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wide mb-2">
                    {group.group}
                  </p>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {group.modules.map(mod => {
                      const enabled = selectedRole.permissions[mod.key] ?? false
                      return (
                        <button
                          key={mod.key}
                          type="button"
                          onClick={() => togglePerm(mod.key)}
                          className={cn(
                            'flex items-start gap-3 p-3 rounded-xl border text-left transition-all',
                            enabled
                              ? 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800'
                              : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600',
                          )}
                        >
                          <div className={cn(
                            'w-5 h-5 rounded-md border-2 flex items-center justify-center shrink-0 mt-0.5 transition-colors',
                            enabled
                              ? 'bg-brand-600 border-brand-600'
                              : 'border-slate-300 dark:border-slate-600',
                          )}>
                            {enabled && <Check size={11} className="text-white" />}
                          </div>
                          <div>
                            <p className={cn(
                              'text-sm font-medium',
                              enabled
                                ? 'text-brand-700 dark:text-brand-300'
                                : 'text-slate-700 dark:text-slate-300',
                            )}>
                              {mod.label}
                            </p>
                            {mod.description && (
                              <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed">
                                {mod.description}
                              </p>
                            )}
                          </div>
                        </button>
                      )
                    })}
                  </div>
                </div>
              ))}
            </div>

            {selectedRole.isSystem && (
              <div className="px-4 pb-4">
                <div className="flex items-center gap-2 p-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
                  <Lock size={14} className="text-amber-600 dark:text-amber-400 shrink-0" />
                  <p className="text-xs text-amber-700 dark:text-amber-300">
                    Системная роль — изменения применяются немедленно для всех сотрудников с этой ролью
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Delete role confirm */}
      {deleteId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 max-w-sm w-full">
            <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">Удалить роль?</h3>
            <p className="text-sm text-slate-500 dark:text-slate-400 mb-5">
              Сотрудники с этой ролью потеряют связанные права доступа. Действие нельзя отменить.
            </p>
            <div className="flex gap-3">
              <button onClick={() => setDeleteId(null)} className="btn-secondary flex-1 justify-center">Отмена</button>
              <button
                onClick={() => deleteRole(deleteId)}
                className="flex-1 justify-center py-2 px-4 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-colors"
              >
                Удалить
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Page ───────────────────────────────────────────────────────────────────────

const PAGE_TABS = [
  { id: 'staff',  label: 'Сотрудники' },
  { id: 'roles',  label: 'Роли и права' },
] as const
type PageTab = typeof PAGE_TABS[number]['id']

export function UsersPage() {
  const { user: currentUser } = useAuth()
  const slug = currentUser?.hotelSlug ?? ''
  const [tab, setTab] = useState<PageTab>('staff')
  const [users, setUsers] = useState<StaffUser[]>([])
  const [search, setSearch] = useState('')
  const [roleFilter, setRoleFilter] = useState<StaffRole | 'all'>('all')
  const [modalOpen, setModalOpen] = useState(false)
  const [editing, setEditing] = useState<StaffUser | undefined>()
  const [deleteId, setDeleteId] = useState<string | null>(null)

  useEffect(() => {
    if (!slug) return
    api.users.list(slug)
      .then(list => setUsers(list.map(toStaffUser)))
      .catch(console.error)
  }, [slug])

  const filtered = users.filter(u => {
    const matchSearch = !search ||
      `${u.firstName} ${u.lastName}`.toLowerCase().includes(search.toLowerCase()) ||
      u.email.toLowerCase().includes(search.toLowerCase()) ||
      u.position.toLowerCase().includes(search.toLowerCase())
    const matchRole = roleFilter === 'all' || u.role === roleFilter
    return matchSearch && matchRole
  })

  const openCreate = () => { setEditing(undefined); setModalOpen(true) }
  const openEdit   = (u: StaffUser) => { setEditing(u); setModalOpen(true) }

  const handleSave = async (u: StaffUser, password?: string) => {
    const fullName = `${u.firstName} ${u.lastName}`.trim()
    const backendRoleMap: Record<StaffRole, string> = {
      hotel_admin:   'hotel_admin',
      hotel_manager: 'manager',
      receptionist:  'receptionist',
      housekeeper:   'housekeeper',
      accountant:    'accountant',
      security:      'security',
      technician:    'technician',
    }
    const backendRole = backendRoleMap[u.role] ?? 'manager'
    try {
      if (!u.id) {
        const created = await api.users.create(slug, {
          email: u.email, name: fullName, password: password ?? '', role: backendRole,
          phone: u.phone || undefined, position: u.position || undefined,
        })
        setUsers(prev => [...prev, toStaffUser(created)])
      } else {
        const upd: Partial<{ name: string; email: string; password: string; role: string; phone: string; position: string; active: boolean }> = {
          name: fullName, email: u.email, role: backendRole,
          phone: u.phone || undefined, position: u.position || undefined, active: u.isActive,
        }
        if (password) upd.password = password
        const updated = await api.users.update(slug, u.id, upd)
        setUsers(prev => prev.map(x => x.id === u.id ? { ...toStaffUser(updated), lastLogin: x.lastLogin } : x))
      }
      setModalOpen(false)
    } catch (err) {
      console.error('Failed to save user', err)
    }
  }

  const handleDelete = async (id: string) => {
    try {
      await api.users.delete(slug, id)
      setUsers(prev => prev.filter(u => u.id !== id))
      setDeleteId(null)
    } catch (err) {
      console.error('Failed to delete user', err)
    }
  }

  const stats = {
    total:  users.length,
    active: users.filter(u => u.isActive).length,
  }

  return (
    <div className="p-4 md:p-6 space-y-5">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Сотрудники</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400">{stats.total} пользователей · {stats.active} активных</p>
        </div>
        {tab === 'staff' && (
          <button className="btn-primary" onClick={openCreate}>
            <Plus size={15} />
            <span className="hidden sm:inline">Добавить сотрудника</span>
          </button>
        )}
      </div>

      {/* Tabs */}
      <div className="flex gap-1 border-b border-slate-200 dark:border-slate-700">
        {PAGE_TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={cn(
              'px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
              tab === t.id
                ? 'border-brand-600 text-brand-600 dark:text-brand-400 dark:border-brand-400'
                : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
            )}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'staff' && (
        <>
          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][]).map(([role, meta]) => {
              const count = users.filter(u => u.role === role).length
              return (
                <div key={role} className="card p-4 cursor-pointer hover:shadow-card-hover transition-shadow"
                  onClick={() => setRoleFilter(roleFilter === role ? 'all' : role)}>
                  <div className="flex items-center gap-2 mb-1">
                    <meta.icon size={14} className="text-slate-500 dark:text-slate-400" />
                    <span className={cn('text-xs font-medium px-1.5 py-0.5 rounded-full', meta.color)}>
                      {meta.label}
                    </span>
                  </div>
                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{count}</p>
                </div>
              )
            })}
          </div>

          {/* Filters */}
          <div className="flex gap-3 flex-wrap">
            <div className="relative flex-1 min-w-48">
              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
              <input type="text" className="input pl-9" placeholder="Поиск по имени, email, должности..."
                value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <div className="flex gap-1.5 flex-wrap">
              <button
                onClick={() => setRoleFilter('all')}
                className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
                  roleFilter === 'all'
                    ? 'bg-brand-600 text-white border-brand-600'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600')}
              >
                Все
              </button>
              {(Object.entries(ROLE_META) as [StaffRole, typeof ROLE_META[StaffRole]][]).map(([role, meta]) => (
                <button
                  key={role}
                  onClick={() => setRoleFilter(roleFilter === role ? 'all' : role)}
                  className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
                    roleFilter === role
                      ? 'bg-brand-600 text-white border-brand-600'
                      : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600')}
                >
                  {meta.label}
                </button>
              ))}
            </div>
          </div>

          {/* Table */}
          <div className="card overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-slate-50 dark:bg-slate-700/40 border-b border-slate-200 dark:border-slate-700">
                  <tr>
                    <th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Сотрудник</th>
                    <th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Роль / Должность</th>
                    <th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide hidden md:table-cell">Контакты</th>
                    <th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide hidden lg:table-cell">Последний вход</th>
                    <th className="text-left text-xs font-semibold text-slate-500 dark:text-slate-400 px-4 py-3 uppercase tracking-wide">Статус</th>
                    <th className="px-4 py-3 w-20" />
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 dark:divide-slate-700">
                  {filtered.map(u => {
                    const meta = ROLE_META[u.role]
                    return (
                      <tr key={u.id} className="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-3">
                            <div
                              className="w-9 h-9 rounded-xl flex items-center justify-center text-white text-sm font-bold shrink-0"
                              style={{ backgroundColor: u.avatarColor }}
                            >
                              {u.firstName[0]?.toUpperCase()}
                            </div>
                            <div>
                              <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                                {u.lastName} {u.firstName}
                              </p>
                              <p className="text-xs text-slate-500 dark:text-slate-400">{u.email}</p>
                            </div>
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          <span className={cn('text-xs font-medium px-2 py-0.5 rounded-full', meta.color)}>
                            {meta.label}
                          </span>
                          <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{u.position}</p>
                        </td>
                        <td className="px-4 py-3 hidden md:table-cell">
                          <div className="space-y-0.5">
                            <div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
                              <Mail size={11} /> {u.email}
                            </div>
                            {u.phone && (
                              <div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
                                <Phone size={11} /> {u.phone}
                              </div>
                            )}
                          </div>
                        </td>
                        <td className="px-4 py-3 hidden lg:table-cell">
                          <p className="text-xs text-slate-500 dark:text-slate-400">
                            {u.lastLogin
                              ? new Date(u.lastLogin).toLocaleDateString('ru-RU')
                              : '—'}
                          </p>
                        </td>
                        <td className="px-4 py-3">
                          <span className={cn(
                            'inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full',
                            u.isActive
                              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
                              : 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400',
                          )}>
                            {u.isActive
                              ? <><CheckCircle2 size={10} /> Активен</>
                              : <><AlertCircle size={10} /> Неактивен</>}
                          </span>
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-1 justify-end">
                            <button
                              onClick={() => openEdit(u)}
                              className="p-1.5 rounded-lg text-slate-400 hover:text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
                            >
                              <Pencil size={14} />
                            </button>
                            {u.role !== 'hotel_admin' && (
                              <button
                                onClick={() => setDeleteId(u.id)}
                                className="p-1.5 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                              >
                                <Trash2 size={14} />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

              {filtered.length === 0 && (
                <div className="py-12 text-center">
                  <UserIcon size={32} className="mx-auto text-slate-300 dark:text-slate-600 mb-2" />
                  <p className="text-slate-500 dark:text-slate-400">Сотрудники не найдены</p>
                </div>
              )}
            </div>
          </div>

          {/* User modal */}
          <UserModal
            open={modalOpen}
            user={editing}
            onClose={() => setModalOpen(false)}
            onSave={handleSave}
          />

          {/* Delete confirm */}
          {deleteId && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
              <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 max-w-sm w-full">
                <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">Удалить сотрудника?</h3>
                <p className="text-sm text-slate-500 dark:text-slate-400 mb-5">
                  Сотрудник потеряет доступ к системе. Историю его действий можно будет просмотреть в журнале.
                </p>
                <div className="flex gap-3">
                  <button onClick={() => setDeleteId(null)} className="btn-secondary flex-1 justify-center">Отмена</button>
                  <button onClick={() => handleDelete(deleteId)} className="flex-1 justify-center py-2 px-4 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-colors">
                    Удалить
                  </button>
                </div>
              </div>
            </div>
          )}
        </>
      )}

      {tab === 'roles' && <RolesTab />}
    </div>
  )
}