import type { ReactNode } from "react";

export const decodeHtml = (str: string): string =>
  str
    .replace(/&/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'");

// ─── Author sidebar social links ───────────────────────────────────────────
interface SocialLink {
  platform: string;
  url: string;
  icon: string;
}

export const SOCIAL_LINKS: SocialLink[] = [
  { platform: "Facebook", url: "#", icon: "/assets/images/facebook.svg" },
  { platform: "LinkedIn", url: "#", icon: "/assets/images/linkedin.svg" },
  { platform: "Twitter", url: "#", icon: "/assets/images/twitter.svg" },
  { platform: "Instagram", url: "#", icon: "/assets/images/instagram.svg" },
  { platform: "Pinterest", url: "#", icon: "/assets/images/pinterest.svg" },
];

// ─── Share-button platforms ─────────────────────────────────────────────────
interface ShareLink {
  platform: string;
  url: string;
  bg: string;
  svg: ReactNode;
}

interface SharePlatform {
  platform: string;
  bg: string;
  buildUrl: (encodedUrl: string, encodedTitle: string) => string;
  svg: React.ReactNode;
}

const SHARE_PLATFORMS: SharePlatform[] = [
  {
    platform: "Facebook",
    bg: "var(--color-brand-facebook)",
    buildUrl: (u) => `https://www.facebook.com/sharer/sharer.php?u=${u}`,
    svg: (
      <svg viewBox="0 0 32 32" width="100%" height="100%" aria-hidden="true">
        <path
          fill="var(--color-white)"
          d="M28 16c0-6.627-5.373-12-12-12S4 9.373 4 16c0 5.628 3.875 10.35 9.101 11.647v-7.98h-2.474V16H13.1v-1.58c0-4.085 1.849-5.978 5.859-5.978.76 0 2.072.15 2.608.298v3.325c-.283-.03-.775-.045-1.386-.045-1.967 0-2.728.745-2.728 2.683V16h3.92l-.673 3.667h-3.247v8.245C23.395 27.195 28 22.135 28 16Z"
        />
      </svg>
    ),
  },
  {
    platform: "X",
    bg: "var(--color-gray-815)",
    buildUrl: (u, t) => `https://twitter.com/intent/tweet?text=${t}&url=${u}`,
    svg: (
      <svg viewBox="0 0 32 32" width="100%" height="100%" aria-hidden="true">
        <path
          fill="var(--color-white)"
          d="M21.751 7h3.067l-6.7 7.658L26 25.078h-6.172l-4.833-6.32-5.531 6.32h-3.07l7.167-8.19L6 7h6.328l4.37 5.777L21.75 7Zm-1.076 16.242h1.7L11.404 8.74H9.58l11.094 14.503Z"
        />
      </svg>
    ),
  },
  {
    platform: "LinkedIn",
    bg: "var(--color-brand-linkedin)",
    buildUrl: (u) => `https://www.linkedin.com/sharing/share-offsite/?url=${u}`,
    svg: (
      <svg viewBox="0 0 32 32" width="100%" height="100%" aria-hidden="true">
        <path
          fill="var(--color-white)"
          d="M6.227 12.61h4.19v13.48h-4.19V12.61zm2.095-6.7a2.43 2.43 0 0 1 0 4.86c-1.344 0-2.428-1.09-2.428-2.43s1.084-2.43 2.428-2.43m4.72 6.7h4.02v1.84h.058c.56-1.058 1.927-2.176 3.965-2.176 4.238 0 5.02 2.792 5.02 6.42v7.395h-4.183v-6.56c0-1.564-.03-3.574-2.178-3.574-2.18 0-2.514 1.7-2.514 3.46v6.668h-4.187V12.61z"
        />
      </svg>
    ),
  },
  {
    platform: "Pinterest",
    bg: "var(--color-red-deep)",
    buildUrl: (u, t) =>
      `https://pinterest.com/pin/create/button/?url=${u}&description=${t}`,
    svg: (
      <svg viewBox="-2 -2 35 35" width="100%" height="100%" aria-hidden="true">
        <path
          fill="var(--color-white)"
          d="M16.539 4.5c-6.277 0-9.442 4.5-9.442 8.253 0 2.272.86 4.293 2.705 5.046.303.125.574.005.662-.33.061-.231.205-.816.27-1.06.088-.331.053-.447-.191-.736-.532-.627-.873-1.439-.873-2.591 0-3.338 2.498-6.327 6.505-6.327 3.548 0 5.497 2.168 5.497 5.062 0 3.81-1.686 7.025-4.188 7.025-1.382 0-2.416-1.142-2.085-2.545.397-1.674 1.166-3.48 1.166-4.689 0-1.081-.581-1.983-1.782-1.983-1.413 0-2.548 1.462-2.548 3.419 0 1.247.421 2.091.421 2.091l-1.699 7.199c-.505 2.137-.076 4.755-.039 5.019.021.158.223.196.314.077.13-.17 1.813-2.247 2.384-4.324.162-.587.929-3.631.929-3.631.46.876 1.801 1.646 3.227 1.646 4.247 0 7.128-3.871 7.128-9.053.003-3.918-3.317-7.568-8.361-7.568z"
        />
      </svg>
    ),
  },
  {
    platform: "WhatsApp",
    bg: "var(--color-brand-whatsapp)",
    buildUrl: (u, t) => `https://api.whatsapp.com/send?text=${t}%20${u}`,
    svg: (
      <svg viewBox="-6 -5 40 40" width="100%" height="100%" aria-hidden="true">
        <path
          stroke="var(--color-white)"
          strokeWidth="2"
          fill="none"
          d="M 11.579798566743314 24.396926207859085 A 10 10 0 1 0 6.808479557110079 20.73576436351046"
        />
        <path
          d="M 7 19 l -1 6 l 6 -1"
          stroke="var(--color-white)"
          strokeWidth="2"
          fill="none"
        />
        <path
          d="M 10 10 q -1 8 8 11 c 5 -1 0 -6 -1 -3 q -4 -3 -5 -5 c 4 -2 -1 -5 -1 -4"
          fill="var(--color-white)"
        />
      </svg>
    ),
  },
];

export const getShareLinks = (
  encodedUrl: string,
  encodedTitle: string,
): ShareLink[] =>
  SHARE_PLATFORMS.map(({ platform, bg, buildUrl, svg }) => ({
    platform,
    bg,
    url: buildUrl(encodedUrl, encodedTitle),
    svg,
  }));