import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { useState, useEffect } from 'react'
import { p, AppContainer, div } from 'web-components'
import { ChevronLeft, CreditCard, Package, CheckCircle, XCircle, Clock, Zap, Calendar, Edit2, Tag, AlertCircle, X } from 'lucide-react'
import { Dialog } from '../components/Dialog'
import dayjs from 'dayjs'

export const Route = createFileRoute('/me/orders/$id')({
  component: OrderDetailPage,
})

function OrderDetailPage() {
  const { id } = useParams({ from: '/me/orders/$id' })
  const navigate = useNavigate()
  const orderId = Number(id)

  const { data: orderData, isLoading, error, refetch } = trpc.user.order.getOrderById.useQuery(
    { orderId: orderId+'' },
    { enabled: !!orderId }
  )

  const [isEditingNotes, setIsEditingNotes] = useState(false)
  const [notesText, setNotesText] = useState('')
  const [notesInput, setNotesInput] = useState('')
  const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
  const [cancelReason, setCancelReason] = useState('')
  const [complaintDialogOpen, setComplaintDialogOpen] = useState(false)
  const [complaintBody, setComplaintBody] = useState('')

  // const order = orderData?.data

  const updateNotesMutation = trpc.user.order.updateUserNotes.useMutation({
    onSuccess: () => {
      setNotesText(notesInput)
      setIsEditingNotes(false)
      refetch()
    },
  })

  const cancelOrderMutation = trpc.user.order.cancelOrder.useMutation({
    onSuccess: () => {
      setCancelDialogOpen(false)
      setCancelReason('')
      refetch()
    },
  })

  const raiseComplaintMutation = trpc.user.complaint.raise.useMutation({
    onSuccess: () => {
      setComplaintDialogOpen(false)
      setComplaintBody('')
      refetch()
    },
  })

  useEffect(() => {
    if (orderData?.userNotes) {
      setNotesText(orderData.userNotes)
      setNotesInput(orderData.userNotes)
    }
  }, [orderData])

  const handleCancelOrder = () => {
    if (!cancelReason.trim()) {
      alert('Please enter a reason for cancellation')
      return
    }
    cancelOrderMutation.mutate({ id: orderId, reason: cancelReason })
  }

  const handleRaiseComplaint = () => {
    if (!complaintBody.trim()) {
      alert('Please describe your complaint')
      return
    }
    raiseComplaintMutation.mutate({ orderId: orderId+'', complaintBody: complaintBody.trim() })
  }

  if (isLoading) {
    return (
      <AppContainer>
        <div className="flex min-h-full flex-1 items-center justify-center bg-white">
          <p className="font-medium text-slate-400">Loading details...</p>
        </div>
      </AppContainer>
    )
  }

  if (error || !orderData) {
    return (
      <AppContainer>
        <div className="flex min-h-full flex-1 flex-col items-center justify-center bg-white p-8">
          <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
          <p className="mt-4 text-lg font-bold text-slate-900">Failed to load</p>
          <button
            onClick={() => navigate({ to: '/me/orders' })}
            className="mt-6 rounded-xl bg-slate-900 px-6 py-2 font-bold text-white"
          >
            Go Back
          </button>
        </div>
      </AppContainer>
    )
  }

  const getStatusConfig = (status: string) => {
    const s = status.toLowerCase()
    switch (s) {
      case 'delivered':
      case 'success':
        return { label: 'Delivered', color: '#10B981', bgColor: 'bg-green-50', textColor: 'text-green-700' }
      case 'cancelled':
      case 'failed':
        return { label: 'Cancelled', color: '#EF4444', bgColor: 'bg-red-50', textColor: 'text-red-700' }
      case 'pending':
      case 'processing':
        return { label: 'Pending', color: '#F59E0B', bgColor: 'bg-yellow-50', textColor: 'text-yellow-700' }
      default:
        return { label: status, color: '#3B82F6', bgColor: 'bg-blue-50', textColor: 'text-blue-700' }
    }
  }

  const orderAny = orderData as any
  const subtotal = orderData.items?.reduce((sum: number, item: any) => sum + (item.amount || item.price * item.quantity), 0) || 0
  const discountAmount = orderData.discountAmount || 0
  const deliveryCharge = orderData.deliveryCharge || 0
  const totalAmount = orderData.orderAmount || subtotal - discountAmount + deliveryCharge
  const statusConfig = getStatusConfig(orderData.deliveryStatus || 'pending')

  return (
    <AppContainer>
      <div className="flex min-h-full flex-1 flex-col bg-slate-50">
        {/* Header */}
        <div className="flex flex-row items-center justify-between border-b border-slate-100 bg-white px-6 pb-4 pt-4">
          <div className="flex flex-row items-center">
            <button
              onClick={() => navigate({ to: '/me/orders' })}
              className="-ml-2 mr-3 p-2"
            >
              <ChevronLeft className="h-6 w-6 text-slate-800" />
            </button>
            <div>
              <p className="text-lg font-bold text-slate-900">Order #{orderData.orderId || orderData.id}</p>
              <p className="text-xs text-slate-400">
                {dayjs(orderData.orderDate || orderData.createdAt).format('DD MMM, h:mm A')}
              </p>
              {orderData.isFlashDelivery && (
                <p className="mt-1 text-xs font-bold text-amber-600">⚡ 1 Hr Delivery</p>
              )}
            </div>
          </div>
          <div className="flex flex-row items-center gap-2">
            <div
              className={`rounded-full px-3 py-1 ${statusConfig.bgColor}`}
              style={{ backgroundColor: statusConfig.color + '10' }}
            >
              <p className="text-[10px] font-bold uppercase" style={{ color: statusConfig.color }}>
                {statusConfig.label}
              </p>
            </div>
            {orderData.isFlashDelivery && (
              <div className="rounded-full border border-amber-200 bg-amber-100 px-2 py-1">
                <p className="text-[10px] font-black uppercase text-amber-700">⚡</p>
              </div>
            )}
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-4 pb-12">
          {/* 1 Hr Delivery Banner */}
          {orderData.isFlashDelivery && (
            <div className="mb-4 rounded-2xl border border-amber-200 bg-linear-to-r from-amber-50 to-yellow-50 p-4">
              <div className="flex flex-row items-center">
                <Zap className="h-6 w-6 text-amber-600" />
                <div className="ml-3 flex-1">
                  <p className="text-sm font-bold text-amber-900">1 Hr Delivery Order</p>
                  <p className="mt-1 text-xs text-amber-700">
                    Your order will be delivered within 1 hr of placement
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Main Info Card */}
          <div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
            <div className="mb-4 flex flex-row items-center justify-between">
              <div className="flex flex-row items-center">
                <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-slate-50">
                  <CreditCard className="h-5 w-5 text-slate-500" />
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase text-slate-400">Payment Method</p>
                  <p className="font-bold text-slate-900">
                    {orderData.paymentMode?.toUpperCase() === 'COD' ? 'Cash on Delivery' : orderData.paymentMode}
                  </p>
                </div>
              </div>
              <div className="items-end text-right">
                <p className="text-[10px] font-bold uppercase text-slate-400">Status</p>
                <p className="font-bold capitalize text-slate-900">{orderData.paymentStatus}</p>
              </div>
            </div>

            {/* Delivery Date Info */}
            {(orderData.deliveryDate || orderData.isFlashDelivery) &&
              ['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
                <div className="flex flex-row items-center border-t border-slate-50 pt-4">
                  {orderData.isFlashDelivery ? (
                    <Zap className="h-4 w-4 text-amber-600" />
                  ) : (
                    <CheckCircle className="h-4 w-4 text-green-600" />
                  )}
                  <p className={`ml-2 text-xs font-medium ${orderData.isFlashDelivery ? 'text-amber-700' : 'text-slate-600'}`}>
                    {orderData.isFlashDelivery
                      ? `Flash Delivered on ${dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}`
                      : `Delivered on ${dayjs(orderData.deliveryDate).format('DD MMM YYYY, h:mm A')}`}
                  </p>
                </div>
              )}

            {/* Pending 1 Hr Delivery Info */}
            {orderData.isFlashDelivery &&
              !['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
                <div className="flex flex-row items-center border-t border-slate-50 pt-4">
                  <Zap className="h-4 w-4 text-amber-600" />
                  <p className="ml-2 text-xs font-medium text-amber-700">
                    1 Hr Delivery: {dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}
                  </p>
                </div>
              )}
          </div>

          {/* Special Instructions */}
          <div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
            <div className="mb-3 flex flex-row items-center justify-between">
              <p className="text-[10px] font-bold uppercase text-slate-400">Special Instructions</p>
              {isEditingNotes ? (
                <div className="flex flex-row gap-2">
                  <button
                    onClick={() => {
                      setIsEditingNotes(false)
                      setNotesInput(notesText)
                    }}
                    className="rounded-lg bg-slate-100 px-3 py-1"
                  >
                    <p className="text-xs font-bold text-slate-600">Cancel</p>
                  </button>
                  <button
                    onClick={() => {
                      updateNotesMutation.mutate({ id: orderId, userNotes: notesInput })
                    }}
                    disabled={updateNotesMutation.isPending}
                    className="rounded-lg bg-blue-500 px-3 py-1"
                  >
                    <p className="text-xs font-bold text-white">
                      {updateNotesMutation.isPending ? 'Saving...' : 'Save'}
                    </p>
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => {
                    setNotesInput(notesText || '')
                    setIsEditingNotes(true)
                  }}
                  className="flex flex-row items-center rounded-lg bg-slate-50 px-2 py-1"
                >
                  <Edit2 className="mr-1 h-3 w-3 text-slate-500" />
                  <p className="text-xs font-medium text-slate-500">{notesText ? 'Edit' : 'Add'}</p>
                </button>
              )}
            </div>
            {isEditingNotes ? (
              <textarea
                className="min-h-20 rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700"
                value={notesInput}
                onChange={(e) => setNotesInput(e.target.value)}
                placeholder="Add special delivery instructions..."
                rows={4}
              />
            ) : (
              <p className="text-sm leading-5 text-slate-700">
                {notesText || 'No instructions added'}
              </p>
            )}
          </div>

          {/* Cancellation Detail */}
          {orderData.cancelReason && (
            <div className="mb-4 rounded-2xl border border-rose-100 bg-rose-50 p-5">
              <p className="mb-2 text-[10px] font-bold uppercase text-rose-700">Cancellation Reason</p>
              <p className="text-sm font-medium text-rose-900">{orderData.cancelReason}</p>
              {orderData.refundAmount && (
                <div className="mt-3 flex flex-row items-center justify-between border-t border-rose-200/50 pt-3">
                  <p className="text-xs text-rose-700">Refund Amount</p>
                  <p className="text-base font-bold text-rose-900">₹{orderData.refundAmount}</p>
                </div>
              )}
            </div>
          )}

          {/* Items Section */}
          <div className="mb-2 px-1">
            <p className="mb-3 text-base font-bold text-slate-900">Order Items</p>
          </div>

          {orderData.items?.map((item: any, index: number) => (
            <div
              key={index}
              className="mb-3 flex flex-row items-center rounded-2xl border border-slate-100 bg-white p-3 shadow-sm"
            >
              <div className="mr-4 flex h-14 w-14 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 p-1">
                {item.image ? (
                  <img
                    src={item.image}
                    alt=""
                    className="h-full w-full rounded-lg object-cover"
                  />
                ) : (
                  <Package className="h-6 w-6 text-slate-400" />
                )}
              </div>
              <div className="flex-1">
                <p className="text-sm font-bold text-slate-900">{item.productName || item.product?.name || `Product #${item.productId}`}</p>
                <p className="mt-1 text-xs text-slate-400">
                  {item.quantity} × ₹{item.price}
                </p>
              </div>
              <p className="ml-2 text-base font-bold text-slate-900">₹{item.amount || item.price * item.quantity}</p>
            </div>
          ))}

          {/* Coupon */}
          {orderData.couponCode && (
            <div className="mb-4 mt-2 flex flex-row items-center justify-between rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
              <div className="flex flex-row items-center">
                <Tag className="h-5 w-5 text-emerald-600" />
                <div className="ml-3">
                  <p className="text-sm font-bold text-emerald-900">{orderData.couponCode}</p>
                  <p className="text-[10px] text-emerald-600">Coupon Applied</p>
                </div>
              </div>
              <p className="font-bold text-emerald-700">-₹{orderData.discountAmount}</p>
            </div>
          )}

          {/* Summary Section */}
          <div className="mb-6 rounded-2xl border border-slate-100 bg-white p-5">
            <div className="mb-3 flex flex-row justify-between">
              <p className="text-sm text-slate-500">Subtotal</p>
              <p className="font-medium text-slate-900">₹{subtotal}</p>
            </div>
            {discountAmount > 0 && (
              <div className="mb-3 flex flex-row justify-between">
                <p className="text-sm text-emerald-600">Discount</p>
                <p className="font-medium text-emerald-600">-₹{discountAmount}</p>
              </div>
            )}
            <div className="mb-3 flex flex-row justify-between">
              <p className="text-sm text-slate-500">Delivery</p>
              <p className="font-medium text-slate-900">
                {deliveryCharge > 0 ? `₹${deliveryCharge}` : 'Free'}
              </p>
            </div>
            <div className="flex flex-row items-center justify-between border-t border-slate-50 pt-4">
              <p className="text-base font-bold text-slate-900">Total Amount</p>
              <p className="text-xl font-bold text-slate-900">₹{totalAmount}</p>
            </div>
          </div>

          {/* Footer Actions */}
          <div className="flex flex-row gap-3">
            <button
              onClick={() => navigate({ to: '/me' })}
              className="flex-1 rounded-xl bg-slate-100 py-3.5 text-center font-bold text-slate-600"
            >
              Back
            </button>
            <button
              onClick={() => setComplaintDialogOpen(true)}
              className="flex-1 rounded-xl bg-blue-600 py-3.5 text-center font-bold text-white"
            >
              Raise Complaint
            </button>
          </div>

          {/* Cancel Order Button */}
          {!['success', 'delivered', 'cancelled'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
            <div className="mt-4">
              <button
                onClick={() => setCancelDialogOpen(true)}
                className="flex w-full flex-row items-center justify-center rounded-xl border border-red-100 bg-red-50 py-3.5"
              >
                <XCircle className="mr-2 h-5 w-5 text-red-600" />
                <p className="font-bold text-red-600">Cancel Order</p>
              </button>
            </div>
          )}
        </div>

        {/* Cancel Order Dialog */}
        <Dialog open={cancelDialogOpen} onClose={() => setCancelDialogOpen(false)}>
          <div className="p-6">
            <div className="mb-4 flex flex-row items-center justify-between">
              <p className="text-xl font-bold text-gray-900">Cancel Order</p>
              <button onClick={() => setCancelDialogOpen(false)}>
                <X className="h-6 w-6 text-gray-400" />
              </button>
            </div>

            <div className="mb-4 rounded-xl border border-red-100 bg-red-50 p-4">
              <p className="text-sm text-red-800">
                Are you sure you want to cancel this order? This action cannot be undone.
              </p>
            </div>

            <p className="mb-2 font-medium text-gray-700">Reason for cancellation</p>
            <textarea
              className="mb-6 min-h-24 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
              value={cancelReason}
              onChange={(e) => setCancelReason(e.target.value)}
              placeholder="Please tell us why you are cancelling..."
              rows={3}
            />

            <button
              className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
                cancelOrderMutation.isPending ? 'bg-red-400 opacity-70' : 'bg-red-600'
              }`}
              onClick={handleCancelOrder}
              disabled={cancelOrderMutation.isPending}
            >
              {cancelOrderMutation.isPending ? 'Cancelling...' : 'Confirm Cancellation'}
            </button>
          </div>
        </Dialog>

        {/* Raise Complaint Dialog */}
        <Dialog open={complaintDialogOpen} onClose={() => setComplaintDialogOpen(false)}>
          <div className="p-6">
            <div className="mb-4 flex flex-row items-center justify-between">
              <p className="text-xl font-bold text-gray-900">Raise Complaint</p>
              <button onClick={() => setComplaintDialogOpen(false)}>
                <X className="h-6 w-6 text-gray-400" />
              </button>
            </div>

            <div className="mb-4 rounded-xl border border-amber-100 bg-amber-50 p-4">
              <p className="text-sm text-amber-800">
                Please describe your issue with this order. Our support team will get back to you within 24 hours.
              </p>
            </div>

            <p className="mb-2 font-medium text-gray-700">Complaint Details</p>
            <textarea
              className="mb-6 min-h-32 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
              value={complaintBody}
              onChange={(e) => setComplaintBody(e.target.value)}
              placeholder="Describe your issue in detail..."
              rows={4}
            />

            <button
              className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
                raiseComplaintMutation.isPending ? 'bg-blue-400 opacity-70' : 'bg-blue-600'
              }`}
              onClick={handleRaiseComplaint}
              disabled={raiseComplaintMutation.isPending}
            >
              {raiseComplaintMutation.isPending ? 'Submitting...' : 'Submit Complaint'}
            </button>
          </div>
        </Dialog>
      </div>
    </AppContainer>
  )
}