"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 fmtViews(n: number) {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
  return String(n);
}
function fmtRelTime(dateStr: string) {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60_000);
  const hrs = Math.floor(mins / 60);
  if (mins < 60) return `${mins}m`;
  if (hrs < 24) return `${hrs}h`;
  return `${Math.floor(hrs / 24)}d`;
}

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

export default function ArticleSmallLandscapeSection({ section }: Props) {
  const lhref = (p: string) => `${p}`;
  const articles = (section.data as SectionArticle[]).slice(0, 10);
  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>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: "0",
            border: "1px solid var(--border)",
            borderRadius: 10,
            overflow: "hidden",
            background: "var(--surface)",
          }}
        >
          {articles.map((a, i) => {
            const img = isValidImg(a.landscape_img)
              ? a.landscape_img
              : isValidImg(a.web_image)
                ? a.web_image
                : null;
            const isLast = i === articles.length - 1;
            const isEven = i % 2 === 0;
            return (
              <Link
                key={a.id}
                href={lhref(`/detail/${a.id}`)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.75rem",
                  padding: "0.875rem 1rem",
                  textDecoration: "none",
                  color: "inherit",
                  borderBottom:
                    isLast || (i === articles.length - 2 && !isEven)
                      ? "none"
                      : "1px solid var(--border)",
                  borderRight: isEven ? "1px solid var(--border)" : "none",
                  transition: "background 0.15s",
                }}
              >
                {/* Rank */}
                <span
                  style={{
                    flexShrink: 0,
                    width: 24,
                    height: 24,
                    borderRadius: "50%",
                    background: i < 3 ? "var(--brand)" : "var(--brand-light)",
                    color: i < 3 ? "#fff" : "var(--brand)",
                    fontSize: 11,
                    fontWeight: 800,
                    fontFamily: "var(--mono)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {i + 1}
                </span>

                {/* Thumbnail */}
                {img && (
                  <div
                    style={{
                      flexShrink: 0,
                      width: 72,
                      height: 48,
                      borderRadius: 5,
                      overflow: "hidden",
                      position: "relative",
                    }}
                  >
                    <Image
                      src={img}
                      alt=""
                      fill
                      style={{ objectFit: "cover" }}
                      unoptimized
                    />
                  </div>
                )}

                {/* Content */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <h4
                    style={{
                      fontSize: "0.813rem",
                      fontWeight: 600,
                      lineHeight: 1.4,
                      margin: "0 0 4px",
                      WebkitLineClamp: 2,
                      display: "-webkit-box",
                      WebkitBoxOrient: "vertical",
                      overflow: "hidden",
                      color: "var(--ink)",
                    }}
                  >
                    {a.title}
                  </h4>
                  <div
                    style={{
                      display: "flex",
                      gap: "0.5rem",
                      fontSize: "0.688rem",
                      fontFamily: "var(--mono)",
                      color: "var(--text-tertiary)",
                    }}
                  >
                    <span>{fmtRelTime(a.created_at)}</span>
                    <span>·</span>
                    <span>{fmtViews(a.total_view)}</span>
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}