"use client";

import { useEffect, useState } from "react";

interface CmsPreviewMessage {
  type?: string;
  cmsItems?: Array<{
    section_name: string;
    input_name_en: string;
    value: unknown;
  }>;
  language?: string;
}

interface CmsPreviewTextProps {
  /** section_name of the CMS row this text comes from (e.g. "hero_section") */
  sectionName: string;
  /** input_name_en of the CMS row this text comes from (e.g. "first_title") */
  inputNameEn: string;
  /** Server-rendered value, shown until (and unless) a preview override arrives */
  initialValue: string;
  /** Index into the row's value array, for repeater fields (e.g. services_items) */
  itemIndex?: number;
  /** Sub-field to read off the array item, for repeater fields (e.g. "title") */
  itemField?: string;
}

function extractLocalizedText(
  value: unknown,
  language: string,
): string | undefined {
  if (!value || typeof value !== "object") return undefined;
  const localized = value as Record<string, unknown>;
  const text = localized[language] ?? localized.ar ?? localized.en;
  return typeof text === "string" ? text : undefined;
}

/**
 * Renders CMS-sourced text that live-updates while this page is embedded in
 * the dashboard's website editor preview iframe, reflecting unsaved edits
 * instantly without ever touching the database. Outside the preview iframe
 * (real site visitors) it just renders `initialValue` as normal.
 */
export default function CmsPreviewText({
  sectionName,
  inputNameEn,
  initialValue,
  itemIndex,
  itemField,
}: CmsPreviewTextProps) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  useEffect(() => {
    if (typeof window === "undefined" || window.self === window.top) return;

    function handleMessage(event: MessageEvent<CmsPreviewMessage>) {
      const data = event.data;
      if (
        !data ||
        data.type !== "CMS_PREVIEW_UPDATE" ||
        !Array.isArray(data.cmsItems)
      ) {
        return;
      }

      const item = data.cmsItems.find(
        (i) =>
          i.section_name === sectionName && i.input_name_en === inputNameEn,
      );
      if (!item) return;

      let raw: unknown = item.value;
      if (typeof itemIndex === "number") {
        if (!Array.isArray(raw)) return;
        raw = raw[itemIndex];
        if (itemField && raw && typeof raw === "object") {
          raw = (raw as Record<string, unknown>)[itemField];
        }
      }

      const text = extractLocalizedText(raw, data.language || "ar");
      if (text !== undefined) {
        setValue(text);
      }
    }

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [sectionName, inputNameEn, itemIndex, itemField]);

  return value;
}