"use client";
import { useEffect } from "react";
import OrderSummary from "@/modules/checkout/components/order-summary";
import OrderItems from "@/modules/checkout/components/order-items";
import BillingAddress from "@/modules/checkout/components/billing-address";
import Coupons from "@/modules/checkout/components/coupons";
import PaymentMethod from "@/modules/checkout/components/payment-method";
import { PickupAddressModal } from "@/lib/types/models/address";
import { useAuth } from "@/lib/context/auth-context";
import { verifyToken } from "@/lib/utils/jwt-server";
import { userLogout } from "@/lib/utils/auth-token";
import { useAddressStore } from "@/zustand/addressStore";
import ViewAddress from "@/modules/checkout/components/view-address";
import AddAddress from "@/modules/common/address";
export default function Page({
  pickupAddress,
  orderStatus
}: {
  pickupAddress: PickupAddressModal[];
  orderStatus: {
    status: boolean;
    adminNotification: boolean;
    allowCancellation: boolean;
    customerNotification: boolean;
    customerStatus: string;
    emailMessage: string;
    emailSubject: string;
    internalStatus: boolean;
    setAs: string;
    statusTitle: string;
    _id: string;
  };
}) {
  const { addressList, showModal, viewShowModal } = useAddressStore();
  const { userToken, setUser, setUserToken, loading } = useAuth();

  useEffect(() => {
    if (!userToken) {
      return;
    }
    const verifyUser = async () => {
      const verified = verifyToken(userToken);
      if (verified?.expired) {
        setUser(null);
        setUserToken(null);
        userLogout();
      }
    };
    verifyUser();
  }, [userToken, setUser, setUserToken]);

  if (loading) {
    return <div className="p-10 text-center text-gray-500">Loading...</div>;
  }

  if (!userToken) {
    userLogout();
    return;
  }

  return (
    <>
      <main className="w-full bg-[linear-gradient(180deg,_rgba(250,242,255,1)_5.5%,_rgba(255,255,255,1)_96.99%)]">
        <div className="main-container mobile-container py-10">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
            <div className="lg:col-span-8 space-y-6">
              <OrderItems pickupAddress={pickupAddress} />
              <PaymentMethod orderStatus={orderStatus} />
            </div>
            <div className="lg:col-span-4">
              <div className="lg:sticky lg:top-6 space-y-6">
                {addressList.length > 0 && <BillingAddress />}
                <Coupons />
                <OrderSummary />
              </div>
            </div>
          </div>
        </div>
      </main>
      {showModal && <AddAddress />}
      {viewShowModal && <ViewAddress />}
    </>
  );
}