"use client";

import {
  FormEvent,
  useState,
} from "react";


type TrackingItem = {
  productName: string;
  variantName: string | null;
  quantity: number;
  unitPrice: number;
  totalPrice: number;
};


type TrackingOrder = {
  orderNumber: string;
  customerName: string;
  deliveryArea: string | null;

  subtotal: number;
  deliveryFee: number;
  total: number;

  paymentStatus: string;
  paymentStatusLabel: string;

  orderStatus: string;
  orderStatusLabel: string;

  createdAt: string;

  items: TrackingItem[];
};


const fulfilmentSteps = [
  {
    key: "pending",
    label: "Order Received",
  },
  {
    key: "confirmed",
    label: "Order Confirmed",
  },
  {
    key: "preparing",
    label: "Preparing Order",
  },
  {
    key: "out_for_delivery",
    label: "Out for Delivery",
  },
  {
    key: "delivered",
    label: "Delivered",
  },
];


function formatMoney(
  value: number
) {
  return `₦${Number(
    value
  ).toLocaleString(
    "en-NG"
  )}`;
}


function getCurrentStep(
  status: string
) {
  const index =
    fulfilmentSteps.findIndex(
      (step) =>
        step.key === status
    );

  return index === -1
    ? 0
    : index;
}


export default function OrderTrackingForm() {
  const [
    orderNumber,
    setOrderNumber,
  ] =
    useState("");

  const [
    phoneNumber,
    setPhoneNumber,
  ] =
    useState("");

  const [
    loading,
    setLoading,
  ] =
    useState(false);

  const [
    error,
    setError,
  ] =
    useState("");

  const [
    order,
    setOrder,
  ] =
    useState<TrackingOrder | null>(
      null
    );


  async function handleSubmit(
    event: FormEvent
  ) {
    event.preventDefault();

    setLoading(true);
    setError("");
    setOrder(null);

    try {
      const response =
        await fetch(
          "/api/order-tracking",
          {
            method:
              "POST",

            headers: {
              "Content-Type":
                "application/json",
            },

            body:
              JSON.stringify({
                orderNumber,
                phoneNumber,
              }),
          }
        );


      const result =
        await response.json();


      if (
        !response.ok ||
        !result.success
      ) {
        throw new Error(
          result.error ||
            "Order could not be found."
        );
      }


      setOrder(
        result.order
      );
    } catch (error) {
      setError(
        error instanceof Error
          ? error.message
          : "Order could not be found."
      );
    } finally {
      setLoading(false);
    }
  }


  const currentStep =
    order
      ? getCurrentStep(
          order.orderStatus
        )
      : 0;


  return (
    <div className="space-y-8">

      {/* =========================================
          SEARCH FORM
      ========================================== */}

      <form
        onSubmit={
          handleSubmit
        }
        className="rounded-[30px] bg-white p-6 shadow-sm md:p-8"
      >
        <div className="grid gap-5 md:grid-cols-2">

          <div>
            <label className="mb-2 block text-sm font-bold">
              Order Number
            </label>

            <input
              type="text"
              value={
                orderNumber
              }
              onChange={(
                event
              ) =>
                setOrderNumber(
                  event.target
                    .value
                )
              }
              placeholder="PEL-20260818-..."
              className="w-full rounded-2xl border border-black/10 bg-[#fffaf4] px-4 py-4 outline-none transition focus:border-black/30"
              required
            />
          </div>


          <div>
            <label className="mb-2 block text-sm font-bold">
              Phone Number
            </label>

            <input
              type="tel"
              value={
                phoneNumber
              }
              onChange={(
                event
              ) =>
                setPhoneNumber(
                  event.target
                    .value
                )
              }
              placeholder="080..."
              className="w-full rounded-2xl border border-black/10 bg-[#fffaf4] px-4 py-4 outline-none transition focus:border-black/30"
              required
            />
          </div>

        </div>


        {error && (
          <div className="mt-5 rounded-2xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
            {error}
          </div>
        )}


        <button
          type="submit"
          disabled={
            loading
          }
          className="mt-6 w-full rounded-full bg-[#2b2118] px-6 py-4 font-black text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
        >
          {loading
            ? "Checking Order..."
            : "Track My Order"}
        </button>
      </form>


      {/* =========================================
          ORDER RESULT
      ========================================== */}

      {order && (
        <div className="space-y-6">

          <div className="rounded-[30px] bg-white p-6 shadow-sm md:p-8">

            <div className="flex flex-col gap-3 border-b border-black/10 pb-6 md:flex-row md:items-center md:justify-between">

              <div>
                <p className="text-sm font-bold uppercase tracking-[0.15em] text-black/45">
                  Order
                </p>

                <h2 className="mt-1 text-xl font-black md:text-2xl">
                  {
                    order.orderNumber
                  }
                </h2>
              </div>


              <div className="rounded-full bg-[#fff4df] px-5 py-3 text-sm font-black">
                {
                  order.orderStatusLabel
                }
              </div>

            </div>


            <div className="mt-6 grid gap-5 md:grid-cols-3">

              <div>
                <p className="text-sm text-black/45">
                  Customer
                </p>

                <p className="mt-1 font-bold">
                  {
                    order.customerName
                  }
                </p>
              </div>


              <div>
                <p className="text-sm text-black/45">
                  Delivery Area
                </p>

                <p className="mt-1 font-bold">
                  {
                    order.deliveryArea ||
                    "Not available"
                  }
                </p>
              </div>


              <div>
                <p className="text-sm text-black/45">
                  Payment
                </p>

                <p
                  className={`mt-1 font-black ${
                    order.paymentStatus ===
                    "paid"
                      ? "text-green-700"
                      : "text-orange-700"
                  }`}
                >
                  {
                    order.paymentStatusLabel
                  }
                </p>
              </div>

            </div>

          </div>


          {/* =====================================
              ORDER PROGRESS
          ====================================== */}

          <div className="rounded-[30px] bg-white p-6 shadow-sm md:p-8">

            <h3 className="text-2xl font-black">
              Order Progress
            </h3>


            {order.orderStatus ===
            "cancelled" ? (
              <div className="mt-6 rounded-2xl bg-red-50 p-5 font-bold text-red-700">
                This order has been cancelled.
              </div>
            ) : (
              <div className="mt-7 space-y-5">

                {fulfilmentSteps.map(
                  (
                    step,
                    index
                  ) => {
                    const complete =
                      index <=
                      currentStep;

                    return (
                      <div
                        key={
                          step.key
                        }
                        className="flex items-center gap-4"
                      >
                        <div
                          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-black ${
                            complete
                              ? "bg-green-100 text-green-700"
                              : "bg-black/5 text-black/35"
                          }`}
                        >
                          {complete
                            ? "✓"
                            : index +
                              1}
                        </div>

                        <div>
                          <p
                            className={`font-bold ${
                              complete
                                ? "text-black"
                                : "text-black/40"
                            }`}
                          >
                            {
                              step.label
                            }
                          </p>
                        </div>
                      </div>
                    );
                  }
                )}

              </div>
            )}

          </div>


          {/* =====================================
              ITEMS
          ====================================== */}

          <div className="rounded-[30px] bg-white p-6 shadow-sm md:p-8">

            <h3 className="text-2xl font-black">
              Order Items
            </h3>


            <div className="mt-6 divide-y divide-black/10">

              {order.items.map(
                (
                  item,
                  index
                ) => (
                  <div
                    key={
                      `${item.productName}-${item.variantName}-${index}`
                    }
                    className="flex justify-between gap-5 py-4"
                  >
                    <div>
                      <p className="font-bold">
                        {
                          item.productName
                        }
                      </p>

                      <p className="mt-1 text-sm text-black/45">
                        {item.variantName
                          ? `${item.variantName} • `
                          : ""}
                        Qty{" "}
                        {
                          item.quantity
                        }
                      </p>
                    </div>


                    <strong>
                      {
                        formatMoney(
                          item.totalPrice
                        )
                      }
                    </strong>

                  </div>
                )
              )}

            </div>

          </div>


          {/* =====================================
              TOTAL
          ====================================== */}

          <div className="rounded-[30px] bg-[#2b2118] p-6 text-white shadow-sm md:p-8">

            <div className="flex justify-between gap-5 text-white/70">
              <span>
                Subtotal
              </span>

              <span>
                {
                  formatMoney(
                    order.subtotal
                  )
                }
              </span>
            </div>


            <div className="mt-3 flex justify-between gap-5 text-white/70">
              <span>
                Delivery
              </span>

              <span>
                {
                  formatMoney(
                    order.deliveryFee
                  )
                }
              </span>
            </div>


            <div className="mt-5 flex justify-between gap-5 border-t border-white/15 pt-5 text-xl font-black">
              <span>
                Total
              </span>

              <span>
                {
                  formatMoney(
                    order.total
                  )
                }
              </span>
            </div>

          </div>

        </div>
      )}

    </div>
  );
}