import Link from "next/link";
import {
  notFound,
  redirect,
} from "next/navigation";

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

import OrderStatusManager from "./OrderStatusManager";


export const dynamic =
  "force-dynamic";


function formatMoney(
  value: number
) {
  return `₦${value.toLocaleString(
    "en-NG",
    {
      minimumFractionDigits: 0,
      maximumFractionDigits: 2,
    }
  )}`;
}


function formatDate(
  value: string | null
) {
  if (!value) {
    return "—";
  }

  return new Intl.DateTimeFormat(
    "en-NG",
    {
      dateStyle: "medium",
      timeStyle: "short",
    }
  ).format(
    new Date(value)
  );
}


export default async function AdminOrderDetailsPage({
  params,
}: {
  params: Promise<{
    id: string;
  }>;
}) {

  const {
    id,
  } =
    await params;


  const supabase =
    await createClient();


  // =====================================================
  // LOGIN
  // =====================================================

  const {
    data: {
      user,
    },
  } =
    await supabase.auth.getUser();


  if (!user) {
    redirect("/admin/login");
  }


  // =====================================================
  // ADMIN
  // =====================================================

  const {
    data: profile,
  } =
    await supabase
      .from("admin_profiles")
      .select(
        `
          full_name,
          role
        `
      )
      .eq(
        "id",
        user.id
      )
      .maybeSingle();


  if (
    !profile ||
    ![
      "admin",
      "super_admin",
    ].includes(profile.role)
  ) {
    redirect("/admin/login");
  }


  // =====================================================
  // ORDER
  // =====================================================

  const {
    data: order,
    error: orderError,
  } =
    await supabase
      .from("orders")
      .select("*")
      .eq(
        "id",
        id
      )
      .maybeSingle();


  if (
    orderError ||
    !order
  ) {
    notFound();
  }


  // =====================================================
  // ITEMS
  // =====================================================

  const {
    data: items,
  } =
    await supabase
      .from("order_items")
      .select(
        `
          id,
          product_name,
          variant_name,
          quantity,
          unit_price,
          total_price
        `
      )
      .eq(
        "order_id",
        order.id
      )
      .order(
        "created_at",
        {
          ascending: true,
        }
      );


  // =====================================================
  // PAYMENTS
  // =====================================================

  const {
    data: payments,
  } =
    await supabase
      .from("payments")
      .select(
        `
          id,
          provider,
          reference,
          amount,
          currency,
          status,
          paid_at,
          created_at
        `
      )
      .eq(
        "order_id",
        order.id
      )
      .order(
        "created_at",
        {
          ascending: false,
        }
      );


  return (
    <main className="min-h-screen bg-[#fffaf4] text-[#2b2118]">

      {/* HEADER */}

      <header className="border-b border-black/5 bg-white">

        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-5 md:px-10">

          <div>

            <Link
              href="/admin"
              className="text-2xl font-black tracking-[0.18em]"
            >
              PELCY
            </Link>

            <p className="mt-1 text-xs font-bold uppercase tracking-[0.16em] text-black/40">
              Administration
            </p>

          </div>


          <Link
            href="/admin/orders"
            className="rounded-full border border-black/10 px-5 py-3 text-sm font-bold"
          >
            ← All Orders
          </Link>

        </div>

      </header>


      <section className="mx-auto max-w-7xl px-5 py-10 md:px-10 md:py-14">

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

        <h1 className="mt-2 break-all text-3xl font-black md:text-4xl">
          {
            order.order_number
          }
        </h1>


        <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_360px]">

          {/* LEFT */}

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

            {/* CUSTOMER */}

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

              <h2 className="text-2xl font-black">
                Customer
              </h2>


              <div className="mt-6 grid gap-5 sm:grid-cols-2">

                <div>
                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Name
                  </p>

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


                <div>
                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Phone
                  </p>

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


                <div>
                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    WhatsApp
                  </p>

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


                <div>
                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Email
                  </p>

                  <p className="mt-1 break-all font-bold">
                    {
                      order.customer_email ??
                      "—"
                    }
                  </p>
                </div>

              </div>

            </div>


            {/* DELIVERY */}

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

              <h2 className="text-2xl font-black">
                Delivery
              </h2>


              <div className="mt-6 space-y-5">

                <div>

                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Delivery Area
                  </p>

                  <p className="mt-1 font-bold">
                    {
                      order.delivery_area ??
                      "—"
                    }
                  </p>

                </div>


                <div>

                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Address
                  </p>

                  <p className="mt-1 whitespace-pre-wrap font-bold">
                    {
                      order.delivery_address
                    }
                  </p>

                </div>


                <div>

                  <p className="text-xs font-bold uppercase tracking-wide text-black/40">
                    Instructions
                  </p>

                  <p className="mt-1 whitespace-pre-wrap text-black/70">
                    {
                      order.delivery_notes ??
                      "No additional instructions."
                    }
                  </p>

                </div>

              </div>

            </div>


            {/* ITEMS */}

            <div className="overflow-hidden rounded-[28px] bg-white shadow-sm">

              <div className="border-b border-black/5 p-6 md:p-8">

                <h2 className="text-2xl font-black">
                  Items Ordered
                </h2>

              </div>


              <div className="divide-y divide-black/5">

                {(items ?? []).map(
                  (item) => (

                    <div
                      key={
                        item.id
                      }
                      className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
                    >

                      <div>

                        <p className="font-black">
                          {
                            item.product_name
                          }
                        </p>

                        <p className="mt-1 text-sm text-black/45">
                          {
                            item.variant_name
                              ? `${item.variant_name} · `
                              : ""
                          }

                          Qty {
                            item.quantity
                          }
                        </p>

                        <p className="mt-1 text-sm text-black/45">
                          {
                            formatMoney(
                              Number(
                                item.unit_price
                              )
                            )
                          }
                          {" each"}
                        </p>

                      </div>


                      <p className="text-xl font-black">

                        {
                          formatMoney(
                            Number(
                              item.total_price
                            )
                          )
                        }

                      </p>

                    </div>

                  )
                )}

              </div>

            </div>


            {/* PAYMENT */}

            <div className="overflow-hidden rounded-[28px] bg-white shadow-sm">

              <div className="border-b border-black/5 p-6 md:p-8">

                <h2 className="text-2xl font-black">
                  Payment
                </h2>

              </div>


              {(payments ?? [])
                .length === 0 ? (

                <div className="p-6 text-black/50">
                  No payment transaction recorded.
                </div>

              ) : (

                <div className="divide-y divide-black/5">

                  {(payments ?? []).map(
                    (payment) => (

                      <div
                        key={
                          payment.id
                        }
                        className="p-6"
                      >

                        <div className="flex flex-col gap-4 sm:flex-row sm:justify-between">

                          <div>

                            <p className="font-black uppercase">
                              {
                                payment.provider
                              }
                            </p>

                            <p className="mt-1 break-all text-sm text-black/45">
                              {
                                payment.reference
                              }
                            </p>

                          </div>


                          <div className="sm:text-right">

                            <p className="text-xl font-black">

                              {
                                formatMoney(
                                  Number(
                                    payment.amount
                                  )
                                )
                              }

                            </p>

                            <p
                              className={`mt-1 text-sm font-black ${
                                payment.status ===
                                "success"
                                  ? "text-green-700"
                                  : "text-amber-700"
                              }`}
                            >
                              {
                                payment.status.toUpperCase()
                              }
                            </p>

                          </div>

                        </div>


                        <p className="mt-4 text-xs text-black/40">
                          Paid: {
                            formatDate(
                              payment.paid_at
                            )
                          }
                        </p>

                      </div>

                    )
                  )}

                </div>

              )}

            </div>

          </div>


          {/* RIGHT */}

          <aside className="space-y-6">

            <OrderStatusManager
              orderId={
                order.id
              }
              initialStatus={
                order.order_status
              }
            />


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

              <h2 className="text-xl font-black">
                Order Summary
              </h2>


              <div className="mt-6 space-y-4">

                <div className="flex justify-between text-white/65">

                  <span>
                    Subtotal
                  </span>

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

                </div>


                <div className="flex justify-between text-white/65">

                  <span>
                    Delivery
                  </span>

                  <span>
                    {
                      formatMoney(
                        Number(
                          order.delivery_fee
                        )
                      )
                    }
                  </span>

                </div>


                <div className="flex justify-between border-t border-white/10 pt-4 text-xl font-black">

                  <span>
                    Total
                  </span>

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

                </div>

              </div>


              <div className="mt-6 rounded-2xl bg-white/10 p-4">

                <p className="text-xs uppercase tracking-wide text-white/50">
                  Payment Status
                </p>

                <p
                  className={`mt-1 font-black ${
                    order.payment_status ===
                    "paid"
                      ? "text-green-300"
                      : "text-amber-300"
                  }`}
                >
                  {
                    order.payment_status.toUpperCase()
                  }
                </p>

              </div>


              <div className="mt-4 text-xs leading-6 text-white/45">

                <p>
                  Created: {
                    formatDate(
                      order.created_at
                    )
                  }
                </p>

                <p>
                  Updated: {
                    formatDate(
                      order.updated_at
                    )
                  }
                </p>

              </div>

            </div>

          </aside>

        </div>

      </section>

    </main>
  );
}