"use client";

import Image from "next/image";
import Link from "next/link";
import type { Section, SectionArticle } from "@/types/api/section.types";

function isValidImg(url: string) {
  return !!url && !url.includes("no_img");
}
function fmtRelTime(dateStr: string) {
  const diff = Date.now() - new Date(dateStr).getTime();
  const hrs = Math.floor(diff / 3_600_000);
  if (hrs < 1) return `${Math.floor(diff / 60_000)}m`;
  if (hrs < 24) return `${hrs}h`;
  return `${Math.floor(hrs / 24)}d`;
}

interface Props {
  section: Section;
  locale: string;
}

export default function ArticleSquareSection({ section }: Props) {
  const lhref = (p: string) => `${p}`;
  const articles = (section.data as SectionArticle[]).slice(0, 8);
  if (!articles.length) return null;

  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-title">
            <h2>{section.title}</h2>
            {section.sub_title && (
              <span className="count">{section.sub_title}</span>
            )}
          </div>
          {section.view_all === 1 && (
            <Link href={`/section/${section.id}`} className="sec-link">
              View all
              <svg className="icn-14" viewBox="0 0 24 24">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </Link>
          )}
        </div>

        {/* Horizontal scroll of square cards */}
        <div
          style={{
            display: "flex",
            gap: "1rem",
            overflowX: "auto",
            scrollSnapType: "x mandatory",
            paddingBottom: "0.5rem",
            scrollbarWidth: "none",
          }}
        >
          {articles.map((a) => {
            const img = isValidImg(a.web_image)
              ? a.web_image
              : isValidImg(a.portrait_img)
                ? a.portrait_img
                : null;
            return (
              <Link
                key={a.id}
                href={lhref(`/detail/${a.id}`)}
                style={{
                  flexShrink: 0,
                  width: 200,
                  scrollSnapAlign: "start",
                  textDecoration: "none",
                  color: "inherit",
                }}
              >
                {/* Square image with overlay */}
                <div
                  style={{
                    width: 200,
                    height: 200,
                    borderRadius: 10,
                    overflow: "hidden",
                    position: "relative",
                    marginBottom: "0.625rem",
                    background: "#e5e7eb",
                  }}
                >
                  {img && (
                    <Image
                      src={img}
                      alt={a.title}
                      fill
                      style={{ objectFit: "cover" }}
                      unoptimized
                    />
                  )}
                  {/* Gradient overlay */}
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      background:
                        "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)",
                    }}
                  />
                  {/* Category pill */}
                  <span
                    style={{
                      position: "absolute",
                      top: 10,
                      left: 10,
                      background: "var(--brand)",
                      color: "#fff",
                      fontSize: 10,
                      fontWeight: 700,
                      letterSpacing: "0.07em",
                      textTransform: "uppercase",
                      padding: "2px 8px",
                      borderRadius: 3,
                    }}
                  >
                    {a.category}
                  </span>
                  {/* Channel name at bottom */}
                  <span
                    style={{
                      position: "absolute",
                      bottom: 10,
                      left: 10,
                      right: 10,
                      color: "rgba(255,255,255,0.8)",
                      fontSize: 10,
                      fontFamily: "var(--mono)",
                      letterSpacing: "0.03em",
                    }}
                  >
                    {a.channel_name} · {fmtRelTime(a.created_at)}
                  </span>
                </div>

                <h4
                  style={{
                    fontSize: "0.875rem",
                    fontWeight: 600,
                    lineHeight: 1.4,
                    margin: 0,
                    WebkitLineClamp: 2,
                    display: "-webkit-box",
                    WebkitBoxOrient: "vertical",
                    overflow: "hidden",
                    color: "var(--ink)",
                  }}
                >
                  {a.title}
                </h4>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}