import { MetaFunction } from "@remix-run/node";
import { useServiceGetFollowedSellers } from "../requestHandler/use-following-hooks";
import ProfilePagesHeader from "../components/ProfilePagesHeader";
import { Link } from "@remix-run/react";
import { FollowList } from "src/api/types";
import UiProvider from "~/components/UiProvider";
import SellerLogo from "~/components/SellerLogo";

export default function Following() {
  const {
    data: followedSellers,
    isLoading,
    isError,
    refetch,
  } = useServiceGetFollowedSellers();

  return (
    <div className="flex flex-col gap-0 pb-20">
      <ProfilePagesHeader title="فروشگاه‌های دنبال شده" />
      <UiProvider
        isLoading={isLoading}
        isEmpty={!followedSellers || followedSellers.length === 0}
        isError={isError}
        onRetry={refetch}
        type="following"
      >
        <FollowedSellersList followedSellers={followedSellers || []} />
      </UiProvider>
    </div>
  );
}

const FollowedSellersList = ({
  followedSellers,
}: {
  followedSellers: FollowList[];
}) => {
  return (
    <div className="flex flex-col w-full">
      {followedSellers.map((seller) => (
        <Link
          to={`/seller/${seller.username}`}
          key={seller.sellerId}
          className="w-full"
        >
          <div className="w-full h-[80px] flex items-center px-4 gap-4">
            <SellerLogo src={seller.storeLogo} alt="Store Logo" />
            <p className="text-R14 font-bold">{seller.storeName}</p>
          </div>
        </Link>
      ))}
    </div>
  );
};

export const meta: MetaFunction = () => {
  const title = "فروشگاه‌های دنبال شده | ویترون";
  const description = "مشاهده لیست فروشگاه‌های دنبال شده در ویترون";
  const imageUrl =
    "https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";

  return [
    { title },
    { name: "description", content: description },
    {
      name: "keywords",
      content: "فروشگاه، دنبال شده، فالو، ویترون",
    },
    { name: "robots", content: "noindex, follow" },

    // Open Graph
    { property: "og:type", content: "website" },
    { property: "og:title", content: title },
    { property: "og:description", content: description },
    { property: "og:image", content: imageUrl },
    { property: "og:site_name", content: "ویترون" },
    { property: "og:locale", content: "fa_IR" },

    // Twitter Card
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: title },
    { name: "twitter:description", content: description },
  ];
};