"use client";

import Link from "next/link";
import { MainHeader } from "@/components/layout/main-header";
import { ProtectedRoute } from "@/components/layout/protected-route";
import { CouponCard } from "@/components/shared/coupon-card";
import { MainFooter } from "@/components/shared/main-footer";
import { StoreCard } from "@/components/shared/store-card";
import { EmptyState } from "@/components/ui/empty-state";
import { SectionHeader } from "@/components/ui/section-header";
import { Skeleton } from "@/components/ui/skeleton";
import { useFavoritesQuery } from "@/hooks/queries/api-hooks";
import type { Coupon, FavoriteItem, FavoriteListPayload, Store } from "@/types/domain";

const isStore = (value: unknown): value is Store => {
  if (!value || typeof value !== "object") {
    return false;
  }

  const store = value as Partial<Store>;
  return typeof store.id === "number" && typeof store.slug === "string";
};

const isCoupon = (value: unknown): value is Coupon => {
  if (!value || typeof value !== "object") {
    return false;
  }

  const coupon = value as Partial<Coupon>;
  return typeof coupon.id === "number" && typeof coupon.title_ar === "string";
};

function normalizeFavorites(payload: FavoriteListPayload | FavoriteItem[] | undefined): {
  stores: Store[];
  coupons: Coupon[];
} {
  if (!payload) {
    return { stores: [], coupons: [] };
  }

  if (!Array.isArray(payload)) {
    return {
      stores: (payload.stores || []).filter(isStore),
      coupons: (payload.coupons || []).filter(isCoupon),
    };
  }

  const stores: Store[] = [];
  const coupons: Coupon[] = [];

  payload.forEach((item) => {
    if (isStore((item as FavoriteItem).favoritable)) {
      stores.push((item as FavoriteItem).favoritable as Store);
      return;
    }

    if (isCoupon((item as FavoriteItem).favoritable)) {
      coupons.push((item as FavoriteItem).favoritable as Coupon);
      return;
    }

    if (isStore((item as FavoriteItem).store)) {
      stores.push((item as FavoriteItem).store as Store);
      return;
    }

    if (isCoupon((item as FavoriteItem).coupon)) {
      coupons.push((item as FavoriteItem).coupon as Coupon);
      return;
    }
  });

  return { stores, coupons };
}

export default function FavoritesPage() {
  const favoritesQuery = useFavoritesQuery(true);
  const normalized = normalizeFavorites(favoritesQuery.data);

  return (
    <div>
      <MainHeader />
      <ProtectedRoute>
        <main className="container-shell section-space space-y-8">
          <SectionHeader title="المفضلة" subtitle="كل المتاجر والكوبونات التي حفظتها للعودة إليها بسرعة." />

          <section>
            <SectionHeader title="المتاجر المفضلة" />
            {favoritesQuery.isLoading ? (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {Array.from({ length: 3 }).map((_, i) => (
                  <Skeleton key={i} className="h-28" />
                ))}
              </div>
            ) : normalized.stores.length > 0 ? (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {normalized.stores.map((store) => (
                  <Link key={store.id} href={`/stores/${store.slug}`}>
                    <StoreCard store={store} />
                  </Link>
                ))}
              </div>
            ) : (
              <EmptyState title="لا توجد متاجر مفضلة" description="ابدأ بإضافة متاجرك المفضلة من صفحات المتاجر." />
            )}
          </section>

          <section>
            <SectionHeader title="الكوبونات المفضلة" />
            {favoritesQuery.isLoading ? (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {Array.from({ length: 3 }).map((_, i) => (
                  <Skeleton key={i} className="h-40" />
                ))}
              </div>
            ) : normalized.coupons.length > 0 ? (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {normalized.coupons.map((coupon) => (
                  <Link key={coupon.id} href={`/coupons/${coupon.id}`}>
                    <CouponCard coupon={coupon} />
                  </Link>
                ))}
              </div>
            ) : (
              <EmptyState title="لا توجد كوبونات مفضلة" description="احفظ الكوبونات المهمة لتجدها هنا بسهولة." />
            )}
          </section>
        </main>
      </ProtectedRoute>
      <MainFooter />
    </div>
  );
}