"use client";

import {
  useState,
} from "react";

import {
  createClient,
} from "../../../../lib/supabase/client";


const ORDER_STATUSES = [
  {
    value: "pending",
    label:
      "Awaiting Confirmation",
  },
  {
    value: "confirmed",
    label:
      "Order Confirmed",
  },
  {
    value: "preparing",
    label:
      "Preparing Order",
  },
  {
    value:
      "out_for_delivery",
    label:
      "Out for Delivery",
  },
  {
    value: "delivered",
    label:
      "Delivered",
  },
  {
    value: "cancelled",
    label:
      "Cancelled",
  },
];


export default function OrderStatusManager({
  orderId,
  initialStatus,
}: {
  orderId: string;
  initialStatus: string;
}) {

  const supabase =
    createClient();


  const [
    status,
    setStatus,
  ] =
    useState(
      initialStatus
    );


  const [
    saving,
    setSaving,
  ] =
    useState(false);


  const [
    message,
    setMessage,
  ] =
    useState("");


  const [
    errorMessage,
    setErrorMessage,
  ] =
    useState("");


  async function saveStatus() {

    if (saving) {
      return;
    }


    setSaving(true);
    setMessage("");
    setErrorMessage("");


    const {
      error,
    } =
      await supabase
        .from("orders")
        .update({
          order_status:
            status,

          updated_at:
            new Date()
              .toISOString(),
        })
        .eq(
          "id",
          orderId
        );


    setSaving(false);


    if (error) {

      console.error(
        "Order status update error:",
        error
      );


      setErrorMessage(
        error.message ||
          "Could not update order status."
      );

      return;

    }


    setMessage(
  "Fulfilment status updated successfully."
);

  }


  return (
    <div className="rounded-[28px] bg-white p-6 shadow-sm">

      <p className="text-sm font-black uppercase tracking-[0.16em] text-[#9b6a44]">
        Order Progress
      </p>

      <h2 className="mt-2 text-2xl font-black">
        Update Status
      </h2>


      <label className="mt-6 block">

        <span className="mb-2 block text-sm font-bold">
          Current Order Status
        </span>


        <select
          value={
            status
          }
          onChange={
            (event) => {
              setStatus(
                event.target.value
              );

              setMessage("");
              setErrorMessage("");
            }
          }
          className="w-full rounded-2xl border border-black/10 bg-white px-4 py-4 outline-none focus:border-black/40"
        >

          {ORDER_STATUSES.map(
            (option) => (

              <option
                key={
                  option.value
                }
                value={
                  option.value
                }
              >
                {
                  option.label
                }
              </option>

            )
          )}

        </select>

      </label>


      {message && (

        <div className="mt-4 rounded-2xl bg-green-100 p-4 text-sm font-bold text-green-700">
          ✓ {message}
        </div>

      )}


      {errorMessage && (

        <div className="mt-4 rounded-2xl bg-red-100 p-4 text-sm font-bold text-red-700">
          {
            errorMessage
          }
        </div>

      )}


      <button
        type="button"
        onClick={
          saveStatus
        }
        disabled={
          saving
        }
        className="mt-5 w-full rounded-full bg-[#2b2118] px-6 py-4 font-black text-white disabled:cursor-not-allowed disabled:opacity-50"
      >
        {saving
          ? "Saving..."
          : "Save Order Status"}
      </button>

    </div>
  );
}