"use client";

import Link from "next/link";
import { formatLiveNewsDateTime, formatLiveNewsTime } from "@/lib/formatDate";
import { ROUTES } from "@/lib/routes";
import type { NewsroomItem } from "@/types/newsroom";

interface NewsfeedItemProps {
  item: NewsroomItem;
}

export function NewsfeedItem({ item }: NewsfeedItemProps) {
  const articleLink = item.sl
    ? ROUTES.newsroomArticle(item.sl)
    : ROUTES.newsroomArticle(item._id);

  const rawDate = item.d || item.createdAt;
  const timeDisplay = formatLiveNewsTime(rawDate);
  const fullDateDisplay = formatLiveNewsDateTime(rawDate);

  // Extract category name or author for the lower label
  const categoryName =
    item.cat_name ||
    (Array.isArray(item.cat) ? item.cat[0] : item.cat);
  const authorName = item.author;

  return (
    <article className="group relative flex items-start justify-between gap-4 py-6 sm:gap-6 sm:py-7 md:gap-8">
      {/* Left Column: Time, Title, Tags */}
      <div className="flex flex-1 flex-col">
        {/* Time Stamp */}
        {(timeDisplay || rawDate) && (
          <time
            dateTime={rawDate}
            title={fullDateDisplay || rawDate}
            className="mb-1.5 text-xs font-bold tracking-tight text-[#0f172a] sm:mb-2 sm:text-sm"
          >
            {fullDateDisplay}
          </time>
        )}

        {/* Title (Redirects to Detail Page) */}
        <h2 className="mb-2.5 text-base font-bold leading-snug tracking-tight text-[#0f172a] sm:text-lg sm:leading-snug lg:text-[20px]">
          <Link
            href={articleLink}
            className="transition-colors duration-200 group-hover:text-accent"
          >
            {item.t}
          </Link>
        </h2>

        {/* Meta Tag: Category / Author / Source wire style */}
        <div className="mt-auto flex flex-wrap items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-[#64748b] sm:text-xs">
          {categoryName && (
            <span className="text-[#334155]">{categoryName}</span>
          )}

          {categoryName && (authorName || !categoryName) && (
            <span
              className="inline-block size-1.5 shrink-0 bg-[#0284c7]"
              aria-hidden="true"
            />
          )}

          {authorName ? (
            <span>{authorName}</span>
          ) : !categoryName ? (
            <span>LIVE DESK</span>
          ) : null}
        </div>
      </div>

      {/* Right Column: Thumbnail Image (Redirects to Detail Page) */}
      <Link
        href={articleLink}
        className="relative block aspect-[16/10] w-[115px] shrink-0 overflow-hidden rounded-md bg-gray-100 sm:w-[185px] md:w-[225px]"
        aria-label={`Read article: ${item.t}`}
      >
        {item.bi ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={item.bi}
            alt={item.t}
            className="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 text-slate-400">
            <svg
              className="h-8 w-8 text-slate-300 sm:h-10 sm:w-10"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
        )}
      </Link>
    </article>
  );
}