import { useState, useEffect, useCallback } from 'react'
import { useAlert } from '../context/AlertContext'
import { useAuth } from '../context/AuthContext'
import { useNavigate } from 'react-router-dom'
import { motion, AnimatePresence } from 'framer-motion'
import ConfirmModal from '../components/ConfirmModal'
import FormField from '../components/FormField'
import useModalLock from '../hooks/useModalLock'

import apiFetch from '../utils/api'
const API_BASE = '/api/admin'

const MODULE_LABELS = {
  attendance: 'Docházka',
  trips: 'Kniha jízd',
  offers: 'Nabídky',
  orders: 'Objednávky',
  projects: 'Projekty',
  invoices: 'Faktury',
  users: 'Uživatelé',
  settings: 'Nastavení'
}

export default function Settings() {
  const alert = useAlert()
  const { hasPermission } = useAuth()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(true)
  const [roles, setRoles] = useState([])
  const [, setAllPermissions] = useState([])
  const [permissionGroups, setPermissionGroups] = useState({})

  // 2FA requirement
  const [require2FA, setRequire2FA] = useState(false)
  const [require2FALoading, setRequire2FALoading] = useState(true)
  const [require2FASaving, setRequire2FASaving] = useState(false)

  const [showModal, setShowModal] = useState(false)
  const [editingRole, setEditingRole] = useState(null)
  const [saving, setSaving] = useState(false)
  const [form, setForm] = useState({
    name: '',
    display_name: '',
    description: '',
    permissions: []
  })

  const [deleteConfirm, setDeleteConfirm] = useState({ show: false, role: null })
  const [deleting, setDeleting] = useState(false)

  const canRoles = hasPermission('settings.roles')
  const canSecurity = hasPermission('settings.security')

  useEffect(() => {
    if (!canRoles && !canSecurity) {
      navigate('/')
    }
  }, [canRoles, canSecurity, navigate])

  useModalLock(showModal)

  const fetchData = useCallback(async () => {
    if (!canRoles) {
      setLoading(false)
      return
    }
    try {
      const response = await apiFetch(`${API_BASE}/roles.php`)
      if (response.status === 401) return
      const result = await response.json()
      if (result.success) {
        setRoles(result.data.roles)
        setAllPermissions(result.data.permissions)
        setPermissionGroups(result.data.permission_groups)
      } else {
        alert.error(result.error || 'Nepodařilo se načíst role')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setLoading(false)
    }
  }, [alert, canRoles])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  const fetch2FARequired = useCallback(async () => {
    if (!canSecurity) {
      setRequire2FALoading(false)
      return
    }
    try {
      const response = await apiFetch(`${API_BASE}/totp.php?action=get_required`)
      const result = await response.json()
      if (result.success) {
        setRequire2FA(result.data.require_2fa)
      }
    } catch {
      // ignore
    } finally {
      setRequire2FALoading(false)
    }
  }, [canSecurity])

  useEffect(() => {
    fetch2FARequired()
  }, [fetch2FARequired])

  const handleToggle2FARequired = async () => {
    setRequire2FASaving(true)
    try {
      const response = await apiFetch(`${API_BASE}/totp.php?action=set_required`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ required: !require2FA })
      })
      const result = await response.json()
      if (result.success) {
        setRequire2FA(result.data.require_2fa)
        alert.success(result.message)
      } else {
        alert.error(result.error || 'Nepodařilo se uložit nastavení')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setRequire2FASaving(false)
    }
  }

  const generateSlug = (text) => {
    return text
      .toLowerCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/^-+|-+$/g, '')
  }

  const openCreateModal = () => {
    setEditingRole(null)
    setForm({
      name: '',
      display_name: '',
      description: '',
      permissions: []
    })
    setShowModal(true)
  }

  const openEditModal = (role) => {
    setEditingRole(role)
    setForm({
      name: role.name,
      display_name: role.display_name,
      description: role.description || '',
      permissions: role.permissions || []
    })
    setShowModal(true)
  }

  const closeModal = () => {
    setShowModal(false)
    setEditingRole(null)
  }

  const handleDisplayNameChange = (value) => {
    const updates = { display_name: value }
    if (!editingRole) {
      updates.name = generateSlug(value)
    }
    setForm(prev => ({ ...prev, ...updates }))
  }

  const togglePermission = (permName) => {
    setForm(prev => ({
      ...prev,
      permissions: prev.permissions.includes(permName)
        ? prev.permissions.filter(p => p !== permName)
        : [...prev.permissions, permName]
    }))
  }

  const toggleModulePermissions = (moduleName) => {
    const modulePerms = (permissionGroups[moduleName] || []).map(p => p.name)
    const allChecked = modulePerms.every(p => form.permissions.includes(p))

    setForm(prev => ({
      ...prev,
      permissions: allChecked
        ? prev.permissions.filter(p => !modulePerms.includes(p))
        : [...new Set([...prev.permissions, ...modulePerms])]
    }))
  }

  const handleSubmit = async (e) => {
    e?.preventDefault()

    if (!form.display_name.trim()) {
      alert.error('Zobrazovaný název je povinný')
      return
    }

    if (!editingRole && !form.name.trim()) {
      alert.error('Název role je povinný')
      return
    }

    setSaving(true)
    try {
      const url = editingRole
        ? `${API_BASE}/roles.php?id=${editingRole.id}`
        : `${API_BASE}/roles.php`

      const response = await apiFetch(url, {
        method: editingRole ? 'PUT' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      })

      const result = await response.json()

      if (result.success) {
        closeModal()
        await new Promise(resolve => setTimeout(resolve, 300))
        alert.success(result.message || (editingRole ? 'Role byla aktualizována' : 'Role byla vytvořena'))
        fetchData()
      } else {
        alert.error(result.error || 'Nepodařilo se uložit roli')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!deleteConfirm.role) return

    setDeleting(true)
    try {
      const response = await apiFetch(`${API_BASE}/roles.php?id=${deleteConfirm.role.id}`, {
        method: 'DELETE'
      })

      const result = await response.json()

      if (result.success) {
        setDeleteConfirm({ show: false, role: null })
        alert.success(result.message || 'Role byla smazána')
        fetchData()
      } else {
        alert.error(result.error || 'Nepodařilo se smazat roli')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setDeleting(false)
    }
  }

  if (loading) {
    return (
      <div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
        <div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
          <div>
            <div className="admin-skeleton-line h-8" style={{ width: '200px', marginBottom: '0.5rem' }} />
            <div className="admin-skeleton-line" style={{ width: '140px' }} />
          </div>
        </div>
        <div className="admin-card">
          <div className="admin-skeleton" style={{ gap: '1.25rem' }}>
            {[0, 1, 2, 3, 4].map(i => (
              <div key={i} className="admin-skeleton-row">
                <div className="admin-skeleton-line circle" />
                <div style={{ flex: 1 }}>
                  <div className="admin-skeleton-line w-1/3" style={{ marginBottom: '0.5rem' }} />
                  <div className="admin-skeleton-line w-1/4" style={{ height: '10px' }} />
                </div>
                <div className="admin-skeleton-line w-1/4" />
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  const isAdminRole = (role) => role.name === 'admin'

  function get2FADescription() {
    if (require2FALoading) return 'Načítání...'
    if (require2FA) return 'Všichni uživatelé musí mít aktivní 2FA pro přístup do systému'
    return '2FA je volitelná - uživatelé si ji mohou aktivovat v profilu'
  }

  function get2FAButtonLabel() {
    if (require2FASaving) return 'Ukládání...'
    return require2FA ? 'Vypnout' : 'Zapnout'
  }

  function renderRoleButtonContent() {
    if (saving) {
      return <><div className="admin-spinner" style={{ width: 16, height: 16, borderWidth: 2 }} />Ukládání...</>
    }
    return editingRole ? 'Uložit změny' : 'Vytvořit roli'
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <div>
          <h1 className="admin-page-title">Nastavení</h1>
          <p className="admin-page-subtitle">Zabezpečení a správa rolí</p>
        </div>
        {canRoles && (
          <button onClick={openCreateModal} className="admin-btn admin-btn-primary">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            Přidat roli
          </button>
        )}
      </motion.div>

      {/* Security Settings */}
      {canSecurity && (
        <motion.div
          className="admin-card"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, delay: 0.1 }}
        >
          <div className="admin-card-header">
            <h2 className="admin-card-title">Zabezpečení</h2>
          </div>
          <div className="admin-card-body">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: require2FA ? 'var(--success-light)' : 'rgba(var(--text-secondary-rgb, 107, 114, 128), 0.1)',
                  color: require2FA ? 'var(--success)' : 'var(--text-secondary)',
                  flexShrink: 0
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                  </svg>
                </div>
                <div>
                  <div style={{ fontWeight: 500, color: 'var(--text-primary)', fontSize: '0.875rem' }}>
                    Povinné dvoufaktorové ověření (2FA)
                  </div>
                  <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
                    {get2FADescription()}
                  </div>
                </div>
              </div>
              {!require2FALoading && (
                <button
                  onClick={handleToggle2FARequired}
                  disabled={require2FASaving}
                  className={`admin-btn admin-btn-sm ${require2FA ? 'admin-btn-secondary' : 'admin-btn-primary'}`}
                  style={require2FA ? { color: 'var(--danger)' } : {}}
                >
                  {get2FAButtonLabel()}
                </button>
              )}
            </div>
          </div>
        </motion.div>
      )}

      {/* Roles Table */}
      {canRoles && <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.2 }}
      >
        <div className="admin-table-wrapper">
          <table className="admin-table">
            <thead>
              <tr>
                <th>Název</th>
                <th>Popis</th>
                <th>Oprávnění</th>
                <th>Uživatelé</th>
                <th>Akce</th>
              </tr>
            </thead>
            <tbody>
              {roles.map((role) => (
                <tr key={role.id}>
                  <td>
                    <div style={{ fontWeight: 500, color: 'var(--text-primary)' }}>
                      {role.display_name}
                    </div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--text-tertiary)' }}>
                      {role.name}
                    </div>
                  </td>
                  <td style={{ color: 'var(--text-secondary)' }}>
                    {role.description || '—'}
                  </td>
                  <td>
                    <span className="admin-badge admin-badge-info">
                      {isAdminRole(role) ? 'Vše' : role.permission_count}
                    </span>
                  </td>
                  <td>
                    <span className="admin-badge admin-badge-secondary">
                      {role.user_count}
                    </span>
                  </td>
                  <td>
                    {!isAdminRole(role) && (
                      <div style={{ display: 'flex', gap: '0.5rem' }}>
                        <button
                          onClick={() => openEditModal(role)}
                          className="admin-btn-icon"
                          title="Upravit"
                          aria-label="Upravit"
                        >
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                          </svg>
                        </button>
                        <button
                          onClick={() => setDeleteConfirm({ show: true, role })}
                          className="admin-btn-icon danger"
                          title={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
                          aria-label={role.user_count > 0 ? 'Nelze smazat roli s přiřazenými uživateli' : 'Smazat'}
                          disabled={role.user_count > 0}
                        >
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <polyline points="3 6 5 6 21 6" />
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                          </svg>
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </motion.div>}

      {/* Create/Edit Modal */}
      <AnimatePresence>
        {showModal && (
          <motion.div
            className="admin-modal-overlay"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            <div className="admin-modal-backdrop" onClick={closeModal} />
            <motion.div
              className="admin-modal admin-modal-lg"
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              transition={{ duration: 0.2 }}
            >
              <div className="admin-modal-header">
                <h2 className="admin-modal-title">
                  {editingRole ? 'Upravit roli' : 'Nová role'}
                </h2>
              </div>

              <div className="admin-modal-body">
                <div className="admin-form">
                  {editingRole && isAdminRole(editingRole) && (
                    <div className="admin-role-locked-notice">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="16" x2="12" y2="12" />
                        <line x1="12" y1="8" x2="12.01" y2="8" />
                      </svg>
                      Administrátor má vždy plný přístup ke všem funkcím
                    </div>
                  )}

                  <FormField label="Zobrazovaný název">
                    <input
                      type="text"
                      value={form.display_name}
                      onChange={(e) => handleDisplayNameChange(e.target.value)}
                      className="admin-form-input"
                      placeholder="např. Manažer"
                      disabled={editingRole && isAdminRole(editingRole)}
                    />
                  </FormField>

                  <FormField label="Systémový název (slug)">
                    <input
                      type="text"
                      value={form.name}
                      onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))}
                      className="admin-form-input"
                      placeholder="např. manager"
                      disabled={!!editingRole}
                    />
                    {!editingRole && (
                      <small style={{ color: 'var(--text-tertiary)', fontSize: '0.75rem' }}>
                        Pouze malá písmena, čísla a pomlčky. Nelze později změnit.
                      </small>
                    )}
                  </FormField>

                  <FormField label="Popis">
                    <textarea
                      value={form.description}
                      onChange={(e) => setForm(prev => ({ ...prev, description: e.target.value }))}
                      className="admin-form-input"
                      rows={2}
                      placeholder="Volitelný popis role"
                      disabled={editingRole && isAdminRole(editingRole)}
                    />
                  </FormField>

                  <div className="admin-form-group">
                    <label className="admin-form-label" style={{ marginBottom: '0.75rem' }}>Oprávnění</label>

                    {Object.entries(permissionGroups)
                      .sort(([a, aPerms], [b, bPerms]) => {
                        if (a === 'settings') return 1
                        if (b === 'settings') return -1
                        const aMin = Math.min(...aPerms.map(p => p.id))
                        const bMin = Math.min(...bPerms.map(p => p.id))
                        return aMin - bMin
                      })
                      .map(([module, perms], index) => {
                      const modulePerms = perms.map(p => p.name)
                      const allChecked = modulePerms.every(p => form.permissions.includes(p))
                      const someChecked = modulePerms.some(p => form.permissions.includes(p))
                      const disabled = editingRole && isAdminRole(editingRole)

                      return (
                        <div key={module}>
                          {index > 0 && <hr style={{ border: 'none', borderTop: '1px solid var(--border-color, #e0e0e0)', margin: '0.75rem 0' }} />}
                          <div className="admin-permission-group">
                            <div className="admin-permission-group-title">
                              <label className="admin-form-checkbox">
                                <input
                                  type="checkbox"
                                  checked={allChecked}
                                  ref={(el) => {
                                    if (el) el.indeterminate = someChecked && !allChecked
                                  }}
                                  onChange={() => toggleModulePermissions(module)}
                                  disabled={disabled}
                                />
                                <span>{MODULE_LABELS[module] || module}</span>
                              </label>
                            </div>
                            <div className="admin-permission-list">
                              {perms.map((perm) => (
                                <div key={perm.id} className="admin-permission-item">
                                  <label className="admin-form-checkbox">
                                    <input
                                      type="checkbox"
                                      checked={form.permissions.includes(perm.name)}
                                      onChange={() => togglePermission(perm.name)}
                                      disabled={disabled}
                                    />
                                    <span>{perm.display_name}</span>
                                  </label>
                                  {perm.description && (
                                    <div className="admin-permission-desc">{perm.description}</div>
                                  )}
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>

              <div className="admin-modal-footer">
                <button type="button" onClick={closeModal} className="admin-btn admin-btn-secondary" disabled={saving}>
                  Zrušit
                </button>
                {!(editingRole && isAdminRole(editingRole)) && (
                  <button type="button" onClick={handleSubmit} className="admin-btn admin-btn-primary" disabled={saving}>
                    {renderRoleButtonContent()}
                  </button>
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Delete Confirm Modal */}
      <ConfirmModal
        isOpen={deleteConfirm.show}
        onClose={() => setDeleteConfirm({ show: false, role: null })}
        onConfirm={handleDelete}
        title="Smazat roli"
        message={`Opravdu chcete smazat roli "${deleteConfirm.role?.display_name}"? Tato akce je nevratná.`}
        confirmText="Smazat"
        cancelText="Zrušit"
        type="danger"
        loading={deleting}
      />
    </div>
  )
}