import { useState, useEffect, useContext } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
import toast from 'react-hot-toast'
import client from '../api/client'
import Badge from '../ui/Badge'
import { ConfirmModal } from '../ui/Modal'
import { LicenseContext } from '../layouts/AppLayout'
import ShiftDetailModal from './reports/shared/ShiftDetailModal'


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

function fmtTime(iso) {
  if (!iso) return '—'
  return new Date(iso).toLocaleTimeString('el-GR', { hour: '2-digit', minute: '2-digit' })
}

function fmtDuration(isoStart) {
  if (!isoStart) return '—'
  const mins = Math.floor((Date.now() - new Date(isoStart).getTime()) / 60000)
  if (mins < 60) return `${mins}λ`
  const h = Math.floor(mins / 60)
  const m = mins % 60
  return m === 0 ? `${h}ω` : `${h}ω ${m}λ`
}

function fmtEuro(n) {
  return '€' + parseFloat(n || 0).toFixed(2)
}

function orderTotal(items = []) {
  return items
    .filter(i => i.status !== 'cancelled')
    .reduce((s, i) => s + i.unit_price * i.quantity, 0)
}

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 Avatar({ name, avatarUrl, size = 36 }) {
  if (avatarUrl) {
    return (
      <img src={avatarUrl} alt={name}
        style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
    )
  }
  const parts = (name || '?').trim().split(' ')
  const initials = (parts[0][0] + (parts[1]?.[0] || '')).toUpperCase()
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: avatarColor(name || '?'),
      color: 'white', fontSize: size * 0.38, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>{initials}</div>
  )
}

// ─── Table color tokens ────────────────────────────────────────────────────────

const TABLE_COLORS = {
  open:           { bg: '#eef7f0', border: '#d7ecdc', dot: '#2f9e5e', text: '#1f7042', label: 'Ανοιχτό' },
  partially_paid: { bg: '#f4eefb', border: '#e3d4f3', dot: '#7a44c9', text: '#57309a', label: 'Μερική πληρ.' },
  free:           { bg: '#f4f4f2', border: '#dfe2e6', dot: '#8a9099', text: '#5a6169', label: 'Ελεύθερο' },
}

// ─── Business Day / Shift modals ───────────────────────────────────────────────

function StartShiftModal({ waiters, onClose, onStart }) {
  const [waiterId, setWaiterId] = useState('')
  const [cash, setCash] = useState('')
  const [busy, setBusy] = useState(false)

  async function submit() {
    if (!waiterId) { toast.error('Επιλέξτε σερβιτόρο'); return }
    setBusy(true)
    try {
      await onStart(Number(waiterId), cash ? parseFloat(cash) : null)
      onClose()
    } catch (e) {
      toast.error(e.response?.data?.detail || 'Σφάλμα εκκίνησης βάρδιας')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-bold text-gray-800">Έναρξη Βάρδιας</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">✕</button>
        </div>
        <div>
          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">Σερβιτόρος</label>
          <select className="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 focus:outline-none"
            value={waiterId} onChange={e => setWaiterId(e.target.value)}>
            <option value="">— Επιλέξτε —</option>
            {waiters.map(w => <option key={w.id} value={w.id}>{w.full_name || w.username}</option>)}
          </select>
        </div>
        <div>
          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">Αρχικά Μετρητά (€)</label>
          <input type="number" step="0.01" min="0" placeholder="0.00" value={cash} onChange={e => setCash(e.target.value)}
            className="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 focus:outline-none" />
        </div>
        <div className="flex gap-3 pt-1">
          <button onClick={onClose} className="flex-1 h-10 px-4 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">Ακύρωση</button>
          <button onClick={submit} disabled={busy}
            className="flex-1 h-10 px-4 rounded-lg bg-primary-600 text-white text-sm font-semibold hover:bg-primary-700 disabled:opacity-60">
            {busy ? 'Εκκίνηση…' : 'Έναρξη'}
          </button>
        </div>
      </div>
    </div>
  )
}

function CloseConfirmModal({ details, onClose, onConfirm, busy }) {
  if (!details.partially_paid) {
    return (
      <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
        onClick={e => { if (e.target === e.currentTarget) onClose() }}>
        <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 space-y-4">
          <h2 className="text-lg font-bold text-gray-800">Κλείσιμο Ημέρας</h2>
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 text-sm text-blue-800 space-y-2">
            <p className="font-semibold">
              {details.open_orders} {details.open_orders === 1 ? 'τραπέζι είναι ακόμα ανοιχτό' : 'τραπέζια είναι ακόμα ανοιχτά'}
            </p>
            <p>Κανένα δεν έχει εκκρεμείς χρεώσεις. Θέλετε να κλείσουν όλα και να κλείσει η ημέρα;</p>
          </div>
          <div className="flex gap-3">
            <button onClick={onClose} className="flex-1 h-10 px-4 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">Ακύρωση</button>
            <button onClick={onConfirm} disabled={busy}
              className="flex-1 h-10 px-4 rounded-lg bg-primary-600 text-white text-sm font-semibold hover:bg-primary-700 disabled:opacity-60">
              {busy ? 'Κλείσιμο…' : 'Κλείσε Όλα & Κλείσε Ημέρα'}
            </button>
          </div>
        </div>
      </div>
    )
  }
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 space-y-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
            <span className="text-red-600 text-lg font-bold">!</span>
          </div>
          <h2 className="text-lg font-bold text-gray-800">Εκκρεμείς Πληρωμές</h2>
        </div>
        <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-800 space-y-2">
          <p className="font-semibold">
            {details.open_orders} {details.open_orders === 1 ? 'ανοιχτό τραπέζι' : 'ανοιχτά τραπέζια'},
            από τα οποία <span className="underline">{details.partially_paid} έχ{details.partially_paid === 1 ? 'ει' : 'ουν'} εκκρεμείς πληρωμές</span>.
          </p>
          <p>Αν κλείσετε αναγκαστικά, τα απλήρωτα ποσά θα χαθούν και δεν θα καταγραφούν στις αναφορές.</p>
        </div>
        <div className="rounded-xl border border-gray-200 p-3 text-xs text-gray-500 bg-gray-50">
          Επιλέξτε <strong>Ακύρωση</strong> για να χειριστείτε χειροκίνητα τα εκκρεμή τραπέζια πριν κλείσετε την ημέρα.
        </div>
        <div className="flex gap-3">
          <button onClick={onClose} className="flex-1 h-10 px-4 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">Ακύρωση</button>
          <button onClick={onConfirm} disabled={busy}
            className="flex-1 h-10 px-4 rounded-lg bg-red-600 text-white text-sm font-semibold hover:bg-red-700 disabled:opacity-60">
            {busy ? 'Κλείσιμο…' : 'Αναγκαστικό Κλείσιμο'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ─── Order quick-view modal ────────────────────────────────────────────────────

function OrderQuickModal({ orderId, tableName, onClose, onOpenFull }) {
  const qc = useQueryClient()

  const { data: order, isLoading } = useQuery({
    queryKey: ['order', orderId],
    queryFn: () => client.get(`/api/orders/${orderId}`).then(r => r.data),
    enabled: !!orderId,
  })

  const { data: waiters = [] } = useQuery({
    queryKey: ['waiters'],
    queryFn: () => client.get('/api/waiters/').then(r => r.data),
    staleTime: 60_000,
  })

  const { data: printers = [] } = useQuery({
    queryKey: ['printers'],
    queryFn: () => client.get('/api/system/printers').then(r => r.data),
    staleTime: 60_000,
  })

  const [confirmAction, setConfirmAction] = useState(null)
  const [printerId, setPrinterId] = useState('')

  const waiterMap = Object.fromEntries(waiters.map(w => [w.id, w.nickname || w.full_name || w.username]))

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ['order', orderId] })
    qc.invalidateQueries({ queryKey: ['orders-active'] })
  }

  const payItems = useMutation({
    mutationFn: (item_ids) => client.post(`/api/orders/${orderId}/pay`, { item_ids }),
    onSuccess: () => { toast.success('Πληρώθηκε'); invalidate() },
    onError: () => toast.error('Σφάλμα πληρωμής'),
  })

  const cancelItem = useMutation({
    mutationFn: (itemId) => client.delete(`/api/orders/${orderId}/items/${itemId}`),
    onSuccess: () => { toast.success('Αντικείμενο ακυρώθηκε'); invalidate() },
    onError: () => toast.error('Σφάλμα ακύρωσης'),
  })

  const cancelOrder = useMutation({
    mutationFn: () => client.delete(`/api/orders/${orderId}`),
    onSuccess: () => { toast.success('Παραγγελία ακυρώθηκε'); invalidate(); onClose() },
    onError: () => toast.error('Σφάλμα ακύρωσης παραγγελίας'),
  })

  const closeOrder = useMutation({
    mutationFn: () => client.post(`/api/orders/${orderId}/close`),
    onSuccess: () => { toast.success('Παραγγελία έκλεισε'); invalidate(); onClose() },
    onError: () => toast.error('Σφάλμα κλεισίματος'),
  })

  const printOrder = useMutation({
    mutationFn: (pid) => client.post(`/api/orders/${orderId}/print`, { printer_id: pid }),
    onSuccess: () => toast.success('Αποστολή στον εκτυπωτή…'),
    onError: () => toast.error('Σφάλμα εκτύπωσης'),
  })

  function handleConfirm() {
    if (!confirmAction) return
    if (confirmAction.type === 'cancelItem') cancelItem.mutate(confirmAction.payload)
    if (confirmAction.type === 'cancelOrder') cancelOrder.mutate()
    if (confirmAction.type === 'closeOrder') closeOrder.mutate()
    setConfirmAction(null)
  }

  const total = order ? orderTotal(order.items) : 0
  const activeItems = order ? order.items.filter(i => i.status === 'active') : []
  const isOpen = order ? ['open', 'partially_paid'].includes(order.status) : false

  return (
    <div
      className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}
    >
      <div style={{
        background: 'white', borderRadius: 20, width: '100%', maxWidth: 720,
        maxHeight: '90vh', display: 'flex', flexDirection: 'column',
        boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
        overflow: 'hidden',
      }}>
        {/* Modal header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '18px 22px', borderBottom: '1px solid #edeff1', flexShrink: 0,
        }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#111315' }}>
              Τραπέζι {tableName}
            </div>
            {order && (
              <div style={{ fontSize: 12, color: '#5a6169', marginTop: 2 }}>
                Παραγγελία #{order.id} · από {fmtTime(order.opened_at)} · {fmtDuration(order.opened_at)}
              </div>
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {order && (
              <span style={{
                fontSize: 18, fontWeight: 700,
                color: '#111315',
                fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
              }}>{fmtEuro(total)}</span>
            )}
            {order && (
              <Badge status={order.status} />
            )}
            <button
              onClick={onClose}
              style={{
                width: 32, height: 32, borderRadius: 8, border: '1px solid #dfe2e6',
                background: 'white', cursor: 'pointer', fontSize: 16, color: '#5a6169',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
            >✕</button>
          </div>
        </div>

        {/* Scrollable body */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 8px' }}>
          {isLoading && (
            <div style={{ padding: 40, textAlign: 'center', color: '#8a9099' }}>Φόρτωση…</div>
          )}

          {order && (
            <>
              {/* Waiters row */}
              {order.waiters.length > 0 && (
                <div style={{ padding: '12px 22px', borderBottom: '1px solid #f4f4f2', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 12, color: '#8a9099', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>Προσωπικό</span>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {order.waiters.map(w => (
                      <span key={w.waiter_id} style={{
                        padding: '3px 10px', borderRadius: 999,
                        background: '#f0f4ff', color: '#3758c9',
                        fontSize: 12, fontWeight: 600,
                      }}>{waiterMap[w.waiter_id] || `#${w.waiter_id}`}</span>
                    ))}
                  </div>
                </div>
              )}

              {/* Items list */}
              <div>
                {order.items.length === 0 && (
                  <div style={{ padding: '24px', textAlign: 'center', color: '#8a9099', fontSize: 13 }}>Κανένα αντικείμενο.</div>
                )}
                {order.items.map(item => (
                  <div key={item.id} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 22px',
                    borderBottom: '1px solid #f9f9f8',
                    opacity: item.status === 'cancelled' ? 0.4 : 1,
                    textDecoration: item.status === 'cancelled' ? 'line-through' : 'none',
                  }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: '#111315' }}>
                        {item.product?.name ?? `#${item.product_id}`}
                        <span style={{ color: '#8a9099', fontWeight: 400, marginLeft: 6 }}>×{item.quantity}</span>
                      </div>
                      {item.notes && <div style={{ fontSize: 11, color: '#8a9099', marginTop: 1 }}>{item.notes}</div>}
                      {item.paid_by && (
                        <div style={{ fontSize: 11, color: '#2f9e5e', marginTop: 1, fontWeight: 600 }}>
                          Πληρώθηκε
                        </div>
                      )}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                      <span style={{
                        fontSize: 14, fontWeight: 700, color: '#111315',
                        fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
                        minWidth: 52, textAlign: 'right',
                      }}>{fmtEuro(item.unit_price * item.quantity)}</span>
                      {isOpen && item.status === 'active' && (
                        <>
                          <button
                            onClick={() => payItems.mutate([item.id])}
                            style={{
                              height: 28, padding: '0 10px', borderRadius: 6,
                              border: '1px solid #d7ecdc', background: '#eef7f0',
                              color: '#1f7042', fontSize: 11, fontWeight: 700, cursor: 'pointer',
                            }}
                          >Πληρωμή</button>
                          <button
                            onClick={() => setConfirmAction({ type: 'cancelItem', payload: item.id })}
                            style={{
                              height: 28, padding: '0 10px', borderRadius: 6,
                              border: '1px solid #fecaca', background: '#fef2f2',
                              color: '#dc2626', fontSize: 11, fontWeight: 700, cursor: 'pointer',
                            }}
                          >✕</button>
                        </>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>

        {/* Footer actions */}
        {order && (
          <div style={{
            padding: '14px 22px', borderTop: '1px solid #edeff1',
            display: 'flex', gap: 8, flexWrap: 'nowrap', flexShrink: 0,
            background: '#fafafa', alignItems: 'center',
          }}>
            {isOpen && activeItems.length > 0 && (
              <button
                onClick={() => payItems.mutate(activeItems.map(i => i.id))}
                style={{
                  height: 36, padding: '0 16px', borderRadius: 8,
                  background: '#3758c9', border: 'none', color: 'white',
                  fontSize: 13, fontWeight: 700, cursor: 'pointer',
                }}
              >Πληρωμή όλων</button>
            )}
            {isOpen && (
              <>
                <button
                  onClick={() => setConfirmAction({ type: 'closeOrder' })}
                  style={{
                    height: 36, padding: '0 14px', borderRadius: 8,
                    border: '1px solid #dfe2e6', background: 'white',
                    color: '#2b2f33', fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  }}
                >Κλείσιμο</button>
                <button
                  onClick={() => setConfirmAction({ type: 'cancelOrder' })}
                  style={{
                    height: 36, padding: '0 14px', borderRadius: 8,
                    border: '1px solid #fecaca', background: '#fef2f2',
                    color: '#dc2626', fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  }}
                >Ακύρωση</button>
              </>
            )}
            {printers.length > 0 && (
              <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginLeft: 'auto' }}>
                <select
                  value={printerId}
                  onChange={e => setPrinterId(e.target.value)}
                  style={{
                    height: 36, paddingLeft: 10, paddingRight: 28, borderRadius: 8,
                    border: '1px solid #dfe2e6', background: 'white',
                    color: '#2b2f33', fontSize: 12, cursor: 'pointer',
                  }}
                >
                  <option value="">Εκτυπωτής…</option>
                  {printers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
                <button
                  onClick={() => { if (printerId) printOrder.mutate(Number(printerId)) }}
                  disabled={!printerId}
                  style={{
                    height: 36, padding: '0 14px', borderRadius: 8,
                    border: '1px solid #dfe2e6', background: 'white',
                    color: '#2b2f33', fontSize: 13, fontWeight: 600,
                    cursor: printerId ? 'pointer' : 'not-allowed', opacity: printerId ? 1 : 0.5,
                  }}
                >🖨 Εκτύπωση</button>
              </div>
            )}
            <button
              onClick={onOpenFull}
              style={{
                height: 36, padding: '0 14px', borderRadius: 8,
                border: '1px solid #dfe2e6', background: 'white',
                color: '#5a6169', fontSize: 12, fontWeight: 500, cursor: 'pointer',
                marginLeft: printers.length > 0 ? 0 : 'auto',
              }}
            >Πλήρης εικόνα →</button>
          </div>
        )}
      </div>

      {confirmAction && (
        <ConfirmModal
          title={
            confirmAction.type === 'cancelItem' ? 'Ακύρωση αντικειμένου;' :
            confirmAction.type === 'cancelOrder' ? 'Ακύρωση παραγγελίας;' :
            'Κλείσιμο παραγγελίας;'
          }
          message={confirmAction.type === 'cancelOrder' ? 'Η παραγγελία θα ακυρωθεί οριστικά.' : undefined}
          confirmLabel={confirmAction.type === 'closeOrder' ? 'Κλείσιμο' : 'Ακύρωση'}
          confirmVariant={confirmAction.type === 'closeOrder' ? 'primary' : 'danger'}
          onConfirm={handleConfirm}
          onCancel={() => setConfirmAction(null)}
        />
      )}
    </div>
  )
}

// ─── KPI Card ─────────────────────────────────────────────────────────────────

function KpiCard({ label, value, sub, accent = '#3758c9', pct, private: isPrivate }) {
  return (
    <div style={{
      background: 'white',
      border: '1px solid #edeff1',
      borderRadius: 16,
      padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 6,
      boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
      flex: 1,
    }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: '#5a6169', textTransform: 'uppercase', letterSpacing: 0.7 }}>{label}</div>
      <div style={{
        fontSize: 30, fontWeight: 700, color: '#111315', letterSpacing: -0.5, lineHeight: 1.1,
        fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
        filter: isPrivate ? 'blur(8px)' : 'none',
        userSelect: isPrivate ? 'none' : 'auto',
        transition: 'filter 200ms ease',
      }}>{value}</div>
      {sub && <div style={{
        fontSize: 12, color: '#5a6169',
        filter: isPrivate ? 'blur(6px)' : 'none',
        userSelect: isPrivate ? 'none' : 'auto',
        transition: 'filter 200ms ease',
      }}>{sub}</div>}
      {pct != null && (
        <div style={{ marginTop: 4, height: 6, borderRadius: 3, background: '#edeff1', overflow: 'hidden' }}>
          <div style={{ width: `${Math.min(100, pct)}%`, height: '100%', background: accent, borderRadius: 3, transition: 'width 300ms ease' }} />
        </div>
      )}
    </div>
  )
}

// ─── Mini table chip ──────────────────────────────────────────────────────────

function TableChip({ name, status, amount, onClick }) {
  const c = TABLE_COLORS[status] || TABLE_COLORS.free
  return (
    <button
      onClick={onClick}
      title={amount != null ? fmtEuro(amount) : name}
      style={{
        aspectRatio: '1', minHeight: 52,
        borderRadius: 10,
        background: c.bg,
        border: '1px solid ' + c.border,
        color: c.text,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 12, fontWeight: 700,
        fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
        cursor: onClick ? 'pointer' : 'default',
        transition: 'transform 100ms ease, box-shadow 100ms ease',
      }}
      onMouseEnter={e => { if (onClick) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)' } }}
      onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '' }}
    >
      {name}
    </button>
  )
}

// ─── Shifts card ──────────────────────────────────────────────────────────────

// ─── End shift confirmation modal ─────────────────────────────────────────────

function EndShiftConfirmModal({ shift, onClose, onConfirm, busy }) {
  const [notes, setNotes] = useState('')
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <div className="flex items-center gap-3">
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <span style={{ fontSize: 18 }}>⏹</span>
          </div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700, color: '#111315' }}>Τέλος βάρδιας;</div>
            <div style={{ fontSize: 13, color: '#5a6169', marginTop: 2 }}>{shift.waiter_name}</div>
          </div>
        </div>
        <div style={{ background: '#fafafa', borderRadius: 12, padding: '12px 16px', fontSize: 13, color: '#374151' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span>Έναρξη</span><span style={{ fontWeight: 600 }}>{fmtTime(shift.started_at)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span>Διάρκεια</span><span style={{ fontWeight: 600 }}>{fmtDuration(shift.started_at)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>Είσπραξη</span><span style={{ fontWeight: 700, color: '#2f9e5e' }}>{fmtEuro(shift.total_collected)}</span>
          </div>
        </div>
        <div>
          <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 6 }}>
            Σημειώσεις <span style={{ fontWeight: 400, color: '#9ca3af' }}>(προαιρετικό)</span>
          </label>
          <textarea
            value={notes}
            onChange={e => setNotes(e.target.value)}
            placeholder="π.χ. παρατηρήσεις για τη βάρδια…"
            rows={2}
            style={{ width: '100%', borderRadius: 8, border: '1px solid #e5e7eb', padding: '8px 10px', fontSize: 13, color: '#111315', resize: 'vertical', outline: 'none', boxSizing: 'border-box' }}
            onFocus={e => e.target.style.borderColor = '#6366f1'}
            onBlur={e => e.target.style.borderColor = '#e5e7eb'}
          />
        </div>
        <p style={{ fontSize: 12, color: '#8a9099' }}>Μετά την επιβεβαίωση θα εμφανιστεί η αναλυτική σύνοψη βάρδιας.</p>
        <div className="flex gap-3">
          <button onClick={onClose} className="flex-1 h-10 px-4 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">Άκυρο</button>
          <button onClick={() => onConfirm(notes)} disabled={busy}
            className="flex-1 h-10 px-4 rounded-lg bg-red-600 text-white text-sm font-semibold hover:bg-red-700 disabled:opacity-60">
            {busy ? 'Κλείσιμο…' : 'Τέλος Βάρδιας'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ─── Compose for single waiter (quick message from shift row) ─────────────────

function QuickMessageModal({ waiter, tables, templates, onClose, onSent }) {
  const [body, setBody] = useState('')
  const sendMut = useMutation({
    mutationFn: (payload) => client.post('/api/messages/send', payload),
    onSuccess: () => { toast.success('Εστάλη!'); onSent(); onClose() },
    onError: () => toast.error('Σφάλμα αποστολής'),
  })
  function send() {
    if (!body.trim()) return
    sendMut.mutate({ body: body.trim(), target_waiter_ids: [waiter.id], table_ids: [] })
  }
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-5 space-y-4">
        <div className="flex items-center justify-between">
          <div style={{ fontSize: 15, fontWeight: 700, color: '#111315' }}>💬 Μήνυμα σε {waiter.name}</div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', color: '#8a9099' }}>✕</button>
        </div>
        {templates.length > 0 && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {templates.map(t => (
              <button key={t.id} onClick={() => setBody(t.body)} style={{
                height: 26, padding: '0 10px', borderRadius: 6,
                border: `1px solid ${body === t.body ? '#3758c9' : '#dfe2e6'}`,
                background: body === t.body ? '#eff3ff' : '#f9fafb',
                color: body === t.body ? '#3758c9' : '#374151',
                fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
              }}>{t.body}</button>
            ))}
          </div>
        )}
        <textarea
          placeholder="Μήνυμα…"
          value={body}
          onChange={e => setBody(e.target.value)}
          rows={3}
          style={{ width: '100%', borderRadius: 10, border: '1.5px solid #dfe2e6', padding: '10px 14px', fontSize: 14, fontFamily: 'inherit', resize: 'vertical', outline: 'none', boxSizing: 'border-box', color: '#111315' }}
        />
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button onClick={onClose} style={{ height: 36, padding: '0 16px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 13, cursor: 'pointer' }}>Άκυρο</button>
          <button onClick={send} disabled={!body.trim() || sendMut.isPending}
            style={{ height: 36, padding: '0 16px', borderRadius: 8, background: '#3758c9', color: 'white', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', opacity: !body.trim() ? 0.5 : 1 }}>
            {sendMut.isPending ? 'Αποστολή…' : '📤 Αποστολή'}
          </button>
        </div>
      </div>
    </div>
  )
}

function ShiftsCard({ activeShifts, waitersWithoutShift, isOpen, onStartShift, onEndShift, onMessageWaiter, privacyMode }) {
  return (
    <div style={{
      background: 'white', border: '1px solid #edeff1',
      borderRadius: 16, overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 20px', borderBottom: '1px solid #edeff1',
      }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: '#111315' }}>Βάρδιες σε εξέλιξη</div>
        {isOpen && waitersWithoutShift.length > 0 && (
          <button
            onClick={onStartShift}
            style={{
              height: 30, padding: '0 12px', borderRadius: 8,
              border: '1px solid #dfe2e6', background: 'white',
              color: '#2b2f33', fontSize: 12, fontWeight: 600, cursor: 'pointer',
            }}
          >+ Έναρξη</button>
        )}
      </div>
      <div style={{ padding: '12px 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {activeShifts.length === 0 ? (
          <p style={{ fontSize: 13, color: '#8a9099', padding: '8px 0' }}>Κανένας σερβιτόρος σε βάρδια</p>
        ) : (
          activeShifts.map(s => {
            const activeBreak = Array.isArray(s.breaks) ? s.breaks.find(b => !b.ended_at) : null
            return (
              <div key={s.id} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px', borderRadius: 12,
                border: activeBreak ? '1px solid #fed7aa' : '1px solid #edeff1',
                background: activeBreak ? '#fff7ed' : '#fafafa',
                transition: 'background 200ms, border-color 200ms',
              }}>
                <Avatar name={s.waiter_name} avatarUrl={s.avatar_url ?? null} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: '#111315' }}>{s.waiter_name}</span>
                    {activeBreak && (
                      <span style={{
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                        padding: '2px 8px', borderRadius: 999,
                        background: '#fed7aa', color: '#9a3412',
                        fontSize: 11, fontWeight: 700,
                      }}>
                        ☕ Διάλειμμα · {fmtDuration(activeBreak.started_at)}
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 11, color: '#5a6169', marginTop: 1 }}>
                    από {fmtTime(s.started_at)} · {fmtDuration(s.started_at)}
                    {s.total_collected > 0 && (
                      <span style={{
                        color: '#2f9e5e', fontWeight: 600, marginLeft: 6,
                        filter: privacyMode ? 'blur(6px)' : 'none',
                        userSelect: privacyMode ? 'none' : 'auto',
                        transition: 'filter 200ms ease',
                      }}>{fmtEuro(s.total_collected)}</span>
                    )}
                  </div>
                </div>
                <button
                  onClick={() => onMessageWaiter(s)}
                  title="Αποστολή μηνύματος"
                  style={{
                    height: 28, width: 28, borderRadius: 8, flexShrink: 0,
                    border: '1px solid #dfe2e6', background: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, cursor: 'pointer',
                  }}
                >💬</button>
                <button
                  onClick={() => onEndShift(s)}
                  style={{
                    height: 28, padding: '0 10px', borderRadius: 8,
                    border: '1px solid #fecaca', background: '#fef2f2',
                    color: '#dc2626', fontSize: 11, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
                  }}
                >Τέλος</button>
              </div>
            )
          })
        )}
      </div>
    </div>
  )
}

// ─── Revenue bar chart ─────────────────────────────────────────────────────────

function RevenueChart({ orders }) {
  const now = new Date()
  const currentHour = now.getHours()
  const buckets = {}
  for (let h = 10; h <= 23; h++) buckets[h] = 0
  orders.forEach(o => {
    const h = new Date(o.opened_at).getHours()
    if (h >= 10 && h <= 23) buckets[h] = (buckets[h] || 0) + orderTotal(o.items)
  })
  const hours = Object.keys(buckets).map(Number)
  const max = Math.max(...Object.values(buckets), 1)

  return (
    <div style={{
      background: 'white', border: '1px solid #edeff1',
      borderRadius: 16, padding: '16px 20px',
      boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
    }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: '#111315', marginBottom: 16 }}>Έσοδα ανά ώρα</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 90 }}>
        {hours.map(h => {
          const val = buckets[h]
          const heightPct = (val / max) * 100
          const isCurrent = h === currentHour
          const isFuture = h > currentHour
          return (
            <div key={h} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, height: '100%' }}>
              <div style={{ flex: 1, width: '100%', display: 'flex', alignItems: 'flex-end' }}>
                <div title={fmtEuro(val)} style={{
                  width: '100%', height: val > 0 ? `${heightPct}%` : '3px',
                  minHeight: val > 0 ? 4 : 3, borderRadius: 4,
                  background: isCurrent ? '#3758c9' : isFuture ? '#edeff1' : '#c2cff0',
                  transition: 'height 300ms ease',
                }} />
              </div>
              <div style={{
                fontSize: 9, fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
                color: isCurrent ? '#3758c9' : '#8a9099', fontWeight: isCurrent ? 700 : 500,
              }}>{h}</div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

// ─── Reservations stub ────────────────────────────────────────────────────────

function ReservationsCard() {
  return (
    <div style={{
      background: 'white', border: '1px solid #edeff1',
      borderRadius: 16, overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 20px', borderBottom: '1px solid #edeff1',
      }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: '#111315' }}>Κρατήσεις σήμερα</div>
        <button style={{
          height: 28, padding: '0 12px', borderRadius: 8,
          border: '1px solid #dfe2e6', background: 'white',
          color: '#5a6169', fontSize: 12, fontWeight: 600, cursor: 'pointer',
        }}>+ Νέα</button>
      </div>
      <div style={{
        padding: '32px 20px', textAlign: 'center',
        color: '#b8bdc4', fontSize: 13,
      }}>
        <div style={{ fontSize: 28, marginBottom: 8 }}>📅</div>
        Σύντομα — σύστημα κρατήσεων υπό ανάπτυξη
      </div>
    </div>
  )
}

// ─── Messages card ────────────────────────────────────────────────────────────

function ComposeModal({ waiters, tables, templates, onClose, onSent }) {
  const [selectedWaiters, setSelectedWaiters] = useState([])   // [] = all
  const [selectedTables, setSelectedTables] = useState([])
  const [body, setBody] = useState('')

  const sendMut = useMutation({
    mutationFn: (payload) => client.post('/api/messages/send', payload),
    onSuccess: () => { toast.success('Εστάλη!'); onSent(); onClose() },
    onError: () => toast.error('Σφάλμα αποστολής'),
  })

  function toggleWaiter(id) {
    setSelectedWaiters(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
  }
  function toggleTable(id) {
    setSelectedTables(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
  }

  function send() {
    if (!body.trim()) return
    sendMut.mutate({
      body: body.trim(),
      target_waiter_ids: selectedWaiters,  // [] = broadcast all
      table_ids: selectedTables,
    })
  }

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 9999,
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
    }} onClick={onClose}>
      <div style={{
        background: 'white', borderRadius: 20, width: '100%', maxWidth: 520,
        padding: 24, boxShadow: '0 24px 64px rgba(0,0,0,0.22)',
      }} onClick={e => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: '#111315' }}>Νέο Μήνυμα</div>
          <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', color: '#8a9099' }}>✕</button>
        </div>

        {/* Recipients */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#5a6169', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>
            Παραλήπτες {selectedWaiters.length === 0 && <span style={{ color: '#3758c9', fontWeight: 700 }}>(Όλοι)</span>}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {waiters.map(w => {
              const name = w.nickname || w.full_name || w.username
              const sel = selectedWaiters.includes(w.id)
              return (
                <button key={w.id} onClick={() => toggleWaiter(w.id)} style={{
                  height: 30, padding: '0 12px', borderRadius: 999,
                  border: '1.5px solid ' + (sel ? '#3758c9' : '#dfe2e6'),
                  background: sel ? '#eff3ff' : 'white',
                  color: sel ? '#3758c9' : '#374151',
                  fontSize: 12, fontWeight: sel ? 700 : 500, cursor: 'pointer',
                }}>{name}</button>
              )
            })}
          </div>
        </div>

        {/* Tables (optional) */}
        {tables.length > 0 && (
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#5a6169', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>
              Σχετικά Τραπέζια (προαιρετικό)
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 80, overflowY: 'auto' }}>
              {tables.map(t => {
                const name = t.label || `T${t.number}`
                const sel = selectedTables.includes(t.id)
                return (
                  <button key={t.id} onClick={() => toggleTable(t.id)} style={{
                    height: 28, padding: '0 10px', borderRadius: 6,
                    border: '1.5px solid ' + (sel ? '#7a44c9' : '#dfe2e6'),
                    background: sel ? '#f5eeff' : 'white',
                    color: sel ? '#7a44c9' : '#374151',
                    fontSize: 12, fontWeight: sel ? 700 : 500, cursor: 'pointer',
                  }}>{name}</button>
                )
              })}
            </div>
          </div>
        )}

        {/* Quick templates */}
        {templates.length > 0 && (
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#5a6169', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>Γρήγορα Μηνύματα</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {templates.map(t => (
                <button key={t.id} onClick={() => setBody(t.body)} style={{
                  height: 28, padding: '0 12px', borderRadius: 6,
                  border: '1px solid ' + (body === t.body ? '#3758c9' : '#dfe2e6'),
                  background: body === t.body ? '#eff3ff' : '#f9fafb',
                  color: body === t.body ? '#3758c9' : '#374151',
                  fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
                }}>{t.body}</button>
              ))}
            </div>
          </div>
        )}

        {/* Custom body */}
        <textarea
          placeholder="Ή γράψτε το δικό σας μήνυμα…"
          value={body}
          onChange={e => setBody(e.target.value)}
          rows={3}
          style={{
            width: '100%', borderRadius: 10, border: '1.5px solid #dfe2e6',
            padding: '10px 14px', fontSize: 14, fontFamily: 'inherit',
            resize: 'vertical', outline: 'none', boxSizing: 'border-box',
            color: '#111315',
          }}
        />

        <div style={{ display: 'flex', gap: 10, marginTop: 16, justifyContent: 'flex-end' }}>
          <button onClick={onClose} style={{ height: 38, padding: '0 18px', borderRadius: 8, border: '1px solid #dfe2e6', background: 'white', fontSize: 13, cursor: 'pointer' }}>Άκυρο</button>
          <button
            onClick={send}
            disabled={!body.trim() || sendMut.isPending}
            style={{ height: 38, padding: '0 20px', borderRadius: 8, background: '#3758c9', color: 'white', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', opacity: !body.trim() ? 0.5 : 1 }}
          >{sendMut.isPending ? 'Αποστολή…' : '📤 Αποστολή'}</button>
        </div>
      </div>
    </div>
  )
}

function MessagesCard({ waiters, tables }) {
  const qc = useQueryClient()
  const [composing, setComposing] = useState(false)

  const { data: messages = [] } = useQuery({
    queryKey: ['messages-all'],
    queryFn: () => client.get('/api/messages/all?limit=20').then(r => r.data),
    refetchInterval: 10_000,
  })

  const { data: templates = [] } = useQuery({
    queryKey: ['quick-templates'],
    queryFn: () => client.get('/api/messages/templates').then(r => r.data),
    staleTime: 60_000,
  })

  function parseJsonField(val) {
    if (Array.isArray(val)) return val
    try { return JSON.parse(val || '[]') } catch { return [] }
  }

  function fmtTargets(msg) {
    const ids = parseJsonField(msg.target_waiter_ids)
    if (ids.length === 0) return 'Όλοι'
    return ids.map(id => {
      const w = waiters.find(w => w.id === id)
      return w ? (w.nickname || w.full_name || w.username) : `#${id}`
    }).join(', ')
  }

  return (
    <>
      {composing && (
        <ComposeModal
          waiters={waiters}
          tables={tables}
          templates={templates}
          onClose={() => setComposing(false)}
          onSent={() => qc.invalidateQueries({ queryKey: ['messages-all'] })}
        />
      )}
      <div style={{
        background: 'white', border: '1px solid #edeff1',
        borderRadius: 16, overflow: 'hidden',
        boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '16px 20px', borderBottom: '1px solid #edeff1',
        }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: '#111315' }}>Μηνύματα</div>
          <button
            onClick={() => setComposing(true)}
            style={{
              height: 28, padding: '0 12px', borderRadius: 8,
              border: '1px solid #dfe2e6', background: 'white',
              color: '#5a6169', fontSize: 12, fontWeight: 600, cursor: 'pointer',
            }}
          >+ Νέο</button>
        </div>

        {messages.length === 0 ? (
          <div style={{ padding: '32px 20px', textAlign: 'center', color: '#b8bdc4', fontSize: 13 }}>
            <div style={{ fontSize: 28, marginBottom: 8 }}>💬</div>
            Δεν υπάρχουν μηνύματα ακόμα
          </div>
        ) : (
          <div style={{ maxHeight: 300, overflowY: 'auto' }}>
            {messages.map(msg => {
              const ackedIds = parseJsonField(msg.acked_by).length
              const totalTargets = parseJsonField(msg.target_waiter_ids).length || waiters.length
              return (
                <div key={msg.id} style={{
                  padding: '10px 20px', borderBottom: '1px solid #f4f4f2',
                  display: 'flex', gap: 12, alignItems: 'flex-start',
                }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: '#111315', marginBottom: 2 }}>{msg.body}</div>
                    <div style={{ fontSize: 11, color: '#8a9099' }}>
                      Προς: {fmtTargets(msg)} · {new Date(msg.created_at).toLocaleTimeString('el-GR', { hour: '2-digit', minute: '2-digit' })}
                    </div>
                  </div>
                  <div style={{
                    fontSize: 11, fontWeight: 700,
                    color: ackedIds >= totalTargets ? '#16a34a' : '#f59e0b',
                    background: ackedIds >= totalTargets ? '#f0fdf4' : '#fffbeb',
                    border: `1px solid ${ackedIds >= totalTargets ? '#bbf7d0' : '#fde68a'}`,
                    borderRadius: 999, padding: '2px 8px', whiteSpace: 'nowrap', flexShrink: 0,
                  }}>
                    {ackedIds}/{totalTargets} ✓
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>
    </>
  )
}

// ─── Pending prints panel ──────────────────────────────────────────────────────

function PendingPrintsPanel({ pendingPrintOrders, onRetryAll, onRetrySingle, onViewOrder, retryingId }) {
  if (pendingPrintOrders.length === 0) return null
  return (
    <div style={{
      background: 'white', borderRadius: 16, overflow: 'hidden',
      border: '1px solid #fed7aa', boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px', background: '#fff7ed', borderBottom: '1px solid #fed7aa',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 18 }}>⏳</span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#9a3412' }}>Εκκρεμείς Εκτυπώσεις</div>
            <div style={{ fontSize: 12, color: '#c2410c', marginTop: 1 }}>
              {pendingPrintOrders.length} παραγγελί{pendingPrintOrders.length !== 1 ? 'ες' : 'α'} δεν έχ{pendingPrintOrders.length !== 1 ? 'ουν' : 'ει'} σταλεί
            </div>
          </div>
        </div>
        <button
          onClick={onRetryAll} disabled={retryingId !== null}
          style={{
            height: 32, padding: '0 14px', borderRadius: 8,
            background: '#c2410c', border: 'none', color: 'white',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
          }}
        >{retryingId !== null ? 'Αποστολή…' : 'Αποστολή Όλων'}</button>
      </div>
      {pendingPrintOrders.map(({ table, order }) => {
        const unprinted = order.items.filter(i => i.status === 'active' && !i.printed)
        const tableName = table.label || `T${table.number}`
        return (
          <div key={order.id} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '10px 20px', borderBottom: '1px solid #fff7ed',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 12, background: '#fff7ed', color: '#c2410c',
              border: '1px solid #fed7aa', fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace",
            }}>{tableName}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#111315' }}>
                {unprinted.length} αντικείμενο{unprinted.length !== 1 ? 'α' : ''} εκκρεμούν
              </div>
              <div style={{ fontSize: 11, color: '#5a6169', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {unprinted.map(i => i.product?.name || `#${i.product_id}`).join(', ')}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
              <button onClick={() => onViewOrder(order.id)} className="btn btn-secondary text-xs">Λεπτομέρειες</button>
              <button
                onClick={() => onRetrySingle(order.id)} disabled={retryingId === order.id}
                style={{
                  height: 28, padding: '0 10px', borderRadius: 6,
                  background: '#c2410c', border: 'none', color: 'white',
                  fontSize: 11, fontWeight: 600, cursor: 'pointer',
                }}
              >{retryingId === order.id ? '…' : 'Εκτύπωση'}</button>
            </div>
          </div>
        )
      })}
    </div>
  )
}

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

export default function DashboardPage() {
  const [showStartShift, setShowStartShift] = useState(false)
  const [closeDetails, setCloseDetails] = useState(null)
  const [forceClosing, setForceClosing] = useState(false)
  const [retryingId, setRetryingId] = useState(null)
  const [quickView, setQuickView] = useState(null)
  const [licenseBlock, setLicenseBlock] = useState(null) // { code, message } when open is blocked
  // End shift flow: confirm modal → summary modal
  const [endShiftTarget, setEndShiftTarget] = useState(null)   // shift object to confirm
  const [endShiftBusy, setEndShiftBusy] = useState(false)
  const [shiftSummaryId, setShiftSummaryId] = useState(null)   // show summary for this shift id
  // Quick message to single waiter
  const [messageWaiter, setMessageWaiter] = useState(null)     // { id, name }
  const [privacyMode, setPrivacyMode] = useState(() => localStorage.getItem('privacyMode') === 'true')
  const navigate = useNavigate()
  const qc = useQueryClient()
  const license = useContext(LicenseContext)

  const { data: businessDay } = useQuery({
    queryKey: ['business-day'],
    queryFn: () => client.get('/api/business-day/current').then(r => r.data),
    refetchInterval: 10_000,
  })

  const { data: activeShifts = [] } = useQuery({
    queryKey: ['active-shifts'],
    queryFn: () => client.get('/api/shifts/?active_only=true').then(r => r.data.shifts ?? []),
    refetchInterval: 10_000,
  })

  const { data: allWaiters = [] } = useQuery({
    queryKey: ['waiters'],
    queryFn: () => client.get('/api/waiters/').then(r => r.data),
    staleTime: 60_000,
  })

  const { data: quickTemplates = [] } = useQuery({
    queryKey: ['quick-templates'],
    queryFn: () => client.get('/api/messages/templates').then(r => r.data),
    staleTime: 60_000,
  })

  const { data: tables = [], isLoading: tablesLoading } = useQuery({
    queryKey: ['tables'],
    queryFn: () => client.get('/api/tables/').then(r => r.data),
    refetchInterval: 5_000,
  })

  const { data: orders = [], isLoading: ordersLoading } = useQuery({
    queryKey: ['orders-active'],
    queryFn: () => client.get('/api/orders/').then(r => r.data),
    refetchInterval: 5_000,
  })

  const openDayMut = useMutation({
    mutationFn: () => client.post('/api/business-day/open', {}),
    onSuccess: () => { toast.success('Ημέρα ανοίχτηκε!'); qc.invalidateQueries({ queryKey: ['business-day'] }) },
    onError: (e) => {
      const detail = e.response?.data?.detail
      if (detail?.code === 'SYSTEM_LOCKED' || detail?.code === 'LICENSE_EXPIRED') {
        setLicenseBlock({ code: detail.code, message: detail.message })
      } else {
        toast.error(typeof detail === 'string' ? detail : 'Σφάλμα')
      }
    },
  })

  function handleOpenDay() {
    if (license?.isBlocked) {
      setLicenseBlock({
        code: license.lock_reason === 'admin' ? 'SYSTEM_LOCKED' : 'LICENSE_EXPIRED',
        message: license.lock_reason === 'admin'
          ? 'Το σύστημα έχει κλειδωθεί από διαχειριστή. Επικοινωνήστε με την υποστήριξη.'
          : 'Η άδεια χρήσης έχει λήξει. Ανανεώστε την άδεια ή επικοινωνήστε με την υποστήριξη.',
      })
      return
    }
    openDayMut.mutate()
  }

  async function handleCloseDay(force = false) {
    setForceClosing(force)
    try {
      await client.post('/api/business-day/close', { force })
      toast.success('Ημέρα έκλεισε!')
      setCloseDetails(null)
      qc.invalidateQueries({ queryKey: ['business-day'] })
      qc.invalidateQueries({ queryKey: ['active-shifts'] })
      qc.invalidateQueries({ queryKey: ['orders-active'] })
      qc.invalidateQueries({ queryKey: ['tables'] })
      qc.invalidateQueries({ queryKey: ['messages-all'] })
    } catch (e) {
      const detail = e.response?.data?.detail
      if (e.response?.status === 409 && detail?.open_orders) setCloseDetails(detail)
      else toast.error(typeof detail === 'string' ? detail : 'Σφάλμα κλεισίματος')
    } finally {
      setForceClosing(false)
    }
  }

  async function handleEndShiftConfirm(notes) {
    if (!endShiftTarget) return
    setEndShiftBusy(true)
    try {
      await client.post(`/api/shifts/manager/end/${endShiftTarget.id}`, { notes: notes || null })
      qc.invalidateQueries({ queryKey: ['active-shifts'] })
      const summaryTarget = { id: endShiftTarget.id, waiter_id: endShiftTarget.waiter_id }
      setEndShiftTarget(null)
      setShiftSummaryId(summaryTarget)
    } catch (e) {
      toast.error(e.response?.data?.detail || 'Σφάλμα')
    } finally {
      setEndShiftBusy(false)
    }
  }

  async function handleStartShift(waiterId, startingCash) {
    await client.post('/api/shifts/manager/start', { waiter_id: waiterId, starting_cash: startingCash })
    toast.success('Βάρδια ξεκίνησε!')
    qc.invalidateQueries({ queryKey: ['active-shifts'] })
  }

  async function retrySingleOrder(orderId) {
    setRetryingId(orderId)
    try {
      const res = await client.post(`/api/orders/${orderId}/retry-print`)
      const results = res.data.print_results ?? []
      const allOk = results.length === 0 || results.every(r => r.success)
      if (allOk) toast.success('Εκτυπώθηκε επιτυχώς')
      else {
        const failed = results.filter(r => !r.success).map(r => r.printer_name).join(', ')
        toast.error(`Αποτυχία: ${failed}`)
      }
      qc.invalidateQueries({ queryKey: ['orders-active'] })
    } catch {
      toast.error('Σφάλμα επικοινωνίας')
    } finally {
      setRetryingId(null)
    }
  }

  async function retryAllOrders() {
    for (const { order } of pendingPrintOrders) {
      if (order) await retrySingleOrder(order.id)
    }
  }

  const isOpen = !!businessDay

  const waitersWithoutShift = allWaiters.filter(
    w => w.role === 'waiter' && !activeShifts.some(s => s.waiter_id === w.id)
  )

  // Build table cards
  const tableCards = tables.map(table => {
    const order = orders.find(o =>
      o.table_id === table.id && ['open', 'partially_paid', 'paid'].includes(o.status)
    )
    const tableStatus = order ? order.status : 'free'
    const hasPendingPrint = order ? order.items.some(i => i.status === 'active' && !i.printed) : false
    return { table, order, tableStatus, hasPendingPrint }
  })

  const pendingPrintOrders = tableCards.filter(c => c.hasPendingPrint)

  // KPIs — revenue scoped to orders that opened after business day start
  const businessDayStart = businessDay?.opened_at ? new Date(businessDay.opened_at) : null
  const dayOrders = businessDayStart
    ? orders.filter(o => new Date(o.opened_at) >= businessDayStart)
    : orders

  const totalRevenue = dayOrders.reduce((s, o) => s + orderTotal(o.items), 0)
  const openCount = tableCards.filter(c => c.tableStatus === 'open').length
  const partialCount = tableCards.filter(c => c.tableStatus === 'partially_paid').length
  const occupiedCount = openCount + partialCount
  const freeCount = tableCards.filter(c => c.tableStatus === 'free').length

  // Avg ticket: revenue divided by number of orders with at least one paid item
  const paidOrders = dayOrders.filter(o => o.items.some(i => i.paid_by))
  const avgTicket = paidOrders.length > 0 ? totalRevenue / paidOrders.length : 0

  // Total collected by all active shifts
  const totalCollected = activeShifts.reduce((s, sh) => s + (sh.total_collected || 0), 0)

  const todayStr = new Date().toLocaleDateString('el-GR', { weekday: 'long', day: 'numeric', month: 'long' })

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

  return (
    <div className="overflow-y-auto h-full p-6" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

      {/* ── Header bar ─────────────────────────────────────────────────────── */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: isOpen ? '#eef7f0' : '#f4f4f2',
              color: isOpen ? '#1f7042' : '#5a6169',
              fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 3,
                background: isOpen ? '#2f9e5e' : '#8a9099',
                boxShadow: isOpen ? '0 0 0 2px #bbf7d0' : 'none',
              }} />
              {isOpen ? 'Ημέρα Ανοιχτή' : 'Ημέρα Κλειστή'}
            </span>
          </div>
          <div style={{ fontSize: 13, color: '#5a6169', marginTop: 3 }}>
            {todayStr}
            {isOpen && businessDay?.opened_at && ` · από ${fmtTime(businessDay.opened_at)} · ${fmtDuration(businessDay.opened_at)}`}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button
            onClick={() => setPrivacyMode(p => { const next = !p; localStorage.setItem('privacyMode', next); return next })}
            title={privacyMode ? 'Εμφάνιση ποσών' : 'Απόκρυψη ποσών'}
            style={{
              height: 38, width: 38, borderRadius: 10, flexShrink: 0,
              border: '1px solid #dfe2e6',
              background: privacyMode ? '#1e293b' : 'white',
              color: privacyMode ? '#94a3b8' : '#5a6169',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', fontSize: 16, transition: 'background 200ms, color 200ms',
            }}
          >
            {privacyMode ? (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
                <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
                <line x1="1" y1="1" x2="23" y2="23"/>
              </svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            )}
          </button>
          {isOpen ? (
            <button onClick={() => handleCloseDay(false)} style={{
              height: 38, padding: '0 18px', borderRadius: 10,
              background: '#dc2626', border: 'none', color: 'white',
              fontSize: 13, fontWeight: 700, cursor: 'pointer',
            }}>Κλείσιμο Ημέρας</button>
          ) : (
            <button onClick={handleOpenDay} disabled={openDayMut.isPending} style={{
              height: 38, padding: '0 18px', borderRadius: 10,
              background: '#16a34a', border: 'none', color: 'white',
              fontSize: 13, fontWeight: 700, cursor: 'pointer',
            }}>{openDayMut.isPending ? 'Άνοιγμα…' : '▶ Άνοιγμα Ημέρας'}</button>
          )}
        </div>
      </div>

      {/* ── KPI strip — full-width flex row ────────────────────────────────── */}
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <KpiCard
          label="Έσοδα ημέρας"
          value={fmtEuro(totalRevenue)}
          sub={`${dayOrders.length} παραγγελί${dayOrders.length !== 1 ? 'ες' : 'α'} · μ.ο. ${fmtEuro(avgTicket)}`}
          accent="#3758c9"
          private={privacyMode}
        />
        <KpiCard
          label="Τραπέζια σε χρήση"
          value={`${occupiedCount} / ${tables.length}`}
          sub={`${freeCount} ελεύθερα · ${partialCount} μερική πληρ.`}
          accent="#7a44c9"
          pct={tables.length > 0 ? (occupiedCount / tables.length) * 100 : 0}
        />
        <KpiCard
          label="Βάρδιες ενεργές"
          value={String(activeShifts.length)}
          sub={activeShifts.length > 0 ? activeShifts.map(s => s.waiter_name.split(' ')[0]).join(', ') : 'Κανένας σε βάρδια'}
          accent="#2f9e5e"
        />
        <KpiCard
          label="Είσπραξη βαρδιών"
          value={fmtEuro(totalCollected)}
          sub={`Σύνολο από ${activeShifts.length} βάρδι${activeShifts.length === 1 ? 'α' : 'ες'}`}
          accent="#0d7a8a"
          private={privacyMode}
        />
        {pendingPrintOrders.length > 0 && (
          <KpiCard
            label="Εκκρεμείς εκτυπώσεις"
            value={String(pendingPrintOrders.length)}
            sub="Απαιτείται προσοχή"
            accent="#d94b26"
          />
        )}
      </div>

      {/* ── Main 2-column layout: 65 / 35 ──────────────────────────────────── */}
      <div style={{ display: 'grid', gridTemplateColumns: '65fr 35fr', gap: 20, alignItems: 'start' }}>

        {/* ── Left column — Shifts + Tables + Revenue + Pending prints ───────── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

          {/* Shifts card — FIRST */}
          <ShiftsCard
            activeShifts={activeShifts}
            waitersWithoutShift={waitersWithoutShift}
            isOpen={isOpen}
            onStartShift={() => setShowStartShift(true)}
            onEndShift={(shift) => setEndShiftTarget(shift)}
            onMessageWaiter={(s) => setMessageWaiter({ id: s.waiter_id, name: s.waiter_name })}
            privacyMode={privacyMode}
          />

          {/* Tables overview — SECOND */}
          <div style={{
            background: 'white', border: '1px solid #edeff1',
            borderRadius: 16, overflow: 'hidden',
            boxShadow: '0 1px 2px rgba(16,20,24,0.04)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '16px 20px', borderBottom: '1px solid #edeff1',
            }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#111315' }}>Τραπέζια τώρα</div>
              <button
                onClick={() => navigate('/tables')}
                style={{
                  height: 28, padding: '0 12px', borderRadius: 8,
                  border: '1px solid #dfe2e6', background: 'white',
                  color: '#2b2f33', fontSize: 12, fontWeight: 600, cursor: 'pointer',
                }}
              >Πλήρης εικόνα →</button>
            </div>
            <div style={{ padding: '16px 20px' }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(56px, 1fr))',
                gap: 8, marginBottom: 14,
              }}>
                {tableCards.map(({ table, tableStatus, order }) => (
                  <TableChip
                    key={table.id}
                    name={table.label || `T${table.number}`}
                    status={tableStatus}
                    amount={order ? orderTotal(order.items) : null}
                    onClick={order ? () => setQuickView({ orderId: order.id, tableName: table.label || `T${table.number}` }) : undefined}
                  />
                ))}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {Object.entries(TABLE_COLORS).map(([key, c]) => (
                  <div key={key} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '4px 10px', borderRadius: 999, background: '#edeff1',
                    fontSize: 12, fontWeight: 600, color: '#2b2f33',
                  }}>
                    <span style={{ width: 8, height: 8, borderRadius: 4, background: c.dot }} />
                    {c.label}
                    <span style={{ fontFamily: "'ui-monospace','SFMono-Regular','Menlo',monospace", color: '#111315' }}>
                      {tableCards.filter(tc => tc.tableStatus === key).length}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Revenue chart */}
          <RevenueChart orders={dayOrders} />

          {/* Pending prints */}
          <PendingPrintsPanel
            pendingPrintOrders={pendingPrintOrders}
            onRetryAll={retryAllOrders}
            onRetrySingle={retrySingleOrder}
            onViewOrder={id => setQuickView({ orderId: id, tableName: tables.find(t => tableCards.find(tc => tc.order?.id === id)?.table.id === t.id)?.label || '—' })}
            retryingId={retryingId}
          />
        </div>

        {/* ── Right column — Reservations + Messages ───────────────────────── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <ReservationsCard />
          <MessagesCard waiters={allWaiters} tables={tables} />
        </div>
      </div>

      {/* ── Modals ─────────────────────────────────────────────────────────── */}
      {showStartShift && (
        <StartShiftModal
          waiters={waitersWithoutShift}
          onClose={() => setShowStartShift(false)}
          onStart={handleStartShift}
        />
      )}

      {endShiftTarget && (
        <EndShiftConfirmModal
          shift={endShiftTarget}
          onClose={() => setEndShiftTarget(null)}
          onConfirm={handleEndShiftConfirm}
          busy={endShiftBusy}
        />
      )}

      {shiftSummaryId && (
        <ShiftDetailModal
          shiftId={shiftSummaryId.id}
          shiftWaiterId={shiftSummaryId.waiter_id}
          onClose={() => setShiftSummaryId(null)}
        />
      )}

      {messageWaiter && (
        <QuickMessageModal
          waiter={messageWaiter}
          tables={tables}
          templates={quickTemplates}
          onClose={() => setMessageWaiter(null)}
          onSent={() => qc.invalidateQueries({ queryKey: ['messages-all'] })}
        />
      )}
      {closeDetails && (
        <CloseConfirmModal
          details={closeDetails}
          onClose={() => setCloseDetails(null)}
          onConfirm={() => handleCloseDay(true)}
          busy={forceClosing}
        />
      )}
      {quickView && (
        <OrderQuickModal
          orderId={quickView.orderId}
          tableName={quickView.tableName}
          onClose={() => setQuickView(null)}
          onOpenFull={() => { navigate(`/orders/${quickView.orderId}`); setQuickView(null) }}
        />
      )}
      {licenseBlock && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl p-7 w-full max-w-sm text-center space-y-4">
            <div className="flex justify-center">
              <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${
                licenseBlock.code === 'SYSTEM_LOCKED' ? 'bg-red-100' : 'bg-orange-100'
              }`}>
                <span className="text-2xl">{licenseBlock.code === 'SYSTEM_LOCKED' ? '🔒' : '⚠️'}</span>
              </div>
            </div>
            <h2 className="text-[15px] font-bold text-slate-900">
              {licenseBlock.code === 'SYSTEM_LOCKED' ? 'Σύστημα Κλειδωμένο' : 'Άδεια Χρήσης Ληγμένη'}
            </h2>
            <p className="text-[13px] text-slate-600">{licenseBlock.message}</p>
            <button
              onClick={() => setLicenseBlock(null)}
              className="w-full h-10 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-[13px] font-semibold transition-colors"
            >
              Κλείσιμο
            </button>
          </div>
        </div>
      )}
    </div>
  )
}