'use client'

import { useEffect, useState } from 'react'
import { notFound } from 'next/navigation'
import { getOrder, Order, triggerOrderCreated } from '@/lib/api/agent'
import { getInvoiceByOrder, InvoiceRecord } from '@/lib/api/agent'
import { getAgentTasks, getAgentActions, getAgentExecutions } from '@/lib/api/agent'
import { submitPurchaseRequest, fulfillPurchaseRequest, deliverOrder, cancelOrder } from '@/lib/api/agent'
import { AgentAction, AgentExecution } from '@/lib/api/agent'
import { createClient } from '@/lib/supabase/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Spinner } from '@/components/ui/Spinner'
import { EmptyState } from '@/components/ui/EmptyState'
import { ErrorState } from '@/components/ui/ErrorState'
import { formatDate, formatCurrency, formatRelativeTime, ORDER_STATUS_LABELS, ORDER_STATUS_COLORS } from '@/lib/types'
import { Package, User, MapPin, CreditCard, Truck, CheckCircle, AlertTriangle, Clock, RefreshCw, Search, Database, Zap, Activity, CheckCircle2, Shield, ArrowRight, XCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useBusiness } from '@/components/providers/BusinessProvider'
import { useToast } from '@/components/ui/Toast'
import { ApprovalStatus } from '@/components/orders/ApprovalStatus'
import { PurchaseRequestCard } from '@/components/orders/PurchaseRequestCard'
import { WorkflowActions } from '@/components/orders/WorkflowActions'
import { AgentActionsList } from '@/components/orders/AgentActionsList'
import { AgentExecutionsList } from '@/components/orders/AgentExecutionsList'

const timelineSteps = [
  { key: 'order_created', label: 'ORDER CREATED', icon: Package, color: 'text-indigo-500', status: 'pending' },
  { key: 'inventory_check', label: 'INVENTORY CHECK', icon: Search, color: 'text-blue-500', status: 'processing' },
  { key: 'shortage_detected', label: 'SHORTAGE DETECTED', icon: AlertTriangle, color: 'text-amber-500', status: 'awaiting_approval' },
  { key: 'supplier_selected', label: 'SUPPLIER SELECTED', icon: Truck, color: 'text-purple-500', status: 'supplier_pending' },
  { key: 'approval', label: 'APPROVAL', icon: CreditCard, color: 'text-orange-500', status: 'supplier_pending' },
  { key: 'purchase', label: 'PURCHASE', icon: Database, color: 'text-emerald-500', status: 'supplier_pending' },
  { key: 'fulfillment', label: 'FULFILLMENT', icon: Package, color: 'text-cyan-500', status: 'ready' },
  { key: 'delivery', label: 'DELIVERY', icon: CheckCircle, color: 'text-green-500', status: 'ready' },
  { key: 'completed', label: 'COMPLETED', icon: Activity, color: 'text-gray-500', status: 'completed' },
]

interface OrderDetailContentProps {
  orderId: string
}

export function OrderDetailContent({ orderId }: OrderDetailContentProps) {
  const { business } = useBusiness()
  const { toast } = useToast()
  const [order, setOrder] = useState<Order | null>(null)
  const [invoice, setInvoice] = useState<InvoiceRecord | null>(null)
  const [actions, setActions] = useState<AgentAction[]>([])
  const [executions, setExecutions] = useState<AgentExecution[]>([])
  const [purchaseRequestId, setPurchaseRequestId] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [triggering, setTriggering] = useState(false)
  const [actionLoading, setActionLoading] = useState<string | null>(null)

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const orderRes = await getOrder(orderId)
        if (!orderRes.success) throw new Error(orderRes.message)
        if (!orderRes.data) { if (mounted) notFound(); return }
        if (mounted) setOrder(orderRes.data)

        // Gate 07: authoritative payment state for this order
        const invoiceRes = await getInvoiceByOrder(orderId)
        if (mounted && invoiceRes.success && invoiceRes.data) {
          setInvoice(invoiceRes.data)
        }

        // Find the fulfillment task for this order (actions/executions are keyed by task)
        const tasksRes = await getAgentTasks({ limit: 50 })
        const task = tasksRes.success
          ? tasksRes.data.tasks.find(t => t.order_id === orderId)
          : null
        if (!task) return

        const [actionsRes, executionsRes] = await Promise.all([
          getAgentActions(task.id),
          getAgentExecutions(task.id),
        ])
        if (mounted) {
          if (actionsRes.success) setActions(actionsRes.data.actions || [])
          if (executionsRes.success) setExecutions(executionsRes.data.executions || [])
        }

        // Resolve purchase request id: prefer tool output, else audit trail
        // (PR is created by approve_approval, before any submit action exists)
        const loadedActions = actionsRes.success ? actionsRes.data.actions : []
        const prFromAction =
          loadedActions.find(a => a.tool_name === 'submit_purchase_request')?.output_data?.purchase_request?.id ??
          loadedActions.find(a => a.tool_name === 'fulfill_purchase_request')?.output_data?.purchase_request?.id
        if (prFromAction) {
          if (mounted) setPurchaseRequestId(prFromAction)
          return
        }
        const supabase = createClient()
        if (supabase) {
          const { data: audits } = await supabase
            .from('audit_logs')
            .select('entity_id')
            .eq('task_id', task.id)
            .eq('action', 'purchase_request.created')
            .order('created_at', { ascending: false })
            .limit(1)
          if (mounted && audits && audits.length > 0 && audits[0].entity_id) {
            setPurchaseRequestId(audits[0].entity_id)
          }
        }
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load order')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    if (!business?.businessId) return
    load()
    const interval = setInterval(load, 5000)
    return () => { clearInterval(interval) }
  }, [orderId, business?.businessId])

  if (loading) return null // Skeleton shown by parent Suspense
  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />
  if (!order) return notFound()

  // Determine current timeline progress
  const getCurrentStep = () => {
    if (!order) return 0
    switch (order.status) {
      case 'pending': return 0
      case 'processing': return 1
      case 'awaiting_approval': return 3
      case 'supplier_pending': return 4
      case 'ready': return 7
      case 'completed': return 8
      case 'cancelled': return -1
      case 'failed': return -1
      default: return 0
    }
  }
  const currentStep = getCurrentStep()

  async function handleTriggerOrderCreated() {
    setTriggering(true)
    const res = await triggerOrderCreated(orderId)
    if (!res.success) {
      toast({ title: 'Failed to trigger', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: 'Agent triggered', description: 'IMBARAGA is analyzing your order', variant: 'success' })
      setOrder(prev => prev ? { ...prev, status: res.data.task_status || 'processing' } : null)
    }
    setTriggering(false)
  }

  async function handleAction(action: 'submit' | 'fulfill' | 'deliver', purchaseRequestId?: string) {
    const loadingKey = actionLoading
    if (action === 'submit' || action === 'fulfill') {
      setActionLoading(purchaseRequestId || 'pr')
    } else {
      setActionLoading('deliver')
    }

    let res
    if (action === 'submit') {
      res = await submitPurchaseRequest(purchaseRequestId!)
    } else if (action === 'fulfill') {
      res = await fulfillPurchaseRequest(purchaseRequestId!)
    } else {
      res = await deliverOrder(orderId)
    }
    setActionLoading(null)

    if (!res.success) {
      toast({ title: 'Action failed', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: 'Success', description: `Order ${action} completed`, variant: 'success' })
      // Refresh order to get new status
      const orderRes = await getOrder(orderId)
      if (orderRes.success && orderRes.data) setOrder(orderRes.data)
    }
  }

  async function handleCancelOrder() {
    const CANCELLABLE = ['pending', 'processing', 'awaiting_approval', 'supplier_pending', 'ready']
    if (!order || !CANCELLABLE.includes(order.status)) return
    if (!window.confirm('Cancel this order? Reserved stock will be released. This cannot be undone.')) return
    setActionLoading('cancel')
    const res = await cancelOrder(orderId)
    setActionLoading(null)
    if (!res.success) {
      toast({ title: 'Cancellation failed', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: 'Order cancelled', description: 'Reserved stock has been released.', variant: 'success' })
      const orderRes = await getOrder(orderId)
      if (orderRes.success && orderRes.data) setOrder(orderRes.data)
    }
  }
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Order #{order.id.slice(0, 8)}</h1>
          <p className="text-gray-500 dark:text-gray-400">Created {formatRelativeTime(order.created_at)}</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {order.status === 'pending' && !triggering && (
            <Button onClick={handleTriggerOrderCreated} loading={triggering} className="bg-indigo-600 hover:bg-indigo-700">
              <Zap className="h-4 w-4 mr-2" />
              Trigger Agent Analysis
            </Button>
          )}
          {['pending', 'processing', 'awaiting_approval', 'supplier_pending'].includes(order.status) && (
            <Button variant="outline" onClick={handleCancelOrder}
              disabled={actionLoading === 'cancel'}
              className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950/30">
              {actionLoading === 'cancel' ? 'Cancelling…' : 'Cancel Order'}
            </Button>
          )}
          <Badge className={cn(ORDER_STATUS_COLORS[order.status as keyof typeof ORDER_STATUS_COLORS] || '', 'text-sm px-3 py-1.5')}>
            {ORDER_STATUS_LABELS[order.status as keyof typeof ORDER_STATUS_LABELS] || order.status}
          </Badge>
          {invoice && (
            <Badge className={cn(
              'text-sm px-3 py-1.5',
              invoice.payment_status === 'confirmed' && 'bg-green-100 text-green-700',
              (invoice.payment_status === 'pending' || invoice.payment_status === 'initiated') && 'bg-amber-100 text-amber-700',
              invoice.payment_status === 'failed' && 'bg-red-100 text-red-700',
              invoice.payment_status === 'refunded' && 'bg-blue-100 text-blue-700'
            )}>
              {invoice.payment_status === 'confirmed' ? 'Paid' : `Payment: ${invoice.payment_status}`}
            </Badge>
          )}
        </div>
      </div>

      {/* Visual Timeline - Main Showcase */}
      <Card className="bg-gradient-to-r from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900 border-indigo-200 dark:border-indigo-800">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
            Fulfillment Lifecycle
          </CardTitle>
        </CardHeader>
        <CardContent className="p-6">
          <div className="relative">
            <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
            {timelineSteps.map((step, index) => {
              const isCompleted = index <= currentStep
              const isCurrent = index === currentStep && currentStep >= 0
              const isFailed = currentStep === -1
              return (
                <div key={step.key} className="relative flex items-start gap-4 mb-8 last:mb-0">
                  <div className={cn(
                    'flex-shrink-0 w-12 h-12 rounded-full border-3 flex items-center justify-center z-10 transition-all duration-300',
                    isCompleted ? 'bg-indigo-600 border-indigo-600 shadow-lg shadow-indigo-600/25' : 'bg-white border-gray-300 dark:bg-gray-800 dark:border-gray-600',
                    isCurrent && 'animate-pulse ring-4 ring-indigo-200 dark:ring-indigo-900/50'
                  )}>
                    {isCompleted ? (
                      <CheckCircle2 className="h-7 w-7 text-white" />
                    ) : (
                      <step.icon className={cn('h-6 w-6', isCurrent ? step.color : 'text-gray-400')} />
                    )}
                  </div>
                  {index < timelineSteps.length - 1 && (
                    <div className="absolute left-5 top-12 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
                  )}
                  <div className="flex-1 pt-2">
                    <div className={cn(
                      'font-semibold text-base',
                      isCompleted ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500',
                      isCurrent && 'text-indigo-600 dark:text-indigo-400'
                    )}>
                      {step.label}
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                      {isCompleted ? '✓ Completed' : isCurrent ? '⟳ In progress' : '○ Pending'}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

      {/* Header Info Cards */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card><CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-2 bg-indigo-100 rounded-lg text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400"><Package className="h-5 w-5" /></div>
            <div><p className="text-sm text-gray-500 dark:text-gray-400">Customer</p><p className="font-semibold">{order.customer?.name}</p></div>
          </div>
        </CardContent></Card>
        <Card><CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-2 bg-emerald-100 rounded-lg text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"><MapPin className="h-5 w-5" /></div>
            <div><p className="text-sm text-gray-500 dark:text-gray-400">Priority</p><p className="font-semibold capitalize">{order.priority}</p></div>
          </div>
        </CardContent></Card>
        <Card><CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-2 bg-amber-100 rounded-lg text-amber-600 dark:bg-amber-900/30 dark:text-amber-400"><CreditCard className="h-5 w-5" /></div>
            <div><p className="text-sm text-gray-500 dark:text-gray-400">Total</p><p className="font-semibold">{formatCurrency(order.total_amount)}</p></div>
          </div>
        </CardContent></Card>
        <Card><CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-2 bg-purple-100 rounded-lg text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"><Truck className="h-5 w-5" /></div>
            <div><p className="text-sm text-gray-500 dark:text-gray-400">Delivery</p><p className="font-semibold">{order.delivery_address || '—'}</p></div>
          </div>
        </CardContent></Card>
      </div>

      {/* Main content grid */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Left column - Items + Actions */}
        <div className="lg:col-span-2 space-y-6">
          {/* Order Items */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Package className="h-5 w-5" /> Order Items</CardTitle>
            </CardHeader>
            <CardContent>
              {order.items && order.items.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-gray-200 dark:border-gray-700">
                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Product</th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Qty</th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Unit Price</th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Total</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                      {order.items.map(item => (
                        <tr key={item.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                          <td className="px-4 py-3 text-sm text-gray-900 dark:text-white">{item.product_id.slice(0, 8)}</td>
                          <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">{item.quantity}</td>
                          <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">{formatCurrency(item.unit_price)}</td>
                          <td className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">{formatCurrency(item.total_price)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <EmptyState icon={Package} title="No items" />
              )}
            </CardContent>
          </Card>

          {/* Workflow Actions - Dynamic based on order status */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Shield className="h-5 w-5" /> Workflow Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <WorkflowActions
                  order={order}
                  actions={actions}
                  purchaseRequestId={purchaseRequestId}
                  triggering={triggering}
                  actionLoading={actionLoading}
                  handleTriggerOrderCreated={handleTriggerOrderCreated}
                  handleAction={handleAction}
                />
              </div>
            </CardContent>
          </Card>

        </div>

        {/* Right column - Approvals, Purchase Requests, Agent Activity */}
        <div className="space-y-6">
{/* Approvals */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><CreditCard className="h-5 w-5" /> Approvals</CardTitle>
            </CardHeader>
            <CardContent>
              {/* Dynamic approval status from agent actions */}
              <ApprovalStatus actions={actions} />
            </CardContent>
          </Card>

          {/* Purchase Request */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Database className="h-5 w-5" /> Purchase Request</CardTitle>
            </CardHeader>
            <CardContent>
              <PurchaseRequestCard actions={actions} />
            </CardContent>
          </Card>

          {/* Agent Actions */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Zap className="h-5 w-5" /> Agent Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <AgentActionsList actions={actions} />
            </CardContent>
          </Card>

          {/* Executions */}
          {executions.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Activity className="h-5 w-5" /> Agent Executions</CardTitle>
              </CardHeader>
              <CardContent>
                <AgentExecutionsList executions={executions} />
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}