"use client";

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

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

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

export default function ShowsSectionDynamic({
  section,
  locale,
}: ShowsSectionDynamicProps) {
  const lhref = (p: string) => `${p}`;
  const channels = section.data as SectionChannel[];
  if (channels.length === 0) return null;

  return (
    <section
      className="sec"
      style={{ background: "var(--cream)", padding: "2.5rem 0" }}
    >
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-title">
            <h2 style={{ fontFamily: "var(--italic)", fontStyle: "italic" }}>
              {section.title}
            </h2>
            {section.sub_title && (
              <span className="count">{section.sub_title}</span>
            )}
          </div>
          <Link href={`/section/${section.id}`} className="sec-link">
            All shows
            <svg className="icn-14" viewBox="0 0 24 24">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
            gap: "1.25rem",
          }}
        >
          {channels.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}`}
                style={{
                  display: "block",
                  borderRadius: 8,
                  overflow: "hidden",
                  background: "var(--surf)",
                  border: "1px solid var(--line-hi)",
                  textDecoration: "none",
                  transition: "box-shadow 0.2s",
                  position: "relative",
                }}
              >
                {/* Image */}
                <div
                  style={{
                    position: "relative",
                    paddingBottom: "56.25%",
                    background: "var(--ink-bg)",
                    overflow: "hidden",
                  }}
                >
                  {imgUrl ? (
                    <Image
                      src={imgUrl}
                      alt={ch.name}
                      fill
                      style={{
                        objectFit: "cover",
                        transition: "transform 0.4s ease",
                      }}
                      unoptimized
                    />
                  ) : (
                    <div
                      style={{
                        position: "absolute",
                        inset: 0,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        background:
                          "linear-gradient(135deg, var(--ink-bg) 0%, #1e2030 100%)",
                      }}
                    >
                      <span
                        style={{
                          fontFamily: "var(--italic)",
                          fontStyle: "italic",
                          fontSize: "2rem",
                          color: "rgba(255,255,255,0.15)",
                          fontWeight: 700,
                        }}
                      >
                        {ch.name.slice(0, 2)}
                      </span>
                    </div>
                  )}

                  {/* Gradient overlay */}
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      background:
                        "linear-gradient(to top, rgba(14,14,17,0.85) 0%, transparent 55%)",
                    }}
                  />

                  {/* Channel name on image */}
                  <div
                    style={{
                      position: "absolute",
                      bottom: "0.75rem",
                      left: "0.875rem",
                      right: "0.875rem",
                    }}
                  >
                    <h4
                      style={{
                        fontFamily: "var(--sans)",
                        fontSize: "0.9rem",
                        fontWeight: 700,
                        color: "#fff",
                        margin: 0,
                        lineHeight: 1.2,
                      }}
                    >
                      {ch.name}
                    </h4>
                    {ch.ch_full_name && ch.ch_full_name !== ch.name && (
                      <span
                        style={{
                          fontFamily: "var(--mono)",
                          fontSize: 10,
                          color: "rgba(255,255,255,0.55)",
                        }}
                      >
                        {ch.ch_full_name}
                      </span>
                    )}
                  </div>

                  {/* Watch badge */}
                  <div
                    style={{
                      position: "absolute",
                      top: "0.75rem",
                      right: "0.75rem",
                      background: "rgba(193,39,45,0.9)",
                      backdropFilter: "blur(8px)",
                      borderRadius: 4,
                      padding: "3px 8px",
                      display: "flex",
                      alignItems: "center",
                      gap: 4,
                    }}
                  >
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="#fff">
                      <polygon points="6 4 20 12 6 20" />
                    </svg>
                    <span
                      style={{
                        fontFamily: "var(--mono)",
                        fontSize: 9,
                        fontWeight: 700,
                        color: "#fff",
                        letterSpacing: "0.08em",
                      }}
                    >
                      WATCH
                    </span>
                  </div>
                </div>

                {/* Description */}
                {ch.description && (
                  <div style={{ padding: "0.875rem 1rem" }}>
                    <p
                      style={{
                        fontFamily: "var(--sans)",
                        fontSize: "0.78rem",
                        color: "var(--text-2)",
                        lineHeight: 1.55,
                        margin: 0,
                        display: "-webkit-box",
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: "vertical" as const,
                        overflow: "hidden",
                      }}
                    >
                      {ch.description}
                    </p>
                  </div>
                )}
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}