import { useState, useCallback, useEffect, useRef } from 'react'
import { usePOSStore } from '@/stores/pos.store'
import { api } from '@/lib/api-client'
import { Button } from '@/components/ui/button'
import { Delete, Lock } from 'lucide-react'

interface PinUser {
  id: string
  email: string
  firstName: string
  lastName: string
  role: string
}

export function POSLockScreen() {
  const unlock = usePOSStore((s) => s.unlock)
  const [code, setCode] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

  // Auto-focus on mount
  useEffect(() => {
    containerRef.current?.focus()
  }, [])

  const handleDigit = useCallback((digit: string) => {
    setError('')
    setCode((p) => {
      if (p.length >= 10) return p
      return p + digit
    })
  }, [])

  const handleBackspace = useCallback(() => {
    setError('')
    setCode((p) => p.slice(0, -1))
  }, [])

  const handleClear = useCallback(() => {
    setError('')
    setCode('')
  }, [])

  const handleSubmit = useCallback(async (submitCode: string) => {
    if (submitCode.length < 8) {
      setError('Enter your employee # (4) + PIN (4)')
      return
    }
    setLoading(true)
    setError('')
    try {
      const res = await api.post<{ user: PinUser; token: string }>('/v1/auth/pin-login', { code: submitCode })
      unlock(res.user, res.token)
      setCode('')
    } catch {
      setError('Invalid code')
      setCode('')
    } finally {
      setLoading(false)
    }
  }, [unlock])

  // Auto-submit when 8 digits entered
  useEffect(() => {
    if (code.length === 8) {
      handleSubmit(code)
    }
  }, [code, handleSubmit])

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key >= '0' && e.key <= '9') handleDigit(e.key)
    else if (e.key === 'Backspace') handleBackspace()
    else if (e.key === 'Enter' && code.length >= 8) handleSubmit(code)
    else if (e.key === 'Escape') handleClear()
  }, [handleDigit, handleBackspace, handleSubmit, handleClear, code])

  return (
    <div
      ref={containerRef}
      className="absolute inset-0 z-50 bg-background flex items-center justify-center"
      onKeyDown={handleKeyDown}
      tabIndex={0}
    >
      <div className="w-80 space-y-6">
        {/* Header */}
        <div className="text-center space-y-2">
          <Lock className="h-10 w-10 mx-auto text-muted-foreground" />
          <h1 className="text-xl font-semibold">POS Locked</h1>
          <p className="text-sm text-muted-foreground">Employee # + PIN</p>
        </div>

        {/* Code dots — 4 employee + 4 PIN with separator */}
        <div className="flex justify-center items-center gap-2">
          <div className="flex gap-1.5">
            {Array.from({ length: 4 }).map((_, i) => (
              <div
                key={`e${i}`}
                className={`w-3.5 h-3.5 rounded-full border-2 ${
                  i < Math.min(code.length, 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
                }`}
              />
            ))}
          </div>
          <span className="text-muted-foreground/40 text-lg">-</span>
          <div className="flex gap-1.5">
            {Array.from({ length: 4 }).map((_, i) => (
              <div
                key={`p${i}`}
                className={`w-3.5 h-3.5 rounded-full border-2 ${
                  i < Math.max(0, code.length - 4) ? 'bg-foreground border-foreground' : 'border-muted-foreground/30'
                }`}
              />
            ))}
          </div>
        </div>

        {/* Error */}
        {error && (
          <p className="text-sm text-destructive text-center">{error}</p>
        )}

        {/* Numpad */}
        <div className="grid grid-cols-3 gap-2">
          {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((d) => (
            <Button
              key={d}
              variant="outline"
              className="h-14 text-xl font-medium"
              onClick={() => handleDigit(d)}
              disabled={loading}
            >
              {d}
            </Button>
          ))}
          <Button
            variant="outline"
            className="h-14 text-sm"
            onClick={handleClear}
            disabled={loading}
          >
            Clear
          </Button>
          <Button
            variant="outline"
            className="h-14 text-xl font-medium"
            onClick={() => handleDigit('0')}
            disabled={loading}
          >
            0
          </Button>
          <Button
            variant="outline"
            className="h-14"
            onClick={handleBackspace}
            disabled={loading}
          >
            <Delete className="h-5 w-5" />
          </Button>
        </div>

        {loading && (
          <p className="text-sm text-muted-foreground text-center">Verifying...</p>
        )}
      </div>
    </div>
  )
}