'use client'

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

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

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const [invRes, delRes, movRes] = await Promise.all([
          getInventory(),
          listDeliveryEvents({ status: 'dispatched', limit: 10 }),
          getStockMovements({ limit: 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)
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 15000)
    return () => { mounted = false; clearInterval(interval) }
  }, [])

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {Array.from({ length: 3 }).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">
      {/* Welcome banner */}
      <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 adjust stock levels.</p>
      </div>

      {/* Quick stat cards */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <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">Pending Deliveries</p>
                <p className="text-3xl font-bold text-amber-600">{deliveries.length}</p>
              </div>
              <Truck className="h-10 w-10 text-amber-200 dark:text-amber-800" />
            </div>
            <a href="/dashboard/inventory" className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-amber-700 hover:text-amber-800 dark:text-amber-400">
              Confirm receipts <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </CardContent>
        </Card>

        <Card className="border-red-200 dark:border-red-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 Items</p>
                <p className="text-3xl font-bold text-red-600">{lowStock.length}</p>
              </div>
              <AlertTriangle className="h-10 w-10 text-red-200 dark:text-red-800" />
            </div>
            <a href="/dashboard/inventory" className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-red-700 hover:text-red-800 dark:text-red-400">
              Manage inventory <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </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">Total Products</p>
                <p className="text-3xl font-bold text-emerald-600">{inventory.length}</p>
              </div>
              <Package className="h-10 w-10 text-emerald-200 dark:text-emerald-800" />
            </div>
            <a href="/dashboard/inventory" className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-emerald-700 hover:text-emerald-800 dark:text-emerald-400">
              View all stock <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </CardContent>
        </Card>
      </div>

      {/* Pending deliveries list */}
      {deliveries.length > 0 && (
        <Card className="border-amber-200 dark:border-amber-800">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-amber-800 dark:text-amber-200">
              <PackageCheck className="h-5 w-5" />
              Deliveries Awaiting Confirmation
              <Badge variant="warning">{deliveries.length}</Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
              These deliveries need your physical receipt confirmation:
            </p>
            <div className="space-y-2">
              {deliveries.map(d => (
                <div key={d.id} className="flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50/50 p-3 dark:border-amber-900 dark:bg-amber-900/20">
                  <div>
                    <span className="font-mono text-sm text-gray-500">{d.id.slice(0, 8)}</span>
                    <span className="mx-2 text-gray-300">·</span>
                    <span className="text-sm">{d.supplier_name || d.supplier_id.slice(0, 8)}</span>
                  </div>
                  <Badge variant="warning">{d.status}</Badge>
                </div>
              ))}
            </div>
            <a href="/dashboard/inventory" className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-amber-700 hover:text-amber-800 dark:text-amber-400">
              Go to Inventory to confirm <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </CardContent>
        </Card>
      )}

      {/* Low stock alerts */}
      {outOfStock.length > 0 && (
        <Card className="border-red-200 dark:border-red-800">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-red-800 dark:text-red-200">
              <AlertTriangle className="h-5 w-5" />
              Out of Stock
              <Badge variant="danger">{outOfStock.length}</Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {outOfStock.map(i => (
                <div key={i.id} className="flex items-center justify-between rounded-lg border border-red-100 bg-red-50/50 p-3 dark:border-red-900 dark:bg-red-900/20">
                  <span className="font-medium text-sm text-gray-900 dark:text-white">{i.product?.name}</span>
                  <Badge variant="danger">0 available</Badge>
                </div>
              ))}
            </div>
            <a href="/dashboard/inventory" className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-red-700 hover:text-red-800 dark:text-red-400">
              Go to Inventory to receive stock <ArrowRight className="h-3.5 w-3.5" />
            </a>
          </CardContent>
        </Card>
      )}

      {/* Recent stock movements */}
      {movements.length > 0 && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              Recent Stock Movements
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {movements.slice(0, 5).map(m => (
                <div key={m.id} className="flex items-center justify-between text-sm">
                  <div>
                    <span className="font-medium">{m.product_name || m.product_id.slice(0, 8)}</span>
                    <span className="mx-2 text-gray-300">·</span>
                    <Badge variant={m.reason === 'receipt' ? 'success' : m.reason === 'damage' || m.reason === 'loss' ? 'danger' : 'info'}>
                      {m.reason}
                    </Badge>
                  </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/inventory" 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 */}
      <Card>
        <CardContent className="p-5">
          <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Quick Actions</h3>
          <div className="grid gap-3 sm:grid-cols-2">
            <a href="/dashboard/inventory" className="flex items-center gap-3 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:hover:bg-gray-800">
              <div className="p-2 bg-emerald-100 rounded-lg text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                <PackageCheck className="h-5 w-5" />
              </div>
              <div>
                <p className="font-medium text-gray-900 dark:text-white">Receive Stock</p>
                <p className="text-sm text-gray-500 dark:text-gray-400">Confirm delivery receipt</p>
              </div>
            </a>
            <a href="/dashboard/inventory" className="flex items-center gap-3 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:hover:bg-gray-800">
              <div className="p-2 bg-amber-100 rounded-lg text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
                <AlertTriangle className="h-5 w-5" />
              </div>
              <div>
                <p className="font-medium 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>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}