"use client";

import { useLocale, useTranslations } from "next-intl";
import { FadeIn } from "../ui/fade-in";
import BlogCard from "./blog-card";
import Breadcrumb from "./breadcrumb";
import TextSizeSlider from "./text-size-slider";
import Image from "next/image";
import type { BlogItem } from "@/lib/website-types";
import { stripHtml } from "@/lib/website-types";
import { formatLocaleDate, type Locale } from "@/lib/i18n-utils";

type BlogDetailContentProps = {
  blog: BlogItem;
  relatedBlogs: BlogItem[];
};

const SHARE_TARGETS = [
  {
    key: "linkedin",
    labelKey: "shareLinkedIn",
    icon: "/images/blogs/icons/share-linkedin.svg",
    buildUrl: (url: string) =>
      `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
  },
  {
    key: "whatsapp",
    labelKey: "shareWhatsApp",
    icon: "/images/blogs/icons/share-whatsapp.svg",
    buildUrl: (url: string, title: string) =>
      `https://wa.me/?text=${encodeURIComponent(`${title} ${url}`)}`,
  },
  {
    key: "facebook",
    labelKey: "shareFacebook",
    icon: "/images/blogs/icons/share-facebook.svg",
    buildUrl: (url: string) =>
      `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
  },
  {
    key: "twitter",
    labelKey: "shareTwitter",
    icon: "/images/blogs/icons/share-twitter.svg",
    buildUrl: (url: string, title: string) =>
      `https://x.com/intent/post?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
  },
] as const;

export default function BlogDetailContent({
  blog,
  relatedBlogs,
}: BlogDetailContentProps) {
  const t = useTranslations("blogDetail");
  const locale = useLocale() as Locale;
  const share = (buildUrl: (url: string, title: string) => string) =>
    buildUrl(window.location.href, blog.title);

  return (
    <section className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] py-6 bg-white">
      <div className="flex flex-col gap-6 w-full max-w-[1200px] mx-auto">

        <Breadcrumb currentPage={blog.title} />

        <div className="flex flex-col gap-4">

          <div className="flex flex-col gap-6">
            <h1 className="text-[32px] sm:text-[36px] md:text-[40px] font-bold leading-[1.4] text-[#202020]">
              {blog.title}
            </h1>

            {blog.image && (
              <div className="bg-[#f9f9f9] rounded-[8px] overflow-hidden w-full">
                <div className="relative w-full h-[400px] sm:h-[500px] md:h-[584px]">
                  <Image
                    src={blog.image}
                    alt={blog.title}
                    fill
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            )}
          </div>

          <div className="flex flex-col border-b border-[#e5e5e5]">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 py-6 px-2">
              <p className="text-[16px] leading-[1.5] text-[#202020] w-full sm:w-auto">
                <span>{t("location")} </span>
                <span className="text-[#1c75bc]">{t("centerName")}</span>
              </p>
              <p className="text-[14px] leading-[1.5] text-[#646464] w-full sm:w-auto">
                <span>{t("publishedLabel")} </span>
                <span>{formatLocaleDate(blog.created_at, locale)}</span>
              </p>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 py-6 px-2 border-b border-[#e5e5e5]">
            <div className="flex items-center gap-4 w-full sm:w-auto">
              <p className="text-[16px] leading-[1.5] text-[#202020]">
                {t("shareVia")}
              </p>
              <div className="flex items-center gap-4">
                {SHARE_TARGETS.map((target) => (
                  <button
                    key={target.key}
                    type="button"
                    className="size-6 transition-opacity hover:opacity-80 cursor-pointer"
                    aria-label={t(target.labelKey)}
                    onClick={() => {
                      window.open(
                        share(target.buildUrl),
                        "_blank",
                        "noopener,noreferrer",
                      );
                    }}
                  >
                    <Image
                      src={target.icon}
                      alt=""
                      width={24}
                      height={24}
                      className="size-full"
                    />
                  </button>
                ))}
              </div>
            </div>

            <TextSizeSlider />
          </div>

          <div className="flex flex-col gap-4 py-4">
            <div
              className="text-[var(--article-font-size,16px)] leading-[1.5] text-[#202020] space-y-4"
              style={{ fontSize: "var(--article-font-size, 16px)" }}
              dangerouslySetInnerHTML={{ __html: blog.description }}
            />
          </div>

          {relatedBlogs.length > 0 && (
            <div className="flex flex-col gap-4 pt-10 border-t border-[#e5e5e5]">
              <h2 className="text-[20px] sm:text-[24px] font-bold leading-[1.5] text-[#196aab]">
                {t("relatedNews")}
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {relatedBlogs.map((relatedBlog, index) => (
                  <FadeIn key={relatedBlog.id} delay={0.2 * index}>
                    <BlogCard
                      id={relatedBlog.id}
                      title={relatedBlog.title}
                      description={stripHtml(relatedBlog.description)}
                      image={relatedBlog.image ?? ""}
                      imageAlt={relatedBlog.title}
                    />
                  </FadeIn>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}