"use client";

import { useEffect, useState } from "react";
import api from "@/api/axios";
import OrderTracking from "@/components/OrderTracking";
import AppLoader from "@/components/Loading";

interface OrderItem {
  id: number;
  price: string;
  qty: number;
  image: string;
}

interface Order {
  id: number;
  order_number: string;
  original_price: string;
  tracking_status: string;
  discount: string | null;
  total_after_discount: string;
  currency: {
    id: number;
    name: string;
    symbol: string;
    main_symbol: string;
  };
  order_date: string;
  status: string;
  items: OrderItem[];
}

const SaudiRiyalIcon = ({ size = 15 }: { size?: number }) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="inline-block"
    >
      <path d="m20 19.5-5.5 1.2" />
      <path d="M14.5 4v11.22a1 1 0 0 0 1.242.97L20 15.2" />
      <path d="m2.978 19.351 5.549-1.363A2 2 0 0 0 10 16V2" />
      <path d="M20 10 4 13.5" />
    </svg>
);

const CurrencySymbol = ({ currency }: { currency?: Order["currency"] }) => {
  if (currency?.main_symbol === "SAR") {
    return <SaudiRiyalIcon />;
  }

  return <span>{currency?.symbol}</span>;
};

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchOrders();
  }, []);

  const fetchOrders = async () => {
    try {
      const res = await api.get("/myorder");
      if (res.data.success) {
        setOrders(res.data.data);
      }
    } catch (error) {
      console.log("Error loading orders:", error);
    } finally {
      setLoading(false);
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "text-orange-500";
      case "completed":
        return "text-green-600";
      case "canceled":
        return "text-red-500";
      default:
        return "text-gray-600";
    }
  };

  return (
    <div className="w-full min-h-screen py-8 px-4 rounded-[27px] flex justify-center mt-[100px]">
      <span className="absolute top-0 left-0 w-full h-1 bg-gradient-to-b from-black/6 to-transparent"></span>
      <div className="w-full max-w-3xl">
        {loading ? (
          <AppLoader variant="card" />
        ) : orders.length === 0 ? (
          <div className="flex flex-col items-center text-center py-10">
            <img
              src="/images/order.svg"
              alt="no-orders"
              className="w-40 h-40 mb-5"
            />

            <h2 className="text-primary text-lg font-semibold">
              يبدو أنك لم تقم بأي طلبات بعد
            </h2>

            <p className="text-gray-500 text-sm mt-2 max-w-xs">
              لم تضف أي طلب بعد، وعند إنشاء طلب جديد يمكنك مراجعته ومتابعة حالته
              من هذه الصفحة.
            </p>
          </div>
        ) : (
          orders.map((order) => (
            <div
              key={order.id}
              className="bg-white shadow-md rounded-[18px] p-5 mb-8"
            >
              {/* header */}
              <div className="flex flex-col border-b border-[#D0D5DD] pb-3 mb-3">
                <span className="text-[#344054] text-book text-lg">
                  رقم الطلب: <>{order.order_number}</>
                </span>

                <span className="text-[#1D2939] text-[16px] text-book mt-1">
                  <span className="text-[#667085]">تاريخ الطلب : </span>{" "}
                  {order.order_date}
                </span>

                <span
                  className={`text-sm mt-1 font-semibold ${getStatusColor(
                    order.status
                  )}`}
                >
                  <OrderTracking
                    trackingStatus={order.tracking_status}
                    orderDate={order.order_date}
                  />
                </span>
              </div>

              {/* items */}
              <div className="space-y-4 bg-[#F9FAFB] p-5 rounded-lg mt-[20px]">
                <span className="">ملخص الطلب </span>
                {order.items.map((item) => (
                  <div
                    key={item.id}
                    className="bg-white p-5 rounded-lg flex gap-3 mt-4"
                  >
                    {/* image */}
                    <div className="w-16 h-16 rounded-md overflow-hidden">
                      <img
                        src={item.image}
                        className="object-cover w-full h-full"
                        alt="order-image"
                      />
                    </div>

                    {/* info */}
                    <div className="flex-1">
                      <p className="text-sm text-basic-color font-medium">
                        صورة مطبوعة
                      </p>
                      <p className="text-xs text-gray-600 mt-1">
                        الكمية: {item.qty}
                      </p>
                      <p className="text-xs text-gray-600 mt-1">
                        <span className="inline-flex items-center gap-1">
  السعر: {item.price}
                          <CurrencySymbol currency={order.currency} />
</span>
                      </p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Summary */}
              <div className="bg-[#F9FAFB] p-4 rounded-[14px] mt-[20px]">
                <h3 className="text-[14px] font-book text-basic-color mb-3 mt-3">
                  الفاتورة
                </h3>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-[14px] font-book text-basic-color">
                      عدد المنتجات
                    </span>
                    {order.items.reduce((sum, item) => sum + item.qty, 0)}
                  </div>

                  <div className="flex justify-between">
                    <span className="text-[14px] font-book text-basic-color">
                      السعر الأصلي
                    </span>
                    <span>
                      <span className="inline-flex items-center gap-1">
  {order.original_price}
                        <CurrencySymbol currency={order.currency} />
</span>
                    </span>
                  </div>

                  <div className="flex justify-between">
                    <span className="text-[14px] font-book text-basic-color">
                      السعر بعد الخصم
                    </span>
                    <span>{order.original_price ?? 0}</span>
                  </div>

                  <div className="flex justify-between">
                    <span className="text-[14px] font-book text-basic-color">
                      نسبة الخصم
                    </span>
                    <span className="text-[14px] font-book text-basic-color">
                      0%
                    </span>
                  </div>

                  <div className="flex justify-between">
                    <span className="text-[14px] font-book text-basic-color">
                      تكلفة الشحن
                    </span>
                    <span className="text-[14px] font-book text-[#00A63E]">
                      مجاني
                    </span>
                  </div>
                </div>

                <div className="flex justify-between text-[16px] text-basic-color font-semibold mt-4">
                  <span>المجموع النهائي</span>
                  <span className="flex gap-2 justify-center items-center">
                    <span className="flex gap-1 items-center">
                      {order.total_after_discount}
                      <CurrencySymbol currency={order.currency} />
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}