"use client";

import Link from "next/link";
import Image from "next/image";
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 >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
  if (n >= 1000) return `${Math.round(n / 1000)}K`;
  return String(n);
}
function fmtRelTime(d: string) {
  const diff = Date.now() - new Date(d).getTime();
  const m = Math.floor(diff / 60000);
  const h = Math.floor(m / 60);
  if (m < 60) return `${m} min ago`;
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

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

export default function HeadLineSection({
  section,
  locale,
}: HeadLineSectionProps) {
  const lhref = (p: string) => `${p}`;
  const articles = section.data as SectionArticle[];

  const main = articles[0];
  const rest = articles.slice(1, 5);

  if (!main) return null;

  const mainImg = isValidImg(main.web_image)
    ? main.web_image
    : isValidImg(main.landscape_img)
      ? main.landscape_img
      : null;

  return (
    <section
      style={{
        borderTop: "3px solid var(--brand)",
        marginBottom: "3rem",
        background: "var(--cream)",
      }}
    >
      <div
        className="wrap"
        style={{ paddingTop: "2.5rem", paddingBottom: "2.5rem" }}
      >
        {/* Section kicker */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "0.75rem",
            marginBottom: "1.5rem",
          }}
        >
          <span
            style={{
              fontFamily: "var(--mono)",
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: "0.14em",
              textTransform: "uppercase" as const,
              color: "var(--brand)",
            }}
          >
            {section.title}
          </span>
          <span style={{ flex: 1, height: 1, background: "var(--brand-30)" }} />
          {section.sub_title && (
            <span
              style={{
                fontFamily: "var(--mono)",
                fontSize: 10,
                color: "var(--text-3)",
                letterSpacing: "0.06em",
              }}
            >
              {section.sub_title}
            </span>
          )}
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 340px",
            gap: "3rem",
            alignItems: "start",
          }}
        >
          {/* Main headline article */}
          <Link
            href={lhref(`/detail/${main.id}`)}
            style={{ display: "block", textDecoration: "none" }}
          >
            {mainImg && (
              <div
                style={{
                  position: "relative",
                  width: "100%",
                  paddingBottom: "52%",
                  marginBottom: "1.5rem",
                  overflow: "hidden",
                }}
              >
                <Image
                  src={mainImg}
                  alt={main.title}
                  fill
                  style={{
                    objectFit: "cover",
                    transition: "transform 0.5s ease",
                  }}
                  unoptimized
                />
              </div>
            )}

            {/* Category */}
            <div
              style={{
                fontFamily: "var(--mono)",
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: "0.12em",
                textTransform: "uppercase" as const,
                color: "var(--brand)",
                marginBottom: "0.75rem",
              }}
            >
              {main.category}
            </div>

            {/* Big headline */}
            <h2
              style={{
                fontFamily: "var(--serif)",
                fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
                fontWeight: 700,
                lineHeight: 1.18,
                color: "var(--ink)",
                margin: "0 0 1rem",
                letterSpacing: "-0.02em",
              }}
            >
              {main.title}
            </h2>

            {/* Lede */}
            {main.short_description && (
              <p
                style={{
                  fontFamily: "var(--serif)",
                  fontSize: "1.05rem",
                  lineHeight: 1.7,
                  color: "var(--text-2)",
                  margin: "0 0 1.25rem",
                  fontWeight: 400,
                }}
              >
                {main.short_description.slice(0, 180)}
                {main.short_description.length > 180 ? "…" : ""}
              </p>
            )}

            {/* Meta row */}
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                flexWrap: "wrap" as const,
              }}
            >
              <span
                style={{
                  width: 28,
                  height: 28,
                  borderRadius: "50%",
                  background: "var(--brand)",
                  color: "#fff",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontFamily: "var(--mono)",
                  fontSize: 10,
                  fontWeight: 700,
                  flexShrink: 0,
                }}
              >
                {main.channel_name?.slice(0, 2).toUpperCase()}
              </span>
              <span
                style={{
                  fontFamily: "var(--sans)",
                  fontSize: 13,
                  fontWeight: 600,
                  color: "var(--ink)",
                }}
              >
                {main.channel_name}
              </span>
              <span style={{ color: "var(--line-hi)", fontSize: 18 }}>·</span>
              <span
                style={{
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  color: "var(--text-3)",
                }}
              >
                {fmtRelTime(main.created_at)}
              </span>
              <span style={{ color: "var(--line-hi)", fontSize: 18 }}>·</span>
              <span
                style={{
                  fontFamily: "var(--mono)",
                  fontSize: 11,
                  color: "var(--text-3)",
                }}
              >
                {fmtViews(main.total_view)} views
              </span>
            </div>
          </Link>

          {/* Right rail: secondary headlines */}
          {rest.length > 0 && (
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 0,
                borderLeft: "1px solid var(--line-hi)",
                paddingLeft: "2rem",
              }}
            >
              {rest.map((a, i) => (
                <Link
                  key={a.id}
                  href={lhref(`/detail/${a.id}`)}
                  style={{
                    display: "block",
                    paddingBottom: "1.25rem",
                    marginBottom: i < rest.length - 1 ? "1.25rem" : 0,
                    borderBottom:
                      i < rest.length - 1 ? "1px solid var(--line)" : "none",
                    textDecoration: "none",
                  }}
                >
                  <div
                    style={{
                      fontFamily: "var(--mono)",
                      fontSize: 9,
                      fontWeight: 700,
                      letterSpacing: "0.1em",
                      textTransform: "uppercase" as const,
                      color: "var(--brand)",
                      marginBottom: "0.4rem",
                    }}
                  >
                    {a.category}
                  </div>
                  <h4
                    style={{
                      fontFamily: "var(--serif)",
                      fontSize: "1rem",
                      fontWeight: 600,
                      lineHeight: 1.4,
                      color: "var(--ink)",
                      margin: "0 0 0.4rem",
                    }}
                  >
                    {a.title}
                  </h4>
                  <span
                    style={{
                      fontFamily: "var(--mono)",
                      fontSize: 10,
                      color: "var(--text-3)",
                    }}
                  >
                    {fmtRelTime(a.created_at)} · {fmtViews(a.total_view)} views
                  </span>
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}