"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  Package,
  Search,
  CheckCircle,
  XCircle,
  Clock,
  AlertCircle,
  Mail,
  Truck,
  MapPin,
  Calendar,
} from "lucide-react"
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"

interface Order {
  id: string
  customerId: string | null
  customerEmail: string
  items: OrderItem[]
  totalAmount: number
  currency: string
  status: "pending" | "paid" | "fulfilled" | "cancelled" | "refunded"
  paymentIntentId: string | null
  stripeSessionId: string | null
  createdAt: string
  updatedAt: string
  shippingAddress?: {
    name: string
    address: string
    city: string
    state: string
    zipCode: string
    country: string
  }
  trackingNumber?: string
  estimatedDelivery?: string
}

interface OrderItem {
  productId: string
  productName: string
  price: number
  quantity: number
  priceId: string
}

export function OrderTracking() {
  const [orderId, setOrderId] = useState("")
  const [order, setOrder] = useState<Order | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isSearching, setIsSearching] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)

  // Track an order
  const trackOrder = async () => {
    if (!orderId.trim()) {
      setError("Please enter an order ID")
      return
    }

    setIsSearching(true)
    setLoading(true)
    setError(null)
    setOrder(null)

    try {
      // In a real application, you would call your API to fetch the order
      // For demo purposes, we'll simulate API call with timeout
      await new Promise((resolve) => setTimeout(resolve, 1000))

      // Simulate API response
      const mockOrder: Order = {
        id: orderId,
        customerId: null,
        customerEmail: "customer@example.com",
        items: [
          {
            productId: "prod_123",
            productName: "Vending Machine - SEAGA HY900",
            price: 2499.99,
            quantity: 1,
            priceId: "price_123",
          },
          {
            productId: "prod_456",
            productName: "Vending Machine Stand",
            price: 299.99,
            quantity: 1,
            priceId: "price_456",
          },
        ],
        totalAmount: 2799.98,
        currency: "usd",
        status: "paid",
        paymentIntentId: "pi_123",
        stripeSessionId: "cs_123",
        createdAt: "2024-01-15T10:30:00Z",
        updatedAt: "2024-01-16T14:20:00Z",
        shippingAddress: {
          name: "John Doe",
          address: "123 Main Street",
          city: "Salt Lake City",
          state: "UT",
          zipCode: "84101",
          country: "USA",
        },
        trackingNumber: "1Z999AA1234567890",
        estimatedDelivery: "2024-01-20",
      }

      setOrder(mockOrder)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to find order")
    } finally {
      setLoading(false)
      setIsSearching(false)
    }
  }

  // Handle Enter key press
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      trackOrder()
    }
  }

  // Format date
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  // Get status badge variant
  const getStatusVariant = (status: Order["status"]) => {
    switch (status) {
      case "pending":
        return "secondary"
      case "paid":
        return "default"
      case "fulfilled":
        return "default"
      case "cancelled":
        return "destructive"
      case "refunded":
        return "destructive"
      default:
        return "secondary"
    }
  }

  // Get status icon
  const getStatusIcon = (status: Order["status"]) => {
    switch (status) {
      case "pending":
        return <Clock className="h-4 w-4" />
      case "paid":
        return <CheckCircle className="h-4 w-4" />
      case "fulfilled":
        return <Truck className="h-4 w-4" />
      case "cancelled":
        return <XCircle className="h-4 w-4" />
      case "refunded":
        return <AlertCircle className="h-4 w-4" />
      default:
        return null
    }
  }

  // Get status message
  const getStatusMessage = (status: Order["status"]) => {
    switch (status) {
      case "pending":
        return "Order is being processed"
      case "paid":
        return "Payment received. Preparing for shipment"
      case "fulfilled":
        return "Order has been shipped"
      case "cancelled":
        return "Order was cancelled"
      case "refunded":
        return "Order has been refunded"
      default:
        return "Unknown status"
    }
  }

  // Clear order after successful display
  useEffect(() => {
    if (order) {
      const timer = setTimeout(() => {
        setShowSuccess(true)
      }, 2000)

      return () => clearTimeout(timer)
    }
  }, [order])

  return (
    <div className="max-w-4xl mx-auto px-4 py-10 md:py-14">
      <div className="space-y-6">
        <PublicPageHeader
          align="center"
          eyebrow="Customer Orders"
          title="Track Your Order"
          description="Enter your order ID to check shipment status, delivery updates, and the current stage of your order."
        />

        {/* Search Form */}
        <PublicSurface as="section" className="p-5 md:p-7">
          <CardHeader>
            <CardTitle>Find Your Order</CardTitle>
            <CardDescription>
              Enter your order ID to track your package
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2">
              <Input
                placeholder="Enter order ID (e.g., ORD-1234567)"
                value={orderId}
                onChange={(e) => setOrderId(e.target.value)}
                onKeyPress={handleKeyPress}
                className="flex-1"
              />
              <Button onClick={trackOrder} disabled={isSearching}>
                {isSearching ? (
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                ) : (
                  <Search className="h-4 w-4" />
                )}
                {isSearching ? "Searching..." : "Track"}
              </Button>
            </div>

            {error && (
              <Alert variant="destructive" className="mt-4">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {showSuccess && (
              <Alert className="mt-4">
                <CheckCircle className="h-4 w-4" />
                <AlertDescription>
                  Order found successfully! Scroll down for tracking details.
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </PublicSurface>

        {/* Order Details */}
        {order && (
          <div className="space-y-6">
            {/* Order Status */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>Order Status</span>
                  <Badge
                    variant={getStatusVariant(order.status)}
                    className="flex items-center gap-1"
                  >
                    {getStatusIcon(order.status)}
                    {order.status.charAt(0).toUpperCase() +
                      order.status.slice(1)}
                  </Badge>
                </CardTitle>
                <CardDescription>
                  Order ID: {order.id} • Placed on {formatDate(order.createdAt)}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-lg">{getStatusMessage(order.status)}</p>

                {order.status === "fulfilled" && order.trackingNumber && (
                  <div className="mt-4 p-4 bg-muted rounded-lg">
                    <div className="flex items-center gap-2 mb-2">
                      <Package className="h-5 w-5 text-muted-foreground" />
                      <span className="font-medium">Tracking Information</span>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <div className="text-sm text-muted-foreground">
                          Tracking Number
                        </div>
                        <div className="font-mono">{order.trackingNumber}</div>
                      </div>
                      <div>
                        <div className="text-sm text-muted-foreground">
                          Estimated Delivery
                        </div>
                        <div>
                          {new Date(
                            order.estimatedDelivery!
                          ).toLocaleDateString()}
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Customer Information */}
            <Card>
              <CardHeader>
                <CardTitle>Customer Information</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-medium mb-3">Contact Information</h4>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <Mail className="h-4 w-4 text-muted-foreground" />
                        <span>{order.customerEmail}</span>
                      </div>
                    </div>
                  </div>

                  {order.shippingAddress && (
                    <div>
                      <h4 className="font-medium mb-3">Shipping Address</h4>
                      <div className="space-y-2">
                        <div className="flex items-start gap-2">
                          <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                          <div>
                            <div className="font-medium">
                              {order.shippingAddress.name}
                            </div>
                            <div>{order.shippingAddress.address}</div>
                            <div>
                              {order.shippingAddress.city},{" "}
                              {order.shippingAddress.state}{" "}
                              {order.shippingAddress.zipCode}
                            </div>
                            <div>{order.shippingAddress.country}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            {/* Order Items */}
            <Card>
              <CardHeader>
                <CardTitle>Order Items</CardTitle>
                <CardDescription>
                  {order.items.length} item{order.items.length !== 1 ? "s" : ""}{" "}
                  • Total ${order.totalAmount.toFixed(2)}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {order.items.map((item, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between p-4 border rounded-lg"
                    >
                      <div className="flex items-center gap-4">
                        <div className="w-16 h-16 rounded-md bg-muted flex items-center justify-center">
                          <Package className="h-8 w-8 text-muted-foreground" />
                        </div>
                        <div>
                          <h4 className="font-medium">{item.productName}</h4>
                          <p className="text-sm text-muted-foreground">
                            ${item.price.toFixed(2)} • Qty: {item.quantity}
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="font-medium">
                          ${(item.price * item.quantity).toFixed(2)}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6 pt-6 border-t">
                  <div className="flex justify-between items-center text-lg">
                    <span className="font-medium">Total:</span>
                    <div className="flex items-center gap-1">
                      <span>${order.totalAmount.toFixed(2)}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Timeline */}
            {order.status !== "cancelled" && order.status !== "refunded" && (
              <Card>
                <CardHeader>
                  <CardTitle>Order Timeline</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <div
                          className={`w-8 h-8 rounded-full flex items-center justify-center ${
                            order.status !== "pending"
                              ? "bg-primary text-primary-foreground"
                              : "bg-muted"
                          }`}
                        >
                          <Calendar className="h-4 w-4" />
                        </div>
                        <div className="w-0.5 h-16 bg-border"></div>
                      </div>
                      <div>
                        <h4 className="font-medium">Order Placed</h4>
                        <p className="text-sm text-muted-foreground">
                          {formatDate(order.createdAt)}
                        </p>
                      </div>
                    </div>

                    <div className="flex gap-4">
                      <div className="flex flex-col items-center">
                        <div
                          className={`w-8 h-8 rounded-full flex items-center justify-center ${
                            order.status !== "pending"
                              ? "bg-primary text-primary-foreground"
                              : "bg-muted"
                          }`}
                        >
                          <CheckCircle className="h-4 w-4" />
                        </div>
                        <div className="w-0.5 h-16 bg-border"></div>
                      </div>
                      <div>
                        <h4 className="font-medium">Payment Confirmed</h4>
                        <p className="text-sm text-muted-foreground">
                          {formatDate(order.updatedAt)}
                        </p>
                      </div>
                    </div>

                    {order.status === "fulfilled" && (
                      <div className="flex gap-4">
                        <div className="flex flex-col items-center">
                          <div
                            className={`w-8 h-8 rounded-full flex items-center justify-center ${
                              order.status === "fulfilled"
                                ? "bg-primary text-primary-foreground"
                                : "bg-muted"
                            }`}
                          >
                            <Truck className="h-4 w-4" />
                          </div>
                        </div>
                        <div>
                          <h4 className="font-medium">Order Shipped</h4>
                          <p className="text-sm text-muted-foreground">
                            Tracking: {order.trackingNumber}
                          </p>
                          <p className="text-sm text-muted-foreground">
                            Estimated Delivery:{" "}
                            {new Date(
                              order.estimatedDelivery!
                            ).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        )}

        {!order && !loading && (
          <Card>
            <CardContent className="py-12 text-center">
              <Package className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">No order found</h3>
              <p className="text-muted-foreground">
                Enter your order ID above to track your shipment status
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}