"use client";

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

const STATIC_PODCASTS = [
  {
    img: "photo-1478737270239-2f02b77fc618",
    show: "The Daily Briefing",
    title: "Maharashtra reshuffled, monsoon arrived, markets at a record",
    desc: "Your fifteen-minute morning catch-up with Ravish Kumar — six stories, one number, one chart.",
    dur: "15:04",
    when: "today",
    slug: "maharashtra-reshuffled-monsoon-markets",
  },
  {
    img: "photo-1590602847861-f357a9332bbc",
    show: "Markets in 7",
    title: "SENSEX at a record, rupee at six-month high — what to actually buy",
    desc: "Seven minutes on the rally, the rotation, and the one mid-cap we'd add this week.",
    dur: "7:12",
    when: "today",
    slug: "sensex-record-rupee-high-what-to-buy",
  },
  {
    img: "photo-1677442136019-21780ecad995",
    show: "AI This Week",
    title:
      "Sarvam's new model, Dholera's first-silicon, and why every flagship is 'AI-first'",
    desc: "Twenty-two minutes with Karthik Iyer on the week that quietly reshaped India's semicon ambitions.",
    dur: "22:48",
    when: "yesterday",
    slug: "sarvam-dholera-silicon-ai-week",
  },
  {
    img: "photo-1574169208507-84376144848b",
    show: "From the Capital",
    title: "A reporter's notebook from the 96-minute Maharashtra night",
    desc: "Anjali Verma walks through what she heard, when, and what's still missing from the public timeline.",
    dur: "18:32",
    when: "today",
    slug: "reporters-notebook-maharashtra-night",
  },
];

function isValidImg(url: string) {
  return !!url && !url.includes("no_img");
}
function fmtRelTime(dateStr: string) {
  const diff = Date.now() - new Date(dateStr).getTime();
  if (diff < 86400000) return "today";
  if (diff < 172800000) return "yesterday";
  return `${Math.floor(diff / 86400000)}d ago`;
}

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

export default function ListenSection({ section }: ListenSectionProps) {
  const lhref = (path: string) => `${path}`;
  const apiArticles = (section.data ?? []) as SectionArticle[];
  const hasApi = apiArticles.length > 0;

  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-title">
            <h2>{section.title}</h2>
            <span className="count">
              {section.sub_title
                ? section.sub_title
                : hasApi
                  ? `${apiArticles.length} audio briefs`
                  : "Audio briefs & podcasts"}
            </span>
          </div>
          <Link href={`/section/${section.id}`} className="sec-link">
            All podcasts
            <svg className="icn-14" viewBox="0 0 24 24">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        </div>

        <div className="audio-grid">
          {hasApi
            ? apiArticles.slice(0, 4).map((a) => {
                const imgUrl = 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}`)}
                    className="audio-card"
                  >
                    <div className="audio-cover">
                      {imgUrl ? (
                        <Image
                          src={imgUrl}
                          alt={a.channel_name}
                          width={100}
                          height={100}
                          unoptimized
                        />
                      ) : (
                        <div
                          style={{
                            width: 100,
                            height: 100,
                            background: "#1e293b",
                            borderRadius: 8,
                          }}
                        />
                      )}
                      <span className="bars">
                        <b />
                        <b />
                        <b />
                        <b />
                        <b />
                      </span>
                    </div>
                    <div className="audio-info">
                      <span className="audio-show">{a.channel_name}</span>
                      <h4 className="audio-title">{a.title}</h4>
                      <p className="audio-desc">
                        {a.short_description?.slice(0, 100)}
                      </p>
                      <div className="audio-row">
                        <span className="audio-meta">
                          <svg
                            width="11"
                            height="11"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                          >
                            <circle cx="12" cy="12" r="9" />
                            <path d="M12 7v5l3 2" />
                          </svg>
                          {fmtRelTime(a.created_at)}
                        </span>
                        <span className="audio-play" aria-label="Play">
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                          >
                            <polygon points="6 4 20 12 6 20" />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </Link>
                );
              })
            : STATIC_PODCASTS.map(
                ({ img, show, title, desc, dur, when, slug }) => (
                  <Link
                    key={show}
                    href={lhref(`/detail/${slug}`)}
                    className="audio-card"
                  >
                    <div className="audio-cover">
                      <Image
                        src={`https://images.unsplash.com/${img}?w=200&q=80`}
                        alt={show}
                        width={100}
                        height={100}
                      />
                      <span className="bars">
                        <b />
                        <b />
                        <b />
                        <b />
                        <b />
                      </span>
                    </div>
                    <div className="audio-info">
                      <span className="audio-show">{show}</span>
                      <h4 className="audio-title">{title}</h4>
                      <p className="audio-desc">{desc}</p>
                      <div className="audio-row">
                        <span className="audio-meta">
                          <svg
                            width="11"
                            height="11"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                          >
                            <circle cx="12" cy="12" r="9" />
                            <path d="M12 7v5l3 2" />
                          </svg>
                          {dur} · {when}
                        </span>
                        <span className="audio-play" aria-label="Play">
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                          >
                            <polygon points="6 4 20 12 6 20" />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </Link>
                ),
              )}
        </div>
      </div>
    </section>
  );
}