/**
 * Counter POS / scan console — shell for quick purchase, invoice association,
 * inbound tickets, and printable customer loyalty codes.
 */
import { useState } from 'react'
import { PageShell } from '@/layouts/PageShell'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { QuickPurchasePanel } from '@/pages/pos/QuickPurchasePanel'
import { InvoiceScanPanel } from '@/pages/pos/InvoiceScanPanel'
import { TicketQueuePanel } from '@/pages/pos/TicketQueuePanel'
import { CustomerCodesPanel } from '@/pages/pos/CustomerCodesPanel'
import type { PurchaseTicket } from '@/mocks/data'

export function PosPage() {
  const [tab, setTab] = useState('purchase')
  const [handoff, setHandoff] = useState<PurchaseTicket | null>(null)

  return (
    <PageShell
      title="Scan & quick purchase"
      subtitle="Identify a loyalty customer by QR, clear the basket, or reconcile a supplier invoice."
    >
      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="purchase">Quick purchase</TabsTrigger>
          <TabsTrigger value="invoice">Invoice scan</TabsTrigger>
          <TabsTrigger value="tickets">Ticket queue</TabsTrigger>
          <TabsTrigger value="codes">Customer codes</TabsTrigger>
        </TabsList>
        <TabsContent value="purchase" className="mt-4">
          <QuickPurchasePanel handoff={handoff} onHandoffConsumed={() => setHandoff(null)} />
        </TabsContent>
        <TabsContent value="invoice" className="mt-4">
          <InvoiceScanPanel />
        </TabsContent>
        <TabsContent value="tickets" className="mt-4">
          <TicketQueuePanel
            onAccept={(ticket) => {
              setHandoff(ticket)
              setTab('purchase')
            }}
          />
        </TabsContent>
        <TabsContent value="codes" className="mt-4">
          <CustomerCodesPanel />
        </TabsContent>
      </Tabs>
    </PageShell>
  )
}