'use client'

import { useEffect, useState } from 'react'
import DemoNav from '@/components/DemoNav'

type OrderItem = { id: number; name: string; quantity: number; price: number; notes: string }
type Order = {
  id: number
  customerName: string
  status: string
  paymentStatus: string
  total: number
  tip: number
  email?: string
  phone?: string
  createdAt: string
  table: { number: number }
  items: OrderItem[]
}

const STATUS_FLOW = ['new', 'preparing', 'ready', 'completed']
const STATUS_LABEL: Record<string, string> = {
  new: 'New',
  preparing: 'Preparing',
  ready: 'Ready',
  completed: 'Completed',
}
const STATUS_BORDER: Record<string, string> = {
  new: 'border-white border-2',
  preparing: 'border-zinc-400 border-2',
  ready: 'border-white border-2 border-dashed',
  completed: 'border-zinc-800',
}

function timeAgo(iso: string) {
  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000)
  if (mins < 1) return 'just now'
  return `${mins}m ago`
}

export default function PosPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [filter, setFilter] = useState<string>('active')

  const load = () => {
    fetch('/api/orders')
      .then((r) => r.json())
      .then(setOrders)
  }

  useEffect(() => {
    load()
    const interval = setInterval(load, 3000)
    const onVisible = () => { if (document.visibilityState === 'visible') load() }
    document.addEventListener('visibilitychange', onVisible)
    window.addEventListener('focus', load)
    return () => {
      clearInterval(interval)
      document.removeEventListener('visibilitychange', onVisible)
      window.removeEventListener('focus', load)
    }
  }, [])

  const advanceStatus = async (order: Order) => {
    const idx = STATUS_FLOW.indexOf(order.status)
    const next = STATUS_FLOW[Math.min(idx + 1, STATUS_FLOW.length - 1)]
    await fetch(`/api/orders/${order.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: next }),
    })
    load()
  }

  const markPaid = async (order: Order) => {
    await fetch(`/api/orders/${order.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ paymentStatus: 'paid' }),
    })
    load()
  }

  const visible = orders.filter((o) => (filter === 'active' ? o.status !== 'completed' : true))
  const todayRevenue = orders
    .filter((o) => o.paymentStatus === 'paid')
    .reduce((s, o) => s + o.total, 0)

  return (
    <div className="min-h-screen bg-black text-white">
      <DemoNav />
      <header className="bg-black border-b border-zinc-800 px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div>
            <h1 className="font-bold text-lg">MOON TAVERN — POS</h1>
            <p className="text-xs text-zinc-500">Main Station</p>
          </div>
        </div>
        <div className="flex items-center gap-6">
          <div className="text-right">
            <p className="text-xs text-zinc-500">Today&apos;s Revenue</p>
            <p className="text-xl font-bold">${todayRevenue.toFixed(2)}</p>
          </div>
          <a href="/admin" className="bg-zinc-900 border border-zinc-700 text-sm px-4 py-2 rounded-lg">Admin</a>
        </div>
      </header>

      <div className="px-6 py-3 flex gap-2 border-b border-zinc-900">
        <button
          onClick={() => setFilter('active')}
          className={`px-4 py-1.5 rounded-full text-sm ${filter === 'active' ? 'bg-white text-black' : 'bg-zinc-900 text-zinc-300'}`}
        >
          Active Orders
        </button>
        <button
          onClick={() => setFilter('all')}
          className={`px-4 py-1.5 rounded-full text-sm ${filter === 'all' ? 'bg-white text-black' : 'bg-zinc-900 text-zinc-300'}`}
        >
          All Orders
        </button>
      </div>

      <main className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {visible.length === 0 && <p className="text-zinc-500 col-span-full text-center mt-12">No orders yet.</p>}
        {visible.map((o) => (
          <div key={o.id} className={`bg-zinc-950 ${STATUS_BORDER[o.status]} rounded-xl p-4`}>
            <div className="flex justify-between items-start mb-2">
              <div>
                <p className="font-bold text-lg">Table {o.table.number}</p>
                <p className="text-sm text-zinc-400">{o.customerName} · {timeAgo(o.createdAt)}</p>
              </div>
              <span className="text-xs font-semibold px-2 py-1 rounded bg-zinc-900 border border-zinc-700">{STATUS_LABEL[o.status]}</span>
            </div>

            <ul className="text-sm space-y-1 mb-3">
              {o.items.map((it) => (
                <li key={it.id} className="flex justify-between text-zinc-300">
                  <span>{it.quantity}× {it.name}</span>
                  <span>${(it.price * it.quantity).toFixed(2)}</span>
                </li>
              ))}
            </ul>

            <div className="border-t border-zinc-800 pt-2 flex justify-between text-sm mb-3">
              <span className="text-zinc-400">Total (w/ tip)</span>
              <span className="font-bold">${o.total.toFixed(2)}</span>
            </div>

            <div className="flex gap-2">
              {o.status !== 'completed' && (
                <button onClick={() => advanceStatus(o)} className="flex-1 bg-white hover:bg-zinc-200 text-black text-sm font-semibold py-2 rounded-lg">
                  Mark {STATUS_LABEL[STATUS_FLOW[STATUS_FLOW.indexOf(o.status) + 1]]}
                </button>
              )}
              {o.paymentStatus !== 'paid' ? (
                <button onClick={() => markPaid(o)} className="flex-1 bg-zinc-800 border border-zinc-600 text-white text-sm font-semibold py-2 rounded-lg">
                  Mark Paid
                </button>
              ) : (
                <span className="flex-1 text-center text-zinc-400 text-sm font-semibold py-2">✓ Paid</span>
              )}
            </div>
          </div>
        ))}
      </main>
    </div>
  )
}