import { useEffect } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { queryOptions } from '@tanstack/react-query'
import { api } from '@/lib/api-client'
import { usePOSStore } from '@/stores/pos.store'
import { currentDrawerOptions, transactionOptions } from '@/api/pos'
import { POSTopBar } from './pos-top-bar'
import { POSItemPanel } from './pos-item-panel'
import { POSCartPanel } from './pos-cart-panel'

interface Location {
  id: string
  name: string
}

function locationsOptions() {
  return queryOptions({
    queryKey: ['locations'],
    queryFn: () => api.get<{ data: Location[] }>('/v1/locations'),
  })
}

export function POSRegister() {
  const { locationId, setLocation, currentTransactionId, drawerSessionId, setDrawerSession } = usePOSStore()
  const queryClient = useQueryClient()

  // Fetch locations
  const { data: locationsData } = useQuery(locationsOptions())
  const locations = locationsData?.data ?? []

  // Auto-select first location
  useEffect(() => {
    if (!locationId && locations.length > 0) {
      setLocation(locations[0].id)
    }
  }, [locationId, locations, setLocation])

  // Fetch current drawer for selected location
  const { data: drawer } = useQuery({
    ...currentDrawerOptions(locationId),
    retry: false,
  })

  // Sync drawer session ID
  useEffect(() => {
    if (drawer?.id && drawer.status === 'open') {
      setDrawerSession(drawer.id)
    }
  }, [drawer, setDrawerSession])

  // Fetch current transaction
  const { data: transaction } = useQuery(transactionOptions(currentTransactionId))

  return (
    <div className="flex flex-col h-full">
      <POSTopBar
        locations={locations}
        locationId={locationId}
        onLocationChange={setLocation}
        drawer={drawer ?? null}
      />
      <div className="flex flex-1 min-h-0">
        <div className="w-[60%] border-r border-border overflow-hidden">
          <POSItemPanel transaction={transaction ?? null} />
        </div>
        <div className="w-[40%] overflow-hidden">
          <POSCartPanel transaction={transaction ?? null} />
        </div>
      </div>
    </div>
  )
}