"use client";

import React, { useEffect, useState } from "react";
import Navbar from "@/components/shared/Navbar";
import Footer from "@/components/shared/Footer";
import { Pagination } from "@/components/ui/pagination";
import { getClientProfileAction } from "@/actions/auth.actions";
import {
  getClientOngoingOrdersAction,
  getClientDeliveredOrdersAction,
  getClientCancelledOrdersAction,
  getClientOrdersAnalyticsAction,
} from "@/actions/order/order.action";
import { useRouter } from "next/navigation";
import { ShoppingBag } from "lucide-react";
import { toast } from "sonner";
import type { Order, OrderAnalytics } from "@/types";
import { OrdersAnalytics } from "@/components/sections/orders/OrdersAnalytics";
import { OrdersTabs } from "@/components/sections/orders/OrdersTabs";
import { OrderCard } from "@/components/sections/orders/OrderCard";
import { OrderDetailsModal } from "@/components/sections/orders/OrderDetailsModal";
import OrderCardSkeleton from "@/components/skeletons/OrderCardSkeleton";

const PAGE_SIZE = 5;

type TabType = "ongoing" | "delivered" | "cancelled";

export default function MyOrdersPage() {
  const [loading, setLoading] = useState(true);
  const [loadingList, setLoadingList] = useState(false);
  const [user, setUser] = useState<{ name: string; mobile_number: string; email?: string | null } | null>(null);
  const [orders, setOrders] = useState<Order[]>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [activeTab, setActiveTab] = useState<TabType>("ongoing");

  const [analytics, setAnalytics] = useState<OrderAnalytics>({ ongoing: 0, delivered: 0, cancelled: 0, total: 0 });
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [detailsOpen, setDetailsOpen] = useState(false);

  const router = useRouter();

  // Helper to call correct action based on tab
  const fetchOrdersByTab = async (tab: TabType, mobileNumber: string, page: number) => {
    if (tab === "ongoing") {
      return getClientOngoingOrdersAction(mobileNumber, page, PAGE_SIZE);
    } else if (tab === "delivered") {
      return getClientDeliveredOrdersAction(mobileNumber, page, PAGE_SIZE);
    } else {
      return getClientCancelledOrdersAction(mobileNumber, page, PAGE_SIZE);
    }
  };

  // Initialize page, fetch profile and analytics once
  useEffect(() => {
    const initPage = async () => {
      setLoading(true);
      const userRes = await getClientProfileAction();
      if (!userRes.success || !userRes.data) {
        toast.error("Please login to view your orders.");
        router.push("/login");
        return;
      }

      const customer = userRes.data;
      setUser(customer);

      // Determine initial tab from URL search parameters using window.location
      let initialTab: TabType = "ongoing";
      if (typeof window !== "undefined") {
        const params = new URLSearchParams(window.location.search);
        const tabParam = params.get("tab") as TabType;
        if (tabParam === "ongoing" || tabParam === "delivered" || tabParam === "cancelled") {
          initialTab = tabParam;
        }
      }
      setActiveTab(initialTab);

      // Fetch analytics and initial orders in parallel
      const [analyticsRes, ordersRes] = await Promise.all([
        getClientOrdersAnalyticsAction(customer.mobile_number),
        fetchOrdersByTab(initialTab, customer.mobile_number, 1),
      ]);

      if (analyticsRes.success && analyticsRes.data) {
        setAnalytics(analyticsRes.data);
      }

      if (ordersRes.success && ordersRes.data) {
        setOrders(ordersRes.data.data || []);
        setTotalCount(ordersRes.data.total || 0);
      } else {
        toast.error(`Failed to load your ${initialTab} orders.`);
      }
      setLoading(false);
    };

    initPage();
  }, [router]);

  // Switch tab instantly (Client-side state change + fetch list only)
  const handleTabChange = async (tab: TabType) => {
    if (!user) return;
    setLoadingList(true);
    setActiveTab(tab);
    setCurrentPage(1);

    // Update URL query parameter silently without full Next.js page navigation trigger
    const newUrl = `${window.location.pathname}?tab=${tab}`;
    window.history.pushState(null, "", newUrl);

    try {
      const ordersRes = await fetchOrdersByTab(tab, user.mobile_number, 1);
      if (ordersRes.success && ordersRes.data) {
        setOrders(ordersRes.data.data || []);
        setTotalCount(ordersRes.data.total || 0);
      } else {
        toast.error(`Failed to load your ${tab} orders.`);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoadingList(false);
    }
  };

  const handlePageChange = async (newPage: number) => {
    if (!user) return;
    setLoadingList(true);
    setCurrentPage(newPage);

    const ordersRes = await fetchOrdersByTab(activeTab, user.mobile_number, newPage);
    if (ordersRes.success && ordersRes.data) {
      setOrders(ordersRes.data.data || []);
      setTotalCount(ordersRes.data.total || 0);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
    setLoadingList(false);
  };

  const handleShowDetails = (order: Order) => {
    setSelectedOrder(order);
    setDetailsOpen(true);
  };

  const getStatusBadge = (status: string) => {
    const normalized = status.toLowerCase();
    switch (normalized) {
      case "delivered":
        return "bg-emerald-50 text-emerald-700 border-emerald-200";
      case "cancelled":
        return "bg-rose-50 text-rose-700 border-rose-200";
      case "returned":
        return "bg-zinc-100 text-zinc-700 border-zinc-200";
      case "pending":
        return "bg-amber-50 text-amber-700 border-amber-200";
      case "confirmed":
        return "bg-blue-50 text-blue-700 border-blue-200";
      case "processing":
        return "bg-indigo-50 text-indigo-700 border-indigo-200";
      case "dispatched":
        return "bg-purple-50 text-purple-700 border-purple-200";
      default:
        return "bg-zinc-50 text-zinc-650 border-zinc-200";
    }
  };

  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));

  return (
    <>
      <Navbar />
      <div className="min-h-screen bg-zinc-50/50 text-zinc-900 pt-24 pb-16 px-4 md:px-6 flex flex-col justify-center items-center">
        <div className="container mx-auto space-y-8 w-full">
          {/* Header */}
          <div className="text-center">
            <span className="text-xs uppercase tracking-widest font-black text-brand-accent mb-2 block">
              Order History
            </span>
            <h1 className="text-3xl md:text-5xl font-black text-zinc-900 uppercase tracking-tight mb-2">
              My Orders
            </h1>
            <p className="text-zinc-550 text-xs md:text-sm font-medium max-w-md mx-auto">
              Track active shipments, view past purchase invoices, and monitor delivery status.
            </p>
          </div>

          {/* Mini Analytics Widgets */}
          <OrdersAnalytics analytics={analytics} loading={loading} />

          {/* Tab Selection */}
          <OrdersTabs
            activeTab={activeTab}
            analytics={analytics}
            loading={loading}
            onChangeTab={handleTabChange}
          />

          {/* Orders Listing */}
          {loading || loadingList ? (
            <OrderCardSkeleton count={3} />
          ) : orders.length === 0 ? (
            <div className="bg-white border border-zinc-200 rounded-2xl p-12 text-center shadow-xs">
              <ShoppingBag className="w-12 h-12 text-zinc-300 mx-auto mb-4" />
              <h3 className="font-extrabold text-zinc-900 text-lg uppercase tracking-wider">
                No {activeTab} Orders
              </h3>
              <p className="text-zinc-500 text-xs mt-1">You don&apos;t have any {activeTab} deliveries currently.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {orders.map((order) => (
                <OrderCard
                  key={order.id}
                  order={order}
                  onShowDetails={handleShowDetails}
                  getStatusBadge={getStatusBadge}
                />
              ))}

              {/* Pagination Controls */}
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                onPageChange={handlePageChange}
              />
            </div>
          )}

          {/* Details Modal */}
          {detailsOpen && selectedOrder && (
            <OrderDetailsModal
              selectedOrder={selectedOrder}
              user={user}
              onClose={() => setDetailsOpen(false)}
              getStatusBadge={getStatusBadge}
            />
          )}
        </div>
      </div>
      <Footer />
    </>
  );
}