import { useState, useRef, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import client from '../api/client'
import { ConfirmModal } from '../ui/Modal'
import Button from '../ui/Button'

// ── Role definitions (mirrors backend roles.py) ───────────────────────────────
export const ALL_ROLES = [
  { value: 'superadmin',       label: 'Superadmin',                  color: '#7c3aed' },
  { value: 'owner',            label: 'Ιδιοκτήτης',                  color: '#0f172a' },
  { value: 'store_manager',    label: 'Διαχ. Καταστήματος',           color: '#0369a1' },
  { value: 'staff_manager',    label: 'Διαχ. Προσωπικού',            color: '#0891b2' },
  { value: 'chef',             label: 'Σεφ',                          color: '#b45309' },
  { value: 'assistant_chef',   label: 'Βοηθός Σεφ',                  color: '#d97706' },
  { value: 'barista',          label: 'Barista',                      color: '#7c2d12' },
  { value: 'barman',           label: 'Barman / Barwoman',            color: '#92400e' },
  { value: 'waiter',           label: 'Σερβιτόρος',                   color: '#166534' },
  { value: 'assistant_waiter', label: 'Βοηθός Σερβιτόρου',           color: '#15803d' },
  { value: 'custom',           label: 'Προσαρμοσμένος',               color: '#6b7280' },
]

const ROLE_MAP = Object.fromEntries(ALL_ROLES.map(r => [r.value, r]))

// Permission column definitions — grouped for the table header
export const PERM_COLUMNS = [
  // Access
  { key: 'perm_access_dashboard', label: 'Dashboard',   group: 'Πρόσβαση' },
  { key: 'perm_access_waiter_app', label: 'POS App',    group: 'Πρόσβαση' },
  { key: 'perm_access_kds',       label: 'KDS',         group: 'Πρόσβαση' },
  // Orders
  { key: 'perm_open_orders',      label: 'Άνοιγμα',     group: 'Παραγγελίες' },
  { key: 'perm_close_orders',     label: 'Κλείσιμο',    group: 'Παραγγελίες' },
  { key: 'perm_cancel_orders',    label: 'Ακύρωση',     group: 'Παραγγελίες' },
  { key: 'perm_apply_discounts',  label: 'Εκπτώσεις',   group: 'Παραγγελίες' },
  { key: 'perm_modify_prices',    label: 'Τιμές',       group: 'Παραγγελίες' },
  // Management
  { key: 'perm_view_reports',     label: 'Αναφορές',    group: 'Διαχείριση' },
  { key: 'perm_manage_staff',     label: 'Προσωπικό',   group: 'Διαχείριση' },
  { key: 'perm_manage_menu',      label: 'Μενού',       group: 'Διαχείριση' },
  { key: 'perm_manage_tables',    label: 'Τραπέζια',    group: 'Διαχείριση' },
  { key: 'perm_manage_settings',  label: 'Ρυθμίσεις',   group: 'Διαχείριση' },
]

// ── Avatar helpers ─────────────────────────────────────────────────────────────
function avatarColor(name) {
  const palette = ['#3758c9', '#7a44c9', '#2f9e5e', '#d94b26', '#8a6d2b', '#0d7a8a', '#c93775']
  let h = 0
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0
  return palette[h % palette.length]
}

function WaiterAvatar({ waiter, size = 40 }) {
  const displayName = waiter.full_name || waiter.nickname || waiter.username
  if (waiter.avatar_url) {
    return (
      <img src={waiter.avatar_url} alt={displayName}
        style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
    )
  }
  const parts = displayName.trim().split(' ')
  const initials = (parts[0][0] + (parts[1]?.[0] || '')).toUpperCase()
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: avatarColor(displayName), color: 'white',
      fontSize: size * 0.38, fontWeight: 600,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>{initials}</div>
  )
}

// ── PIN input ──────────────────────────────────────────────────────────────────
const DIGITS = ['1','2','3','4','5','6','7','8','9','','0','⌫']

function PinInput({ value, onChange }) {
  function press(d) {
    if (d === '⌫') { onChange(value.slice(0, -1)); return }
    if (d === '' || value.length >= 6) return
    onChange(value + d)
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
      <div style={{ display: 'flex', gap: 10 }}>
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} style={{
            width: 13, height: 13, borderRadius: '50%',
            border: `2px solid ${i < value.length ? '#111827' : '#d1d5db'}`,
            background: i < value.length ? '#111827' : 'transparent',
            transition: 'all 150ms',
          }} />
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, width: '100%' }}>
        {DIGITS.map((d, i) => (
          <button key={i} type="button" onClick={() => press(d)} disabled={d === ''}
            style={{
              height: 46, borderRadius: 10, fontSize: 18, fontWeight: 600, border: 'none',
              cursor: d === '' ? 'default' : 'pointer',
              background: d === '' ? 'transparent' : d === '⌫' ? '#f3f4f6' : '#f8fafc',
              color: d === '⌫' ? '#6b7280' : '#111827',
              transition: 'background 100ms',
              visibility: d === '' ? 'hidden' : 'visible',
            }}>
            {d}
          </button>
        ))}
      </div>
    </div>
  )
}

// ── Permission toggle cell ─────────────────────────────────────────────────────
function PermToggle({ staffId, permKey, value, disabled, onToggle }) {
  const [optimistic, setOptimistic] = useState(value)
  const [saving, setSaving] = useState(false)

  useEffect(() => { setOptimistic(value) }, [value])

  async function handleClick() {
    if (disabled || saving) return
    const next = !optimistic
    setOptimistic(next)
    setSaving(true)
    try {
      await onToggle(staffId, permKey, next)
    } catch {
      setOptimistic(!next) // revert on error
    } finally {
      setSaving(false)
    }
  }

  const on = optimistic
  return (
    <button
      onClick={handleClick}
      disabled={disabled}
      title={disabled ? 'Ο superadmin έχει πάντα αυτό το δικαίωμα' : undefined}
      style={{
        width: 26, height: 26, borderRadius: 6, border: 'none',
        background: disabled ? '#e5e7eb' : on ? '#22c55e' : '#f3f4f6',
        color: disabled ? '#9ca3af' : on ? '#fff' : '#d1d5db',
        cursor: disabled ? 'not-allowed' : 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 120ms',
        opacity: saving ? 0.6 : 1,
        flexShrink: 0,
      }}
    >
      {on ? (
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      ) : (
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      )}
    </button>
  )
}

// ── Actions dropdown ───────────────────────────────────────────────────────────
function ActionsMenu({ member, onEdit, onZones, onResetPin, onBlock, onDelete, onResetPerms, isSuperadmin }) {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    if (!open) return
    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open])

  const items = [
    { label: 'Επεξεργασία', icon: editIcon, onClick: onEdit },
    { label: 'Πρόσβαση σε Ζώνες', icon: zonesIcon, onClick: onZones },
    { label: 'Επαναφορά PIN', icon: pinIcon, onClick: onResetPin },
    !isSuperadmin && { label: 'Επαναφορά Δικαιωμάτων', icon: resetIcon, onClick: onResetPerms },
    !isSuperadmin && { label: member.is_active ? 'Μπλοκάρισμα' : 'Ξεμπλοκάρισμα', icon: blockIcon, onClick: onBlock, color: member.is_active ? '#f97316' : '#22c55e' },
    !isSuperadmin && { label: 'Διαγραφή', icon: trashIcon, onClick: onDelete, color: '#ef4444' },
  ].filter(Boolean)

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={() => setOpen(v => !v)} style={{
        display: 'flex', alignItems: 'center', gap: 5,
        fontSize: 12, padding: '0 10px', height: 30, borderRadius: 7,
        border: '1px solid #e5e7eb', background: open ? '#f3f4f6' : '#fff',
        color: '#374151', fontWeight: 500, cursor: 'pointer',
      }}>
        Ενέργειες
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', right: 0, top: 'calc(100% + 5px)', zIndex: 100,
          background: '#fff', border: '1px solid #e5e7eb',
          borderRadius: 12, boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
          minWidth: 210, overflow: 'hidden', padding: '4px 0',
        }}>
          {items.map((item, i) => (
            <button key={i}
              onClick={() => { setOpen(false); item.onClick() }}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                width: '100%', padding: '9px 14px', border: 'none',
                background: 'transparent', cursor: 'pointer', textAlign: 'left',
                fontSize: 13.5, fontWeight: 500, color: item.color || '#111827',
              }}
              onMouseEnter={e => e.currentTarget.style.background = item.color ? `${item.color}10` : '#f9fafb'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{ color: item.color || '#6b7280', display: 'flex', flexShrink: 0 }}>{item.icon}</span>
              {item.label}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

// ── ZoneModal ──────────────────────────────────────────────────────────────────
function ZoneModal({ member, groups, onClose }) {
  const qc = useQueryClient()
  const hasAllZones = member.zone_assignments.some(z => z.group_id === null)
  const assignedIds = new Set(member.zone_assignments.map(z => z.group_id).filter(id => id !== null))
  const [allZones, setAllZones] = useState(hasAllZones)
  const [selected, setSelected] = useState(new Set(assignedIds))

  const saveZones = useMutation({
    mutationFn: (body) => client.put(`/api/waiters/${member.id}/zones`, body),
    onSuccess: () => { toast.success('Zones ενημερώθηκαν'); qc.invalidateQueries({ queryKey: ['staff'] }); onClose() },
    onError: () => toast.error('Σφάλμα'),
  })

  function toggleGroup(gid) {
    setSelected(prev => { const next = new Set(prev); next.has(gid) ? next.delete(gid) : next.add(gid); return next })
  }

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <h2 className="font-bold text-gray-800">Ζώνες — {member.username}</h2>
        <label className="flex items-center gap-3 cursor-pointer select-none">
          <input type="checkbox" className="w-5 h-5 rounded accent-primary-700" checked={allZones}
            onChange={e => { setAllZones(e.target.checked); if (e.target.checked) setSelected(new Set()) }} />
          <span className="font-semibold text-gray-700">Όλες οι ζώνες</span>
        </label>
        {!allZones && (
          <div className="space-y-2 max-h-60 overflow-y-auto">
            {groups.length === 0 && <p className="text-sm text-gray-400">Δεν υπάρχουν ομάδες τραπεζιών.</p>}
            {groups.map(g => (
              <label key={g.id} className="flex items-center gap-3 cursor-pointer select-none px-1">
                <input type="checkbox" className="w-5 h-5 rounded accent-primary-700" checked={selected.has(g.id)} onChange={() => toggleGroup(g.id)} />
                <span className="text-gray-700">{g.name}</span>
                {g.color && <span className="w-3 h-3 rounded-full inline-block ml-auto" style={{ background: g.color }} />}
              </label>
            ))}
          </div>
        )}
        {!allZones && selected.size === 0 && (
          <p className="text-xs text-amber-600 bg-amber-50 rounded px-3 py-1.5">Χωρίς επιλογή ο σερβιτόρος δεν βλέπει κανένα τραπέζι.</p>
        )}
        <div className="flex gap-3 pt-2">
          <button onClick={onClose} className="flex-1 btn btn-secondary">Ακύρωση</button>
          <button
            onClick={() => saveZones.mutate(allZones ? { all_zones: true, group_ids: [] } : { all_zones: false, group_ids: [...selected] })}
            disabled={saveZones.isPending} className="flex-1 btn btn-primary">Αποθήκευση</button>
        </div>
      </div>
    </div>
  )
}

// ── Shared form primitives ─────────────────────────────────────────────────────
function FormField({ label, required, desc, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <label style={{ fontSize: 11.5, fontWeight: 600, color: '#374151' }}>
        {label}{required && <span style={{ color: '#ef4444', marginLeft: 2 }}>*</span>}
      </label>
      {children}
      {desc && <p style={{ margin: 0, fontSize: 11, color: '#9ca3af', lineHeight: 1.4 }}>{desc}</p>}
    </div>
  )
}

function SectionLabel({ children }) {
  return (
    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9ca3af', marginBottom: 10 }}>
      {children}
    </div>
  )
}

function InfoBlock({ label, value, valueColor }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <span style={{ fontSize: 10.5, fontWeight: 600, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</span>
      <span style={{ fontSize: 13.5, fontWeight: 500, color: valueColor || '#111827' }}>{value || '—'}</span>
    </div>
  )
}

const inputStyle = {
  width: '100%', padding: '7px 10px', border: '1px solid #e5e7eb', borderRadius: 7,
  fontSize: 13, outline: 'none', color: '#111827', background: '#fff', boxSizing: 'border-box',
}

const EMPTY_FORM = {
  username: '', full_name: '', nickname: '', mobile_phone: '', email: '', note: '',
  role: 'waiter', pin: '', hourly_rate: '',
}

// ── Main page ──────────────────────────────────────────────────────────────────
export default function StaffPage() {
  const qc = useQueryClient()
  const [addModal, setAddModal] = useState(false)
  const [pinModal, setPinModal] = useState(null)
  const [zoneModal, setZoneModal] = useState(null)
  const [confirmDelete, setConfirmDelete] = useState(null)
  const [newPin, setNewPin] = useState('')
  const [newForm, setNewForm] = useState(EMPTY_FORM)
  const [newAvatarFile, setNewAvatarFile] = useState(null)
  const [newAvatarPreview, setNewAvatarPreview] = useState(null)
  const [editModal, setEditModal] = useState(null)
  const [editForm, setEditForm] = useState({ username: '', full_name: '', nickname: '', mobile_phone: '', email: '', note: '', role: 'waiter', hourly_rate: '' })
  const [filterRole, setFilterRole] = useState('all')
  const avatarInputRef = useRef(null)
  const newAvatarInputRef = useRef(null)

  const { data: staff = [], isLoading } = useQuery({
    queryKey: ['staff'],
    queryFn: () => client.get('/api/waiters/').then(r => r.data),
  })
  const { data: groups = [] } = useQuery({
    queryKey: ['table-groups'],
    queryFn: () => client.get('/api/tables/groups').then(r => r.data),
  })

  const invalidate = () => qc.invalidateQueries({ queryKey: ['staff'] })

  const createStaff = useMutation({
    mutationFn: async (body) => {
      const res = await client.post('/api/waiters/', body)
      if (newAvatarFile) {
        const fd = new FormData()
        fd.append('file', newAvatarFile)
        await client.post(`/api/waiters/${res.data.id}/avatar`, fd, { headers: { 'Content-Type': 'multipart/form-data' } })
      }
      return res
    },
    onSuccess: () => {
      toast.success('Εργαζόμενος δημιουργήθηκε')
      setAddModal(false); setNewForm(EMPTY_FORM); setNewAvatarFile(null); setNewAvatarPreview(null)
      invalidate()
    },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const updateStaff = useMutation({
    mutationFn: ({ id, ...body }) => client.put(`/api/waiters/${id}`, body),
    onSuccess: () => { toast.success('Στοιχεία ενημερώθηκαν'); setEditModal(null); invalidate() },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const uploadAvatar = useMutation({
    mutationFn: ({ id, file }) => {
      const fd = new FormData(); fd.append('file', file)
      return client.post(`/api/waiters/${id}/avatar`, fd, { headers: { 'Content-Type': 'multipart/form-data' } })
    },
    onSuccess: (res) => { toast.success('Avatar ανέβηκε'); setEditModal(res.data); invalidate() },
    onError: () => toast.error('Σφάλμα μεταφόρτωσης'),
  })

  const deleteAvatar = useMutation({
    mutationFn: (id) => client.delete(`/api/waiters/${id}/avatar`),
    onSuccess: (res) => { toast.success('Avatar αφαιρέθηκε'); setEditModal(res.data); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })

  const toggleBlock = useMutation({
    mutationFn: (id) => client.put(`/api/waiters/${id}/block`),
    onSuccess: () => invalidate(),
    onError: () => toast.error('Σφάλμα'),
  })

  const resetPin = useMutation({
    mutationFn: ({ id, pin }) => client.put(`/api/waiters/${id}/reset-pin?pin=${encodeURIComponent(pin)}`),
    onSuccess: () => { toast.success('PIN ανανεώθηκε'); setPinModal(null); setNewPin('') },
    onError: () => toast.error('Σφάλμα'),
  })

  const deleteStaff = useMutation({
    mutationFn: (id) => client.delete(`/api/waiters/${id}`),
    onSuccess: () => { toast.success('Διαγράφηκε'); setConfirmDelete(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })

  const resetPerms = useMutation({
    mutationFn: (id) => client.put(`/api/waiters/${id}/reset-permissions`),
    onSuccess: () => { toast.success('Δικαιώματα επαναφέρθηκαν'); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })

  async function togglePermission(memberId, permKey, value) {
    await client.put(`/api/waiters/${memberId}/permission`, { permission: permKey, value })
    invalidate()
  }

  if (isLoading) return <div className="flex items-center justify-center h-64 text-gray-400">Φόρτωση…</div>

  function openEdit(m) {
    setEditModal(m)
    setEditForm({
      username: m.username || '', full_name: m.full_name || '',
      nickname: m.nickname || '', mobile_phone: m.mobile_phone || '',
      email: m.email || '', note: m.note || '',
      role: m.role || 'waiter', hourly_rate: m.hourly_rate ?? '',
    })
  }

  // Group counts for header badges
  const groupedCounts = staff.reduce((acc, m) => {
    const g = m.role in { superadmin: 1, owner: 1, store_manager: 1, staff_manager: 1 } ? 'Διοίκηση'
      : m.role in { chef: 1, assistant_chef: 1, barista: 1, barman: 1 } ? 'Κουζίνα / Bar'
      : 'Σέρβις'
    acc[g] = (acc[g] || 0) + 1
    return acc
  }, {})

  const filtered = filterRole === 'all' ? staff : staff.filter(m => m.role === filterRole)

  // Build column group spans for the table header
  const groups2 = [
    { label: 'Πρόσβαση', cols: PERM_COLUMNS.filter(c => c.group === 'Πρόσβαση') },
    { label: 'Παραγγελίες', cols: PERM_COLUMNS.filter(c => c.group === 'Παραγγελίες') },
    { label: 'Διαχείριση', cols: PERM_COLUMNS.filter(c => c.group === 'Διαχείριση') },
  ]

  return (
    <div className="flex flex-col h-full min-h-0">
      {/* ── Header bar ── */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid #e5e7eb',
        padding: '0 24px', height: 60, flexShrink: 0,
      }}>
        <div style={{ display: 'flex', gap: 14, flex: 1, flexWrap: 'wrap' }}>
          {Object.entries(groupedCounts).map(([group, count]) => (
            <span key={group} style={{ fontSize: 12, color: '#6b7280' }}>
              <strong style={{ color: '#111827', fontWeight: 600 }}>{count}</strong> {group}
            </span>
          ))}
        </div>

        {/* Role filter */}
        <select
          value={filterRole}
          onChange={e => setFilterRole(e.target.value)}
          style={{ ...inputStyle, width: 'auto', fontSize: 12, padding: '4px 8px', color: '#374151' }}
        >
          <option value="all">Όλοι οι ρόλοι</option>
          {ALL_ROLES.map(r => (
            <option key={r.value} value={r.value}>{r.label}</option>
          ))}
        </select>

        <Button variant="primary" size="sm" onClick={() => setAddModal(true)}>+ Νέος εργαζόμενος</Button>
      </div>

      {/* ── Scrollable table area ── */}
      <div style={{ flex: 1, overflow: 'auto', padding: '0' }}>
        {filtered.length === 0 ? (
          <p style={{ textAlign: 'center', color: '#9ca3af', padding: '64px 0', fontSize: 14 }}>
            Δεν βρέθηκαν εργαζόμενοι.
          </p>
        ) : (
          <table style={{
            width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed',
            fontSize: 12,
          }}>
            <colgroup>
              <col style={{ width: 220, minWidth: 220 }} />
              <col style={{ width: 90, minWidth: 90 }} />
              {PERM_COLUMNS.map(c => (
                <col key={c.key} style={{ width: 58, minWidth: 54 }} />
              ))}
              <col style={{ width: 120, minWidth: 110 }} />
            </colgroup>
            <thead>
              {/* Group header row */}
              <tr style={{ borderBottom: '1px solid #e5e7eb', background: '#f9fafb' }}>
                <th style={thBase} />
                <th style={thBase} />
                {groups2.map(g => (
                  <th key={g.label} colSpan={g.cols.length} style={{
                    ...thBase,
                    borderLeft: '1px solid #e5e7eb',
                    color: '#374151', fontWeight: 700, fontSize: 10,
                    textTransform: 'uppercase', letterSpacing: '0.06em',
                    textAlign: 'center', padding: '6px 0',
                  }}>
                    {g.label}
                  </th>
                ))}
                <th style={thBase} />
              </tr>
              {/* Column label row */}
              <tr style={{ borderBottom: '2px solid #e5e7eb', background: '#f9fafb' }}>
                <th style={{ ...thBase, textAlign: 'left', padding: '6px 16px', fontWeight: 600, color: '#374151' }}>
                  Εργαζόμενος
                </th>
                <th style={{ ...thBase, textAlign: 'center', color: '#6b7280', fontWeight: 500 }}>Κατάσταση</th>
                {PERM_COLUMNS.map((c, i) => (
                  <th key={c.key} style={{
                    ...thBase,
                    textAlign: 'center', color: '#6b7280', fontWeight: 500,
                    borderLeft: i === 0 || PERM_COLUMNS[i - 1]?.group !== c.group ? '1px solid #e5e7eb' : undefined,
                    writingMode: 'vertical-rl', transform: 'rotate(180deg)',
                    height: 72, padding: '4px 0',
                    fontSize: 11,
                  }}>
                    {c.label}
                  </th>
                ))}
                <th style={{ ...thBase, textAlign: 'right', padding: '6px 12px', color: '#6b7280', fontWeight: 500 }}>
                  Ενέργειες
                </th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((member, rowIdx) => {
                const role = ROLE_MAP[member.role]
                const isSuperadmin = member.role === 'superadmin'
                const rowBg = rowIdx % 2 === 0 ? '#fff' : '#fafafa'
                return (
                  <tr key={member.id} style={{ background: rowBg, borderBottom: '1px solid #f3f4f6' }}
                    onMouseEnter={e => e.currentTarget.style.background = '#f0f9ff'}
                    onMouseLeave={e => e.currentTarget.style.background = rowBg}
                  >
                    {/* Identity cell */}
                    <td style={{ padding: '10px 16px', verticalAlign: 'middle' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <WaiterAvatar waiter={member} size={34} />
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontWeight: 600, color: '#111827', fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            {member.full_name || member.username}
                          </div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                            <span style={{
                              fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 4,
                              background: `${role?.color || '#6b7280'}18`,
                              color: role?.color || '#6b7280',
                              whiteSpace: 'nowrap',
                            }}>
                              {role?.label || member.role}
                            </span>
                            {member.nickname && (
                              <span style={{ fontSize: 11, color: '#9ca3af', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                {member.nickname}
                              </span>
                            )}
                          </div>
                        </div>
                      </div>
                    </td>

                    {/* Status cell */}
                    <td style={{ textAlign: 'center', verticalAlign: 'middle', padding: '0 4px' }}>
                      <span style={{
                        display: 'inline-block', fontSize: 10.5, fontWeight: 600,
                        padding: '2px 8px', borderRadius: 999,
                        background: member.is_active ? '#dcfce7' : '#fee2e2',
                        color: member.is_active ? '#15803d' : '#dc2626',
                      }}>
                        {member.is_active ? 'Ενεργός' : 'Μπλοκαρ.'}
                      </span>
                    </td>

                    {/* Permission toggle cells */}
                    {PERM_COLUMNS.map((col, i) => (
                      <td key={col.key} style={{
                        textAlign: 'center', verticalAlign: 'middle', padding: '0 4px',
                        borderLeft: i === 0 || PERM_COLUMNS[i - 1]?.group !== col.group ? '1px solid #f3f4f6' : undefined,
                      }}>
                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                          <PermToggle
                            staffId={member.id}
                            permKey={col.key}
                            value={isSuperadmin ? true : !!member[col.key]}
                            disabled={isSuperadmin}
                            onToggle={togglePermission}
                          />
                        </div>
                      </td>
                    ))}

                    {/* Actions cell */}
                    <td style={{ textAlign: 'right', padding: '0 12px', verticalAlign: 'middle' }}>
                      <ActionsMenu
                        member={member}
                        isSuperadmin={isSuperadmin}
                        onEdit={() => openEdit(member)}
                        onZones={() => setZoneModal(member)}
                        onResetPin={() => setPinModal(member.id)}
                        onBlock={() => toggleBlock.mutate(member.id)}
                        onDelete={() => setConfirmDelete(member.id)}
                        onResetPerms={() => resetPerms.mutate(member.id)}
                      />
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        )}
      </div>

      {/* ── Modals ── */}
      {addModal && (
        <AddStaffModal
          form={newForm} setForm={setNewForm}
          avatarFile={newAvatarFile} avatarPreview={newAvatarPreview}
          setAvatarFile={setNewAvatarFile} setAvatarPreview={setNewAvatarPreview}
          avatarInputRef={newAvatarInputRef}
          isPending={createStaff.isPending}
          onClose={() => { setAddModal(false); setNewForm(EMPTY_FORM); setNewAvatarFile(null); setNewAvatarPreview(null) }}
          onSubmit={() => createStaff.mutate({
            username: newForm.username, full_name: newForm.full_name || null,
            nickname: newForm.nickname || null, mobile_phone: newForm.mobile_phone || null,
            email: newForm.email || null, note: newForm.note || null,
            pin: newForm.pin, role: newForm.role, is_active: true,
            hourly_rate: newForm.hourly_rate !== '' ? parseFloat(newForm.hourly_rate) : null,
          })}
        />
      )}

      {editModal && (
        <EditStaffModal
          member={editModal} form={editForm} setForm={setEditForm}
          avatarInputRef={avatarInputRef}
          isPending={updateStaff.isPending}
          isUploadPending={uploadAvatar.isPending}
          isDeletePending={deleteAvatar.isPending}
          onClose={() => setEditModal(null)}
          onSubmit={() => updateStaff.mutate({
            id: editModal.id,
            username: editForm.username.trim() || undefined,
            full_name: editForm.full_name || null, nickname: editForm.nickname || null,
            mobile_phone: editForm.mobile_phone || null, email: editForm.email || null,
            note: editForm.note || null, role: editForm.role,
            hourly_rate: editForm.hourly_rate !== '' ? parseFloat(editForm.hourly_rate) : null,
          })}
          onUploadAvatar={file => uploadAvatar.mutate({ id: editModal.id, file })}
          onDeleteAvatar={() => deleteAvatar.mutate(editModal.id)}
        />
      )}

      {pinModal !== null && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-xs p-6 space-y-4">
            <h2 className="font-bold text-gray-800">Επαναφορά PIN — {staff.find(m => m.id === pinModal)?.username}</h2>
            <PinInput value={newPin} onChange={setNewPin} />
            <div className="flex gap-3 pt-2">
              <button onClick={() => { setPinModal(null); setNewPin('') }} className="flex-1 btn btn-secondary">Ακύρωση</button>
              <button onClick={() => resetPin.mutate({ id: pinModal, pin: newPin })} disabled={newPin.length < 4} className="flex-1 btn btn-primary">
                Αποθήκευση
              </button>
            </div>
          </div>
        </div>
      )}

      {confirmDelete !== null && (
        <ConfirmModal
          title="Διαγραφή εργαζόμενου;"
          message="Αυτή η ενέργεια δεν μπορεί να αναιρεθεί."
          confirmLabel="Διαγραφή"
          confirmVariant="danger"
          onConfirm={() => deleteStaff.mutate(confirmDelete)}
          onCancel={() => setConfirmDelete(null)}
        />
      )}

      {zoneModal && (
        <ZoneModal member={zoneModal} groups={groups} onClose={() => setZoneModal(null)} />
      )}
    </div>
  )
}

const thBase = {
  fontSize: 11, fontWeight: 600, color: '#6b7280',
  padding: '6px 4px', background: '#f9fafb',
  position: 'sticky', top: 0, zIndex: 1,
}

// ── SVG icons ─────────────────────────────────────────────────────────────────
const editIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
  </svg>
)
const zonesIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  </svg>
)
const pinIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>
)
const resetIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" />
  </svg>
)
const blockIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" /><line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
  </svg>
)
const trashIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 6h18" /><path d="M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
  </svg>
)

// ── Add Staff Modal ────────────────────────────────────────────────────────────
function AddStaffModal({ form, setForm, avatarFile, avatarPreview, setAvatarFile, setAvatarPreview, avatarInputRef, isPending, onClose, onSubmit }) {
  const f = (field, val) => setForm(p => ({ ...p, [field]: val }))
  const canSubmit = form.username.trim() && form.full_name.trim() && form.nickname.trim() && form.pin.length >= 4

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 50, padding: 24,
    }}>
      <div style={{
        background: '#fff', borderRadius: 20, boxShadow: '0 24px 72px rgba(0,0,0,0.18)',
        width: '100%', maxWidth: 980,
        maxHeight: '90vh', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{ padding: '18px 26px 14px', borderBottom: '1px solid #f3f4f6', display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
          {avatarPreview
            ? <img src={avatarPreview} alt="preview" style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
            : <div style={{ width: 48, height: 48, borderRadius: '50%', background: '#f3f4f6', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontSize: 22, color: '#9ca3af' }}>👤</span>
              </div>
          }
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ margin: 0, fontWeight: 700, fontSize: 16, color: '#111827' }}>Νέος εργαζόμενος</h2>
            <p style={{ margin: '2px 0 0', fontSize: 12, color: '#9ca3af' }}>Συμπληρώστε τα στοιχεία του εργαζόμενου</p>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <input ref={avatarInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={e => {
              const file = e.target.files?.[0]
              if (file) { setAvatarFile(file); setAvatarPreview(URL.createObjectURL(file)) }
              e.target.value = ''
            }} />
            <button onClick={() => avatarInputRef.current?.click()} type="button"
              style={{ fontSize: 12, padding: '5px 11px', border: '1px solid #e5e7eb', background: '#fff', borderRadius: 7, cursor: 'pointer', color: '#374151', fontWeight: 500 }}>
              {avatarPreview ? 'Αλλαγή φωτογραφίας' : 'Προσθήκη φωτογραφίας'}
            </button>
            {avatarPreview && (
              <button type="button" onClick={() => { setAvatarFile(null); setAvatarPreview(null) }}
                style={{ fontSize: 12, padding: '5px 11px', border: '1px solid #fecaca', background: '#fff5f5', borderRadius: 7, cursor: 'pointer', color: '#ef4444', fontWeight: 500 }}>
                Αφαίρεση
              </button>
            )}
          </div>
        </div>

        {/* Body — three columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', flex: 1, minHeight: 0, overflowY: 'auto' }}>
          {/* Col 1: Identity + Account */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: '1px solid #f3f4f6' }}>
            <div>
              <SectionLabel>Ταυτότητα</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Πλήρες Όνομα" required desc="Εμφανίζεται στα στατιστικά.">
                  <input style={inputStyle} placeholder="π.χ. Γιώργος Παπαδόπουλος" value={form.full_name} onChange={e => f('full_name', e.target.value)} autoFocus />
                </FormField>
                <FormField label="Παρατσούκλι" required desc="Εμφανίζεται στην εφαρμογή.">
                  <input style={inputStyle} placeholder="π.χ. Γιώργος" value={form.nickname} onChange={e => f('nickname', e.target.value)} />
                </FormField>
              </div>
            </div>
            <div>
              <SectionLabel>Λογαριασμός</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Όνομα χρήστη" required desc="Χρησιμοποιείται για login.">
                  <input style={inputStyle} placeholder="π.χ. giorgos" value={form.username} onChange={e => f('username', e.target.value)} />
                </FormField>
                <FormField label="Ρόλος" required desc="Ορίζει προκαθορισμένα δικαιώματα.">
                  <select style={inputStyle} value={form.role} onChange={e => f('role', e.target.value)}>
                    {ALL_ROLES.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
                  </select>
                </FormField>
              </div>
            </div>
          </div>

          {/* Col 2: Contact */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: '1px solid #f3f4f6' }}>
            <div>
              <SectionLabel>Επικοινωνία</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Κινητό τηλέφωνο" desc="Εσωτερική αναφορά μόνο.">
                  <input style={inputStyle} placeholder="π.χ. 6901234567" value={form.mobile_phone} onChange={e => f('mobile_phone', e.target.value)} />
                </FormField>
                <FormField label="Email" desc="Εσωτερική χρήση μόνο.">
                  <input style={inputStyle} type="email" placeholder="π.χ. giorgos@restaurant.gr" value={form.email} onChange={e => f('email', e.target.value)} />
                </FormField>
                <FormField label="Σημείωση" desc="Οποιαδήποτε εσωτερική σημείωση.">
                  <textarea style={{ ...inputStyle, resize: 'none' }} placeholder="π.χ. Μερική απασχόληση" value={form.note} onChange={e => f('note', e.target.value)} rows={4} />
                </FormField>
              </div>
            </div>
            <div>
              <SectionLabel>Μισθοδοσία</SectionLabel>
              <FormField label="Ωριαία αμοιβή (€/ώρα)" desc="Μόνο για διαχειριστές.">
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <input type="number" step="0.50" min="0" style={{ ...inputStyle, width: 110 }}
                    placeholder="π.χ. 5.50" value={form.hourly_rate ?? ''}
                    onChange={e => f('hourly_rate', e.target.value)} />
                  {form.hourly_rate && parseFloat(form.hourly_rate) > 0
                    ? <span style={{ fontSize: 11.5, color: '#16a34a', fontWeight: 500 }}>€{parseFloat(form.hourly_rate).toFixed(2)}/ώρα</span>
                    : <span style={{ fontSize: 11, color: '#9ca3af' }}>Δεν παρακολουθείται</span>
                  }
                </div>
              </FormField>
            </div>
          </div>

          {/* Col 3: PIN */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, background: '#fafafa' }}>
            <div>
              <SectionLabel>Κωδικός PIN</SectionLabel>
              <p style={{ margin: '0 0 16px', fontSize: 12, color: '#6b7280', lineHeight: 1.5 }}>
                Ο 4ψήφιος κωδικός που θα χρησιμοποιεί ο εργαζόμενος για να ξεκλειδώσει την εφαρμογή.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: '100%', maxWidth: 220 }}>
                  <PinInput value={form.pin} onChange={pin => f('pin', pin)} />
                  {form.pin.length > 0 && form.pin.length < 4 && (
                    <p style={{ textAlign: 'center', fontSize: 11.5, color: '#f59e0b', marginTop: 10 }}>
                      Χρειάζονται {4 - form.pin.length} ψηφία ακόμη
                    </p>
                  )}
                  {form.pin.length >= 4 && (
                    <p style={{ textAlign: 'center', fontSize: 11.5, color: '#22c55e', marginTop: 10, fontWeight: 600 }}>
                      ✓ PIN ορίστηκε
                    </p>
                  )}
                </div>
              </div>
            </div>
            <div style={{ marginTop: 'auto', padding: 14, background: '#f0fdf4', borderRadius: 10, border: '1px solid #bbf7d0' }}>
              <p style={{ margin: 0, fontSize: 11.5, color: '#15803d', lineHeight: 1.5 }}>
                Τα δικαιώματα θα οριστούν αυτόματα βάσει του επιλεγμένου ρόλου και μπορείτε να τα τροποποιήσετε μετά τη δημιουργία.
              </p>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding: '14px 26px', borderTop: '1px solid #f3f4f6', display: 'flex', justifyContent: 'flex-end', gap: 10, flexShrink: 0 }}>
          <button onClick={onClose} style={{ padding: '8px 18px', border: '1px solid #e5e7eb', background: '#fff', borderRadius: 8, fontSize: 13.5, cursor: 'pointer', color: '#374151', fontWeight: 500 }}>
            Ακύρωση
          </button>
          <button onClick={onSubmit} disabled={isPending || !canSubmit}
            style={{ padding: '8px 20px', border: 'none', background: canSubmit ? '#111827' : '#d1d5db', color: '#fff', borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: canSubmit ? 'pointer' : 'not-allowed' }}>
            {isPending ? 'Δημιουργία…' : 'Δημιουργία εργαζόμενου'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ── Edit Staff Modal ───────────────────────────────────────────────────────────
function EditStaffModal({ member, form, setForm, avatarInputRef, isPending, isUploadPending, isDeletePending, onClose, onSubmit, onUploadAvatar, onDeleteAvatar }) {
  const f = (field, val) => setForm(p => ({ ...p, [field]: val }))
  const canSubmit = form.username.trim() && form.full_name.trim() && form.nickname.trim()

  const zoneLabel = !member.zone_assignments?.length ? 'Χωρίς ζώνες'
    : member.zone_assignments.some(z => z.group_id === null) ? 'Όλες οι ζώνες'
    : `${member.zone_assignments.length} ζών${member.zone_assignments.length === 1 ? 'η' : 'ες'}`

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 50, padding: 24,
    }}>
      <div style={{
        background: '#fff', borderRadius: 20, boxShadow: '0 24px 72px rgba(0,0,0,0.18)',
        width: '100%', maxWidth: 980,
        maxHeight: '90vh', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{ padding: '18px 26px 14px', borderBottom: '1px solid #f3f4f6', display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
          <WaiterAvatar waiter={member} size={48} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ margin: 0, fontWeight: 700, fontSize: 16, color: '#111827' }}>
              Επεξεργασία — {member.full_name || member.username}
            </h2>
            <p style={{ margin: '2px 0 0', fontSize: 12, color: '#9ca3af' }}>Ενημέρωση στοιχείων εργαζόμενου</p>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <input ref={avatarInputRef} type="file" accept="image/*" style={{ display: 'none' }}
              onChange={e => { const file = e.target.files?.[0]; if (file) onUploadAvatar(file); e.target.value = '' }} />
            <button onClick={() => avatarInputRef.current?.click()} disabled={isUploadPending}
              style={{ fontSize: 12, padding: '5px 11px', border: '1px solid #e5e7eb', background: '#fff', borderRadius: 7, cursor: 'pointer', color: '#374151', fontWeight: 500 }}>
              {isUploadPending ? 'Μεταφόρτωση…' : member.avatar_url ? 'Αλλαγή φωτογραφίας' : 'Προσθήκη φωτογραφίας'}
            </button>
            {member.avatar_url && (
              <button onClick={onDeleteAvatar} disabled={isDeletePending}
                style={{ fontSize: 12, padding: '5px 11px', border: '1px solid #fecaca', background: '#fff5f5', borderRadius: 7, cursor: 'pointer', color: '#ef4444', fontWeight: 500 }}>
                Αφαίρεση
              </button>
            )}
          </div>
        </div>

        {/* Body — three columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', flex: 1, minHeight: 0, overflowY: 'auto' }}>
          {/* Col 1: Identity + Account */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: '1px solid #f3f4f6' }}>
            <div>
              <SectionLabel>Ταυτότητα</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Πλήρες Όνομα" required>
                  <input style={inputStyle} value={form.full_name} onChange={e => f('full_name', e.target.value)} autoFocus />
                </FormField>
                <FormField label="Παρατσούκλι" required>
                  <input style={inputStyle} value={form.nickname} onChange={e => f('nickname', e.target.value)} />
                </FormField>
              </div>
            </div>
            <div>
              <SectionLabel>Λογαριασμός</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Όνομα χρήστη" required>
                  <input style={inputStyle} value={form.username} onChange={e => f('username', e.target.value)} />
                </FormField>
                <FormField label="Ρόλος" desc="Αλλαγή ρόλου δεν αλλάζει αυτόματα τα δικαιώματα.">
                  <select style={inputStyle} value={form.role} onChange={e => f('role', e.target.value)}>
                    {ALL_ROLES.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
                  </select>
                </FormField>
              </div>
            </div>
          </div>

          {/* Col 2: Contact */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: '1px solid #f3f4f6' }}>
            <div>
              <SectionLabel>Επικοινωνία</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <FormField label="Κινητό τηλέφωνο">
                  <input style={inputStyle} value={form.mobile_phone} onChange={e => f('mobile_phone', e.target.value)} />
                </FormField>
                <FormField label="Email">
                  <input style={inputStyle} type="email" value={form.email} onChange={e => f('email', e.target.value)} />
                </FormField>
                <FormField label="Σημείωση">
                  <textarea style={{ ...inputStyle, resize: 'none' }} value={form.note} onChange={e => f('note', e.target.value)} rows={4} />
                </FormField>
              </div>
            </div>
          </div>

          {/* Col 3: Info + Payroll + PIN */}
          <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 16, background: '#fafafa' }}>
            <div>
              <SectionLabel>Πληροφορίες</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <InfoBlock label="Εγγραφή"
                    value={member.created_at ? new Date(member.created_at).toLocaleDateString('el-GR') : null} />
                  <InfoBlock label="Κατάσταση"
                    value={member.is_active ? 'Ενεργός' : 'Αποκλεισμένος'}
                    valueColor={member.is_active ? '#16a34a' : '#ef4444'} />
                </div>
                <InfoBlock label="Ρόλος" value={ROLE_MAP[member.role]?.label || member.role} />
                <InfoBlock label="Ζώνες" value={zoneLabel} />
              </div>
            </div>
            <div>
              <SectionLabel>Μισθοδοσία</SectionLabel>
              <FormField label="Ωριαία αμοιβή (€/ώρα)" desc="Μόνο για διαχειριστές.">
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <input type="number" step="0.50" min="0" style={{ ...inputStyle, width: 110 }}
                    placeholder="π.χ. 5.50" value={form.hourly_rate}
                    onChange={e => f('hourly_rate', e.target.value)} />
                  {form.hourly_rate !== '' && parseFloat(form.hourly_rate) > 0
                    ? <span style={{ fontSize: 11.5, color: '#16a34a', fontWeight: 500 }}>€{parseFloat(form.hourly_rate).toFixed(2)}/ώρα</span>
                    : <span style={{ fontSize: 11, color: '#9ca3af' }}>Δεν παρακολουθείται</span>
                  }
                </div>
              </FormField>
            </div>
            <div style={{ marginTop: 4, padding: 14, background: '#f3f4f6', borderRadius: 10 }}>
              <p style={{ margin: '0 0 4px', fontSize: 11.5, fontWeight: 600, color: '#374151' }}>Κωδικός PIN</p>
              <p style={{ margin: 0, fontSize: 11.5, color: '#6b7280', lineHeight: 1.5 }}>
                Για αλλαγή PIN χρησιμοποιήστε την επιλογή <strong style={{ color: '#374151' }}>Επαναφορά PIN</strong> από το μενού Ενεργειών.
              </p>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding: '14px 26px', borderTop: '1px solid #f3f4f6', display: 'flex', justifyContent: 'flex-end', gap: 10, flexShrink: 0 }}>
          <button onClick={onClose} style={{ padding: '8px 18px', border: '1px solid #e5e7eb', background: '#fff', borderRadius: 8, fontSize: 13.5, cursor: 'pointer', color: '#374151', fontWeight: 500 }}>
            Ακύρωση
          </button>
          <button onClick={onSubmit} disabled={isPending || !canSubmit}
            style={{ padding: '8px 20px', border: 'none', background: canSubmit ? '#111827' : '#d1d5db', color: '#fff', borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: canSubmit ? 'pointer' : 'not-allowed' }}>
            {isPending ? 'Αποθήκευση…' : 'Αποθήκευση αλλαγών'}
          </button>
        </div>
      </div>
    </div>
  )
}
