import { useEffect, useRef, useState, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import TableCard from '../components/TableCard'
import ConnectionBanner from '../components/ConnectionBanner'
import EmergencyBar from '../components/EmergencyBar'
import UserMenu from '../components/UserMenu'
import useAuthStore from '../store/authStore'
import useTableColourStore from '../store/tableColourStore'
import useConnectionStore from '../store/connectionStore'
import useTableViewStore from '../store/tableViewStore'
import client from '../api/client'
import db from '../db/posdb'
import { queueOfflinePayment } from '../services/offlinePayments'
import { useNotifications } from '../context/NotificationContext'
import { FlagsIcon, TransferIcon, MergeIcon, PrintIcon, WaiterIcon } from '../components/Icons'

function fmtPrice(v) { return Number(v || 0).toFixed(2) + ' €' }

// ─── Icons ────────────────────────────────────────────────────────────────────

function FilterIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
    </svg>
  )
}

// ─── Notification drawer ──────────────────────────────────────────────────────

function NotificationDrawer({ messages, onClose }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-sheet" onClick={e => e.stopPropagation()} style={{ maxHeight: '80svh' }}>
        <div className="modal-handle" />
        <h2 className="modal-title" style={{ marginBottom: 16 }}>Ειδοποιήσεις</h2>
        {messages.length === 0 && (
          <p style={{ textAlign: 'center', color: 'var(--muted)', padding: 24 }}>Δεν υπάρχουν ειδοποιήσεις</p>
        )}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, overflowY: 'auto', flex: 1 }}>
          {messages.map(msg => {
            const tableIds = (() => { try { return JSON.parse(msg.table_ids || '[]') } catch { return [] } })()
            return (
              <div key={msg.id} style={{
                padding: '12px 4px', borderBottom: '1px solid var(--border)',
                display: 'flex', gap: 12, alignItems: 'flex-start',
                opacity: msg._acked ? 0.5 : 1,
              }}>
                <span style={{ fontSize: 20, flexShrink: 0 }}>📢</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  {msg.sender_name && (
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#a5b4fc', marginBottom: 2 }}>{msg.sender_name}</div>
                  )}
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)' }}>{msg.body}</div>
                  {tableIds.length > 0 && (
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>Τραπέζι: {tableIds.join(', ')}</div>
                  )}
                  <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>
                    {new Date(msg.created_at).toLocaleTimeString('el-GR', { hour: '2-digit', minute: '2-digit' })}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
        <button className="btn btn--secondary" style={{ width: '100%', marginTop: 12 }} onClick={onClose}>Κλείσιμο</button>
      </div>
    </div>
  )
}

// ─── Table quick-view modal (long press) ──────────────────────────────────────

const QUICK_ACTIONS = [
  { Icon: FlagsIcon,    label: 'Ενδείξεις Τραπεζιού',  key: 'flags',          color: '#fac823', iconBg: 'rgba(251,191,36,0.15)'  },
  { Icon: TransferIcon, label: 'Μεταφορά',              key: 'transfer',       color: '#6099db', iconBg: 'rgba(96,165,250,0.15)'  },
  { Icon: MergeIcon,    label: 'Συγχώνευση',            key: 'merge',          color: '#6099db', iconBg: 'rgba(96,165,250,0.15)'  },
  { Icon: PrintIcon,    label: 'Εκτύπωση Σύνοψης',     key: 'print_synopsis', color: '#cbd5e1', iconBg: 'rgba(148,163,184,0.15)' },
  { Icon: WaiterIcon,   label: 'Ανάθεση Σερβιτόρου',   key: 'assign_waiter',  color: '#39b861', iconBg: 'rgba(34,197,94,0.15)'   },
]

function TableQuickModal({ table, order, flags, onClose, onNavigate, onAction }) {
  const tableName = table.label || `T${table.number}`
  const activeItems = order?.items?.filter(i => i.status === 'active') || []
  const total = activeItems.reduce((s, i) => s + i.unit_price * i.quantity, 0)
  const paid = order?.payments?.reduce((s, p) => s + p.amount, 0) || 0
  const due = Math.max(0, total - paid)

  const statusLabel = {
    open: 'Ανοιχτό', partially_paid: 'Μερικώς πληρωμένο', paid: 'Πληρωμένο',
  }[order?.status] || 'Ελεύθερο'

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div style={{ width: '100%', maxWidth: 480, margin: '0 auto' }} onClick={e => e.stopPropagation()}>
        <div style={{ background: 'var(--bg2)', borderRadius: '16px 16px 0 0', padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div className="modal-handle" style={{ marginBottom: 12 }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
            <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>{tableName}</span>
            <span style={{ fontSize: 13, color: 'var(--muted)' }}>{statusLabel}</span>
          </div>
          {order ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
                <span style={{ color: 'var(--muted)' }}>Σύνολο</span>
                <span style={{ fontWeight: 600, color: 'var(--text)' }}>{fmtPrice(total)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
                <span style={{ color: 'var(--muted)' }}>Πληρωμένο</span>
                <span style={{ fontWeight: 600, color: '#22c55e' }}>{fmtPrice(paid)}</span>
              </div>
              {due > 0 && (
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
                  <span style={{ color: 'var(--muted)' }}>Υπόλοιπο</span>
                  <span style={{ fontWeight: 700, color: '#f59e0b' }}>{fmtPrice(due)}</span>
                </div>
              )}
            </div>
          ) : (
            <p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 12 }}>Δεν υπάρχει ενεργή παραγγελία</p>
          )}
          {flags.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {flags.map(f => (
                <div key={f.id} style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  background: (f.color || '#6295F3') + '22',
                  border: `1px solid ${f.color || '#6295F3'}`,
                  borderRadius: 20, padding: '4px 10px',
                }}>
                  <span style={{ fontSize: 14 }}>{f.emoji || '🏷️'}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: f.color || '#6295F3' }}>{f.name}</span>
                </div>
              ))}
            </div>
          )}
          <button className="btn btn--primary" style={{ width: '100%', marginTop: 14 }} onClick={() => { onClose(); onNavigate() }}>
            Άνοιγμα τραπεζιού
          </button>
        </div>
        <div style={{ background: 'var(--bg2)', borderRadius: '0 0 16px 16px', padding: '8px 20px 24px', borderTop: '2px solid var(--border)' }}>
          <p style={{ fontSize: 11, fontWeight: 700, color: 'var(--muted)', letterSpacing: 1, marginBottom: 8, marginTop: 8 }}>ACTIONS</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {QUICK_ACTIONS.map((a, i) => {
              const disabled = !order && a.key !== 'flags'
              return (
                <button key={a.key} disabled={disabled} onClick={() => { onClose(); onAction(a.key) }} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 0', background: 'none', border: 'none',
                  borderBottom: i < QUICK_ACTIONS.length - 1 ? '1px solid var(--border)' : 'none',
                  cursor: disabled ? 'not-allowed' : 'pointer',
                  opacity: disabled ? 0.35 : 1, textAlign: 'left',
                }}>
                  <span style={{ width: 36, height: 36, borderRadius: 9, flexShrink: 0, background: a.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: a.color }}>
                    <a.Icon width="18" height="18" />
                  </span>
                  <span style={{ fontSize: 15, fontWeight: 600, color: a.color }}>{a.label}</span>
                  {!disabled && <span style={{ marginLeft: 'auto', color: 'var(--muted)', fontSize: 18 }}>›</span>}
                </button>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

// ─── Emergency payment modal ──────────────────────────────────────────────────

function EmergencyPayModal({ table, order, onClose, onPay }) {
  const [paying, setPaying] = useState(false)
  const activeItems = order?.items?.filter(i => i.status === 'active') || []
  const total = activeItems.reduce((s, i) => s + (i.unit_price || 0) * (i.quantity || 1), 0)

  async function handlePay() {
    setPaying(true)
    await onPay(order.id, activeItems.map(i => i.id), 'cash')
    onClose()
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-sheet" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
        <div className="modal-handle" />
        <div style={{ textAlign: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>🚨</div>
          <p style={{ fontSize: 18, fontWeight: 700, color: '#ef4444' }}>ΕΚΤΑΚΤΗ ΠΛΗΡΩΜΗ</p>
          <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>Τραπέζι: <strong>{table.label || `T${table.number}`}</strong></p>
        </div>
        <div style={{ background: 'var(--bg3)', borderRadius: 12, padding: '12px 16px', marginBottom: 20 }}>
          <p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 8 }}>Ενεργά αντικείμενα:</p>
          {activeItems.length === 0
            ? <p style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic' }}>Δεν υπάρχουν δεδομένα (offline snapshot)</p>
            : activeItems.map(item => (
              <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 4 }}>
                <span style={{ color: 'var(--text)' }}>{item.product?.name || `#${item.product_id}`} ×{item.quantity}</span>
                <span style={{ color: 'var(--text)', fontWeight: 600 }}>{((item.unit_price || 0) * (item.quantity || 1)).toFixed(2)} €</span>
              </div>
            ))
          }
          <div style={{ borderTop: '1px solid var(--border)', marginTop: 10, paddingTop: 10, display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 16 }}>
            <span>Σύνολο</span>
            <span style={{ color: '#ef4444' }}>{total.toFixed(2)} €</span>
          </div>
        </div>
        {total === 0
          ? <p style={{ fontSize: 13, color: '#ef4444', marginBottom: 16, lineHeight: 1.5, fontWeight: 600 }}>
              Δεν είναι δυνατή η πληρωμή χωρίς offline δεδομένα. Άνοιξε το τραπέζι ενώ ο server ήταν online.
            </p>
          : <p style={{ fontSize: 12, color: '#f59e0b', marginBottom: 16, lineHeight: 1.5 }}>
              ⚠️ Μόνο μετρητά σε κατάσταση έκτακτης ανάγκης. Η πληρωμή συγχρονίζεται μόλις αποκατασταθεί η σύνδεση.
            </p>
        }
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn--secondary" style={{ flex: 1 }} onClick={onClose}>Ακύρωση</button>
          <button
            style={{ flex: 1, height: 44, borderRadius: 12, border: 'none', background: total === 0 ? '#64748b' : '#dc2626', color: '#fff', fontSize: 15, fontWeight: 700, cursor: (paying || total === 0) ? 'not-allowed' : 'pointer', opacity: (paying || total === 0) ? 0.5 : 1 }}
            onClick={handlePay} disabled={paying || total === 0}
          >
            {paying ? '⟳ Καταχώρηση…' : '✓ Πληρωμή'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ─── Filters modal ────────────────────────────────────────────────────────────

function FiltersModal({ groups, onClose }) {
  const {
    ownerFilter, statusFilter, zoneFilter,
    setOwnerFilter, setStatusFilter, setZoneFilter,
    clearFilters, setActiveZoneTab,
  } = useTableViewStore()

  function toggleZone(id) {
    const next = zoneFilter.includes(id)
      ? zoneFilter.filter(z => z !== id)
      : [...zoneFilter, id]
    setZoneFilter(next)
    // if we remove a zone that is the active tab, reset to 'all'
    if (!next.length) setActiveZoneTab('all')
  }

  const hasActiveFilters = ownerFilter !== 'all' || statusFilter !== 'all' || zoneFilter.length > 0

  return (
    <div className="modal-overlay" onClick={onClose} style={{ alignItems: 'flex-end' }}>
      <div
        className="modal-sheet"
        onClick={e => e.stopPropagation()}
        style={{ borderRadius: '20px 20px 0 0', paddingBottom: 40, gap: 20 }}
      >
        <div className="modal-handle" />

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 17, fontWeight: 700, color: 'var(--text)' }}>Φίλτρα</span>
          {hasActiveFilters && (
            <button
              onClick={() => { clearFilters(); onClose() }}
              style={{ fontSize: 13, fontWeight: 600, color: 'var(--danger)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px' }}
            >
              Καθαρισμός
            </button>
          )}
        </div>

        {/* Owner: ALL | MINE */}
        <div>
          <p style={sectionLabel}>Ανάθεση</p>
          <div style={segmentedWrap}>
            {[['all', 'Όλα'], ['mine', 'Δικά μου']].map(([key, lbl]) => (
              <button key={key} onClick={() => setOwnerFilter(key)} style={segBtn(ownerFilter === key)}>{lbl}</button>
            ))}
          </div>
        </div>

        {/* Status: ALL | FREE | OPEN | PAID */}
        <div>
          <p style={sectionLabel}>Κατάσταση</p>
          <div style={{ ...segmentedWrap, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            {[['all', 'Όλα'], ['free', 'Ελεύθερα'], ['open', 'Ανοιχτά'], ['paid', 'Πληρωμένα']].map(([key, lbl]) => (
              <button key={key} onClick={() => setStatusFilter(key)} style={{ ...segBtn(statusFilter === key), borderRadius: 10 }}>{lbl}</button>
            ))}
          </div>
        </div>

        {/* Zones: multi-select, one segmented container per zone */}
        {groups.length > 0 && (
          <div>
            <p style={sectionLabel}>Ζώνες {zoneFilter.length > 0 ? `(${zoneFilter.length} επιλεγμένες)` : ''}</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {groups.map(g => {
                const active = zoneFilter.includes(g.id)
                return (
                  <div key={g.id} style={segmentedWrap}>
                    <button
                      onClick={() => toggleZone(g.id)}
                      style={{
                        ...segBtn(active),
                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
                      }}
                    >
                      {g.color && (
                        <span style={{
                          width: 8, height: 8, borderRadius: '50%',
                          background: active ? 'currentColor' : g.color,
                          flexShrink: 0, opacity: active ? 0.9 : 1,
                        }} />
                      )}
                      {g.name}
                    </button>
                  </div>
                )
              })}
            </div>
          </div>
        )}

        <button className="btn btn--secondary" style={{ width: '100%' }} onClick={onClose}>Εντάξει</button>
      </div>
    </div>
  )
}

const sectionLabel = { fontSize: 11, fontWeight: 700, color: 'var(--muted)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8 }
const segmentedWrap = { display: 'flex', gap: 6, background: 'var(--bg3)', borderRadius: 12, padding: 4 }
function segBtn(active) {
  return {
    flex: 1, padding: '9px 8px', borderRadius: 9, border: 'none',
    cursor: 'pointer', fontWeight: 600, fontSize: 14,
    background: active ? 'var(--accent)' : 'transparent',
    color: active ? 'var(--accent-fg)' : 'var(--muted)',
    transition: 'background 0.12s',
  }
}

// ─── Main page ────────────────────────────────────────────────────────────────

export default function TableListPage() {
  const { user } = useAuthStore()
  const { status: connStatus } = useConnectionStore()
  const isEmergency = connStatus === 'emergency'

  const [tables, setTables] = useState([])
  const [groups, setGroups] = useState([])
  const [orders, setOrders] = useState([])
  const [flagDefs, setFlagDefs] = useState([])
  const [flagAssignments, setFlagAssignments] = useState([])
  const [waiters, setWaiters] = useState([])   // waiter objects for avatar lookup
  const [offline, setOffline] = useState(false)
  const [showNotifs, setShowNotifs] = useState(false)
  const [showFilters, setShowFilters] = useState(false)
  const [quickModal, setQuickModal] = useState(null)
  const [emergencyPayModal, setEmergencyPayModal] = useState(null)
  const [localPaidOrderIds, setLocalPaidOrderIds] = useState(new Set())

  // pull-to-refresh state
  const [pulling, setPulling] = useState(false)
  const [pullY, setPullY] = useState(0)
  const [refreshing, setRefreshing] = useState(false)
  const pullStart = useRef(null)
  const scrollRef = useRef(null)
  const PULL_THRESHOLD = 72

  const navigate = useNavigate()
  const filterBtnRef = useRef(null)

  const { unreadCount, recentMessages, fetchRecent } = useNotifications() || {}
  const loadFromBackend = useTableColourStore(s => s.loadFromBackend)

  const {
    density, ownerFilter, statusFilter, zoneFilter, activeZoneTab, setActiveZoneTab,
  } = useTableViewStore()

  // ── Load from IndexedDB when offline ──────────────────────────────────────
  const loadFromDB = useCallback(async () => {
    const [dbTables, dbOrders] = await Promise.all([db.tables.toArray(), db.orders.toArray()])
    setTables(dbTables.filter(t => t.is_active !== false))
    setOrders(dbOrders)
    setOffline(true)
  }, [])

  useEffect(() => { if (isEmergency) loadFromDB() }, [isEmergency])

  useEffect(() => {
    const handler = () => setOffline(true)
    window.addEventListener('backend-offline', handler)
    return () => window.removeEventListener('backend-offline', handler)
  }, [])

  useEffect(() => {
    const handler = () => load()
    window.addEventListener('sse-reconnected', handler)
    return () => window.removeEventListener('sse-reconnected', handler)
  }, [])

  useEffect(() => { if (connStatus === 'online') setOffline(false) }, [connStatus])

  async function load() {
    try {
      const [tablesRes, ordersRes, groupsRes, flagDefsRes, flagAssignRes, settingsRes, waitersRes] = await Promise.all([
        client.get('/api/tables/'),
        client.get('/api/orders/active'),
        client.get('/api/tables/groups'),
        client.get('/api/flags/defs'),
        client.get('/api/flags/assignments'),
        client.get('/api/settings/'),
        client.get('/api/waiters/on-shift'),
      ])
      setTables(tablesRes.data)
      const fullOrders = await Promise.all(
        ordersRes.data.map(o =>
          client.get(`/api/orders/${o.id}`)
            .then(r => ({ ...r.data, waiter_ids: r.data.waiters?.map(w => w.waiter_id) ?? o.waiter_ids ?? [] }))
            .catch(() => o)
        )
      )
      setOrders(fullOrders)
      setGroups(groupsRes.data)
      setFlagDefs(flagDefsRes.data)
      setFlagAssignments(flagAssignRes.data)
      setWaiters(waitersRes.data)
      const raw = settingsRes.data?.['ui.table_colours']?.value
      if (raw) loadFromBackend(raw)
      setOffline(false)
    } catch {}
  }

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

  // ── SSE live updates ───────────────────────────────────────────────────────
  useEffect(() => {
    if (isEmergency) return
    function onSSE(e) {
      const { type, data } = e.detail
      if (type === 'order_updated' || type === 'order_paid') {
        client.get(`/api/orders/${data.order_id}`)
          .then(r => {
            const full = { ...r.data, waiter_ids: r.data.waiters?.map(w => w.waiter_id) ?? [] }
            setOrders(prev => {
              const exists = prev.find(o => o.id === data.order_id)
              return exists ? prev.map(o => o.id === data.order_id ? full : o) : [...prev, full]
            })
          })
          .catch(() => {
            setOrders(prev => {
              const existing = prev.find(o => o.id === data.order_id)
              if (existing) return prev.map(o => o.id === data.order_id ? { ...o, status: data.status, table_id: data.table_id } : o)
              return [...prev, { id: data.order_id, table_id: data.table_id, status: data.status, waiter_ids: [] }]
            })
          })
      } else if (type === 'order_closed') {
        setOrders(prev => prev.filter(o => o.id !== data.order_id))
      } else if (type === 'table_flags_changed') {
        client.get('/api/flags/assignments').then(r => setFlagAssignments(r.data)).catch(() => {})
      } else if (type === 'table_list_changed') {
        client.get('/api/tables/').then(r => setTables(r.data)).catch(() => {})
      }
    }
    window.addEventListener('sse-event', onSSE)
    return () => window.removeEventListener('sse-event', onSSE)
  }, [isEmergency])

  // ── Emergency payment ──────────────────────────────────────────────────────
  async function handleEmergencyPay(orderId, itemIds, paymentMethod) {
    await queueOfflinePayment({ orderId, itemIds, paymentMethod })
    setLocalPaidOrderIds(prev => new Set([...prev, orderId]))
    setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: 'paid' } : o))
    await db.orders.where('id').equals(orderId).modify({ status: 'paid' })
  }

  // ── Derived maps ───────────────────────────────────────────────────────────
  const flagDefMap = Object.fromEntries(flagDefs.map(f => [f.id, f]))
  const tableFlagsMap = {}
  flagAssignments.forEach(a => {
    if (!tableFlagsMap[a.table_id]) tableFlagsMap[a.table_id] = []
    const def = flagDefMap[a.flag_id]
    if (def) tableFlagsMap[a.table_id].push(def)
  })
  const waiterMap = Object.fromEntries(waiters.map(w => [w.id, w]))

  function getOrder(tableId) { return orders.find(o => o.table_id === tableId) }
  function isMyOrder(order) { return !!(order && user && order.waiter_ids?.includes(user.id)) }
  function getOrderWaiters(order) {
    if (!order) return []
    return (order.waiter_ids || []).map(id => waiterMap[id]).filter(Boolean)
  }

  // ── Filtering logic ────────────────────────────────────────────────────────
  // Zones visible in top bar = those allowed by zoneFilter (or all if empty)
  const allowedZoneIds = zoneFilter.length > 0 ? new Set(zoneFilter) : null

  // visibleGroups = groups shown in the top bar
  const visibleGroups = groups.filter(g => !allowedZoneIds || allowedZoneIds.has(g.id))

  // Validate activeZoneTab against current allowedZoneIds
  // If the active tab is no longer visible, reset to 'all'
  const effectiveZoneTab = (
    activeZoneTab === 'all' ||
    visibleGroups.some(g => g.id === activeZoneTab)
  ) ? activeZoneTab : 'all'

  const filtered = tables.filter(t => {
    const order = getOrder(t.id)

    // Status filter
    if (statusFilter === 'free' && order) return false
    if (statusFilter === 'open' && (!order || order.status === 'paid' || order.status === 'partially_paid')) return false
    if (statusFilter === 'paid' && order?.status !== 'paid' && order?.status !== 'partially_paid') return false

    // Owner filter
    if (ownerFilter === 'mine' && !isMyOrder(order)) return false

    // Zone filter from modal (multi-select restricts which zones are allowed)
    if (allowedZoneIds && !allowedZoneIds.has(t.group_id ?? 'none')) return false

    // Active zone tab (secondary, single-select within allowed)
    if (effectiveZoneTab !== 'all' && t.group_id !== effectiveZoneTab) return false

    return true
  })

  // ── Pull-to-refresh handlers ───────────────────────────────────────────────
  function onPullTouchStart(e) {
    if (scrollRef.current?.scrollTop > 0) return
    pullStart.current = e.touches[0].clientY
  }
  function onPullTouchMove(e) {
    if (pullStart.current === null) return
    const dy = e.touches[0].clientY - pullStart.current
    if (dy > 0 && scrollRef.current?.scrollTop <= 0) {
      e.preventDefault()
      setPulling(true)
      setPullY(Math.min(dy, PULL_THRESHOLD * 1.5))
    }
  }
  async function onPullTouchEnd() {
    if (!pulling) return
    if (pullY >= PULL_THRESHOLD) {
      setRefreshing(true)
      await load()
      setRefreshing(false)
    }
    setPulling(false)
    setPullY(0)
    pullStart.current = null
  }

  // ── Grid columns per density ───────────────────────────────────────────────
  const gridCols = {
    '1x1': 'repeat(4, 1fr)',
    '2x1': 'repeat(2, 1fr)',
    '2x2': 'repeat(2, 1fr)',
    '4x1': '1fr',
    '4x2': '1fr',
    '4x3': '1fr',
  }[density] || 'repeat(2, 1fr)'

  const hasActiveFilters = ownerFilter !== 'all' || statusFilter !== 'all' || zoneFilter.length > 0

  function handleQuickAction(tableId, actionKey) {
    navigate(`/tables/${tableId}?action=${actionKey}`)
  }

  return (
    <div className="page">
      <header className="top-bar">
        <span className="top-bar__title">Τραπέζια</span>

        <button
          onClick={() => { setShowNotifs(true); fetchRecent?.() }}
          style={{
            position: 'relative', background: 'none', border: 'none',
            color: 'var(--text)', fontSize: 22, cursor: 'pointer',
            minWidth: 44, minHeight: 44, borderRadius: 8,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z" fill="currentColor"/>
            <path d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z" fill="currentColor"/>
          </svg>
          {(unreadCount || 0) > 0 && (
            <span style={{
              position: 'absolute', top: 6, right: 6,
              background: '#ef4444', color: 'white', fontSize: 10, fontWeight: 700,
              borderRadius: '50%', width: 16, height: 16,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {unreadCount > 9 ? '9+' : unreadCount}
            </span>
          )}
        </button>

        <UserMenu />
      </header>

      {isEmergency ? <EmergencyBar /> : (offline && <ConnectionBanner />)}

      {/* ── Zone tab bar ─────────────────────────────────────────────────────── */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '10px 12px',
        background: 'var(--bg)',
        borderBottom: '1px solid var(--border)',
        overflowX: 'auto', scrollbarWidth: 'none',
      }}>
        {/* ALL tab */}
        <ZoneTab
          label="Όλα"
          active={effectiveZoneTab === 'all'}
          onClick={() => setActiveZoneTab('all')}
        />

        {/* Per-zone tabs */}
        {visibleGroups.map(g => (
          <ZoneTab
            key={g.id}
            label={g.name}
            color={g.color}
            active={effectiveZoneTab === g.id}
            onClick={() => setActiveZoneTab(effectiveZoneTab === g.id ? 'all' : g.id)}
          />
        ))}
      </div>

      {/* ── Table grid ───────────────────────────────────────────────────────── */}
      <div
        ref={scrollRef}
        style={{ flex: 1, overflowY: 'auto', minHeight: 0, overscrollBehavior: 'contain' }}
        onTouchStart={onPullTouchStart}
        onTouchMove={onPullTouchMove}
        onTouchEnd={onPullTouchEnd}
      >
        {/* Pull-to-refresh indicator */}
        {(pulling || refreshing) && (
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            height: Math.min(pullY, PULL_THRESHOLD),
            color: 'var(--muted)', fontSize: 13, fontWeight: 600,
            overflow: 'hidden', transition: pulling ? 'none' : 'height 0.2s',
          }}>
            {refreshing ? '⟳ Ανανέωση…' : pullY >= PULL_THRESHOLD ? '↑ Αφήστε για ανανέωση' : '↓ Τραβήξτε για ανανέωση'}
          </div>
        )}

        <div style={{
          display: 'grid',
          gridTemplateColumns: gridCols,
          gap: density === '1x1' ? 8 : 10,
          padding: '12px 12px 88px',
          alignContent: 'start',
        }}>
          {filtered.map(t => {
            const order = getOrder(t.id)
            const tableFlags = tableFlagsMap[t.id] || []
            const grp = groups.find(g => g.id === t.group_id)
            const alreadyPaidLocally = order && localPaidOrderIds.has(order.id)
            const orderWaiters = getOrderWaiters(order)

            function handleClick() {
              if (isEmergency) {
                if (order && !alreadyPaidLocally && order.status !== 'paid' && order.status !== 'closed') {
                  setEmergencyPayModal({ table: t, order })
                }
                return
              }
              const destination = order ? `/tables/${t.id}` : `/tables/${t.id}/add?new=1`
              navigate(destination)
            }

            return (
              <TableCard
                key={t.id}
                table={t}
                order={alreadyPaidLocally ? { ...order, status: 'paid' } : order}
                isMine={isMyOrder(order)}
                flags={tableFlags}
                groupName={grp?.name || ''}
                waiterObjects={orderWaiters}
                density={density}
                onClick={handleClick}
                onLongPress={isEmergency ? undefined : () => setQuickModal({ table: t, order, flags: tableFlags })}
              />
            )
          })}
        </div>
      </div>

      {/* ── Filter FAB ───────────────────────────────────────────────────────── */}
      <button
        ref={filterBtnRef}
        onClick={() => setShowFilters(true)}
        style={{
          position: 'fixed', bottom: 24, right: 24,
          width: 52, height: 52, borderRadius: '50%', border: 'none',
          background: hasActiveFilters ? '#ea6c00' : '#f97316',
          color: '#fff',
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2)',
          zIndex: 40,
          transition: 'background 0.12s',
        }}
      >
        <FilterIcon size={20} />
        {hasActiveFilters && (
          <span style={{
            position: 'absolute', top: 0, right: 0,
            background: '#ef4444', color: '#fff',
            fontSize: 9, fontWeight: 800,
            borderRadius: '50%', width: 16, height: 16,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {(ownerFilter !== 'all' ? 1 : 0) + (statusFilter !== 'all' ? 1 : 0) + (zoneFilter.length > 0 ? 1 : 0)}
          </span>
        )}
      </button>

      {/* ── Modals ────────────────────────────────────────────────────────────── */}
      {showNotifs && (
        <NotificationDrawer messages={recentMessages || []} onClose={() => setShowNotifs(false)} />
      )}

      {showFilters && (
        <FiltersModal groups={groups} onClose={() => setShowFilters(false)} anchorRef={filterBtnRef} />
      )}

      {quickModal && (
        <TableQuickModal
          table={quickModal.table}
          order={quickModal.order}
          flags={quickModal.flags}
          onClose={() => setQuickModal(null)}
          onNavigate={() => navigate(`/tables/${quickModal.table.id}`)}
          onAction={(key) => handleQuickAction(quickModal.table.id, key)}
        />
      )}

      {emergencyPayModal && (
        <EmergencyPayModal
          table={emergencyPayModal.table}
          order={emergencyPayModal.order}
          onClose={() => setEmergencyPayModal(null)}
          onPay={handleEmergencyPay}
        />
      )}
    </div>
  )
}

// ─── Zone tab pill ────────────────────────────────────────────────────────────

function ZoneTab({ label, color, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '7px 12px', borderRadius: 20, border: 'none',
        cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
        fontWeight: 600, fontSize: 13,
        background: active ? 'var(--accent)' : 'var(--bg3)',
        color: active ? 'var(--accent-fg)' : 'var(--muted)',
        transition: 'background 0.12s, color 0.12s',
      }}
    >
      {color && (
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: color, flexShrink: 0,
          opacity: active ? 1 : 0.7,
        }} />
      )}
      {label}
    </button>
  )
}