"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 ArticleLandscapeSection({ section }: Props) {
  const lhref = (p: string) => `${p}`;
  const articles = (section.data as SectionArticle[]).slice(0, 8);
  if (!articles.length) return null;

  const [lead, ...rest] = articles;
  const leadImg = isValidImg(lead.landscape_img)
    ? lead.landscape_img
    : isValidImg(lead.web_image)
      ? lead.web_image
      : 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>

        {/* Lead landscape card */}
        <Link
          href={lhref(`/detail/${lead.id}`)}
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "1.5rem",
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: 10,
            overflow: "hidden",
            marginBottom: "1.25rem",
            textDecoration: "none",
            color: "inherit",
          }}
        >
          <div
            style={{
              position: "relative",
              aspectRatio: "16/9",
              overflow: "hidden",
            }}
          >
            {leadImg ? (
              <Image
                src={leadImg}
                alt={lead.title}
                fill
                style={{ objectFit: "cover" }}
                unoptimized
              />
            ) : (
              <div
                style={{ width: "100%", height: "100%", background: "#e5e7eb" }}
              />
            )}
            <span
              style={{
                position: "absolute",
                top: 12,
                left: 12,
                background: "var(--brand)",
                color: "#fff",
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: "0.06em",
                padding: "3px 10px",
                borderRadius: 4,
                textTransform: "uppercase",
              }}
            >
              {lead.category}
            </span>
          </div>
          <div
            style={{
              padding: "1.5rem 1.5rem 1.5rem 0",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              gap: "0.75rem",
            }}
          >
            <h3
              style={{
                fontFamily: "var(--serif)",
                fontSize: "1.25rem",
                lineHeight: 1.4,
                fontWeight: 600,
                color: "var(--ink)",
                margin: 0,
              }}
            >
              {lead.title}
            </h3>
            {lead.short_description && (
              <p
                style={{
                  fontSize: "0.875rem",
                  color: "var(--text-secondary)",
                  lineHeight: 1.55,
                  margin: 0,
                  WebkitLineClamp: 3,
                  display: "-webkit-box",
                  WebkitBoxOrient: "vertical",
                  overflow: "hidden",
                }}
              >
                {lead.short_description}
              </p>
            )}
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "1rem",
                fontSize: "0.75rem",
                fontFamily: "var(--mono)",
                color: "var(--text-tertiary)",
              }}
            >
              <span>{lead.channel_name}</span>
              <span>·</span>
              <span>{fmtRelTime(lead.created_at)}</span>
              <span>·</span>
              <span>{fmtViews(lead.total_view)} views</span>
            </div>
          </div>
        </Link>

        {/* Remaining landscape list */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: "0.75rem",
          }}
        >
          {rest.map((a) => {
            const img = isValidImg(a.landscape_img)
              ? a.landscape_img
              : isValidImg(a.web_image)
                ? a.web_image
                : null;
            return (
              <Link
                key={a.id}
                href={lhref(`/detail/${a.id}`)}
                style={{
                  display: "flex",
                  gap: "0.875rem",
                  alignItems: "flex-start",
                  padding: "0.875rem",
                  background: "var(--surface)",
                  border: "1px solid var(--border)",
                  borderRadius: 8,
                  textDecoration: "none",
                  color: "inherit",
                  transition: "border-color 0.15s",
                }}
              >
                {img && (
                  <div
                    style={{
                      flexShrink: 0,
                      width: 96,
                      height: 64,
                      borderRadius: 5,
                      overflow: "hidden",
                      position: "relative",
                    }}
                  >
                    <Image
                      src={img}
                      alt=""
                      fill
                      style={{ objectFit: "cover" }}
                      unoptimized
                    />
                  </div>
                )}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span
                    style={{
                      fontSize: 10,
                      fontWeight: 700,
                      letterSpacing: "0.08em",
                      textTransform: "uppercase",
                      color: "var(--brand)",
                      display: "block",
                      marginBottom: 4,
                    }}
                  >
                    {a.category}
                  </span>
                  <h4
                    style={{
                      fontSize: "0.875rem",
                      fontWeight: 600,
                      lineHeight: 1.4,
                      margin: "0 0 6px",
                      WebkitLineClamp: 2,
                      display: "-webkit-box",
                      WebkitBoxOrient: "vertical",
                      overflow: "hidden",
                    }}
                  >
                    {a.title}
                  </h4>
                  <span
                    style={{
                      fontSize: "0.7rem",
                      fontFamily: "var(--mono)",
                      color: "var(--text-tertiary)",
                    }}
                  >
                    {fmtRelTime(a.created_at)} · {fmtViews(a.total_view)}
                  </span>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}