import { useEffect, useRef, useCallback } from 'react'
import { useQuery } 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'
import { POSLockScreen } from './pos-lock-screen'

interface Location {
  id: string
  name: string
}

interface AppConfigEntry {
  key: string
  value: string | null
}

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

function configOptions(key: string) {
  return queryOptions({
    queryKey: ['config', key],
    queryFn: async (): Promise<string | null> => {
      try {
        const entry = await api.get<AppConfigEntry>(`/v1/config/${key}`)
        return entry.value
      } catch {
        return null
      }
    },
  })
}

export function POSRegister() {
  const { locationId, setLocation, currentTransactionId, setDrawerSession, locked, lock, touchActivity, token } = usePOSStore()

  // Fetch lock timeout from config
  const { data: lockTimeoutStr } = useQuery({
    ...configOptions('pos_lock_timeout'),
    enabled: !!token,
  })
  const lockTimeoutMinutes = parseInt(lockTimeoutStr ?? '15') || 15

  // Auto-lock timer
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)

  useEffect(() => {
    if (locked || lockTimeoutMinutes === 0) {
      if (timerRef.current) clearInterval(timerRef.current)
      return
    }

    timerRef.current = setInterval(() => {
      const { lastActivity, locked: isLocked } = usePOSStore.getState()
      if (!isLocked && Date.now() - lastActivity > lockTimeoutMinutes * 60_000) {
        lock()
      }
    }, 30_000)

    return () => {
      if (timerRef.current) clearInterval(timerRef.current)
    }
  }, [locked, lockTimeoutMinutes, lock])

  // Track activity on any interaction
  const handleActivity = useCallback(() => {
    if (!locked) touchActivity()
  }, [locked, touchActivity])

  // Fetch locations
  const { data: locationsData } = useQuery({
    ...locationsOptions(),
    enabled: !!token,
  })
  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,
    enabled: !!locationId && !!token,
  })

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

  // Fetch current transaction
  const { data: transaction } = useQuery({
    ...transactionOptions(currentTransactionId),
    enabled: !!currentTransactionId && !!token,
  })

  return (
    <div
      className="relative flex flex-col h-full"
      onPointerDown={handleActivity}
      onKeyDown={handleActivity}
    >
      {locked && <POSLockScreen />}
      <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>
  )
}