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

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


export const dynamic =
  "force-dynamic";


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


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


function statusLabel(
  status: string
) {

  const labels:
    Record<string, string> = {

      pending:
        "Awaiting Confirmation",

      confirmed:
        "Order Confirmed",

      preparing:
        "Preparing Order",

      out_for_delivery:
        "Out for Delivery",

      delivered:
        "Delivered",

      cancelled:
        "Cancelled",
    };


  return (
    labels[status] ??
    status
  );
}


function statusClass(
  status: string
) {
  switch (status) {
    case "confirmed":
      return "bg-blue-100 text-blue-700";

    case "preparing":
      return "bg-amber-100 text-amber-800";

    case "out_for_delivery":
      return "bg-purple-100 text-purple-700";

    case "delivered":
      return "bg-green-100 text-green-700";

    case "cancelled":
      return "bg-red-100 text-red-700";

    default:
      return "bg-gray-100 text-gray-700";
  }
}


export default async function AdminOrdersPage() {

  const supabase =
    await createClient();


  // =====================================================
  // LOGIN CHECK
  // =====================================================

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


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


  // =====================================================
  // ADMIN CHECK
  // =====================================================

  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");
  }


  // =====================================================
  // LOAD ORDERS
  // =====================================================

  const {
    data: orders,
    error,
  } =
    await supabase
      .from("orders")
      .select(
        `
          id,
          order_number,
          customer_name,
          customer_phone,
          delivery_area,
          total,
          payment_status,
          order_status,
          created_at
        `
      )
      .order(
        "created_at",
        {
          ascending: false,
        }
      )
      .limit(100);


  if (error) {
    console.error(
      "Admin orders error:",
      error
    );
  }


  const allOrders =
    orders ?? [];


  const totalOrders =
    allOrders.length;


  const paidOrders =
    allOrders.filter(
      (order) =>
        order.payment_status ===
        "paid"
    ).length;


  const pendingOrders =
    allOrders.filter(
      (order) =>
        order.order_status ===
        "pending"
    ).length;


  const deliveredOrders =
    allOrders.filter(
      (order) =>
        order.order_status ===
        "delivered"
    ).length;


  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>


          <div className="flex items-center gap-4">

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

              <p className="text-sm font-bold">
                {
                  profile.full_name
                }
              </p>

              <p className="text-xs capitalize text-black/40">
                {
                  profile.role.replace(
                    "_",
                    " "
                  )
                }
              </p>

            </div>


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

          </div>

        </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 Management
        </p>

        <h1 className="mt-2 text-4xl font-black md:text-5xl">
          Customer Orders
        </h1>

        <p className="mt-4 max-w-2xl text-lg leading-8 text-black/55">
          Review customer orders,
          payments and delivery
          progress.
        </p>


        {/* SUMMARY */}

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">

          <div className="rounded-[24px] bg-white p-6 shadow-sm">
            <p className="text-sm font-bold text-black/40">
              Total Orders
            </p>

            <p className="mt-2 text-3xl font-black">
              {totalOrders}
            </p>
          </div>


          <div className="rounded-[24px] bg-white p-6 shadow-sm">
            <p className="text-sm font-bold text-black/40">
              Paid
            </p>

            <p className="mt-2 text-3xl font-black text-green-700">
              {paidOrders}
            </p>
          </div>


          <div className="rounded-[24px] bg-white p-6 shadow-sm">
            <p className="text-sm font-bold text-black/40">
              Pending
            </p>

            <p className="mt-2 text-3xl font-black text-amber-700">
              {pendingOrders}
            </p>
          </div>


          <div className="rounded-[24px] bg-white p-6 shadow-sm">
            <p className="text-sm font-bold text-black/40">
              Delivered
            </p>

            <p className="mt-2 text-3xl font-black text-green-700">
              {deliveredOrders}
            </p>
          </div>

        </div>


        {/* ORDER TABLE */}

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

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

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

            <p className="mt-1 text-sm text-black/40">
              Latest customer orders appear first.
            </p>

          </div>


          {allOrders.length === 0 ? (

            <div className="p-10 text-center">

              <p className="text-xl font-black">
                No orders yet
              </p>

              <p className="mt-2 text-black/40">
                Customer orders will appear here.
              </p>

            </div>

          ) : (

            <div className="overflow-x-auto">

              <table className="min-w-full">

                <thead className="bg-[#fffaf4]">

                  <tr className="text-left text-xs uppercase tracking-wide text-black/40">

                    <th className="px-6 py-4">
                      Order
                    </th>

                    <th className="px-6 py-4">
                      Customer
                    </th>

                    <th className="px-6 py-4">
                      Total
                    </th>

                    <th className="px-6 py-4">
                      Payment
                    </th>

                    <th className="px-6 py-4">
                      Status
                    </th>

                    <th className="px-6 py-4">
                      Date
                    </th>

                    <th className="px-6 py-4">
                      Action
                    </th>

                  </tr>

                </thead>


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

                  {allOrders.map(
                    (order) => (

                      <tr
                        key={
                          order.id
                        }
                        className="hover:bg-black/[0.015]"
                      >

                        <td className="px-6 py-5">

                          <p className="font-black">
                            {
                              order.order_number
                            }
                          </p>

                          <p className="mt-1 text-xs text-black/40">
                            {
                              order.delivery_area ??
                              "Delivery area unavailable"
                            }
                          </p>

                        </td>


                        <td className="px-6 py-5">

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

                          <p className="mt-1 text-xs text-black/40">
                            {
                              order.customer_phone
                            }
                          </p>

                        </td>


                        <td className="px-6 py-5 font-black">

                          {
                            formatMoney(
                              Number(
                                order.total
                              )
                            )
                          }

                        </td>


                        <td className="px-6 py-5">

                          {order.payment_status ===
                          "paid" ? (

                            <span className="rounded-full bg-green-100 px-3 py-1.5 text-xs font-black text-green-700">
                              PAID
                            </span>

                          ) : (

                            <span className="rounded-full bg-amber-100 px-3 py-1.5 text-xs font-black text-amber-800">
                              PENDING
                            </span>

                          )}

                        </td>


                        <td className="px-6 py-5">

                          <span
                            className={`rounded-full px-3 py-1.5 text-xs font-black ${statusClass(
                              order.order_status
                            )}`}
                          >
                            {
                              statusLabel(
                                order.order_status
                              )
                            }
                          </span>

                        </td>


                        <td className="px-6 py-5 text-sm text-black/50">

                          {
                            formatDate(
                              order.created_at
                            )
                          }

                        </td>


                        <td className="px-6 py-5">

                          <Link
                            href={`/admin/orders/${order.id}`}
                            className="inline-flex rounded-full bg-[#2b2118] px-4 py-2 text-sm font-black text-white"
                          >
                            View Order
                          </Link>

                        </td>

                      </tr>

                    )
                  )}

                </tbody>

              </table>

            </div>

          )}

        </div>

      </section>

    </main>
  );
}