'use client'

import { Database, CreditCard } from 'lucide-react'
import { Badge } from '@/components/ui/Badge'
import { EmptyState } from '@/components/ui/EmptyState'
import { formatCurrency, formatRelativeTime } from '@/lib/types'
import { AgentAction } from '@/lib/api/agent'

interface PurchaseRequestCardProps {
  actions: AgentAction[]
}

export function PurchaseRequestCard({ actions }: PurchaseRequestCardProps) {
  const pr = actions.find(a => a.tool_name === 'submit_purchase_request' || a.tool_name === 'fulfill_purchase_request')
  
  if (pr && pr.output_data?.purchase_request) {
    const prData = pr.output_data.purchase_request
    const isFulfilled = pr.tool_name === 'fulfill_purchase_request'
    
    return (
      <div className="space-y-3">
        <div className="grid gap-3 sm:grid-cols-2">
          <div><p className="text-sm text-gray-500">PR ID</p><p className="font-mono text-sm">{prData.id.slice(0, 8)}</p></div>
          <div><p className="text-sm text-gray-500">Supplier</p><p className="font-medium">{prData.supplier_id?.slice(0, 8)}</p></div>
          <div><p className="text-sm text-gray-500">Product</p><p className="font-medium">{prData.product_id?.slice(0, 8)}</p></div>
          <div><p className="text-sm text-gray-500">Quantity</p><p className="font-medium">{prData.quantity}</p></div>
          <div><p className="text-sm text-gray-500">Unit Cost</p><p className="font-medium">{formatCurrency(prData.unit_cost)}</p></div>
          <div><p className="text-sm text-gray-500">Total</p><p className="font-semibold text-lg">{formatCurrency(prData.total_cost)}</p></div>
        </div>
        <div className="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
          <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
            <Database className="h-5 w-5 text-indigo-600" />
          </div>
          <div>
            <p className="font-medium text-gray-900 dark:text-white">
              Status: <span className="text-indigo-600 dark:text-indigo-400 capitalize">{prData.status}</span>
            </p>
            <p className="text-xs text-gray-500">Last updated: {formatRelativeTime(pr.completed_at || pr.started_at)}</p>
          </div>
          <Badge variant={isFulfilled ? 'success' : 'warning'} className="ml-auto">
            {isFulfilled ? 'Fulfilled' : prData.status}
          </Badge>
        </div>
      </div>
    )
  }
  
  return (
    <EmptyState 
      icon={Database} 
      title="No purchase request" 
      description="Purchase requests appear after approval" 
    />
  )
}