'use client';

import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { apiRequest } from '@/lib/api';
import { useAuth } from '@/context/auth-context';
import Link from 'next/link';
import {
  ShoppingBag,
  ExternalLink,
  ChevronRight,
  Phone,
  User,
  MapPin,
  X,
  CreditCard,
  Download,
  Navigation,
  Truck,
} from 'lucide-react';

// Dynamically import map to avoid SSR issues (Leaflet uses window)
const DeliveryMap = dynamic(() => import('@/components/dashboard/DeliveryMap'), {
  ssr: false,
  loading: () => (
    <div className="h-[200px] rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-xs text-gray-500 animate-pulse">
      Loading map...
    </div>
  ),
});

const DirectionsModal = dynamic(() => import('@/components/dashboard/DirectionsModal'), {
  ssr: false,
});

interface OrderItem {
  id: string;
  productName: string;
  quantity: number;
  unitPrice: number;
  lineTotal: number;
  externalProductId: string | null;
}

interface Payment {
  id: string;
  gateway: string;
  paymentReference: string;
  gatewayReference: string | null;
  amount: number;
  status: string;
  paymentLink: string | null;
  createdAt: string;
}

interface Customer {
  id: string;
  name: string | null;
  whatsappNumber: string;
}

interface Order {
  id: string;
  orderNumber: string;
  status: string;
  paymentStatus: string;
  totalAmount: number;
  currency: string;
  customerPhone: string;
  customerName: string;
  deliveryMethod: string | null;
  deliveryAddress: string | null;
  deliveryLat: number | null;
  deliveryLng: number | null;
  externalOrderId: string | null;
  sourceSystem: string;
  sourceChannel?: string;
  createdAt: string;
  customer: Customer;
  payments: Payment[];
  items: OrderItem[];
}

export default function OrdersPage() {
  const { user } = useAuth();
  const [orders, setOrders] = useState<Order[]>([]);
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [updating, setUpdating] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: 'info' | 'success' } | null>(null);
  const [directionsOpen, setDirectionsOpen] = useState(false);

  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => {
        setToast(null);
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  useEffect(() => {
    if (!user || user.subscriptionStatus === 'UNSUBSCRIBED' || user.subscriptionStatus === 'EXPIRED') {
      setLoading(false);
      return;
    }

    loadOrders();

    const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
    if (!token) return;

    const getApiUrl = () => {
      if (typeof window !== 'undefined') {
        const { hostname } = window.location;
        return `http://${hostname}:3001`;
      }
      return 'http://localhost:3001';
    };
    const API_URL = process.env.NEXT_PUBLIC_API_URL || getApiUrl();
    const eventSourceUrl = `${API_URL}/api/orders/events?token=${token}`;

    const eventSource = new EventSource(eventSourceUrl);

    eventSource.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        const message = data.message;
        if (message) {
          setToast({ message, type: data.type === 'order_created' ? 'success' : 'info' });
          try {
            const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-120.wav');
            audio.volume = 0.3;
            audio.play();
          } catch (audioErr) {
            console.warn('Chime playback failed:', audioErr);
          }
          loadOrders();
        }
      } catch (err) {
        console.error('Error parsing SSE message:', err);
      }
    };

    eventSource.onerror = (err) => {
      console.warn('SSE EventSource error:', err);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, [user?.id, user?.subscriptionStatus]);

  async function loadOrders() {
    if (!user || user.subscriptionStatus === 'UNSUBSCRIBED' || user.subscriptionStatus === 'EXPIRED') {
      setLoading(false);
      return;
    }
    try {
      const data = await apiRequest('api/orders');
      setOrders(data);
      if (selectedOrder) {
        // Refresh selected order details if open
        const refreshed = data.find((o: Order) => o.id === selectedOrder.id);
        if (refreshed) {
          setSelectedOrder(refreshed);
        }
      }
    } catch (err) {
      console.error('Failed to load orders:', err);
    } finally {
      setLoading(false);
    }
  }

  const handleUpdateStatus = async (orderId: string, newStatus: string) => {
    setUpdating(true);
    try {
      await apiRequest(`api/orders/${orderId}/status`, 'PATCH', { status: newStatus });
      await loadOrders();
    } catch (err: any) {
      alert(`Failed to update status: ${err.message}`);
    } finally {
      setUpdating(false);
    }
  };

  const handleExportReport = () => {
    if (!orders || orders.length === 0) {
      alert('No orders available to export.');
      return;
    }
    
    // Define headers
    const headers = [
      'Order Number',
      'Date',
      'Customer Name',
      'Phone Number',
      'Total Amount',
      'Payment Status',
      'Order Status',
      'Channel',
      'Items Count'
    ];
    
    // Map data rows safely
    const rows = orders.map(order => {
      const amount = (Number(order.totalAmount) || 0).toFixed(2);
      const rawPhone = order.customerPhone || order.customer?.whatsappNumber || '';
      const cleanPhone = rawPhone ? (rawPhone.trim().startsWith('+') ? rawPhone.trim() : `+${rawPhone.trim()}`) : 'N/A';
      // Leading tab '\t' forces Excel to render phone numbers as raw text rather than converting to scientific notation (e.g. 2.63789E+11)
      const phoneCell = cleanPhone !== 'N/A' ? `\t${cleanPhone}` : 'N/A';
      const orderNumCell = order.orderNumber ? `\t${order.orderNumber}` : 'N/A';
      const itemsCount = Array.isArray(order.items) 
        ? order.items.reduce((acc, item) => acc + (Number(item?.quantity) || 0), 0) 
        : 0;
      const orderDate = order.createdAt ? new Date(order.createdAt).toLocaleDateString() : 'N/A';

      return [
        orderNumCell,
        orderDate,
        order.customerName || order.customer?.name || 'Guest Customer',
        phoneCell,
        amount,
        order.paymentStatus || 'N/A',
        order.status || 'N/A',
        order.sourceChannel || 'site',
        itemsCount
      ];
    });
    
    // Construct CSV content
    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(val => `"${String(val ?? '').replace(/"/g, '""')}"`).join(','))
    ].join('\n');
    
    // Download trigger with UTF-8 BOM (\uFEFF) for Excel compatibility
    const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', `order_report_${new Date().toISOString().split('T')[0]}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="space-y-8 relative font-sans">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold tracking-tight text-white Outfit">
            Orders & Payments
          </h1>
          <p className="text-sm text-gray-400 mt-1">
            Monitor incoming WhatsApp purchases, payment gateway links, and WooCommerce mappings
          </p>
        </div>
        <button
          onClick={handleExportReport}
          className="flex items-center gap-2 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-lg text-xs transition-all cursor-pointer shadow-md shadow-emerald-500/10 self-start sm:self-center"
        >
          <Download className="h-4 w-4" />
          <span>Export Report</span>
        </button>
      </div>

      {loading ? (
        <div className="flex h-64 items-center justify-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-emerald-500 border-t-transparent"></div>
        </div>
      ) : orders.length === 0 ? (
        <div className="glass-panel rounded-2xl p-12 text-center text-gray-500 space-y-3">
          <ShoppingBag className="h-12 w-12 text-gray-600 mx-auto" />
          <h3 className="font-bold text-white text-base">No Orders Placed Yet</h3>
          <p className="text-sm max-w-sm mx-auto leading-relaxed">
            There are no purchases inside the database. Place a test order by interacting with the shopping assistant on WhatsApp!
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
          {/* Orders list */}
          <div className="lg:col-span-2 space-y-4">
            <div className="glass-panel rounded-2xl overflow-hidden">
              <div className="overflow-x-auto scrollbar-thin">
                <table className="w-full min-w-[750px] text-left text-sm text-gray-400">
                  <thead>
                    <tr className="border-b border-white/5 text-[10px] uppercase tracking-wider font-semibold text-gray-500">
                      <th className="p-4 text-left">Order Details</th>
                      <th className="p-4 text-left">Customer</th>
                      <th className="p-4 text-left">Total</th>
                      <th className="p-4 text-left">Payment</th>
                      <th className="p-4 text-left">Status</th>
                      <th className="p-4"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {orders.map((order) => {
                      const isActive = selectedOrder?.id === order.id;
                      return (
                        <tr
                          key={order.id}
                          onClick={() => setSelectedOrder(order)}
                          className={`border-b border-white/5 hover:bg-white/2 transition-all cursor-pointer ${
                            isActive ? 'bg-white/3 text-white' : ''
                          }`}
                        >
                          <td className="p-4">
                            <div className="flex items-center gap-2">
                              <p className="font-bold text-white text-sm">{order.orderNumber}</p>
                              <span className={`px-1.5 py-0.5 rounded text-[8px] font-bold uppercase ${
                                order.sourceChannel === 'whatsapp'
                                  ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                                  : 'bg-[#efeae2] text-[#008069] border border-[#008069]/20'
                              }`}>
                                {order.sourceChannel === 'whatsapp' ? 'Chat' : 'Site'}
                              </span>
                            </div>
                            <span className="text-[10px] text-gray-500 block mt-0.5">
                              {new Date(order.createdAt).toLocaleDateString()} at {new Date(order.createdAt).toLocaleTimeString()}
                            </span>
                          </td>
                          <td className="p-4">
                            <p className="text-sm font-medium text-white truncate max-w-[120px]">
                              {order.customerName}
                            </p>
                            <span className="text-[10px] text-gray-500 block font-mono">{order.customerPhone}</span>
                          </td>
                          <td className="p-4 font-semibold text-white">
                            ${order.totalAmount.toFixed(2)}
                          </td>
                          <td className="p-4">
                            <span className={`px-2 py-0.5 rounded-md text-[9px] font-bold uppercase ${
                              order.paymentStatus === 'PAID'
                                ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                                : order.paymentStatus === 'FAILED'
                                ? 'bg-red-500/10 text-red-400 border border-red-500/20'
                                : 'bg-amber-500/10 text-amber-400 border border-amber-500/20'
                            }`}>
                              {order.paymentStatus}
                            </span>
                          </td>
                          <td className="p-4">
                            <span className={`px-2 py-0.5 rounded-md text-[9px] font-bold uppercase ${
                              order.status === 'COMPLETED' || order.status === 'PROCESSING'
                                ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                                : order.status === 'CANCELLED' || order.status === 'FAILED'
                                ? 'bg-red-500/10 text-red-400 border border-red-500/20'
                                : 'bg-amber-500/10 text-amber-400 border border-amber-500/20'
                            }`}>
                              {order.status}
                            </span>
                          </td>
                          <td className="p-4 text-right">
                            <ChevronRight className="h-5 w-5 text-gray-500 inline" />
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          {/* Selected Order Detail Sidebar / Card */}
          <div className="space-y-6">
            {selectedOrder ? (
              <div className="glass-panel rounded-2xl p-6 space-y-6 relative overflow-hidden animate-in fade-in slide-in-from-right duration-200">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-extrabold text-white text-lg font-sans">
                        {selectedOrder.orderNumber}
                      </h3>
                      <span className={`px-1.5 py-0.5 rounded text-[8px] font-bold uppercase ${
                        selectedOrder.sourceChannel === 'whatsapp'
                          ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                          : 'bg-[#efeae2] text-[#008069] border border-[#008069]/20'
                      }`}>
                        {selectedOrder.sourceChannel === 'whatsapp' ? 'Chat' : 'Site'}
                      </span>
                    </div>
                  </div>
                  <button
                    onClick={() => setSelectedOrder(null)}
                    className="h-7 w-7 rounded-lg hover:bg-white/5 flex items-center justify-center text-gray-400 hover:text-white transition-colors cursor-pointer"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>



                {/* Customer Info */}
                <div className="space-y-3">
                  <h4 className="font-bold text-xs uppercase tracking-wider text-gray-500">Customer Info</h4>
                  <div className="space-y-2 text-sm text-gray-300">
                    <div className="flex items-center gap-2">
                      <User className="h-4 w-4 text-gray-500" />
                      <span>{selectedOrder.customerName}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Phone className="h-4 w-4 text-gray-500" />
                      <span className="font-mono text-xs">{selectedOrder.customerPhone}</span>
                    </div>
                    {selectedOrder.deliveryAddress && (
                      <div className="flex items-start gap-2">
                        <MapPin className="h-4 w-4 text-gray-500 shrink-0 mt-0.5" />
                        <span className="text-xs leading-relaxed">
                          Method: <strong>{selectedOrder.deliveryMethod === 'delivery' ? 'Home Delivery' : 'Store Pickup'}</strong>
                        </span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Redirect Button to Live Delivery Hub */}
                {selectedOrder.deliveryMethod === 'delivery' && (
                  <div className="space-y-2 pt-1">
                    <h4 className="font-bold text-xs uppercase tracking-wider text-gray-500 flex items-center gap-1.5">
                      <MapPin className="h-3 w-3 text-emerald-400" />
                      Delivery Location
                    </h4>
                    <Link
                      href={`/dashboard/deliveries?orderId=${selectedOrder.id}`}
                      className="w-full flex items-center justify-center gap-3 py-3.5 px-4 bg-[#008069] hover:bg-[#006a55] text-white font-bold text-sm tracking-wide rounded-none transition-colors cursor-pointer shadow-md active:scale-[0.99]"
                    >
                      <Truck className="h-5 w-5 text-white stroke-[2.2]" />
                      <span>Track in Live Delivery Hub</span>
                    </Link>
                  </div>
                )}

                {/* Items Summary */}
                <div className="space-y-3">
                  <h4 className="font-bold text-xs uppercase tracking-wider text-gray-500">Line Items</h4>
                  <div className="space-y-3 bg-slate-50 dark:bg-black/15 p-3.5 rounded-xl border border-slate-100 dark:border-white/5 max-h-[160px] overflow-y-auto pr-1.5">
                    {selectedOrder.items.map((item) => (
                      <div key={item.id} className="flex justify-between text-xs items-start">
                        <div className="space-y-0.5 max-w-[170px]">
                          <p className="font-medium text-slate-800 dark:text-white leading-snug">{item.productName}</p>
                          <p className="text-[10px] text-slate-500 dark:text-gray-500">
                            {item.quantity} x ${item.unitPrice.toFixed(2)}
                          </p>
                        </div>
                        <span className="font-semibold text-slate-800 dark:text-white font-mono">
                          ${item.lineTotal.toFixed(2)}
                        </span>
                      </div>
                    ))}
                  </div>
                  <div className="flex justify-between items-center text-sm font-bold border-t border-slate-100 dark:border-white/5 pt-3">
                    <span className="text-slate-500 dark:text-gray-400">Total Invoice</span>
                    <span className="text-slate-800 dark:text-white font-mono text-base font-extrabold">${selectedOrder.totalAmount.toFixed(2)}</span>
                  </div>
                </div>



                {/* Manually Update Order Status */}
                <div className="space-y-3 border-t border-white/5 pt-4">
                  <label className="block text-[10px] font-semibold uppercase tracking-wider text-gray-500">Update Order State</label>
                  <div className="flex gap-2">
                    <select
                      value={selectedOrder.status}
                      disabled={updating}
                      onChange={(e) => handleUpdateStatus(selectedOrder.id, e.target.value)}
                      className="flex-1 glass-input bg-[#0f111a] text-xs px-3 py-2 border border-white/5 rounded-lg outline-none"
                    >
                      <option value="PENDING">Pending Approval</option>
                      <option value="PROCESSING">Processing</option>
                      <option value="COMPLETED">Completed</option>
                      <option value="CANCELLED">Cancelled</option>
                    </select>
                  </div>
                </div>
              </div>
            ) : (
              <div className="glass-panel rounded-2xl p-6 text-center text-gray-500 text-sm py-12">
                Click any order on the list to load purchase details, WooCommerce integration mapping, and payment reference links.
              </div>
            )}
          </div>
        </div>
      )}

      {toast && (
        <div className="fixed bottom-6 right-6 z-50 glass-panel bg-[#1a231e]/90 rounded-xl px-4 py-3 shadow-2xl flex items-center gap-3 border border-emerald-500/30 animate-pulse duration-300">
          <div className={`h-2 w-2 rounded-full ${toast.type === 'success' ? 'bg-emerald-500' : 'bg-blue-500'} animate-ping`} />
          <span className="text-xs font-semibold text-white">{toast.message}</span>
          <button 
            type="button" 
            onClick={() => setToast(null)}
            className="text-gray-400 hover:text-white transition-colors"
          >
            <X className="h-3 w-3" />
          </button>
        </div>
      )}
      {/* Directions Modal */}
      {directionsOpen && selectedOrder && selectedOrder.deliveryLat != null && selectedOrder.deliveryLng != null && (
        <DirectionsModal
          destLat={selectedOrder.deliveryLat}
          destLng={selectedOrder.deliveryLng}
          address={selectedOrder.deliveryAddress || `${selectedOrder.deliveryLat}, ${selectedOrder.deliveryLng}`}
          orderNumber={selectedOrder.orderNumber}
          onClose={() => setDirectionsOpen(false)}
        />
      )}
    </div>
  );
}