"use client";

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

import Link from "next/link";

import {
  useCart,
} from "../context/CartContext";

import PaystackButton from "./PaystackButton";


type DeliveryZone = {
  id: string;
  name: string;
  deliveryFee: number;
};


type CreatedOrder = {
  id: string;
  orderNumber: string;
  subtotal: number;
  deliveryFee: number;
  total: number;
  paymentStatus: string;
  orderStatus: string;
};


export default function CheckoutForm({
  deliveryZones,
}: {
  deliveryZones: DeliveryZone[];
}) {

  const {
    items,
    ready,
    subtotal:
      browserSubtotal,
  } = useCart();


  const [
    customerName,
    setCustomerName,
  ] = useState("");


  const [
    customerEmail,
    setCustomerEmail,
  ] = useState("");


  const [
    customerPhone,
    setCustomerPhone,
  ] = useState("");


  const [
    customerWhatsapp,
    setCustomerWhatsapp,
  ] = useState("");


  const [
    deliveryZoneId,
    setDeliveryZoneId,
  ] = useState("");


  const [
    deliveryAddress,
    setDeliveryAddress,
  ] = useState("");


  const [
    deliveryNotes,
    setDeliveryNotes,
  ] = useState("");


  const [
    submitting,
    setSubmitting,
  ] = useState(false);


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


  const [
    createdOrder,
    setCreatedOrder,
  ] =
    useState<CreatedOrder | null>(
      null
    );


  const selectedZone =
    useMemo(
      () =>
        deliveryZones.find(
          (zone) =>
            zone.id ===
            deliveryZoneId
        ) ?? null,
      [
        deliveryZones,
        deliveryZoneId,
      ]
    );


  const estimatedDeliveryFee =
    selectedZone?.deliveryFee ??
    0;


  const estimatedTotal =
    browserSubtotal +
    estimatedDeliveryFee;


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


    if (submitting) {
      return;
    }


    setErrorMessage("");


    if (items.length === 0) {
      setErrorMessage(
        "Your cart is empty."
      );

      return;
    }


    setSubmitting(true);


    try {

      const response =
        await fetch(
          "/api/orders",
          {
            method:
              "POST",

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

            body:
              JSON.stringify({
                customerName,
                customerEmail,
                customerPhone,
                customerWhatsapp,

                deliveryZoneId,
                deliveryAddress,
                deliveryNotes,

                items:
                  items.map(
                    (item) => ({
                      productId:
                        item.productId,

                      variantId:
                        item.variantId,

                      quantity:
                        item.quantity,
                    })
                  ),
              }),
          }
        );


      const result =
        await response.json();


      if (!response.ok) {
        throw new Error(
          result.error ||
            "Could not create order."
        );
      }


      setCreatedOrder(
        result.order
      );

    } catch (error) {

      setErrorMessage(
        error instanceof Error
          ? error.message
          : "Could not create your order."
      );

    } finally {

      setSubmitting(false);

    }
  }


  if (!ready) {
    return (
      <div className="mt-10 rounded-[28px] bg-white p-8">
        Loading checkout...
      </div>
    );
  }


  if (items.length === 0) {
    return (
      <div className="mt-10 rounded-[28px] bg-white p-8 text-center shadow-sm">

        <h2 className="text-2xl font-black">
          Your cart is empty
        </h2>

        <p className="mt-2 text-black/50">
          Add a product before proceeding to checkout.
        </p>

        <Link
          href="/#products"
          className="mt-6 inline-flex rounded-full bg-[#2b2118] px-7 py-4 font-black text-white"
        >
          Shop Products
        </Link>

      </div>
    );
  }


  if (createdOrder) {
    return (
      <div className="mt-10 mx-auto max-w-2xl rounded-[32px] bg-white p-8 shadow-sm md:p-10">

        <div className="text-center">

          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-3xl text-green-700">
            ✓
          </div>

          <h2 className="mt-5 text-3xl font-black">
            Order Created
          </h2>

          <p className="mt-2 text-black/60">
            Your PELCY order has been created successfully.
          </p>

        </div>


        <div className="mt-8 space-y-4 rounded-[24px] bg-[#fffaf4] p-6">

          <div className="flex justify-between gap-4">
            <span className="text-black/50">
              Order Number
            </span>

            <strong>
              {
                createdOrder.orderNumber
              }
            </strong>
          </div>


          <div className="flex justify-between gap-4">
            <span className="text-black/50">
              Subtotal
            </span>

            <strong>
              ₦
              {createdOrder.subtotal.toLocaleString()}
            </strong>
          </div>


          <div className="flex justify-between gap-4">
            <span className="text-black/50">
              Delivery
            </span>

            <strong>
              ₦
              {createdOrder.deliveryFee.toLocaleString()}
            </strong>
          </div>


          <div className="border-t border-black/10 pt-4">

            <div className="flex justify-between gap-4">

              <span className="text-lg font-black">
                Total
              </span>

              <strong className="text-2xl">
                ₦
                {createdOrder.total.toLocaleString()}
              </strong>

            </div>

          </div>

        </div>


        <div className="mt-6 rounded-2xl bg-amber-50 p-4 text-center text-sm font-bold text-amber-800">
          Payment has not yet been made.
        </div>


        <PaystackButton
  orderId={
    createdOrder.id
  }
/>


<p className="mt-3 text-center text-sm text-black/40">
  Payment is processed securely by Paystack.
</p>

      </div>
    );
  }


  return (
    <form
      onSubmit={
        handleSubmit
      }
      className="mt-10 grid gap-8 lg:grid-cols-[1.15fr_0.85fr]"
    >

      {/* =========================================
          CUSTOMER / DELIVERY
      ========================================= */}

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

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


        <div className="mt-6 grid gap-5">

          <label>

            <span className="mb-2 block text-sm font-bold">
              Full Name *
            </span>

            <input
              required
              value={
                customerName
              }
              onChange={
                (event) =>
                  setCustomerName(
                    event.target.value
                  )
              }
              className="w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
              placeholder="Your full name"
            />

          </label>


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

            <label>

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

              <input
                required
                type="tel"
                value={
                  customerPhone
                }
                onChange={
                  (event) =>
                    setCustomerPhone(
                      event.target.value
                    )
                }
                className="w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
                placeholder="080..."
              />

            </label>


            <label>

              <span className="mb-2 block text-sm font-bold">
                WhatsApp Number
              </span>

              <input
                type="tel"
                value={
                  customerWhatsapp
                }
                onChange={
                  (event) =>
                    setCustomerWhatsapp(
                      event.target.value
                    )
                }
                className="w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
                placeholder="080..."
              />

            </label>

          </div>


          <label>

  <span className="mb-2 block text-sm font-bold">
    Email Address *
  </span>

  <input
    required
    type="email"
    value={customerEmail}
    onChange={(event) =>
      setCustomerEmail(
        event.target.value
      )
    }
    className="w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
    placeholder="you@example.com"
  />

</label>

        </div>


        <div className="my-8 border-t border-black/10" />


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


        <div className="mt-6 grid gap-5">

          <label>

            <span className="mb-2 block text-sm font-bold">
              Delivery Area *
            </span>

            <select
              required
              value={
                deliveryZoneId
              }
              onChange={
                (event) =>
                  setDeliveryZoneId(
                    event.target.value
                  )
              }
              className="w-full rounded-2xl border border-black/10 bg-white px-4 py-4 outline-none focus:border-black/40"
            >

              <option value="">
                Select delivery area
              </option>


              {deliveryZones.map(
                (zone) => (

                  <option
                    key={
                      zone.id
                    }
                    value={
                      zone.id
                    }
                  >
                    {zone.name}
                    {" — ₦"}
                    {zone.deliveryFee.toLocaleString()}
                  </option>

                )
              )}

            </select>

          </label>


          {deliveryZones.length === 0 && (

            <div className="rounded-2xl bg-amber-50 p-4 text-sm font-bold text-amber-800">
              No delivery areas have been configured yet.
            </div>

          )}


          <label>

            <span className="mb-2 block text-sm font-bold">
              Delivery Address *
            </span>

            <textarea
              required
              value={
                deliveryAddress
              }
              onChange={
                (event) =>
                  setDeliveryAddress(
                    event.target.value
                  )
              }
              rows={4}
              className="w-full resize-none rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
              placeholder="House number, street, landmark..."
            />

          </label>


          <label>

            <span className="mb-2 block text-sm font-bold">
              Delivery Instructions
            </span>

            <textarea
              value={
                deliveryNotes
              }
              onChange={
                (event) =>
                  setDeliveryNotes(
                    event.target.value
                  )
              }
              rows={3}
              className="w-full resize-none rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black/40"
              placeholder="Optional instructions..."
            />

          </label>

        </div>

      </div>


      {/* =========================================
          ORDER SUMMARY
      ========================================= */}

      <div>

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

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


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

            {items.map(
              (item) => (

                <div
                  key={`${item.productId}-${item.variantId ?? "base"}`}
                  className="flex justify-between gap-4"
                >

                  <div>

                    <p className="font-bold">
                      {
                        item.productName
                      }
                    </p>

                    <p className="text-sm text-white/50">

                      {item.variantName
                        ? `${item.variantName} · `
                        : ""}

                      Qty {
                        item.quantity
                      }

                    </p>

                  </div>


                  <span className="font-bold">
                    ₦
                    {(
                      item.unitPrice *
                      item.quantity
                    ).toLocaleString()}
                  </span>

                </div>

              )
            )}

          </div>


          <div className="my-6 border-t border-white/10" />


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

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

              <span>
                Subtotal
              </span>

              <span>
                ₦
                {browserSubtotal.toLocaleString()}
              </span>

            </div>


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

              <span>
                Delivery
              </span>

              <span>
                ₦
                {estimatedDeliveryFee.toLocaleString()}
              </span>

            </div>


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

              <span>
                Estimated Total
              </span>

              <span>
                ₦
                {estimatedTotal.toLocaleString()}
              </span>

            </div>

          </div>


          <p className="mt-4 text-xs leading-5 text-white/40">
            Final prices are verified securely before your order is created.
          </p>


          {errorMessage && (

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

          )}


          <button
            type="submit"
            disabled={
              submitting ||
              deliveryZones.length ===
                0
            }
            className="mt-6 w-full rounded-full bg-white px-7 py-5 text-lg font-black text-[#2b2118] disabled:cursor-not-allowed disabled:opacity-50"
          >
            {submitting
              ? "Creating Order..."
              : "Confirm Order"}
          </button>

        </div>

      </div>

    </form>
  );
}