"use client";

import { useEffect, useState } from "react";
import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import useAxios from "@/hooks/useAxios";
import Link from "next/link";
import { useTranslation } from "react-i18next";

type LikedBillboard = {
  _id: string;
  advertisingId?: { _id: string; title?: string } | null;
};

function BillboardLikesPage() {
  const { t } = useTranslation("common");
  const { request } = useAxios();
  const [items, setItems] = useState<LikedBillboard[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    request<{ data: LikedBillboard[] }>(
      "GET",
      "/advertising/user-liked?page=1&limit=50",
      null,
      { noToast: true }
    )
      .then((res) => setItems(res?.data || []))
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  }, [request]);

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.activity.items.billboardLikes")}</PageTitle>
        <div className="my-6">
          {loading ? (
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <div
                  key={i}
                  className="h-12 animate-pulse rounded-xl bg-neutral-200 dark:bg-neutral-800"
                />
              ))}
            </div>
          ) : items.length === 0 ? (
            <p className="py-10 text-center text-sm text-neutral-500">
              {t("models.nothingFound")}
            </p>
          ) : (
            <ul className="space-y-1">
              {items
                .filter((item) => item.advertisingId)
                .map((item) => (
                  <li key={item._id}>
                    <Link
                      href={`/billboards/${item.advertisingId?._id}/x`}
                      className="flex items-center justify-between rounded-xl px-2 py-3 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                      <span className="truncate text-sm font-bold">
                        {item.advertisingId?.title}
                      </span>
                    </Link>
                  </li>
                ))}
            </ul>
          )}
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default BillboardLikesPage;
