import InstagramIcon from "components/Icons/social/InstagramIcon";
import JIcon from "components/Icons/social/JIcon";
import SnapIcon from "components/Icons/social/SnapIcon";
import XIcon from "components/Icons/social/XIcon";
import { LanguageSwitch } from "components/LanguageSwitch/LanguageSwitch";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useAppSelector, useAppDispatch } from "redux/hooks";
import styles from "./restaurant.module.css";
import RestaurantServices from "./RestaurantServices";

// Import the Client Component for localStorage handling
import Ads1 from "components/Ads/Ads1";
import { Loader } from "components/Loader/Loader";
import { useRestaurant } from "hooks/useRestaurant";
import {
  useParams,
  Outlet,
  useLocation,
  useSearchParams,
} from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import LocalStorageHandler from "../menu/components/LocalStorageHandler";
import { useEffect } from "react";
import {
  updateOrderType,
  CART_STORAGE_KEYS,
} from "features/order/orderSlice.ts";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";

const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE);

export default function RestaurantPage() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const param = useParams();
  const [searchParams] = useSearchParams();
  const { pathname } = useLocation();
  const { orderType } = useAppSelector((state) => state.order);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
    skip: !param.id,
  });

  // Automatically load restaurant taxes when restaurant data is available
  useRestaurant(restaurant);

  useEffect(() => {
    const urlOrderType = searchParams.get("orderType");
    if (urlOrderType && urlOrderType !== orderType)
      dispatch(updateOrderType(urlOrderType as OrderType));
    else if (storedOrderType && !orderType)
      dispatch(updateOrderType(storedOrderType as OrderType));
  }, [searchParams, orderType]);

  if (isLoading) return <Loader />;

  if (!restaurant) return <div>{t("Restaurant not found")}</div>;

  if (restaurant) {
    localStorage.setItem("restaurantID", restaurant.restautantId);
  }

  if (param.id && !pathname.endsWith(param.id)) return <Outlet />;

  return (
    <>
      <div className={styles.languageSwitch}>
        <LanguageSwitch />
      </div>

      <div className={styles.homeContainer}>
        <div style={{ textAlign: "center", maxWidth: "100%" }}>
          <div className={styles.logoContainer}>
            <img
              src={restaurant?.restaurant_logo || ""}
              alt="logo"
              width={96}
              height={96}
              className={styles.logo}
            />
          </div>
          <ProTitle level={5} style={{ margin: 0 }}>
            {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
          </ProTitle>
          <ProText style={{ fontSize: 14, margin: 0 }}>
            {isRTL ? restaurant?.descriptionAR : restaurant?.description}
          </ProText>
        </div>

        <RestaurantServices
          dineIn={restaurant?.dineIn}
          pickup={restaurant?.pickup}
          gift={restaurant?.gift}
          delivery={restaurant?.delivery}
          toRoom={restaurant?.toRoom}
          toOffice={restaurant?.toOffice}
          is_booking_enabled={restaurant?.is_booking_enabled === 1}
          params={{ id: "1", locale: "en" }}
        />
        <div className={styles.promotionContainer}>
          <Ads1 />
        </div>
        <div className={styles.socialIconsContainer}>
          <InstagramIcon className={styles.socialIcon} />
          <XIcon className={styles.socialIcon} />
          <SnapIcon className={styles.socialIcon} />
          <JIcon className={styles.socialIcon} />
        </div>
      </div>

      <LocalStorageHandler
        restaurantID={restaurant.restautantId}
        restaurantName={restaurant.restautantName}
      />
    </>
  );
}