"use client";

import { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { fetchClient } from "@/lib/api-client";
import { toast } from "sonner";
import { Package, User, Calendar, DollarSign, MapPin, Truck, CheckCircle, XCircle, Clock, Wallet, Copy, ExternalLink } from "lucide-react";

interface OrderDetails {
  _id: string;
  orderId: number;
  telegramBuyerId: string;
  telegramUsername?: string;
  totalPrice: number;
  cryptoTotal?: number;
  orderDate: string;
  paidAt?: string;
  status: string;
  products: Array<{
    productId: string;
    name: string;
    quantity: number;
    pricePerUnit: number;
    totalItemPrice: number;
  }>;
  shippingMethod?: {
    type?: string;
    name?: string; // Legacy support
    price: number;
  };
  pgpAddress?: string;
  trackingNumber?: string;
  discountAmount?: number;
  subtotalBeforeDiscount?: number;
  paymentAddress?: string;
  txid?: string | string[];
  vendorId?: {
    username?: string;
  };
  storeId?: string;
}

interface OrderDetailsModalProps {
  orderId: number | string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

/**
 * Admin-only order details modal component
 * This component fetches order details from admin-only API endpoints
 * and should only be used in admin contexts
 */

// Helper function to format currency, removing unnecessary .00
const formatCurrency = (amount: number | undefined | null): string => {
  if (amount === undefined || amount === null || isNaN(amount) || amount === 0) {
    return '';
  }
  // If it's a whole number, don't show decimals
  if (amount % 1 === 0) {
    return `£${amount.toFixed(0)}`;
  }
  return `£${amount.toFixed(2)}`;
};

const getStatusConfig = (status: string) => {
  switch (status) {
    case 'acknowledged':
      return { label: 'Acknowledged', color: 'bg-purple-500/10 text-purple-500 border-purple-500/20', icon: CheckCircle };
    case 'paid':
      return { label: 'Paid', color: 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20', icon: CheckCircle };
    case 'shipped':
      return { label: 'Shipped', color: 'bg-blue-500/10 text-blue-500 border-blue-500/20', icon: Truck };
    case 'completed':
      return { label: 'Completed', color: 'bg-green-500/10 text-green-500 border-green-500/20', icon: CheckCircle };
    case 'cancelled':
      return { label: 'Cancelled', color: 'bg-red-500/10 text-red-500 border-red-500/20', icon: XCircle };
    case 'unpaid':
      return { label: 'Unpaid', color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20', icon: Clock };
    case 'confirming':
      return { label: 'Confirming', color: 'bg-orange-500/10 text-orange-500 border-orange-500/20', icon: Clock };
    default:
      return { label: status, color: 'bg-gray-500/10 text-gray-500 border-gray-500/20', icon: Package };
  }
};

export default function OrderDetailsModal({ orderId, open, onOpenChange }: OrderDetailsModalProps) {
  const [order, setOrder] = useState<OrderDetails | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState<string | null>(null);
  const [updatingStatus, setUpdatingStatus] = useState(false);

  const copyToClipboard = async (text: string, label: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(label);
      setTimeout(() => setCopied(null), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const handleStatusChange = async (newStatus: string) => {
    if (!order || newStatus === order.status) return;

    setUpdatingStatus(true);
    try {
      const response = await fetchClient<{ message: string; order: { orderId: number; status: string; oldStatus: string } }>(
        `/admin/orders/${orderId}/status`,
        {
          method: 'PUT',
          body: { status: newStatus }
        }
      );

      // Update local order state
      setOrder({ ...order, status: newStatus });
      
      toast.success(`Order status updated to ${newStatus}`);
      
      // Optionally refresh order details to get latest data
      await fetchOrderDetails();
    } catch (err) {
      console.error('Failed to update order status:', err);
      const errorMessage = err instanceof Error ? err.message : 'Failed to update order status';
      toast.error(errorMessage);
    } finally {
      setUpdatingStatus(false);
    }
  };

  useEffect(() => {
    if (open && orderId) {
      fetchOrderDetails();
    } else {
      // Reset state when modal closes
      setOrder(null);
      setError(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, orderId]);

  const fetchOrderDetails = async () => {
    setLoading(true);
    setError(null);
    try {
      // Validate orderId before making request
      if (!orderId || orderId === 'undefined' || orderId === 'null') {
        throw new Error('Order ID is required');
      }
      
      // Ensure orderId is a valid number or string
      const orderIdStr = String(orderId).trim();
      if (!orderIdStr || orderIdStr === 'undefined' || orderIdStr === 'null') {
        throw new Error('Invalid order ID');
      }
      
      // Fetch full order details from admin endpoint
      // Use /admin/orders/:orderId (fetchClient will add /api prefix and backend URL)
      console.log(`Fetching order details for order #${orderIdStr}`);
      const orderData = await fetchClient<OrderDetails>(`/admin/orders/${orderIdStr}`);
      
      console.log("Order data received:", orderData);
      
      if (!orderData) {
        throw new Error("No order data received from server");
      }
      
      if (!orderData.orderId) {
        throw new Error("Invalid order data: missing orderId");
      }
      
      setOrder(orderData);
    } catch (err) {
      console.error("Failed to fetch order details:", err);
      const errorMessage = err instanceof Error 
        ? err.message 
        : typeof err === 'string' 
          ? err 
          : "Failed to load order details. Please check your connection and try again.";
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  const statusConfig = order ? getStatusConfig(order.status) : null;
  const StatusIcon = statusConfig?.icon || Package;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Order Details #{orderId}</DialogTitle>
          <DialogDescription>
            Complete order information and status
          </DialogDescription>
        </DialogHeader>

        {loading && (
          <div className="space-y-4">
            <Skeleton className="h-32 w-full" />
            <Skeleton className="h-64 w-full" />
            <Skeleton className="h-32 w-full" />
          </div>
        )}

        {error && (
          <Card>
            <CardContent className="pt-6">
              <div className="text-center space-y-2">
                <p className="text-red-500 font-medium">{error}</p>
                <p className="text-sm text-muted-foreground">
                  Please check the browser console for more details.
                </p>
              </div>
            </CardContent>
          </Card>
        )}

        {order && !loading && (
          <div className="space-y-4">
            {/* Order Status */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-lg">Order Status</CardTitle>
                  {statusConfig && (
                    <Badge className={`${statusConfig.color} border`}>
                      <StatusIcon className="h-3 w-3 mr-1" />
                      {statusConfig.label}
                    </Badge>
                  )}
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <p className="text-sm font-medium text-muted-foreground mb-3">Change Status:</p>
                  <div className="flex flex-wrap gap-2">
                    <Button
                      variant={order.status === "unpaid" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("unpaid")}
                      disabled={updatingStatus || order.status === "unpaid"}
                    >
                      Unpaid
                    </Button>
                    <Button
                      variant={order.status === "confirming" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("confirming")}
                      disabled={updatingStatus || order.status === "confirming"}
                    >
                      Confirming
                    </Button>
                    <Button
                      variant={order.status === "acknowledged" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("acknowledged")}
                      disabled={updatingStatus || order.status === "acknowledged"}
                    >
                      Acknowledged
                    </Button>
                    <Button
                      variant={order.status === "paid" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("paid")}
                      disabled={updatingStatus || order.status === "paid"}
                    >
                      Paid
                    </Button>
                    <Button
                      variant={order.status === "shipped" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("shipped")}
                      disabled={updatingStatus || order.status === "shipped"}
                    >
                      Shipped
                    </Button>
                    <Button
                      variant={order.status === "completed" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("completed")}
                      disabled={updatingStatus || order.status === "completed"}
                    >
                      Completed
                    </Button>
                    <Button
                      variant={order.status === "cancelled" ? "default" : "outline"}
                      size="sm"
                      onClick={() => handleStatusChange("cancelled")}
                      disabled={updatingStatus || order.status === "cancelled"}
                      className="text-red-600 hover:text-red-700"
                    >
                      Cancelled
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Order Information */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Order Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center space-x-2">
                    <User className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm text-muted-foreground">Customer</p>
                      <p className="font-medium">{order.telegramBuyerId}</p>
                      {order.telegramUsername && (
                        <p className="text-xs text-muted-foreground">@{order.telegramUsername}</p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Calendar className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm text-muted-foreground">Order Date</p>
                      <p className="font-medium">{new Date(order.orderDate).toLocaleString()}</p>
                      {order.paidAt && (
                        <p className="text-xs text-muted-foreground">
                          Paid: {new Date(order.paidAt).toLocaleString()}
                        </p>
                      )}
                    </div>
                  </div>
                </div>

                {order.vendorId?.username && (
                  <div className="flex items-center space-x-2">
                    <Package className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm text-muted-foreground">Vendor</p>
                      <p className="font-medium">{order.vendorId.username}</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Products */}
            {order.products && order.products.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Products</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {order.products.map((product, index) => (
                      <div key={index} className="flex items-center justify-between border-b pb-3 last:border-0">
                        <div className="flex-1">
                          <p className="font-medium">{product.name || `Product ${index + 1}`}</p>
                          <p className="text-sm text-muted-foreground">
                            Quantity: {product.quantity} × {formatCurrency(product.pricePerUnit)}
                          </p>
                        </div>
                        <p className="font-semibold">{formatCurrency(product.totalItemPrice)}</p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Shipping & Pricing */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Pricing Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {order.subtotalBeforeDiscount !== undefined &&
                 order.subtotalBeforeDiscount !== null &&
                 typeof order.subtotalBeforeDiscount === 'number' && 
                 order.subtotalBeforeDiscount > 0 && 
                 formatCurrency(order.subtotalBeforeDiscount) ? (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Subtotal</span>
                    <span>{formatCurrency(order.subtotalBeforeDiscount)}</span>
                  </div>
                ) : null}
                {order.shippingMethod && 
                 order.shippingMethod.price !== undefined &&
                 order.shippingMethod.price !== null &&
                 typeof order.shippingMethod.price === 'number' && 
                 order.shippingMethod.price > 0 && 
                 formatCurrency(order.shippingMethod.price) ? (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground flex items-center">
                      <Truck className="h-3 w-3 mr-1" />
                      Shipping {order.shippingMethod.type || order.shippingMethod.name ? `(${order.shippingMethod.type || order.shippingMethod.name})` : ''}
                    </span>
                    <span>{formatCurrency(order.shippingMethod.price)}</span>
                  </div>
                ) : null}
                {order.discountAmount !== undefined &&
                 order.discountAmount !== null &&
                 typeof order.discountAmount === 'number' && 
                 order.discountAmount > 0 && 
                 formatCurrency(order.discountAmount) ? (
                  <div className="flex justify-between text-green-600">
                    <span>Discount</span>
                    <span>-{formatCurrency(order.discountAmount)}</span>
                  </div>
                ) : null}
                <div className="flex justify-between pt-2 border-t font-semibold text-lg">
                  <span className="flex items-center">
                    <DollarSign className="h-4 w-4 mr-1" />
                    Total
                  </span>
                  <span>{formatCurrency(order.totalPrice)}</span>
                </div>
                {order.cryptoTotal && (
                  <div className="text-sm text-muted-foreground pt-1">
                    Crypto: {order.cryptoTotal} LTC
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Shipping Address */}
            {order.pgpAddress && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <MapPin className="h-4 w-4 mr-2" />
                    Shipping Address
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm font-mono break-all">{order.pgpAddress}</p>
                </CardContent>
              </Card>
            )}

            {/* Crypto Payment Address */}
            {order.paymentAddress && order.paymentAddress !== "NO_PAYMENT_REQUIRED" && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <Wallet className="h-4 w-4 mr-2" />
                    Crypto Payment Address
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between gap-2">
                    <p className="text-sm font-mono break-all flex-1">{order.paymentAddress}</p>
                    <div className="flex gap-2 shrink-0">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => copyToClipboard(order.paymentAddress!, 'address')}
                      >
                        {copied === 'address' ? (
                          <>
                            <CheckCircle className="h-4 w-4 mr-1" />
                            Copied
                          </>
                        ) : (
                          <>
                            <Copy className="h-4 w-4 mr-1" />
                            Copy
                          </>
                        )}
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => window.open(`https://litecoinspace.org/address/${order.paymentAddress}`, '_blank')}
                      >
                        <ExternalLink className="h-4 w-4 mr-1" />
                        View on Explorer
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Transaction IDs */}
            {order.txid && Array.isArray(order.txid) && order.txid.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <Wallet className="h-4 w-4 mr-2" />
                    Transaction IDs
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {order.txid.map((tx, index) => (
                      <div key={index} className="flex items-center justify-between gap-2">
                        <p className="text-sm font-mono break-all flex-1">{tx}</p>
                        <div className="flex gap-2 shrink-0">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => copyToClipboard(tx, `tx-${index}`)}
                          >
                            {copied === `tx-${index}` ? (
                              <>
                                <CheckCircle className="h-4 w-4 mr-1" />
                                Copied
                              </>
                            ) : (
                              <>
                                <Copy className="h-4 w-4 mr-1" />
                                Copy
                              </>
                            )}
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => window.open(`https://litecoinspace.org/tx/${tx}`, '_blank')}
                          >
                            <ExternalLink className="h-4 w-4 mr-1" />
                            View
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Tracking */}
            {order.trackingNumber && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center">
                    <Truck className="h-4 w-4 mr-2" />
                    Tracking Information
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm font-mono">{order.trackingNumber}</p>
                </CardContent>
              </Card>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}