'use client'

import { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { formatCurrency, formatDate } from '@/lib/types'
import { getTracking, initiatePayment, TrackingResult } from '@/lib/shop'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Skeleton } from '@/components/ui/Skeleton'
import { cn } from '@/lib/utils'
import {
  Package,
  Truck,
  CheckCircle2,
  Clock,
  CreditCard,
  CheckCircle,
  XCircle,
  DollarSign,
  Shield,
  Search,
  Database,
  Star,
  AlertCircle,
  Plus,
  Minus,
} from 'lucide-react'

const TIMELINE_STEPS = [
  { key: 'order_received', label: 'Order Received', icon: Package, color: 'text-indigo-500' },
  { key: 'processing', label: 'Order Processing', icon: Search, color: 'text-blue-500' },
  { key: 'inventory_checked', label: 'Inventory Checked', icon: Database, color: 'text-purple-500' },
  { key: 'supplier_selected', label: 'Supplier Contacted', icon: Truck, color: 'text-purple-500' },
  { key: 'supplier_confirmed', label: 'Supplier Confirmed', icon: CheckCircle, color: 'text-orange-500' },
  { key: 'purchase_approved', label: 'Purchase Approved', icon: CreditCard, color: 'text-orange-500' },
  { key: 'goods_received', label: 'Goods Received', icon: Package, color: 'text-emerald-500' },
  { key: 'ready', label: 'Ready for Delivery', icon: Truck, color: 'text-green-500' },
  { key: 'delivered', label: 'Delivered', icon: CheckCircle2, color: 'text-green-500' },
]

const STATUS_LABELS: Record<string, string> = {
  pending: 'Pending',
  processing: 'Processing',
  awaiting_approval: 'Awaiting Approval',
  supplier_pending: 'Supplier Pending',
  ready: 'Ready for Delivery',
  completed: 'Completed',
  cancelled: 'Cancelled',
  failed: 'Failed',
}

const STATUS_COLORS: Record<string, string> = {
  pending: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
  awaiting_approval: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
  supplier_pending: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
  ready: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
  completed: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
  cancelled: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
  failed: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
  processing: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
}

export default function TrackingPage() {
  const params = useParams()
  const token = params.token as string
  const [tracking, setTracking] = useState<TrackingResult | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState<'timeline' | 'details' | 'notifications'>('timeline')
  const [payPhone, setPayPhone] = useState('')
  const [payBusy, setPayBusy] = useState(false)
  const [payNote, setPayNote] = useState<string | null>(null)
  const [payError, setPayError] = useState<string | null>(null)

  async function handlePayNow() {
    if (!tracking?.invoice) return
    setPayBusy(true)
    setPayError(null)
    setPayNote(null)
    try {
      const res = await initiatePayment(token, payPhone.trim())
      if (res.success) {
        if (res.data.status === 'already_paid') {
          setPayNote('This invoice is already paid.')
        } else {
          setPayNote(
            `Payment request sent via ${res.data.provider}. Reference ${res.data.reference}. ` +
            'Approve the prompt on your phone.'
          )
        }
      } else {
        setPayError(
          res.error_code === 'PAYMENTS_DISABLED'
            ? res.message
            : res.message || 'Could not start the payment. Please retry.'
        )
      }
    } catch {
      setPayError('Network error. Please retry.')
    } finally {
      setPayBusy(false)
    }
  }

  useEffect(() => {
    async function loadTracking() {
      try {
        const res = await fetch(`/api/shop/track/${params.token}`)
        const data = await res.json()
        if (data.success) {
          setTracking(data.data)
        } else {
          setError(data.message || 'Order not found')
        }
      } catch {
        setError('Failed to load tracking information')
      } finally {
        setLoading(false)
      }
    }
    loadTracking()
  }, [params.token])

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 py-8 px-4">
        <div className="max-w-4xl mx-auto">
          <div className="space-y-8">
            <Skeleton className="h-12 w-64" />
            <Skeleton className="h-12 w-48" />
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-64 w-full" />
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Skeleton className="h-24 w-full" />
              <Skeleton className="h-24 w-full" />
              <Skeleton className="h-24 w-full" />
            </div>
            <div className="space-y-4">
              <Skeleton className="h-20 w-full" />
              <Skeleton className="h-20 w-full" />
              <Skeleton className="h-20 w-full" />
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (error || !tracking) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
        <div className="text-center max-w-md">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Order Not Found</h1>
          <p className="text-gray-500 dark:text-gray-400 mb-6">
            {error || 'No order found for this tracking link.'}
          </p>
        </div>
      </div>
    )
  }

  const { order_number, business_name, currency, status, status_label, placed_at, customer_name, delivery_city, preferred_delivery_date, items, timeline, invoice } = tracking
  const data: TrackingResult = tracking

  const progress = timeline.findIndex(step => step.done) + 1

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 py-8 px-4">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              Order {order_number}
            </h1>
            <Badge className="text-sm">{status_label || 'Unknown'}</Badge>
          </div>
          <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
            <span className="flex items-center gap-1">
              <span className="font-medium">Business:</span>
              {business_name}
            </span>
            <span className="flex items-center gap-1">
              <span className="font-medium">Placed:</span>
              {formatDate(placed_at)}
            </span>
            {customer_name && (
              <span className="flex items-center gap-1">
                <span className="font-medium">Customer:</span>
                {customer_name}
              </span>
            )}
            {delivery_city && (
              <span className="flex items-center gap-1">
                <span className="font-medium">Delivery to:</span>
                {delivery_city}
              </span>
            )}
            {preferred_delivery_date && (
              <span className="flex items-center gap-1">
                <span className="font-medium">Preferred:</span>
                {formatDate(preferred_delivery_date)}
              </span>
            )}
          </div>
        </div>

        {/* Tab Navigation */}
        <div className="mb-8 border-b border-gray-200 dark:border-gray-700">
          <nav className="flex gap-4" aria-label="Tracking tabs">
            <button
              onClick={() => setActiveTab('timeline')}
              className={cn(
                'pb-3 px-1 border-b-2 font-medium text-sm transition-colors',
                activeTab === 'timeline'
                  ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
              )}
            >
              Timeline
            </button>
            <button
              onClick={() => setActiveTab('details')}
              className={cn(
                'pb-3 px-1 border-b-2 font-medium text-sm transition-colors',
                activeTab === 'details'
                  ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
              )}
            >
              Order Details
            </button>
            <button
              onClick={() => setActiveTab('notifications')}
              className={cn(
                'pb-3 px-1 border-b-2 font-medium text-sm transition-colors',
                activeTab === 'notifications'
                  ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
              )}
            >
              Notifications
            </button>
          </nav>
        </div>
        </div>

        {/* Tab Content */}
        {activeTab === 'timeline' && (
          <div className="space-y-4">
            {/* Gate 08 honesty: restock progress, straight from backend */}
            {(data.procurement?.length ?? 0) > 0 && (
              <Card className={cn('border', data.delayed_restock ? 'border-amber-300 dark:border-amber-700' : 'border-indigo-200 dark:border-indigo-800')}>
                <CardContent className="p-4 space-y-3">
                  <p className="text-sm font-semibold text-gray-900 dark:text-white">
                    {data.delayed_restock
                      ? 'We are re-stocking an item in your order — your supplier delivery is running late.'
                      : 'Some items are being sourced for your order:'}
                  </p>
                  {data.procurement!.map((p, i) => (
                    <div key={i} className="flex items-center justify-between gap-3 rounded-lg border border-gray-100 dark:border-gray-800 px-3 py-2">
                      <div className="min-w-0">
                        <p className="text-sm font-medium text-gray-900 dark:text-white">{p.product}</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">
                          Sourcing {p.received_quantity ?? 0}/{p.requested_quantity ?? '?'} received
                          {p.expected_delivery_at
                            ? ` · expected ${new Date(p.expected_delivery_at).toLocaleDateString()}`
                            : p.delivery_status === 'rejected'
                              ? ' · supplier declined — we are re-sourcing'
                              : ''}
                        </p>
                      </div>
                      <span className={cn(
                        'text-xs font-semibold px-2 py-1 rounded-full',
                        p.delivery_status === 'delayed'
                          ? 'bg-amber-100 text-amber-700'
                          : p.delivery_status === 'rejected'
                            ? 'bg-red-100 text-red-700'
                            : p.delivery_status === 'received' || p.delivery_status === 'partially_received'
                              ? 'bg-emerald-100 text-emerald-700'
                              : 'bg-indigo-100 text-indigo-700'
                      )}>
                        {p.delivery_status === 'partially_received'
                          ? 'Partially arrived'
                          : p.delivery_status === 'received'
                            ? 'Arrived'
                            : p.delivery_status === 'confirmed'
                              ? 'Supplier confirmed'
                              : p.delivery_status === 'delayed'
                                ? 'Delayed'
                                : p.delivery_status === 'rejected'
                                  ? 'Rejected — re-sourcing'
                                  : 'Contacting supplier'}
                      </span>
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}
            <div className="overflow-hidden">
              <div className="relative">
                <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
                {timeline.map((step, index) => (
                  <div className="relative pl-16 pb-8 last:pb-0">
                    <div className="absolute left-0 top-0 flex items-center justify-center w-16 h-16">
                      <div className={cn(
                        'relative flex h-8 w-8 items-center justify-center rounded-full border-4',
                        step.done ? 'bg-indigo-500 border-indigo-500' : 'bg-white border-gray-300 dark:border-gray-600'
                      )}>
                        {step.done ? (
                          <CheckCircle2 className="h-5 w-5 text-white" />
                        ) : index < progress ? (
                          <div className="h-3 w-3 rounded-full bg-amber-500 animate-pulse" />
                        ) : (
                          <div className="h-5 w-5 text-gray-400 dark:text-gray-500" />
                        )}
                      </div>
                    </div>
                    <div className="ml-4">
                      <p className={cn('font-medium', step.done ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400')}>
                        {step.label}
                      </p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">
                        {step.done ? 'Completed' : index < progress ? 'In progress' : 'Pending'}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'details' && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Package className="h-5 w-5" />
                  Order Items
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {items.map(item => (
                    <div key={item.name} className="flex items-center justify-between py-3 border-b border-gray-100 dark:border-gray-800 last:border-0">
                      <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
                          <Package className="h-6 w-6 text-gray-400" />
                        </div>
                        <div>
                          <p className="font-medium text-gray-900 dark:text-white">{item.name}</p>
                          <p className="text-sm text-gray-500 dark:text-gray-400">Qty: {item.quantity} * {formatCurrency(item.unit_price)}</p>
                        </div>
                      </div>
                      <span className="font-semibold text-gray-900 dark:text-white">{formatCurrency(item.line_total)}</span>
                    </div>
                  ))}
                  <div className="border-t border-gray-200 dark:border-gray-700 pt-4 space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500 dark:text-gray-400">Subtotal</span>
                      <span>{formatCurrency(invoice?.subtotal || 0)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500 dark:text-gray-400">Delivery</span>
                      <span>{invoice?.delivery_fee === 0 ? 'Free' : formatCurrency(invoice?.delivery_fee || 0)}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-500 dark:text-gray-400">Tax (18%)</span>
                      <span>{formatCurrency(invoice?.tax || 0)}</span>
                    </div>
                    <div className="border-t border-gray-200 dark:border-gray-700 pt-2 flex justify-between text-lg font-bold">
                      <span>Total</span>
                      <span>{formatCurrency(invoice?.total || 0)}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <CreditCard className="h-5 w-5" />
                    Payment Status
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-gray-500 dark:text-gray-400">Payment Status</span>
                      <Badge className={cn(
                        invoice?.payment_status === 'confirmed' && 'bg-green-100 text-green-700',
                        invoice?.payment_status === 'pending' && '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',
                        'bg-gray-100 text-gray-700'
                      )}>
                        {invoice?.payment_status || 'pending'}
                      </Badge>
                    </div>
                    {invoice && (
                      <div className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
                        <div>Invoice: <span className="font-medium">{invoice.invoice_number}</span></div>
                        <div>Issued: <span className="font-medium">{formatDate(invoice.issued_at)}</span></div>
                        <div>Total: <span className="font-medium">{formatCurrency(invoice.total)} {invoice.currency}</span></div>
                      </div>
                    )}
                    {invoice && invoice.payment_status !== 'confirmed' && (
                      <div className="pt-2 space-y-2">
                        <label htmlFor="pay-phone" className="text-xs font-medium text-gray-600 dark:text-gray-300">
                          Pay with MoMo (Paypack) — enter your phone
                        </label>
                        <div className="flex gap-2">
                          <input
                            id="pay-phone"
                            type="tel"
                            value={payPhone}
                            onChange={(e) => setPayPhone(e.target.value)}
                            placeholder="+25078..."
                            className="flex-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-transparent px-3 py-2 text-sm"
                          />
                          <button
                            onClick={handlePayNow}
                            disabled={payBusy || payPhone.trim().length < 7}
                            className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
                          >
                            {payBusy ? 'Sending…' : 'Pay now'}
                          </button>
                        </div>
                        {payNote && (
                          <p className="text-xs text-green-700 dark:text-green-400">{payNote}</p>
                        )}
                        {payError && (
                          <p className="text-xs text-red-600 dark:text-red-400">{payError}</p>
                        )}
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Truck className="h-5 w-5" />
                    Delivery
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-gray-500 dark:text-gray-400">Delivery Status</span>
                      <Badge className={
                        status === 'completed' ? 'bg-green-100 text-green-700' :
                        status === 'ready' ? 'bg-emerald-100 text-emerald-700' :
                        status === 'supplier_pending' ? 'bg-purple-100 text-purple-700' :
                        status === 'awaiting_approval' ? 'bg-amber-100 text-amber-700' :
                        'bg-gray-100 text-gray-700'
                      }>
                        {status_label || 'Unknown'}
                      </Badge>
                    </div>
                    <div className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
                      <div><span className="font-medium">Customer:</span> {customer_name || 'N/A'}</div>
                      <div><span className="font-medium">Delivery to:</span> {delivery_city || 'N/A'}</div>
                      {preferred_delivery_date && (
                        <div><span className="font-medium">Preferred:</span> {formatDate(preferred_delivery_date)}</div>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}

        {activeTab === 'notifications' && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="text-xl font-semibold">Notifications</h2>
            </div>
            <Card>
              <CardContent className="p-0">
                <div className="divide-y divide-gray-200 dark:divide-gray-700">
                  <div className="p-6 text-center text-gray-500 dark:text-gray-400">
                    No notifications yet. You&apos;ll receive updates as your order progresses.
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>
    )
}