"use client";

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

const STATIC_CHANNELS = [
  {
    img: "photo-1495020689067-958852a7765e",
    name: "NDTV 24×7",
    show: "Prime Time · Maharashtra reshuffle",
    viewers: "12,418",
    slug: "ndtv-24x7",
  },
  {
    img: "photo-1585829365295-ab7cd400c167",
    name: "AajTak",
    show: "Halla Bol · Cabinet shuffle aftermath",
    viewers: "21,704",
    slug: "aaj-tak",
  },
  {
    img: "photo-1504711434969-e33886168f5c",
    name: "India Today",
    show: "Newstrack · Monsoon arrives early",
    viewers: "8,221",
    slug: "india-today",
  },
  {
    img: "photo-1611162616305-c69b3fa7fbe0",
    name: "Republic",
    show: "Debate · Markets at a record",
    viewers: "6,840",
    slug: "republic-tv",
  },
  {
    img: "photo-1518770660439-4636190af475",
    name: "WION",
    show: "World@10 · Brussels trade talks",
    viewers: "5,108",
    slug: "wion",
  },
];

function isValidImg(url: string) {
  return !!url && !url.includes("no_img");
}

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

export default function LiveTVSection({ section }: LiveTVSectionProps) {
  const lhref = (path: string) => `${path}`;
  const apiChannels = (section.data ?? []) as SectionChannel[];
  const hasApi = apiChannels.length > 0;

  return (
    <div className="lt-band">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-title">
            <h2>{section.title}</h2>
            <span className="count">
              {hasApi
                ? `${apiChannels.length} channels streaming`
                : "7 channels streaming · watch in-page or pop-out"}
            </span>
          </div>
          <Link href={`/section/${section.id}`} className="sec-link">
            All channels
            <svg className="icn-14" viewBox="0 0 24 24">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        </div>

        <div className="lt-grid">
          {hasApi
            ? apiChannels.slice(0, 5).map((ch) => {
                const imgUrl = isValidImg(ch.landscape_img)
                  ? ch.landscape_img
                  : isValidImg(ch.portrait_img)
                    ? ch.portrait_img
                    : null;
                return (
                  <Link
                    key={ch.id}
                    href={`/channel/${ch.id}`}
                    className="lt-card"
                  >
                    <div className="lt-thumb">
                      {imgUrl ? (
                        <Image
                          src={imgUrl}
                          alt={ch.name}
                          width={400}
                          height={250}
                          unoptimized
                        />
                      ) : (
                        <div
                          style={{
                            width: "100%",
                            height: 250,
                            background: "#1e293b",
                          }}
                        />
                      )}
                      <span className="lt-live">LIVE</span>
                      <span className="lt-bars">
                        <b />
                        <b />
                        <b />
                        <b />
                      </span>
                    </div>
                    <div className="lt-meta">
                      <div className="lt-name">{ch.name}</div>
                      <div className="lt-now">
                        {ch.description?.slice(0, 50) ?? "Live News"}
                      </div>
                      <div className="lt-watching">
                        <svg
                          width="11"
                          height="11"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                        >
                          <circle cx="12" cy="12" r="3" />
                          <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z" />
                        </svg>
                        Live
                      </div>
                    </div>
                  </Link>
                );
              })
            : STATIC_CHANNELS.map(({ img, name, show, viewers, slug }) => (
                <Link
                  key={name}
                  href={lhref(`/channel/${slug}`)}
                  className="lt-card"
                >
                  <div className="lt-thumb">
                    <Image
                      src={`https://images.unsplash.com/${img}?w=400&q=75`}
                      alt={name}
                      width={400}
                      height={250}
                    />
                    <span className="lt-live">LIVE</span>
                    <span className="lt-bars">
                      <b />
                      <b />
                      <b />
                      <b />
                    </span>
                  </div>
                  <div className="lt-meta">
                    <div className="lt-name">{name}</div>
                    <div className="lt-now">{show}</div>
                    <div className="lt-watching">
                      <svg
                        width="11"
                        height="11"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                      >
                        <circle cx="12" cy="12" r="3" />
                        <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z" />
                      </svg>
                      {viewers} watching
                    </div>
                  </div>
                </Link>
              ))}
        </div>
      </div>
    </div>
  );
}