import Link from "next/link";

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


export const dynamic =
  "force-dynamic";


export default async function CheckoutPage() {
  const supabase =
    await createClient();


  // =============================================
  // GET ACTIVE DELIVERY ZONES
  // =============================================

  const {
    data: zones,
    error,
  } =
    await supabase
      .from("delivery_zones")
      .select(
        `
          id,
          name,
          delivery_fee
        `
      )
      .eq(
        "is_active",
        true
      )
      .order(
        "name",
        {
          ascending: true,
        }
      );


  if (error) {
    console.error(
      "Delivery zones error:",
      error
    );
  }


  // =============================================
  // PREPARE DELIVERY ZONES
  // =============================================

  const deliveryZones =
    (zones ?? []).map(
      (zone) => ({
        id:
          zone.id,

        name:
          zone.name,

        deliveryFee:
          Number(
            zone.delivery_fee
          ),
      })
    );


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

      {/* =========================================
          HEADER
      ========================================== */}

      <header className="sticky top-0 z-50 border-b border-black/5 bg-[#fffaf4]/95 backdrop-blur">

        {/* MAIN HEADER */}
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-10">

          {/* LOGO */}
          <Link
            href="/"
            className="shrink-0 text-2xl font-black tracking-[0.22em]"
          >
            PELCY
          </Link>


          {/* DESKTOP NAVIGATION */}
          <nav className="hidden items-center gap-8 text-sm font-medium md:flex">

            <Link
              href="/"
              className="transition hover:opacity-60"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="transition hover:opacity-60"
            >
              Products
            </Link>


            <Link
              href="/order-tracking"
              className="font-bold transition hover:opacity-60"
            >
              Track Order
            </Link>

          </nav>


          {/* BACK TO CART */}
          <Link
            href="/cart"
            className="rounded-full bg-[#2b2118] px-5 py-3 text-sm font-black text-white transition hover:opacity-90"
          >
            ← Back to Cart
          </Link>

        </div>


        {/* MOBILE NAVIGATION */}
        <nav className="border-t border-black/5 md:hidden">

          <div className="flex items-center gap-6 overflow-x-auto px-5 py-3 text-sm font-semibold">

            <Link
              href="/"
              className="shrink-0"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="shrink-0"
            >
              Products
            </Link>


            <Link
              href="/order-tracking"
              className="shrink-0 rounded-full bg-[#f1e5d8] px-4 py-2 font-bold"
            >
              Track Order
            </Link>

          </div>

        </nav>

      </header>


      {/* =========================================
          CHECKOUT
      ========================================== */}

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

        {/* PAGE HEADING */}

        <div className="mb-10">

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


          <h1 className="mt-3 text-4xl font-black md:text-5xl">
            Checkout
          </h1>


          <p className="mt-3 max-w-2xl leading-7 text-black/60">
            Enter your contact and delivery information
            to complete your PELCY order.
          </p>


          {/* CHECKOUT STEPS */}
          <div className="mt-7 flex flex-wrap items-center gap-3 text-sm">

            <div className="flex items-center gap-2 rounded-full bg-[#f1e5d8] px-4 py-2 font-bold">
              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2b2118] text-xs text-white">
                1
              </span>
              Cart
            </div>


            <span className="text-black/25">
              →
            </span>


            <div className="flex items-center gap-2 rounded-full bg-[#2b2118] px-4 py-2 font-bold text-white">
              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs text-[#2b2118]">
                2
              </span>
              Checkout
            </div>


            <span className="text-black/25">
              →
            </span>


            <div className="flex items-center gap-2 rounded-full border border-black/10 px-4 py-2 font-bold text-black/40">
              <span className="flex h-6 w-6 items-center justify-center rounded-full border border-black/10 text-xs">
                3
              </span>
              Payment
            </div>

          </div>

        </div>


        {/* EXISTING CHECKOUT FORM */}

        <CheckoutForm
          deliveryZones={
            deliveryZones
          }
        />

      </section>


      {/* =========================================
          SECURITY / TRUST NOTE
      ========================================== */}

      <section className="border-t border-black/5 bg-[#f1e5d8]">

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

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

            <TrustItem
              icon="🔒"
              title="Secure Payment"
              text="Your payment is processed securely through our payment provider."
            />


            <TrustItem
              icon="✓"
              title="Verified Order"
              text="Your order details and final prices are verified before your order is created."
            />


            <TrustItem
              icon="📍"
              title="Delivery Tracking"
              text="Use your order number and phone number to check your delivery progress."
            />

          </div>

        </div>

      </section>


      {/* =========================================
          FOOTER
      ========================================== */}

      <footer className="bg-[#19130f] text-white">

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

          <div>

            <p className="text-xl font-black tracking-[0.2em]">
              PELCY
            </p>

            <p className="mt-2 text-sm text-white/45">
              Fresh goodness, delivered.
            </p>

          </div>


          <div className="flex flex-wrap gap-5 text-sm text-white/60">

            <Link
              href="/"
              className="transition hover:text-white"
            >
              Home
            </Link>


            <Link
              href="/#products"
              className="transition hover:text-white"
            >
              Products
            </Link>


            <Link
              href="/cart"
              className="transition hover:text-white"
            >
              Cart
            </Link>


            <Link
              href="/order-tracking"
              className="transition hover:text-white"
            >
              Track Order
            </Link>

          </div>


          <p className="text-sm text-white/45">
            © 2026 PELCY. All rights reserved.
          </p>

        </div>

      </footer>

    </main>
  );
}


/* =============================================
   TRUST ITEM
============================================= */

function TrustItem({
  icon,
  title,
  text,
}: {
  icon: string;
  title: string;
  text: string;
}) {
  return (
    <div className="rounded-[24px] bg-white p-6">

      <div className="text-2xl">
        {icon}
      </div>


      <h3 className="mt-4 font-black">
        {title}
      </h3>


      <p className="mt-2 text-sm leading-6 text-black/50">
        {text}
      </p>

    </div>
  );
}