import Link from "next/link";
import { convertTimestampToJalali } from "@/helper";

const crumbClass =
  "text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal";

function Head({ data }) {
  const firstTag = data?.tag?.[0];
  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
  // normalizeBlog تگ‌ها را به [{name}] تبدیل می‌کند؛ نامِ خالی حذف می‌شود.
  const tags = (Array.isArray(data?.tag) ? data.tag : [])
    .map((t) => (typeof t === "string" ? t : t?.name))
    .filter(Boolean);

  return (
    <div>
      <nav
        aria-label="مسیر"
        className="flex flex-wrap items-center justify-start gap-1"
      >
        <Link href="/blogs" className={`${crumbClass} hover:text-[#525252]`}>
          بلاگ
        </Link>
        <span className={crumbClass}>{">"}</span>
        {firstTag?.name && (
          <>
            {/* دسته‌بندی خودش یک صفحهٔ مقصد دارد: همان لیست مقاله‌ها فیلترشده. */}
            <Link
              href={`/blogs?tag=${encodeURIComponent(firstTag.name)}`}
              className={`${crumbClass} hover:text-[#525252]`}
            >
              {firstTag.name}
            </Link>
            <span className={crumbClass}>{">"}</span>
          </>
        )}
        <span className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
          {data?.title}
        </span>
      </nav>
      <div>
        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[30px] font-bold leading-[1.6]">
          {data?.title}
        </h1>
      </div>
      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
        {data?.author && (
          <div className="flex items-center justify-start gap-1">
            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
              نویسنده:
            </p>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {data.author}
            </p>
          </div>
        )}
        {createdDate && (
          <div className="flex items-center justify-start gap-1">
            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
              تاریخ انتشار:
            </p>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {createdDate}
            </p>
          </div>
        )}
        {data?.reading_time > 0 && (
          <div className="flex items-center justify-start gap-1">
            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
              زمان مطالعه:
            </p>
            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
              {data.reading_time} دقیقه
            </p>
          </div>
        )}
      </div>
      {/* فهرست کامل تگ‌ها — تا این تغییر فقط تگ اول در بردکرامب دیده می‌شد.
          مقصد هر چیپ همان لیست مقاله‌هاست که `?tag=` را می‌خواند؛ شکل شیئیِ href
          تگِ حاوی فاصله یا & را هم درست encode می‌کند. */}
      {tags.length > 0 && (
        <ul className="flex flex-wrap items-center justify-start gap-2 mt-[12px] md:mt-[16px]">
          {tags.map((tag, idx) => (
            <li key={`${tag}-${idx}`}>
              <Link
                href={{ pathname: "/blogs", query: { tag } }}
                className="block bg-[#F5F5F5] text-[#525252] rounded-full px-[12px] py-[4px] text-[11px] md:text-[13px] font-medium hover:bg-[#E8E8E8] hover:text-[#3B3B3B] transition-colors"
              >
                {tag}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Head;