'use client'

import { useEffect, useState } from 'react'
import {
  listOrders,
  deliverOrder,
  Order,
} from '@/lib/api/agent'
import { Card, CardContent } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Skeleton } from '@/components/ui/Skeleton'
import { Truck, CheckCircle, Package, AlertTriangle } from 'lucide-react'

export default function DeliveriesPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [processingId, setProcessingId] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

  const load = async () => {
    try {
      const res = await listOrders('ready', 50)
      if (res.success) setOrders(res.data.orders)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load()
    const interval = setInterval(load, 15000)
    return () => clearInterval(interval)
  }, [])

  const handleDeliver = async (orderId: string) => {
    setProcessingId(orderId)
    setError(null)
    try {
      const res = await deliverOrder(orderId)
      if (res.success) {
        setSuccess(`Order ${orderId.slice(0, 8)} marked as delivered`)
        await load()
        setTimeout(() => setSuccess(null), 4000)
      } else {
        setError(res.message || 'Failed to mark order as delivered')
      }
    } catch {
      setError('Network error')
    } finally {
      setProcessingId(null)
    }
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-48" />
        {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Deliveries</h1>
        <p className="text-gray-500 dark:text-gray-400">Mark ready orders as delivered to customers</p>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400">
          <AlertTriangle className="h-4 w-4 flex-shrink-0" />
          {error}
        </div>
      )}
      {success && (
        <div className="flex items-center gap-2 rounded-lg bg-emerald-50 border border-emerald-200 p-3 text-sm text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-400">
          <CheckCircle className="h-4 w-4 flex-shrink-0" />
          {success}
        </div>
      )}

      {orders.length === 0 ? (
        <Card>
          <CardContent className="p-12 text-center">
            <Truck className="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600 mb-4" />
            <p className="text-lg font-medium text-gray-500 dark:text-gray-400">No orders ready for delivery</p>
            <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">Ready orders will appear here</p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {orders.map(order => (
            <Card key={order.id}>
              <CardContent className="p-5">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 mb-2">
                      <Package className="h-5 w-5 text-gray-400" />
                      <span className="font-mono text-sm font-semibold text-gray-900 dark:text-white">
                        {order.id.slice(0, 8)}
                      </span>
                      <Badge variant="success">Ready</Badge>
                      {order.priority === 'high' && <Badge variant="danger">High Priority</Badge>}
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                      <p>Customer: {order.customer?.name || 'N/A'}</p>
                      {order.delivery_address && <p>Address: {order.delivery_address}</p>}
                      {order.items && (
                        <p className="text-gray-400">
                          {order.items.length} item{order.items.length !== 1 ? 's' : ''} • Total: {order.total_amount?.toLocaleString()} RWF
                        </p>
                      )}
                    </div>
                  </div>

                  <Button
                    size="sm"
                    onClick={() => handleDeliver(order.id)}
                    disabled={processingId === order.id}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white flex-shrink-0"
                  >
                    {processingId === order.id ? (
                      'Marking...'
                    ) : (
                      <>
                        <Truck className="h-3.5 w-3.5 mr-1.5" />
                        Mark Delivered
                      </>
                    )}
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}