"use client";

import { useState, useEffect } from "react";
import { api, getImageUrl } from "@/lib/api";
import { Order } from "@/types";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { useSettings } from "@/context/SettingsContext";
import { Skeleton } from "@/components/ui/Skeleton";

import { useAuth } from "@/context/AuthContext";
import { Loader2 } from "lucide-react";

export default function OrdersPage() {
  const { user, isLoading: authLoading } = useAuth();
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const { currency, locale, formatMoney } = useSettings();
  const router = useRouter();
  const [trackingOrderId, setTrackingOrderId] = useState<number | null>(null);
  const [statusFilter, setStatusFilter] = useState<string>("all");

  useEffect(() => {
    if (!authLoading && !user) {
      router.push("/login");
      return;
    }

    const fetchData = async () => {
      try {
        const response = await api.getOrders();
        if (response.data) setOrders(response.data);
      } catch (err) {
        console.error("Failed to fetch orders:", err);
      } finally {
        setLoading(false);
      }
    };

    if (user) {
      fetchData();
    }
  }, [user, authLoading, router]);

  const [expandedOrder, setExpandedOrder] = useState<number | null>(null);

  const toggleOrder = (orderId: number) => {
    setExpandedOrder(expandedOrder === orderId ? null : orderId);
  };

  const handleTrackOrder = (orderId: number) => {
    setTrackingOrderId(orderId);
    // Short delay to allow the spinner to render for professional feedback
    setTimeout(() => {
      router.push(`/orders/${orderId}`);
    }, 150);
  };

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'pending': return 'bg-amber-50 text-amber-600 border-amber-100';
      case 'processing': return 'bg-blue-50 text-blue-600 border-blue-100';
      case 'shipped': return 'bg-indigo-50 text-indigo-600 border-indigo-100';
      case 'delivered': return 'bg-emerald-50 text-emerald-600 border-emerald-100';
      case 'cancelled': return 'bg-rose-50 text-rose-600 border-rose-100';
      default: return 'bg-zinc-50 text-zinc-600 border-zinc-100';
    }
  };

  const filteredOrders = statusFilter === "all"
    ? orders
    : orders.filter(order => (order.status || '').toLowerCase() === statusFilter);

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      <main className="container mx-auto px-4 py-8 lg:py-12">
        <div className="max-w-3xl mx-auto">
          <div className="flex flex-col gap-4 md:gap-6 mb-10">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl md:text-3xl font-black text-zinc-900 tracking-tight mb-1">My Orders</h1>
                <p className="text-xs md:text-sm text-zinc-400 font-medium">Track and manage your recent orders</p>
              </div>
              <div className="bg-zinc-50 px-4 py-2 rounded-2xl border border-zinc-100">
                <span className="text-[10px] md:text-xs text-zinc-400 font-black uppercase tracking-widest">
                  {orders.length} Orders
                </span>
              </div>
            </div>

            {/* Status Filters */}
            {orders.length > 0 && (
              <div className="inline-flex flex-wrap gap-2 bg-zinc-50 p-1.5 rounded-2xl border border-zinc-100">
                {[
                  { key: "all", label: "All" },
                  { key: "pending", label: "Pending" },
                  { key: "processing", label: "Processing" },
                  { key: "shipped", label: "Shipped" },
                  { key: "delivered", label: "Delivered" },
                  { key: "cancelled", label: "Cancelled" },
                ].map((tab) => {
                  const isActive = statusFilter === tab.key;
                  const count = tab.key === "all"
                    ? orders.length
                    : orders.filter(o => (o.status || '').toLowerCase() === tab.key).length;
                  if (count === 0 && tab.key !== "all") return null;
                  return (
                    <button
                      key={tab.key}
                      type="button"
                      onClick={() => setStatusFilter(tab.key)}
                      className={`px-3 md:px-4 py-1.5 rounded-2xl text-[10px] md:text-[11px] font-black uppercase tracking-[0.18em] transition-all ${
                        isActive
                          ? "bg-zinc-900 text-white shadow-sm"
                          : "bg-white text-zinc-500 hover:bg-zinc-100"
                      }`}
                    >
                      {tab.label}
                      <span className="ml-1 text-[9px] opacity-70">({count})</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          {loading ? (
            <div className="space-y-6">
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-white p-6 rounded-3xl border border-zinc-100">
                  <div className="flex justify-between items-start mb-6">
                    <div className="space-y-3">
                      <Skeleton className="h-5 w-32 rounded-lg" />
                      <Skeleton className="h-3 w-48 rounded-lg" />
                    </div>
                    <Skeleton className="h-8 w-24 rounded-full" />
                  </div>
                  <div className="pt-6 border-t border-zinc-50 flex justify-between items-center">
                    <Skeleton className="h-6 w-24 rounded-lg" />
                    <Skeleton className="h-4 w-20 rounded-lg" />
                  </div>
                </div>
              ))}
            </div>
          ) : orders.length === 0 ? (
            <div className="py-20 text-center">
              <div className="w-20 h-20 bg-zinc-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg className="w-10 h-10 text-zinc-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-zinc-900 mb-2">No orders yet</h3>
              <p className="text-zinc-500 mb-8 max-w-xs mx-auto">You haven't placed any orders. Start exploring our products!</p>
              <button 
                onClick={() => router.push("/products")}
                className="bg-[#2b9d10] text-white px-10 py-4 rounded-2xl font-black text-xs uppercase tracking-widest hover:shadow-lg hover:shadow-green-500/20 transition-all"
              >
                Start Shopping
              </button>
            </div>
          ) : (
            <div className="space-y-6">
              {filteredOrders.map((order) => (
                <div 
                  key={order.id} 
                  className={`bg-white rounded-3xl border transition-all duration-300 overflow-hidden ${
                    expandedOrder === order.id 
                    ? 'border-[#2b9d10]/20 shadow-xl shadow-green-500/5' 
                    : 'border-zinc-100 hover:border-zinc-200 shadow-sm'
                  }`}
                >
                  <div className="p-6">
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                      <div className="flex items-center gap-4">
                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center font-black text-xs transition-colors ${
                          expandedOrder === order.id ? 'bg-green-50 text-[#2b9d10]' : 'bg-zinc-50 text-zinc-400'
                        }`}>
                          #{(order.id ?? 0).toString().slice(-2)}
                        </div>
                        <div>
                          <div className="text-sm font-black text-zinc-900 mb-1">Order #{order.order_number || order.id}</div>
                          <div className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider">
                            {order.created_at
                              ? new Date(order.created_at).toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' })
                              : ""}
                          </div>
                        </div>
                      </div>
                      <div className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest border transition-colors ${getStatusColor(order.status || "")}`}>
                        {order.status || ""}
                      </div>
                    </div>

                    <div className="flex items-center justify-between pt-6 border-t border-zinc-50">
                      <div className="flex flex-col">
                        <span className="text-[10px] text-zinc-400 font-black uppercase tracking-widest mb-1">Total Amount</span>
                        <span className="text-xl font-black text-zinc-900">
                          {formatMoney(parseFloat((order.total ?? 0).toString()))}
                        </span>
                      </div>
                      <div className="flex items-center gap-3">
                        <button
                          onClick={() => {
                            if (order.id != null) {
                              handleTrackOrder(order.id);
                            }
                          }}
                          disabled={order.id == null || trackingOrderId === order.id}
                          aria-busy={trackingOrderId === order.id}
                          className={`h-11 px-6 rounded-2xl font-black text-[10px] uppercase tracking-widest flex items-center gap-2 transition-all ${
                            trackingOrderId === order.id
                              ? "bg-emerald-700 text-white cursor-not-allowed opacity-90"
                              : "bg-emerald-600 text-white shadow-lg shadow-emerald-500/20 hover:bg-emerald-700"
                          }`}
                        >
                          {trackingOrderId === order.id ? (
                            <>
                              <Loader2 className="w-4 h-4 animate-spin" />
                              Tracking...
                            </>
                          ) : (
                            <>Track Order</>
                          )}
                        </button>
                        <button 
                          onClick={() => {
                            if (order.id != null) {
                              toggleOrder(order.id);
                            }
                          }}
                          className={`h-11 px-6 rounded-2xl font-black text-[10px] uppercase tracking-widest flex items-center gap-2 transition-all ${
                            expandedOrder === order.id 
                            ? 'bg-zinc-100 text-zinc-900' 
                            : 'bg-zinc-50 text-zinc-600 hover:bg-zinc-100'
                          }`}
                        >
                          {expandedOrder === order.id ? 'Close' : 'Quick View'}
                          <svg 
                            className={`w-3.5 h-3.5 transition-transform duration-300 ${expandedOrder === order.id ? 'rotate-180' : ''}`} 
                            fill="none" 
                            stroke="currentColor" 
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 9l-7 7-7-7" />
                          </svg>
                        </button>
                      </div>
                    </div>

                    {/* Order Items Section */}
                    {expandedOrder === order.id && (
                      <div className="mt-8 pt-8 border-t border-zinc-50 animate-in fade-in slide-in-from-top-4 duration-300">
                        <h4 className="text-[10px] text-zinc-400 font-black uppercase tracking-widest mb-4">Order Items</h4>
                        <div className="space-y-3">
                          {order.items?.map((item, idx) => (
                            <div key={idx} className="flex items-center justify-between p-3 rounded-2xl bg-zinc-50/50 border border-zinc-100">
                              <div className="flex items-center gap-4">
                                <div className="w-10 h-10 rounded-xl bg-white border border-zinc-100 p-1 overflow-hidden">
                                  <img 
                                    src={getImageUrl(item.product?.image || item.product?.imageUrl)} 
                                    alt={item.product?.name || "Product"} 
                                    className="w-full h-full object-contain"
                                  />
                                </div>
                                <div>
                                  <div className="text-xs font-bold text-zinc-900">{item.product?.name || `Product ID: ${item.product_id}`}</div>
                                  <div className="text-[10px] text-zinc-400 font-bold">Qty: {item.quantity} × {formatMoney(parseFloat((item.price || 0).toString()))}</div>
                                </div>
                              </div>
                              <div className="text-xs font-black text-zinc-900">
                                {formatMoney(((item.quantity || 0) * (item.price || 0)))}
                              </div>
                            </div>
                          ))}
                        </div>
                        
                        {/* Shipping Info */}
                        <div className="mt-6 p-4 rounded-2xl border border-zinc-100 bg-zinc-50/30">
                          <h4 className="text-[10px] text-zinc-400 font-black uppercase tracking-widest mb-3">Shipping Address</h4>
                          <div className="text-[11px] leading-relaxed text-zinc-600 font-medium">
                            <p className="font-bold text-zinc-900 mb-1">{order.shipping_address.first_name} {order.shipping_address.last_name}</p>
                            <p>{order.shipping_address.address}</p>
                            <p>{order.shipping_address.city}, {order.shipping_address.zip}</p>
                            <p className="mt-2 text-zinc-400">Phone: {order.shipping_address.phone}</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  );
}