"use client";
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
import EqualizerIcon from "@/components/icons/EqualizerIcon";
import TelegramIcon from "@/components/icons/TelegramIcon";
import TabContainer from "@/components/tab/TabContainer";
import { TabHeader } from "@/components/tab/TabHeader";
import Comment from "@/components/utils/Comment";
import RateBar from "@/components/utils/RateBar";
import useToggle from "@/hooks/helpers/useToggle";
import { glassSurfaceCard, glassSurfaceCardFlat, glassSurfaceFlat } from "@/lib/styles/glassSurface";
import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from "iconsax-react";
import { useQueryState } from "next-usequerystate";
import Image from "next/image";
import AboutSkeleton from "./components/AboutSkeleton";
import { useGetAbout, useGetReviews, useGetSchedules } from "./hooks/useAboutData";
import { isReviewApproved } from "./types/Types";

const sortings = ["جدیدترین", "قدیمی ترین"];

function AboutPage() {
  const { data: aboutData, isLoading: aboutLoading } = useGetAbout();
  const { data: reviewsData, isLoading: reviewsLoading } = useGetReviews();
  const { data: schedulesData, isLoading: schedulesLoading } = useGetSchedules();
  const [sorting, setSorting] = useQueryState("sortBy", { defaultValue: "0" });
  const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();

  const restaurant = aboutData?.data;
  const schedules = schedulesData?.data || [];
  const phoneList = Array.isArray(restaurant?.phones) ? restaurant.phones.filter((phone): phone is string => Boolean(phone)) : restaurant?.phone ? [restaurant.phone] : [];

  const isLoading = aboutLoading || reviewsLoading || schedulesLoading;

  if (isLoading) {
    return <AboutSkeleton />;
  }

  const changeSorting = (index: number) => {
    setSorting(() => String(index));
    setSortingModal(false);
  };

  const formatTime = (time: string): string => {
    return time.substring(0, 5);
  };

  const getDayName = (weekDay: number): string => {
    const days = ["یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنج‌شنبه", "جمعه", "شنبه"];
    return days[weekDay] || "";
  };

  const groupSchedulesByDay = () => {
    const grouped: Record<number, typeof schedules> = {};
    schedules
      .filter((schedule) => schedule.isActive)
      .forEach((schedule) => {
        if (!grouped[schedule.weekDay]) {
          grouped[schedule.weekDay] = [];
        }
        grouped[schedule.weekDay].push(schedule);
      });
    return grouped;
  };

  const getTodaySchedule = () => {
    const today = new Date().getDay();
    const todaySchedules = schedules.filter((schedule) => schedule.isActive && schedule.weekDay === today);
    if (todaySchedules.length > 0) {
      const firstSchedule = todaySchedules[0];
      return `${formatTime(firstSchedule.openTime)} تا ${formatTime(firstSchedule.closeTime)}`;
    }
    return null;
  };

  const firstTab = () => {
    if (!restaurant) return null;

    return (
      <section aria-labelledby="about-title" className="py-4">
        <section className={glassSurfaceCard("p-4")}>
          <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-6.25">
            <div className="">
              <h2 className="text-sm2 font-bold leading-5">{restaurant.name}</h2>
              {restaurant.establishedYear && <p className="text-sm2 leading-5 mt-4">تاسیس: {restaurant.establishedYear}</p>}
              {restaurant.tagNames && restaurant.tagNames.length > 0 && <p className="text-sm2 leading-5 mt-2">نوع محصولات: {restaurant.tagNames.join("، ")}</p>}
            </div>
            {restaurant.logo && (
              <div className="rounded-normal overflow-clip">
                <Image alt="logo" src={restaurant.logo} width={88} height={88} unoptimized priority />
              </div>
            )}
          </div>
          {restaurant.description && (
            <div className="mt-5.75">
              <h3 className="text-sm2 font-bold leading-5">درباره مجموعه</h3>
              <p className="text-sm2 leading-5 mt-3 border-spacing-48" style={{ wordSpacing: "0.01em" }}>
                {restaurant.description}
              </p>
              {restaurant.images && restaurant.images.length > 0 && (
                <div className="inline-flex gap-2 mt-5.75 items-center">
                  <Gallery size={20} className="stroke-disabled-text" />
                  <span className="text-sm2 text-disabled-text font-medium pt-0.5">عکس های رستوران</span>
                </div>
              )}
            </div>
          )}
        </section>

        {(phoneList.length > 0 || restaurant.telegram || restaurant.whatsapp || restaurant.instagram) && (
          <section className={glassSurfaceCard("pt-3 pb-3.5 px-4 mt-4 grid grid-cols-3 items-center")}>
            <h2 className="text-sm2 font-medium leading-5">ارتباط</h2>
            <div className="col-span-2 text-center flex justify-center flex-wrap gap-2">
              {phoneList.map((phone) => (
                <a key={phone} href={`tel://${phone}`} className="bg-[#EAEDF5] dark:bg-neutral-700 px-2 py-1.5 rounded-normal inline-flex items-center gap-1.5">
                  <CallCalling className="stroke-foreground" size={24} />
                  <span dir="ltr" className="text-xs leading-5">
                    {phone}
                  </span>
                </a>
              ))}
              {restaurant.telegram && (
                <a href={`https://t.me/${restaurant.telegram}`} className="bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal">
                  <TelegramIcon className="stroke-foreground" width={24} height={24} />
                </a>
              )}
              {restaurant.whatsapp && (
                <a href={`https://whatsapp.com/?phone=${restaurant.whatsapp}`} className="bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal">
                  <Whatsapp className="stroke-foreground" size={24} />
                </a>
              )}
              {restaurant.instagram && (
                <a href={`https://instagram.com/${restaurant.instagram}`} className="bg-[#EAEDF5] dark:bg-neutral-700 p-2 rounded-normal">
                  <Instagram className="stroke-foreground" size={24} />
                </a>
              )}
            </div>
          </section>
        )}

        {restaurant.address && (
          <section className={glassSurfaceCard("px-4 pt-6 pb-6 mt-4")}>
            <h2 className="text-sm2 font-medium leading-5">آدرس</h2>
            <p className="text-sm2 mt-2.25 leading-5">{restaurant.address}</p>
            {restaurant.latitude && restaurant.longitude && (
              <div className="inline-flex gap-2 mt-5.75 items-center ">
                <Location size={20} className="stroke-disabled-text" />
                <span className="text-sm2 text-disabled-text ">موقعیت روی نقشه</span>
              </div>
            )}
          </section>
        )}

        {schedules.length > 0 && getTodaySchedule() && (
          <section aria-label="ساعات کاری" className={glassSurfaceCard("py-6 px-4 mt-4 flex justify-between items-center")}>
            <div className="flex items-center gap-2 justify-start">
              <Clock size={16} className="stroke-disabled-text" />
              <div className="text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]">باز</div>
              <div className="size-1.5 bg-[#D9D9D9] rounded-full"></div>
              <div className="text-sm2 mt-0.5">امروز از ساعت {getTodaySchedule()}</div>
            </div>
            <div className="">
              <ArrowDown2 size={16} className="stroke-[#292D32]" />
            </div>
          </section>
        )}

        {schedules.length > 0 && (
          <section>
            {Object.entries(groupSchedulesByDay())
              .sort(([a], [b]) => Number(a) - Number(b))
              .map(([weekDay, daySchedules]) => (
                <div key={weekDay} className={glassSurfaceCardFlat("leading-5 py-6 px-4 mt-4 flex justify-between items-center")}>
                  <div className="text-sm2">{getDayName(Number(weekDay))}</div>
                  <div className="text-sm2 font-light">
                    {daySchedules.map((schedule, index) => (
                      <span key={schedule.id}>
                        {formatTime(schedule.openTime)} - {formatTime(schedule.closeTime)}
                        {index < daySchedules.length - 1 && "، "}
                      </span>
                    ))}
                  </div>
                </div>
              ))}
          </section>
        )}
      </section>
    );
  };

  const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString("fa-IR", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const secondTab = () => {
    const reviews = (reviewsData?.data || []).filter(isReviewApproved);

    const sortedReviews = [...reviews].sort((a, b) => {
      if (sorting === "0") {
        // جدیدترین
        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
      } else {
        // قدیمی ترین
        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
      }
    });

    const averageRating = reviews.length > 0 ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length : 0;

    const ratingCounts = {
      5: reviews.filter((r) => r.rating === 5).length,
      4: reviews.filter((r) => r.rating === 4).length,
      3: reviews.filter((r) => r.rating === 3).length,
      2: reviews.filter((r) => r.rating === 2).length,
      1: reviews.filter((r) => r.rating === 1).length,
    };

    const totalReviews = reviews.length;
    const ratingPercentages = {
      5: totalReviews > 0 ? Math.round((ratingCounts[5] / totalReviews) * 100) : 0,
      4: totalReviews > 0 ? Math.round((ratingCounts[4] / totalReviews) * 100) : 0,
      3: totalReviews > 0 ? Math.round((ratingCounts[3] / totalReviews) * 100) : 0,
      2: totalReviews > 0 ? Math.round((ratingCounts[2] / totalReviews) * 100) : 0,
      1: totalReviews > 0 ? Math.round((ratingCounts[1] / totalReviews) * 100) : 0,
    };

    return (
      <section aria-labelledby="reviews-title" className="py-4">
        <section aria-label="امتیاز کاربران" className={glassSurfaceCard("p-4 py-6 grid grid-cols-2 items-center")}>
          <div className="text-center font-bold text-5xl">{averageRating.toFixed(1)}</div>
          <div className="flex flex-col w-fit items-end">
            <RateBar className="mt-1" content="5" percentage={String(ratingPercentages[5])} />
            <RateBar className="mt-1" content="4" percentage={String(ratingPercentages[4])} />
            <RateBar className="mt-1" content="3" percentage={String(ratingPercentages[3])} />
            <RateBar className="mt-1" content="2" percentage={String(ratingPercentages[2])} />
            <RateBar className="mt-1" content="1" percentage={String(ratingPercentages[1])} />
          </div>
        </section>

        <section className={glassSurfaceCard("pt-3 pb-3.5 px-4 mt-4")}>
          <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
            <h2 className="text-sm2 font-medium leading-5">نظرات کاربران</h2>
            <button onClick={toggleSortingModal} className={glassSurfaceFlat("rounded-xl h-8 pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-1.75")}>
              <EqualizerIcon className="dark:text-white" />
              <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
            </button>
          </div>
          <div className="">
            {sortedReviews.length > 0 ? (
              sortedReviews.map((review) => (
                <article key={review.id}>
                  <Comment
                    className="pt-8"
                    user={review.user?.firstName + " " + review.user?.lastName}
                    rating={review.rating}
                    date={formatDate(review.createdAt)}
                    text={review.comment}
                    tags={[review.food.title]}
                    positivePoints={review.positivePoints}
                    negativePoints={review.negativePoints}
                  />
                </article>
              ))
            ) : (
              <p className="text-sm2 text-center py-8 text-disabled-text">هنوز نظری ثبت نشده است</p>
            )}
          </div>
        </section>
        <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
          <div className="px-8.5 py-10 justify-between">
            {sortings.map((v, i) => {
              return (
                <div key={i}>
                  <div onClick={() => changeSorting(i)} className="text-sm2 font-normal cursor-pointer">
                    {v}
                  </div>
                  {i < sortings.length - 1 && <hr className="border-white/40 dark:border-border mb-4 mt-4" />}
                </div>
              );
            })}
          </div>
        </AnimatedBottomSheet>
      </section>
    );
  };

  return (
    <div className="pt-8 h-full overflow-y-auto noscrollbar">
      <TabContainer>
        <TabHeader viewRenderer={firstTab()} title="درباره ما" icon={<InfoCircle size={24} />}></TabHeader>
        <TabHeader viewRenderer={secondTab()} title="امتیازات و نظرات" icon={<Star1 size={24} />}></TabHeader>
      </TabContainer>
    </div>
  );
}

export default AboutPage;
