'use client'

import { useEffect, useState } from 'react'
import {
  getInventory,
  listDeliveryEvents,
  getStockMovements,
  listOrders,
  InventoryItem,
  DeliveryEvent,
  StockMovement,
  Order,
} from '@/lib/api/agent'
import { Card, CardContent } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Skeleton } from '@/components/ui/Skeleton'
import {
  Package,
  Truck,
  Clock,
  AlertTriangle,
  ArrowRight,
  PackageCheck,
  CheckCircle,
} from 'lucide-react'
import { itemStockStatus } from '@/lib/inventory-status'
import { cn } from '@/lib/utils'

export default function KeeperDashboardPage() {
  const [inventory, setInventory] = useState<InventoryItem[]>([])
  const [deliveries, setDeliveries] = useState<DeliveryEvent[]>([])
  const [movements, setMovements] = useState<StockMovement[]>([])
  const [readyOrders, setReadyOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const [invRes, delRes, movRes, ordRes] = await Promise.all([
          getInventory(),
          listDeliveryEvents({ status: 'dispatched', limit: 10 }),
          getStockMovements({ limit: 10 }),
          listOrders('ready', 10),
        ])
        if (!mounted) return
        if (invRes.success) setInventory(invRes.data.items)
        if (delRes.success) setDeliveries(delRes.data.events)
        if (movRes.success) setMovements(movRes.data.movements)
        if (ordRes.success) setReadyOrders(ordRes.data.orders)
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 15000)
    return () => { mounted = false; clearInterval(interval) }
  }, [])

  if (loading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-20 w-full rounded-2xl" />
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
        </div>
        <Skeleton className="h-64 rounded-xl" />
      </div>
    )
  }

  const lowStock = inventory.filter(i => {
    const available = Math.max(i.quantity - i.reserved_quantity, 0)
    return available <= (i.product?.reorder_threshold ?? 5)
  })
  const outOfStock = lowStock.filter(i => Math.max(i.quantity - i.reserved_quantity, 0) === 0)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="rounded-2xl bg-gradient-to-r from-emerald-600 to-emerald-800 p-6 lg:p-8 text-white">
        <h1 className="text-2xl font-bold">Stock Operations</h1>
        <p className="text-emerald-100 mt-1">Manage inventory, receive deliveries, and track stock movements.</p>
      </div>

      {/* Summary cards */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="p-5">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Total Items</p>
                <p className="text-3xl font-bold">{inventory.length}</p>
              </div>
              <Package className="h-8 w-8 text-gray-300 dark:text-gray-600" />
            </div>
          </CardContent>
        </Card>
        <Card className="border-amber-200 dark:border-amber-800">
          <CardContent className="p-5">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Low Stock</p>
                <p className="text-3xl font-bold text-amber-600">{lowStock.length}</p>
              </div>
              <AlertTriangle className="h-8 w-8 text-amber-200 dark:text-amber-800" />
            </div>
          </CardContent>
        </Card>
        <Card className="border-blue-200 dark:border-blue-800">
          <CardContent className="p-5">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Incoming</p>
                <p className="text-3xl font-bold text-blue-600">{deliveries.length}</p>
              </div>
              <Truck className="h-8 w-8 text-blue-200 dark:text-blue-800" />
            </div>
          </CardContent>
        </Card>
        <Card className="border-emerald-200 dark:border-emerald-800">
          <CardContent className="p-5">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Ready to Deliver</p>
                <p className="text-3xl font-bold text-emerald-600">{readyOrders.length}</p>
              </div>
              <CheckCircle className="h-8 w-8 text-emerald-200 dark:text-emerald-800" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Expected Receipts */}
      {deliveries.length > 0 && (
        <Card className="border-blue-200 dark:border-blue-800">
          <CardContent className="p-5">
            <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4 flex items-center gap-2">
              <PackageCheck className="h-4 w-4" />
              Expected Receipts
            </h2>
            <div className="space-y-3">
              {deliveries.map(d => (
                <div key={d.id} className="flex items-center justify-between rounded-lg border border-blue-100 bg-blue-50/50 p-4 dark:border-blue-900 dark:bg-blue-900/20">
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">{d.id.slice(0, 8)}</p>
                    <p className="text-sm text-gray-500">{d.supplier_name || d.supplier_id.slice(0, 8)}</p>
                  </div>
                  <div className="flex items-center gap-3">
                    <Badge variant="info">{d.status}</Badge>
                    <a href="/dashboard/keeper/receiving" className="text-sm font-medium text-blue-700 hover:text-blue-800 dark:text-blue-400">
                      Receive →
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Ready for Delivery */}
      {readyOrders.length > 0 && (
        <Card className="border-emerald-200 dark:border-emerald-800">
          <CardContent className="p-5">
            <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4 flex items-center gap-2">
              <CheckCircle className="h-4 w-4" />
              Ready for Delivery
            </h2>
            <div className="space-y-3">
              {readyOrders.map(o => (
                <div key={o.id} className="flex items-center justify-between rounded-lg border border-emerald-100 bg-emerald-50/50 p-4 dark:border-emerald-900 dark:bg-emerald-900/20">
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">{o.id.slice(0, 8)}</p>
                    <p className="text-sm text-gray-500">{o.customer?.name || 'Customer'}</p>
                  </div>
                  <div className="flex items-center gap-3">
                    <Badge variant="success">Ready</Badge>
                    <a href="/dashboard/keeper/deliveries" className="text-sm font-medium text-emerald-700 hover:text-emerald-800 dark:text-emerald-400">
                      Deliver →
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Recent Activity */}
      {movements.length > 0 && (
        <Card>
          <CardContent className="p-5">
            <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4 flex items-center gap-2">
              <Clock className="h-4 w-4" />
              Recent Activity
            </h2>
            <div className="space-y-3">
              {movements.slice(0, 5).map(m => (
                <div key={m.id} className="flex items-center justify-between text-sm py-2 border-b border-gray-100 dark:border-gray-800 last:border-0">
                  <div className="flex items-center gap-3">
                    <Badge variant={m.reason === 'receipt' ? 'success' : m.reason === 'damage' || m.reason === 'loss' ? 'danger' : 'info'}>
                      {m.reason}
                    </Badge>
                    <span className="font-medium">{m.product_name || m.product_id.slice(0, 8)}</span>
                  </div>
                  <span className={cn('font-mono font-semibold', m.delta > 0 ? 'text-emerald-600' : 'text-red-600')}>
                    {m.delta > 0 ? '+' : ''}{m.delta}
                  </span>
                </div>
              ))}
            </div>
            <a href="/dashboard/keeper/movements" className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400">
              View all movements <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </CardContent>
        </Card>
      )}

      {/* Quick Actions */}
      <div className="grid gap-4 sm:grid-cols-3">
        <a href="/dashboard/keeper/receiving" className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-shadow dark:border-gray-700 dark:bg-gray-900">
          <div className="p-3 bg-blue-100 rounded-xl text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
            <PackageCheck className="h-6 w-6" />
          </div>
          <div>
            <p className="font-semibold text-gray-900 dark:text-white">Receive Stock</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">Confirm supplier deliveries</p>
          </div>
        </a>
        <a href="/dashboard/inventory" className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-shadow dark:border-gray-700 dark:bg-gray-900">
          <div className="p-3 bg-amber-100 rounded-xl text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
            <AlertTriangle className="h-6 w-6" />
          </div>
          <div>
            <p className="font-semibold text-gray-900 dark:text-white">Adjust Stock</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">Record damage, loss, or transfer</p>
          </div>
        </a>
        <a href="/dashboard/keeper/deliveries" className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-shadow dark:border-gray-700 dark:bg-gray-900">
          <div className="p-3 bg-emerald-100 rounded-xl text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
            <Truck className="h-6 w-6" />
          </div>
          <div>
            <p className="font-semibold text-gray-900 dark:text-white">Deliver Orders</p>
            <p className="text-sm text-gray-500 dark:text-gray-400">Mark orders as delivered</p>
          </div>
        </a>
      </div>
    </div>
  )
}