"use client";

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

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

// Curated gradient palette for categories without images
const GRADIENTS = [
  "linear-gradient(135deg,#C1272D,#7d1418)",
  "linear-gradient(135deg,#1d4ed8,#1e3a8a)",
  "linear-gradient(135deg,#047857,#065f46)",
  "linear-gradient(135deg,#7c3aed,#5b21b6)",
  "linear-gradient(135deg,#b45309,#92400e)",
  "linear-gradient(135deg,#0f766e,#134e4a)",
  "linear-gradient(135deg,#be123c,#9f1239)",
  "linear-gradient(135deg,#334155,#1e293b)",
];

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

export default function CategoryGridSection({
  section,
  locale,
}: CategoryGridSectionProps) {
  const lhref = (p: string) => `${p}`;
  const categories = section.data as SectionCategory[];
  if (categories.length === 0) return null;

  return (
    <section className="sec">
      <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>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
            gap: "1rem",
          }}
        >
          {categories.map((cat, i) => {
            const slug = slugify(cat.name);
            const imgUrl = isValidImg(cat.web_image) ? cat.web_image : null;
            const gradient = GRADIENTS[i % GRADIENTS.length];

            return (
              <Link
                key={cat.id}
                href={lhref(`/category/${slug}`)}
                style={{
                  display: "block",
                  position: "relative",
                  borderRadius: 8,
                  overflow: "hidden",
                  aspectRatio: "4/3",
                  textDecoration: "none",
                }}
              >
                {imgUrl ? (
                  <Image
                    src={imgUrl}
                    alt={cat.name}
                    fill
                    style={{ objectFit: "cover" }}
                    unoptimized
                  />
                ) : (
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      background: gradient,
                    }}
                  />
                )}

                {/* Overlay */}
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    background:
                      "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%)",
                  }}
                />

                {/* Label */}
                <div
                  style={{
                    position: "absolute",
                    bottom: 0,
                    left: 0,
                    right: 0,
                    padding: "0.75rem 0.875rem",
                  }}
                >
                  <span
                    style={{
                      fontFamily: "var(--sans)",
                      fontSize: "0.85rem",
                      fontWeight: 700,
                      color: "#fff",
                      display: "block",
                      lineHeight: 1,
                    }}
                  >
                    {cat.name}
                  </span>
                </div>

                {/* Hover border */}
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    borderRadius: 8,
                    border: "2px solid transparent",
                    transition: "border-color 0.2s",
                  }}
                />
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}