import { useState, useEffect, useCallback, useRef } from 'react'
import useAuthStore from '../store/authStore'
import {
  getIncomingOrders,
  getActiveOrders,
  getOrderHistory,
  acceptOnlineOrder,
  rejectOnlineOrder,
  updateOnlineOrderStatus,
} from '../api/client'

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

function timeAgo(iso) {
  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000)
  if (diff < 60) return `${diff}s ago`
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
  return `${Math.floor(diff / 3600)}h ago`
}

function calcTotals(items = []) {
  return items.reduce((sum, it) => sum + (it.unit_price ?? 0) * (it.quantity ?? 1), 0)
}

const STATUS_LABELS = {
  pending_acceptance: { label: 'Αναμονή', cls: 'bg-amber-100 text-amber-700' },
  accepted:           { label: 'Αποδεκτή',  cls: 'bg-blue-100 text-blue-700' },
  preparing:          { label: 'Προετοιμασία', cls: 'bg-indigo-100 text-indigo-700' },
  ready:              { label: 'Έτοιμη',    cls: 'bg-green-100 text-green-700' },
  out_for_delivery:   { label: 'Παράδοση',  cls: 'bg-purple-100 text-purple-700' },
  delivered:          { label: 'Παραδόθηκε', cls: 'bg-gray-100 text-gray-500' },
  rejected:           { label: 'Απορρίφθηκε', cls: 'bg-red-100 text-red-600' },
}

function OnlineStatusBadge({ status }) {
  const { label, cls } = STATUS_LABELS[status] ?? { label: status, cls: 'bg-gray-100 text-gray-600' }
  return (
    <span className={`inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${cls}`}>
      {label}
    </span>
  )
}

// ── Order Card ────────────────────────────────────────────────────────────────

function OrderCard({ order, onAction }) {
  const [rejectOpen, setRejectOpen] = useState(false)
  const [rejectReason, setRejectReason] = useState('')
  const [busy, setBusy] = useState(false)
  const [tick, setTick] = useState(0)

  // Refresh the "X min ago" label every 30 s without a full re-render of parent
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 30_000)
    return () => clearInterval(id)
  }, [])

  const subtotal = calcTotals(order.items)
  const isDelivery = order.online_order_type === 'delivery'
  const st = order.online_status

  async function act(fn) {
    setBusy(true)
    try { await fn() } finally { setBusy(false) }
  }

  return (
    <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
      {/* Card header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50/60">
        <div className="flex items-center gap-2">
          <span className="font-bold text-gray-800 text-base">
            {order.online_order_ref ?? `#${order.id}`}
          </span>
          <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
            isDelivery ? 'bg-orange-100 text-orange-700' : 'bg-teal-100 text-teal-700'
          }`}>
            {isDelivery ? 'Delivery' : 'Dine-in'}
          </span>
          <OnlineStatusBadge status={st} />
        </div>
        <span className="text-xs text-gray-400">{timeAgo(order.opened_at)}</span>
      </div>

      {/* Customer info */}
      <div className="px-4 py-3 space-y-0.5 border-b border-gray-100 text-sm text-gray-700">
        {order.online_customer_name && (
          <p className="font-medium">{order.online_customer_name}</p>
        )}
        {order.online_customer_phone && (
          <p className="text-gray-500">{order.online_customer_phone}</p>
        )}
        {isDelivery && order.online_customer_address && (
          <p className="text-gray-500">{order.online_customer_address}</p>
        )}
        {order.online_customer_notes && (
          <p className="text-amber-700 bg-amber-50 rounded px-2 py-1 text-xs mt-1">
            📝 {order.online_customer_notes}
          </p>
        )}
      </div>

      {/* Items */}
      <div className="px-4 py-3 border-b border-gray-100">
        <div className="space-y-1 text-sm text-gray-700">
          {order.items.map((it, i) => (
            <div key={i} className="flex justify-between">
              <span>{it.quantity} × {it.product?.name ?? `#${it.product_id}`}</span>
              <span className="text-gray-500">€{(it.unit_price * it.quantity).toFixed(2)}</span>
            </div>
          ))}
        </div>
        <div className="mt-2 pt-2 border-t border-gray-100 flex justify-between font-semibold text-sm">
          <span>Σύνολο</span>
          <span>€{subtotal.toFixed(2)}</span>
        </div>
      </div>

      {/* Actions */}
      <div className="px-4 py-3 flex flex-wrap gap-2">
        {st === 'pending_acceptance' && (
          <>
            <button
              onClick={() => act(() => onAction('accept', order.id))}
              disabled={busy}
              className="btn btn-primary text-sm px-4 min-h-0 h-9 bg-green-600 hover:bg-green-700 border-green-600"
            >
              Αποδοχή
            </button>
            <button
              onClick={() => setRejectOpen(r => !r)}
              disabled={busy}
              className="btn btn-danger text-sm px-4 min-h-0 h-9"
            >
              Απόρριψη
            </button>
          </>
        )}
        {st === 'accepted' && (
          <button
            onClick={() => act(() => onAction('status', order.id, 'preparing'))}
            disabled={busy}
            className="btn btn-secondary text-sm px-4 min-h-0 h-9"
          >
            Προετοιμασία
          </button>
        )}
        {st === 'preparing' && (
          isDelivery ? (
            <button
              onClick={() => act(() => onAction('status', order.id, 'out_for_delivery'))}
              disabled={busy}
              className="btn btn-secondary text-sm px-4 min-h-0 h-9"
            >
              Εξωτερική Παράδοση
            </button>
          ) : (
            <button
              onClick={() => act(() => onAction('status', order.id, 'ready'))}
              disabled={busy}
              className="btn btn-secondary text-sm px-4 min-h-0 h-9"
            >
              Έτοιμη
            </button>
          )
        )}
        {(st === 'ready' || st === 'out_for_delivery') && (
          <button
            onClick={() => act(() => onAction('status', order.id, 'delivered'))}
            disabled={busy}
            className="btn btn-primary text-sm px-4 min-h-0 h-9"
          >
            Παραδόθηκε
          </button>
        )}
      </div>

      {/* Reject inline form */}
      {rejectOpen && (
        <div className="px-4 pb-4 flex gap-2 items-start border-t border-gray-100 pt-3">
          <textarea
            className="input flex-1 resize-none text-sm"
            rows={2}
            placeholder="Λόγος απόρριψης (προαιρετικό)"
            value={rejectReason}
            onChange={e => setRejectReason(e.target.value)}
          />
          <div className="flex flex-col gap-2">
            <button
              onClick={() => act(() => onAction('reject', order.id, rejectReason))}
              disabled={busy}
              className="btn btn-danger text-sm px-3 min-h-0 h-9"
            >
              Επιβεβαίωση
            </button>
            <button
              onClick={() => setRejectOpen(false)}
              className="btn btn-secondary text-sm px-3 min-h-0 h-9"
            >
              Ακύρωση
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Tab Panel ─────────────────────────────────────────────────────────────────

function OrderList({ orders, onAction, emptyText }) {
  if (!orders.length) {
    return <p className="text-sm text-gray-400 text-center py-12">{emptyText}</p>
  }
  return (
    <div className="space-y-4">
      {orders.map(o => (
        <OrderCard key={o.id} order={o} onAction={onAction} />
      ))}
    </div>
  )
}

// ── Main Page ─────────────────────────────────────────────────────────────────

const TABS = [
  { key: 'incoming', label: 'Εισερχόμενες' },
  { key: 'active',   label: 'Ενεργές' },
  { key: 'history',  label: 'Ιστορικό' },
]

export default function OnlineOrdersPage() {
  const [activeTab, setActiveTab]   = useState('incoming')
  const [incoming, setIncoming]     = useState([])
  const [active,   setActive]       = useState([])
  const [history,  setHistory]      = useState([])
  const [loading,  setLoading]      = useState(false)
  const [error,    setError]        = useState(null)
  const token = useAuthStore(s => s.token)
  const pollRef = useRef(null)

  const fetchAll = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const [inc, act, hist] = await Promise.all([
        getIncomingOrders(),
        getActiveOrders(),
        getOrderHistory(),
      ])
      setIncoming(inc.data)
      setActive(act.data)
      setHistory(hist.data)
    } catch {
      setError('Σφάλμα φόρτωσης παραγγελιών.')
    } finally {
      setLoading(false)
    }
  }, [])

  // Initial fetch + 20 s polling
  useEffect(() => {
    fetchAll()
    pollRef.current = setInterval(fetchAll, 20_000)
    return () => clearInterval(pollRef.current)
  }, [fetchAll])

  // SSE listener — refetch on online_order_received or online_order_updated
  useEffect(() => {
    if (!token) return
    const es = new EventSource(`/api/stream?token=${encodeURIComponent(token)}`)
    es.onmessage = (e) => {
      try {
        const { type } = JSON.parse(e.data)
        if (type === 'online_order_received' || type === 'online_order_updated') {
          fetchAll()
        }
      } catch { /* ignore malformed frames */ }
    }
    return () => es.close()
  }, [token, fetchAll])

  async function handleAction(action, orderId, extra) {
    try {
      if (action === 'accept') {
        const { data: updated } = await acceptOnlineOrder(orderId)
        setIncoming(prev => prev.filter(o => o.id !== orderId))
        setActive(prev => [updated, ...prev])
      } else if (action === 'reject') {
        const { data: updated } = await rejectOnlineOrder(orderId, extra)
        setIncoming(prev => prev.filter(o => o.id !== orderId))
        setHistory(prev => [updated, ...prev])
      } else if (action === 'status') {
        const { data: updated } = await updateOnlineOrderStatus(orderId, extra)
        const isDone = updated.online_status === 'delivered' || updated.online_status === 'rejected'
        if (isDone) {
          setActive(prev => prev.filter(o => o.id !== orderId))
          setHistory(prev => [updated, ...prev])
        } else {
          setActive(prev => prev.map(o => o.id === orderId ? updated : o))
        }
      }
    } catch {
      // Re-fetch to sync — avoids stale state after a failed optimistic update
      fetchAll()
    }
  }

  const pendingCount = incoming.length

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* Page header */}
      <div className="px-6 py-5 border-b border-gray-100 shrink-0 flex items-center gap-3">
        <h1 className="text-xl font-bold text-gray-800">Online Παραγγελίες</h1>
        {pendingCount > 0 && (
          <span className="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
            {pendingCount}
          </span>
        )}
        <button
          onClick={fetchAll}
          disabled={loading}
          className="ml-auto btn btn-secondary text-sm px-3 min-h-0 h-8"
        >
          {loading ? '…' : '↻ Ανανέωση'}
        </button>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-gray-200 shrink-0 bg-white px-4">
        {TABS.map(tab => {
          const count = tab.key === 'incoming' ? incoming.length
            : tab.key === 'active' ? active.length
            : history.length
          const isActive = activeTab === tab.key
          return (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors flex items-center gap-1.5 ${
                isActive
                  ? 'border-primary-600 text-primary-700 bg-primary-50/50'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50'
              }`}
            >
              {tab.label}
              {count > 0 && (
                <span className={`text-xs px-1.5 py-0.5 rounded-full font-mono ${
                  tab.key === 'incoming'
                    ? 'bg-red-100 text-red-700'
                    : isActive ? 'bg-primary-100 text-primary-700' : 'bg-gray-100 text-gray-500'
                }`}>
                  {count}
                </span>
              )}
            </button>
          )
        })}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto px-6 py-5">
        {error && (
          <div className="mb-4 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
            {error}
          </div>
        )}

        {activeTab === 'incoming' && (
          <OrderList
            orders={incoming}
            onAction={handleAction}
            emptyText="Δεν υπάρχουν εισερχόμενες παραγγελίες."
          />
        )}
        {activeTab === 'active' && (
          <OrderList
            orders={active}
            onAction={handleAction}
            emptyText="Δεν υπάρχουν ενεργές παραγγελίες."
          />
        )}
        {activeTab === 'history' && (
          <OrderList
            orders={history}
            onAction={handleAction}
            emptyText="Δεν υπάρχει ιστορικό παραγγελιών."
          />
        )}
      </div>
    </div>
  )
}