'use client'

import { useEffect, useState } from 'react'
import { getApprovalStatus, approveApproval, rejectApproval, expireApproval, getBusinessContext, Approval, ApprovalMetadata } from '@/lib/api/agent'
import { getAgentTasks, AgentTask } from '@/lib/api/agent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Spinner } from '@/components/ui/Spinner'
import { Skeleton } from '@/components/ui/Skeleton'
import { EmptyState } from '@/components/ui/EmptyState'
import { ErrorState } from '@/components/ui/ErrorState'
import { formatDate, formatCurrency, formatRelativeTime } from '@/lib/types'
import { CreditCard, AlertTriangle, CheckCircle, XCircle, Clock, RefreshCw, AlertCircle, Eye, CheckCircle2, Shield, Truck, DollarSign, Star, Package } from 'lucide-react'
import { useBusiness } from '@/components/providers/BusinessProvider'
import { useToast } from '@/components/ui/Toast'
import { cn } from '@/lib/utils'

export default function ApprovalsPage() {
  const { business, refresh } = useBusiness()
  const { toast } = useToast()
  const [approvals, setApprovals] = useState<Approval[]>([])
  const [tasks, setTasks] = useState<AgentTask[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [actionLoading, setActionLoading] = useState<string | null>(null)
  const [quantityOverrides, setQuantityOverrides] = useState<Record<string, string>>({})

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const [tasksRes] = await Promise.all([getAgentTasks({ status: 'awaiting_approval' })])
        if (!tasksRes.success) throw new Error(tasksRes.message)
        const awaitingTasks = tasksRes.data.tasks

        const allApprovals: Approval[] = []
        for (const task of awaitingTasks) {
          const supabase = (await import('@/lib/supabase/client')).createClient()
          if (supabase) {
            const { data: approvals } = await supabase
              .from('approvals')
              .select('*')
              .eq('task_id', task.id)
              .eq('status', 'pending')
            if (approvals) {
              allApprovals.push(...approvals)
            }
          }
        }
        if (mounted) {
          setApprovals(allApprovals)
          setTasks(awaitingTasks)
        }
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load approvals')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 10000)
    return () => { clearInterval(interval) }
  }, [business?.businessId])

  async function handleApprove(approvalId: string) {
    setActionLoading(approvalId)
    const raw = quantityOverrides[approvalId]?.trim()
    let quantityOverride: number | undefined
    if (raw) {
      const parsed = Number(raw)
      if (!Number.isInteger(parsed) || parsed < 1) {
        setActionLoading(null)
        toast({ title: 'Invalid quantity', description: 'Override must be a positive whole number.', variant: 'destructive' })
        return
      }
      quantityOverride = parsed
    }
    const res = await approveApproval(approvalId, getBusinessContext()?.userId ?? undefined, quantityOverride)
    setActionLoading(null)
    if (!res.success) {
      toast({ title: 'Approval failed', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: 'Approved', description: 'Purchase request created successfully', variant: 'success' })
      refresh()
    }
  }

  async function handleReject(approvalId: string) {
    const reason = prompt('Reason for rejection (optional):') || 'Rejected by user'
    if (!reason) return
    setActionLoading(approvalId)
    const res = await rejectApproval(approvalId, reason, getBusinessContext()?.userId ?? undefined)
    setActionLoading(null)
    if (!res.success) {
      toast({ title: 'Rejection failed', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: 'Rejected', description: 'Approval has been rejected', variant: 'success' })
      refresh()
    }
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Approval Center</h1>
            <p className="text-gray-500 dark:text-gray-400">Review and resolve pending purchase requests</p>
          </div>
        </div>
        <Card>
          <CardContent className="p-6">
            <div className="space-y-4">
              {Array.from({ length: 3 }).map((_, i) => (
                <ApprovalSkeleton key={i} />
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />

  return (
    <div className="space-y-6">
      <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">Approval Center</h1>
          <p className="text-gray-500 dark:text-gray-400">Review and resolve pending purchase requests</p>
        </div>
        <Button variant="outline" onClick={() => refresh()} disabled={loading} className="whitespace-nowrap">
          <RefreshCw className="h-4 w-4 mr-2" /> Refresh
        </Button>
      </div>

      {approvals.length === 0 ? (
        <Card className="border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20">
          <CardContent className="py-12">
            <EmptyState
              icon={CheckCircle2}
              title="All caught up!"
              description="No pending approvals. IMBARAGA will create new ones when shortages are detected."
              action={
                <a href="/dashboard/orders/new" className="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors inline-flex items-center gap-2">
                  <CreditCard className="h-4 w-4" />
                  Create Order to Trigger Demo
                </a>
              }
            />
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {approvals.map(approval => {
            const meta = approval.metadata as ApprovalMetadata
            const task = tasks.find(t => t.id === approval.task_id)
            const isProcessing = actionLoading === approval.id
            const purchaseRequestId = approval.id // we'll show this in the card

            return (
              <Card 
                key={approval.id} 
                className={cn(
                  'border-amber-200 dark:border-amber-800',
                  isProcessing && 'ring-2 ring-amber-300 dark:ring-amber-700'
                )}
              >
                <CardContent className="p-6">
                  <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <div className="flex-1 space-y-4">
                      {/* Header with product + status */}
                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                        <div className="flex items-center gap-3">
                          <div className="p-3 bg-amber-100 dark:bg-amber-900/30 rounded-xl">
                            <Package className="h-6 w-6 text-amber-600 dark:text-amber-400" />
                          </div>
                          <div>
                            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                              {meta?.product_id?.slice(0,8) || 'Product'}
                              <span className="ml-2 text-sm font-normal text-gray-500">({meta?.quantity} units)</span>
                            </h3>
                            <div className="flex items-center gap-2 mt-1">
                              <Badge variant="warning" className="flex items-center gap-1">
                                <AlertTriangle className="h-3 w-3" />
                                Pending Approval
                              </Badge>
                              <span className="text-xs text-gray-500">Requested {formatRelativeTime(approval.requested_at)}</span>
                            </div>
                          </div>
                        </div>

                        {/* Details Grid */}
                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 text-sm">
                          <DetailRow icon={<CreditCard className="h-4 w-4" />} label="Unit Cost" value={formatCurrency(meta?.unit_cost)} />
                          <DetailRow icon={<DollarSign className="h-4 w-4" />} label="Total" value={formatCurrency(meta?.total_cost)} className="font-semibold text-lg" />
                          <DetailRow icon={<Truck className="h-4 w-4" />} label="Delivery" value={`${meta?.delivery_days} day(s)`} />
                          <DetailRow icon={<Star className="h-4 w-4 fill-current" />} label="Reliability" value={`${Math.round((meta?.reliability_score || 0) * 100)}%`} />
                          <DetailRow icon={<Shield className="h-4 w-4" />} label="Supplier" value={meta?.supplier_name || meta?.supplier_id?.slice(0,8) || '—'} />
                          <DetailRow icon={<Package className="h-4 w-4" />} label="Quantity" value={meta?.quantity?.toString() || '—'} />
                        </div>

                        {approval.description && (
                          <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
                            <p className="text-sm text-gray-600 dark:text-gray-400">{approval.description}</p>
                          </div>
                        )}
                      </div>

                      {/* Actions */}
                      <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                        <div className="flex flex-col gap-1">
                          <Input
                            type="number"
                            min="1"
                            step="1"
                            placeholder={`Qty to order (${meta?.quantity ?? 'suggested'})`}
                            value={quantityOverrides[approval.id] ?? ''}
                            onChange={e =>
                              setQuantityOverrides(q => ({ ...q, [approval.id]: e.target.value }))
                            }
                            disabled={isProcessing}
                            className="min-w-[140px] text-sm"
                          />
                          <span className="text-[11px] text-gray-400">
                            Optional — overrides the requested quantity.
                          </span>
                        </div>
                        <Button
                          variant="primary"
                          size="lg"
                          onClick={() => handleApprove(approval.id)}
                          disabled={isProcessing}
                          className={cn(
                            'flex-1 sm:flex-none min-w-[160px]',
                            isProcessing && 'bg-emerald-600'
                          )}
                        >
                          {isProcessing ? (
                            <>
                              <Spinner className="h-5 w-5 mr-2" />
                              Processing...
                            </>
                          ) : (
                            <>
                              <CheckCircle2 className="h-5 w-5 mr-2" />
                              Approve Purchase
                            </>
                          )}
                        </Button>
                        <Button
                          variant="outline"
                          size="lg"
                          onClick={() => handleReject(approval.id)}
                          disabled={isProcessing}
                          className={cn(
                            'flex-1 sm:flex-none min-w-[160px] text-red-600 hover:text-red-700 border-red-300 hover:bg-red-50',
                            isProcessing && 'opacity-50'
                          )}
                        >
                          {isProcessing ? (
                            <>
                              <Spinner className="h-5 w-5 mr-2" />
                              Processing...
                            </>
                          ) : (
                            <>
                              <XCircle className="h-5 w-5 mr-2" />
                              Reject
                            </>
                          )}
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}

function DetailRow({ icon, label, value, className = '' }: { icon: React.ReactNode; label: string; value: string; className?: string }) {
  return (
    <div className="flex flex-col gap-1">
      <div className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400">
        {icon}
        <span className="text-xs">{label}</span>
      </div>
      <span className={cn('font-medium text-gray-900 dark:text-white', className)}>{value}</span>
    </div>
  )
}

function ApprovalSkeleton() {
  return (
    <div className="p-6 space-y-4">
      <div className="flex gap-4">
        <Skeleton className="h-12 w-12 rounded-xl" />
        <div className="flex-1 space-y-3">
          <Skeleton className="h-5 w-1/4" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="flex flex-col gap-1">
            <Skeleton className="h-3 w-1/2" />
            <Skeleton className="h-5 w-3/4" />
          </div>
        ))}
      </div>
      <div className="flex gap-3">
        <Skeleton className="h-12 w-full sm:w-40" />
        <Skeleton className="h-12 w-full sm:w-40" />
      </div>
    </div>
  )
}