import {
  ArrowUpRightIcon,
  BookOpenTextIcon,
  NewspaperIcon,
  YoutubeLogoIcon,
} from "@phosphor-icons/react";
import moment from "moment";
import { useEffect, useState } from "react";
import isProActive from "../../utils/isProActive";

const SITE_URL = "https://innocodia.com";
const UTM = `utm_source=dashboard_sidebar&utm_medium=${
  isProActive() ? "pro_plugin" : "free_plugin"
}&utm_campaign=resources`;
const POSTS_ENDPOINT = `${SITE_URL}/wp-json/wp/v2/posts?per_page=2&_embed=wp:featuredmedia&_fields=id,title,link,date,_links,_embedded`;

const withUtm = (url) => `${url}${url.includes("?") ? "&" : "?"}${UTM}`;

const RESOURCES = [
  {
    id: "docs",
    icon: BookOpenTextIcon,
    title: "Documentation",
    description: "Step-by-step guides for every badge and filter.",
    url: withUtm(`${SITE_URL}/docs/`),
    iconClass: "ino:bg-primary/10 ino:text-primary",
    tileClass: "ino:from-primary/10",
  },
  {
    id: "youtube",
    icon: YoutubeLogoIcon,
    title: "YouTube Channel",
    description: "Video tutorials to get more out of your badges.",
    url: "https://www.youtube.com/@innocodia",
    iconClass: "ino:bg-red-500/10 ino:text-red-600",
    tileClass: "ino:from-red-500/10",
  },
];

const decodeHtml = (html) =>
  new DOMParser().parseFromString(html, "text/html").documentElement
    .textContent;

const getThumbnail = (post) => {
  const media = post?._embedded?.["wp:featuredmedia"]?.[0];
  const sizes = media?.media_details?.sizes;
  return (
    sizes?.medium?.source_url ||
    sizes?.thumbnail?.source_url ||
    media?.source_url ||
    ""
  );
};

const ExternalLink = ({ href, className, children }) => (
  <a
    href={href}
    target="_blank"
    rel="noreferrer"
    className={`ino:no-underline ino:outline-none! ino:shadow-none! ${className}`}
  >
    {children}
  </a>
);

// Heading text can be tailored per page; the resources below stay the same.
const ProResources = ({
  heading = "Get More From",
  lead = "Your",
  highlight = "Badges",
  subtitle = "Tips, guides and tutorials to help you sell more with product badges.",
}) => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState("loading");

  useEffect(() => {
    const controller = new AbortController();

    fetch(POSTS_ENDPOINT, { signal: controller.signal })
      .then((response) => {
        if (!response.ok) throw new Error("Failed to load posts");
        return response.json();
      })
      .then((data) => {
        setPosts(Array.isArray(data) ? data : []);
        setStatus("done");
      })
      .catch((error) => {
        if (error.name !== "AbortError") setStatus("error");
      });

    return () => controller.abort();
  }, []);

  const showBlog = status === "loading" || posts.length > 0;
  const [featuredPost, ...otherPosts] = posts;

  return (
    <div className="ino:relative ino:overflow-hidden ino:rounded-lg ino:border ino:border-border ino:bg-card ino:p-5 ino:shadow-md">
      <div className="ino:pointer-events-none ino:absolute ino:-top-32 ino:-right-32 ino:size-80 ino:rounded-full ino:bg-primary/10 ino:blur-2xl" />
      <div className="ino:pointer-events-none ino:absolute ino:-bottom-32 ino:-left-32 ino:size-64 ino:rounded-full ino:bg-primary/10 ino:blur-2xl" />

      <div className="ino:relative">
        <p className="ino:m-0 ino:mt-1 ino:text-[22px] ino:leading-7 ino:font-bold ino:text-foreground">
          {heading}
          <br /> {lead} <span className="ino:text-primary">{highlight}</span>
        </p>
        <div className="ino:mt-1.5 ino:h-0.5 ino:w-14 ino:bg-primary" />
        <p className="ino:m-0 ino:mt-2 ino:text-sm ino:text-accent-foreground ino:2xl:text-base">
          {subtitle}
        </p>

        {showBlog ? (
          <div className="ino:mt-4">
            <div className="ino:flex ino:items-center ino:justify-between">
              <div className="ino:flex ino:items-center ino:gap-1.5">
                <NewspaperIcon
                  size={16}
                  weight="bold"
                  className="ino:text-primary"
                />
                <p className="ino:m-0 ino:text-xs ino:font-semibold ino:tracking-wider ino:text-muted-foreground ino:uppercase">
                  Latest from our blog
                </p>
              </div>
              <ExternalLink
                href={withUtm(`${SITE_URL}/blog/`)}
                className="ino:text-xs ino:font-medium ino:text-primary ino:hover:underline"
              >
                View all
              </ExternalLink>
            </div>

            {status === "loading" ? (
              <div className="ino:mt-3">
                <div className="ino:aspect-video ino:w-full ino:animate-pulse ino:rounded-lg ino:bg-muted" />
                <div className="ino:flex ino:gap-3 ino:py-3">
                  <div className="ino:h-14 ino:w-20 ino:shrink-0 ino:animate-pulse ino:rounded-lg ino:bg-muted" />
                  <div className="ino:flex-1 ino:space-y-2 ino:pt-1">
                    <div className="ino:h-3 ino:w-full ino:animate-pulse ino:rounded-full ino:bg-muted" />
                    <div className="ino:h-3 ino:w-2/3 ino:animate-pulse ino:rounded-full ino:bg-muted" />
                  </div>
                </div>
              </div>
            ) : (
              <div className="ino:mt-3 ino:flex ino:flex-col">
                <ExternalLink
                  href={withUtm(featuredPost.link)}
                  className="ino:group ino:relative ino:block ino:aspect-video ino:overflow-hidden ino:rounded-lg ino:bg-muted"
                >
                  {getThumbnail(featuredPost) ? (
                    <img
                      src={getThumbnail(featuredPost)}
                      alt=""
                      loading="lazy"
                      className="ino:size-full ino:object-cover ino:transition-transform ino:duration-300 ino:group-hover:scale-105"
                    />
                  ) : null}
                  <div className="ino:absolute ino:inset-0 ino:flex ino:flex-col ino:justify-end ino:bg-linear-to-t ino:from-black/80 ino:via-black/30 ino:to-transparent ino:p-3">
                    <p className="ino:m-0 ino:line-clamp-2 ino:text-sm ino:leading-snug ino:font-semibold ino:text-white">
                      {decodeHtml(featuredPost.title?.rendered || "")}
                    </p>
                    <p className="ino:m-0 ino:mt-1 ino:text-xs ino:text-white/75">
                      {moment(featuredPost.date).format("D MMM, YYYY")}
                    </p>
                  </div>
                </ExternalLink>

                {otherPosts.map((post) => {
                  const thumbnail = getThumbnail(post);

                  return (
                    <ExternalLink
                      key={post.id}
                      href={withUtm(post.link)}
                      className="ino:group ino:flex ino:gap-3 ino:py-3"
                    >
                      <div className="ino:h-14 ino:w-20 ino:shrink-0 ino:overflow-hidden ino:rounded-lg ino:bg-muted">
                        {thumbnail ? (
                          <img
                            src={thumbnail}
                            alt=""
                            loading="lazy"
                            className="ino:size-full ino:object-cover ino:transition-transform ino:duration-300 ino:group-hover:scale-105"
                          />
                        ) : null}
                      </div>
                      <div className="ino:min-w-0">
                        <p className="ino:m-0 ino:line-clamp-2 ino:text-sm ino:leading-snug ino:font-medium ino:text-foreground ino:transition-colors ino:group-hover:text-primary">
                          {decodeHtml(post.title?.rendered || "")}
                        </p>
                        <p className="ino:m-0 ino:mt-1 ino:text-xs ino:text-muted-foreground">
                          {moment(post.date).format("D MMM, YYYY")}
                        </p>
                      </div>
                    </ExternalLink>
                  );
                })}
              </div>
            )}
          </div>
        ) : null}

        <div className="ino:mt-3 ino:grid ino:grid-cols-2 ino:gap-3">
          {RESOURCES.map((resource) => (
            <ExternalLink
              key={resource.id}
              href={resource.url}
              className={`ino:group ino:flex ino:flex-col ino:rounded-lg ino:border ino:border-border ino:bg-card ino:bg-linear-to-bl ino:to-card ino:to-60% ino:p-3 ino:shadow-xs ino:transition-all ino:duration-150 ino:hover:-translate-y-0.5 ino:hover:border-primary/40 ino:hover:shadow-sm ${resource.tileClass}`}
            >
              <div className="ino:flex ino:items-start ino:justify-between">
                <div
                  className={`ino:flex ino:size-7.5 ino:items-center ino:justify-center ino:rounded-full ${resource.iconClass}`}
                >
                  <resource.icon size={16} weight="bold" />
                </div>
                <ArrowUpRightIcon
                  size={14}
                  className="ino:text-muted-foreground ino:transition-colors ino:group-hover:text-primary"
                />
              </div>
              <p className="ino:m-0 ino:mt-2.5 ino:text-sm ino:font-semibold ino:text-foreground">
                {resource.title}
              </p>
              <p className="ino:m-0 ino:mt-0.5 ino:text-xs ino:leading-relaxed ino:text-muted-foreground">
                {resource.description}
              </p>
            </ExternalLink>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProResources;