import ServiceCard, { Service } from "./ServiceCard";
import ServiceCtaCard from "./ServiceCtaCard";

/* ---------------- TYPES ---------------- */

type ServiceTag = {
  tag1?: string | null;
  tag2?: string | null;
  tag3?: string | null;
  tag4?: string | null;
};

type ServiceItem = {
  serviceTitle?: string;
  serviceDescription?: string;
  serviceTags?: ServiceTag;
};

type ServiceCta = {
  serviceTitle?: string;
  serviceCtaLink?: string | null;
  serviceBoxBg?: {
    node?: {
      sourceUrl?: string;
      altText?: string | null;
    };
  };
};

type ServiceEntry = ServiceItem | ServiceCta;

type ServicesGridProps = {
  title?: string;
  subtitle?: string;
  services?: Record<string, unknown>; // ✅ CMS-safe
};

/* ---------------- TYPE GUARDS ---------------- */

function isObject(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

function isServiceItem(item: Record<string, unknown>): item is ServiceItem {
  return "serviceTitle" in item || "serviceDescription" in item;
}

function isServiceCta(item: Record<string, unknown>): item is ServiceCta {
  return "serviceBoxBg" in item;
}

/* ---------------- COMPONENT ---------------- */

export default function ServicesGrid({
  title,
  subtitle,
  services,
}: ServicesGridProps) {
  if (!services) return null;

  const serviceArray: ServiceEntry[] = Object.values(services).filter(
    (item): item is ServiceEntry => {
      if (!isObject(item)) return false;

      if (isServiceCta(item)) return true;

      if (isServiceItem(item)) return true;

      return false;
    }
  );

  if (!serviceArray.length) return null;

  return (
    <div className="pb-24 bg-white">
      <div className="container mx-auto px-4">

        {/* HEADER */}
        <div className="mb-16">
          {subtitle && (
            <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
              {subtitle}
            </span>
          )}

          {title && (
            <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-6">
              {title}
            </h2>
          )}
        </div>

        {/* GRID */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">
          {serviceArray.map((item, index) => {
            if (isServiceCta(item)) {
              return (
                <ServiceCtaCard
                  key={index}
                  title={item.serviceTitle}
                  link={item.serviceCtaLink}
                  bgImage={item.serviceBoxBg?.node}
                />
              );
            }

            // fallback = ServiceItem
            const service: Service = {
              serviceTitle: item.serviceTitle,
              serviceDescription: item.serviceDescription,
              serviceTags: item.serviceTags,
            };

            return (
              <div key={index}>
                <ServiceCard service={service} />
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}