"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 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}m ago`;
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}
function fmtViews(n: number) {
  if (n >= 1000) return `${Math.round(n / 1000)}K`;
  return String(n);
}

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

export default function LiveNewsSection({
  section,
  locale,
}: LiveNewsSectionProps) {
  const lhref = (p: string) => `${p}`;
  const articles = section.data as SectionArticle[];
  if (articles.length === 0) return null;

  const [lead, ...rest] = articles;

  return (
    <section
      style={{
        background: "var(--ink-bg)",
        marginBottom: "2.5rem",
        padding: "2rem 0",
      }}
    >
      <div className="wrap">
        {/* Section header */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "0.75rem",
            marginBottom: "1.5rem",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            <span
              style={{
                display: "inline-block",
                width: 8,
                height: 8,
                borderRadius: "50%",
                background: "var(--live)",
                boxShadow: "0 0 0 0 rgba(237,32,39,0.4)",
                animation: "pulse-ring 1.4s ease-out infinite",
              }}
            />
            <span
              style={{
                fontFamily: "var(--mono)",
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: "0.12em",
                textTransform: "uppercase" as const,
                color: "var(--live)",
              }}
            >
              Live Now
            </span>
          </div>
          <span
            style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.08)" }}
          />
          <h2
            style={{
              fontFamily: "var(--italic)",
              fontStyle: "italic",
              fontSize: "1.1rem",
              color: "rgba(255,255,255,0.7)",
              margin: 0,
              fontWeight: 400,
            }}
          >
            {section.title}
          </h2>
        </div>

        {/* Grid: lead (wide) + rest (3 cards) */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: "1px",
            background: "rgba(255,255,255,0.06)",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          {/* Lead card — spans 2 columns */}
          {lead && (
            <Link
              href={lhref(`/detail/${lead.id}`)}
              style={{
                gridColumn: "span 2",
                display: "block",
                background: "rgba(255,255,255,0.03)",
                padding: "1.5rem",
                borderRight: "1px solid rgba(255,255,255,0.06)",
                textDecoration: "none",
                position: "relative",
              }}
            >
              {/* Live accent bar */}
              <div
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: 3,
                  height: "100%",
                  background: "var(--live)",
                }}
              />

              {isValidImg(lead.web_image) && (
                <div
                  style={{
                    position: "relative",
                    paddingBottom: "45%",
                    marginBottom: "1.25rem",
                    overflow: "hidden",
                    borderRadius: 4,
                  }}
                >
                  <Image
                    src={lead.web_image}
                    alt={lead.title}
                    fill
                    style={{ objectFit: "cover" }}
                    unoptimized
                  />
                </div>
              )}

              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.5rem",
                  marginBottom: "0.625rem",
                }}
              >
                <span
                  style={{
                    background: "var(--live)",
                    color: "#fff",
                    fontFamily: "var(--mono)",
                    fontSize: 9,
                    fontWeight: 700,
                    letterSpacing: "0.1em",
                    padding: "2px 7px",
                    borderRadius: 2,
                    textTransform: "uppercase" as const,
                  }}
                >
                  Live
                </span>
                <span
                  style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    color: "rgba(255,255,255,0.4)",
                  }}
                >
                  {lead.category}
                </span>
              </div>

              <h3
                style={{
                  fontFamily: "var(--serif)",
                  fontSize: "1.3rem",
                  fontWeight: 700,
                  lineHeight: 1.35,
                  color: "#fff",
                  margin: "0 0 0.75rem",
                }}
              >
                {lead.title}
              </h3>

              {lead.short_description && (
                <p
                  style={{
                    fontFamily: "var(--serif)",
                    fontSize: "0.9rem",
                    color: "rgba(255,255,255,0.55)",
                    lineHeight: 1.6,
                    margin: "0 0 1rem",
                    display: "-webkit-box",
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: "vertical" as const,
                    overflow: "hidden",
                  }}
                >
                  {lead.short_description}
                </p>
              )}

              <div
                style={{
                  display: "flex",
                  gap: "0.875rem",
                  alignItems: "center",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    color: "rgba(255,255,255,0.4)",
                  }}
                >
                  {lead.channel_name}
                </span>
                <span style={{ color: "rgba(255,255,255,0.2)" }}>·</span>
                <span
                  style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    color: "rgba(255,255,255,0.4)",
                  }}
                >
                  {fmtRelTime(lead.created_at)}
                </span>
                <span style={{ color: "rgba(255,255,255,0.2)" }}>·</span>
                <span
                  style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    color: "rgba(255,255,255,0.4)",
                  }}
                >
                  {fmtViews(lead.total_view)} views
                </span>
              </div>
            </Link>
          )}

          {/* Secondary cards */}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              background: "rgba(255,255,255,0.02)",
            }}
          >
            {rest.slice(0, 3).map((a, i) => {
              const imgUrl = isValidImg(a.web_image) ? a.web_image : null;
              return (
                <Link
                  key={a.id}
                  href={lhref(`/detail/${a.id}`)}
                  style={{
                    display: "flex",
                    gap: "0.875rem",
                    padding: "1rem 1.25rem",
                    borderBottom:
                      i < 2 ? "1px solid rgba(255,255,255,0.05)" : "none",
                    textDecoration: "none",
                    flex: 1,
                    position: "relative",
                  }}
                >
                  <div
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: 2,
                      height: "100%",
                      background: "rgba(237,32,39,0.4)",
                    }}
                  />
                  {imgUrl && (
                    <div
                      style={{
                        width: 68,
                        height: 52,
                        flexShrink: 0,
                        borderRadius: 3,
                        overflow: "hidden",
                        position: "relative",
                      }}
                    >
                      <Image
                        src={imgUrl}
                        alt=""
                        fill
                        style={{ objectFit: "cover" }}
                        unoptimized
                      />
                    </div>
                  )}
                  <div>
                    <div
                      style={{
                        fontFamily: "var(--mono)",
                        fontSize: 9,
                        color: "var(--live)",
                        fontWeight: 700,
                        marginBottom: "0.3rem",
                        letterSpacing: "0.08em",
                        textTransform: "uppercase" as const,
                      }}
                    >
                      {a.category}
                    </div>
                    <h4
                      style={{
                        fontFamily: "var(--sans)",
                        fontSize: "0.8rem",
                        fontWeight: 500,
                        color: "rgba(255,255,255,0.82)",
                        lineHeight: 1.4,
                        margin: "0 0 0.375rem",
                        display: "-webkit-box",
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: "vertical" as const,
                        overflow: "hidden",
                      }}
                    >
                      {a.title}
                    </h4>
                    <span
                      style={{
                        fontFamily: "var(--mono)",
                        fontSize: 10,
                        color: "rgba(255,255,255,0.3)",
                      }}
                    >
                      {fmtRelTime(a.created_at)}
                    </span>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}