'use client'

import { AgentAction, Order } from '@/lib/api/agent'
import { Button } from '@/components/ui/Button'
import { AlertTriangle, CreditCard, ArrowRight, Package, Truck, CheckCircle2, XCircle, Zap } from 'lucide-react'

interface WorkflowActionsProps {
  order: Order
  actions: AgentAction[]
  purchaseRequestId: string | null
  triggering: boolean
  actionLoading: string | null
  handleTriggerOrderCreated: () => Promise<void>
  handleAction: (action: 'submit' | 'fulfill' | 'deliver', purchaseRequestId?: string) => Promise<void>
}

export function WorkflowActions({
  order,
  actions,
  purchaseRequestId,
  triggering,
  actionLoading,
  handleTriggerOrderCreated,
  handleAction,
}: WorkflowActionsProps) {
  // PR already submitted? (fulfill becomes available only after submit succeeds)
  const submitted = actions.some(
    a => a.tool_name === 'submit_purchase_request' && a.status === 'completed'
  )

  // PENDING - agent not triggered yet
  if (order.status === 'pending') {
    return (
      <Button onClick={handleTriggerOrderCreated} loading={triggering} className="w-full bg-indigo-600 hover:bg-indigo-700 py-3">
        <Zap className="h-5 w-5 mr-2" />
        <span className="text-base">Trigger IMBARAGA Analysis</span>
      </Button>
    )
  }

  // AWAITING APPROVAL
  if (order.status === 'awaiting_approval') {
    return (
      <div className="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
        <div className="flex items-center gap-3 mb-3">
          <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
            <AlertTriangle className="h-6 w-6 text-amber-600" />
          </div>
          <div>
            <p className="font-medium text-amber-900 dark:text-amber-100">Approval Required</p>
            <p className="text-sm text-amber-700 dark:text-amber-300">
              IMBARAGA has detected a shortage and requested approval. Go to{' '}
              <a href="/dashboard/approvals" className="text-amber-600 hover:underline">Approval Center</a> to review.
            </p>
          </div>
        </div>
        <button
          onClick={() => { window.location.href = '/dashboard/approvals' }}
          className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-amber-300 text-amber-700 hover:bg-amber-50 dark:border-amber-700 dark:text-amber-300 dark:hover:bg-amber-900/30 transition-colors"
        >
          <CreditCard className="h-4 w-4" /> View Approvals
        </button>
      </div>
    )
  }

  // SUPPLIER PENDING - approval granted, PR created but not yet fulfilled
  if (order.status === 'supplier_pending' || order.status === 'processing') {
    if (!purchaseRequestId) {
      return (
        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
          <p className="text-sm text-blue-800 dark:text-blue-200">Approval granted. Creating purchase request...</p>
        </div>
      )
    }
    if (!submitted) {
      return (
        <Button
          onClick={() => handleAction('submit', purchaseRequestId)}
          loading={actionLoading === purchaseRequestId}
          className="w-full bg-blue-600 hover:bg-blue-700 py-3"
        >
          <ArrowRight className="h-5 w-5 mr-2" />
          <span className="text-base">Submit Purchase Request</span>
        </Button>
      )
    }
    return (
      <Button
        onClick={() => handleAction('fulfill', purchaseRequestId)}
        loading={actionLoading === purchaseRequestId}
        className="w-full bg-emerald-600 hover:bg-emerald-700 py-3"
      >
        <Package className="h-5 w-5 mr-2" />
        <span className="text-base">Fulfill Purchase</span>
      </Button>
    )
  }

  // READY - purchase fulfilled, awaiting delivery (deliver_order requires status "ready")
  if (order.status === 'ready') {
    return (
      <Button
        onClick={() => handleAction('deliver')}
        loading={actionLoading === 'deliver'}
        className="w-full bg-green-600 hover:bg-green-700 py-3"
      >
        <Truck className="h-5 w-5 mr-2" />
        <span className="text-base">Deliver Order</span>
      </Button>
    )
  }

  // COMPLETED
  if (order.status === 'completed') {
    return (
      <div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg">
            <CheckCircle2 className="h-6 w-6 text-emerald-600" />
          </div>
          <div>
            <p className="font-medium text-emerald-900 dark:text-emerald-100">Order Completed</p>
            <p className="text-sm text-emerald-700 dark:text-emerald-300">
              This order has been fully fulfilled and delivered.
            </p>
          </div>
        </div>
      </div>
    )
  }

  // CANCELLED/FAILED
  return (
    <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
      <div className="flex items-center gap-3">
        <XCircle className="h-6 w-6 text-red-600" />
        <div>
          <p className="font-medium text-red-900 dark:text-red-100">Order {order.status}</p>
          <p className="text-sm text-red-700 dark:text-red-300">
            This order cannot proceed further.
          </p>
        </div>
      </div>
    </div>
  )
}