"use client";

import React from "react";
import { LayoutSchema, SlideElement, mergeElementsWithContent } from "@/app/hooks/parseLayoutSchema";

interface SlideRendererProps {
  schema: LayoutSchema;
  /** Optional slide content data (keys = placeholder names) */
  content?: Record<string, unknown>;
  /** Scale factor for the slide container (default: fill container) */
  className?: string;
  style?: React.CSSProperties;
}

/**
 * Renders a slide from a JSON element model.
 * Uses absolutely-positioned divs at percentage coordinates.
 * No Babel/TSX compilation — pure data-driven rendering.
 */
export function SlideRenderer({
  schema,
  content,
  className = "",
  style,
}: SlideRendererProps) {
  const elements = mergeElementsWithContent(schema, content);
  const { slideWidth, slideHeight, background } = schema;

  return (
    <div
      className={`relative overflow-hidden ${className}`}
      style={{
        aspectRatio: `${slideWidth} / ${slideHeight}`,
        background,
        ...style,
      }}
    >
      {elements.map((elem) => (
        <ElementRenderer
          key={elem.id}
          elem={elem}
          slideWidth={slideWidth}
          slideHeight={slideHeight}
        />
      ))}
    </div>
  );
}

function ElementRenderer({
  elem,
  slideWidth,
  slideHeight,
}: {
  elem: SlideElement;
  slideWidth: number;
  slideHeight: number;
}) {
  const posStyle: React.CSSProperties = {
    position: "absolute",
    left: `${(elem.x / slideWidth) * 100}%`,
    top: `${(elem.y / slideHeight) * 100}%`,
    width: `${(elem.w / slideWidth) * 100}%`,
    height: `${(elem.h / slideHeight) * 100}%`,
    overflow: "hidden",
  };

  if (elem.type === "text" || elem.type === "shape") {
    const displayText = elem.content || elem.defaultContent || "";
    if (!displayText && elem.type === "shape") {
      // Decorative shape — render as colored block if we have background
      return (
        <div style={{ ...posStyle, background: "rgba(255,255,255,0.1)" }} />
      );
    }
    return (
      <div style={posStyle}>
        <div
          style={{
            width: "100%",
            height: "100%",
            display: "flex",
            alignItems: "center",
            overflow: "hidden",
            ...elem.style,
          }}
        >
          <span style={{ width: "100%" }}>{displayText}</span>
        </div>
      </div>
    );
  }

  if (elem.type === "image") {
    const src = elem.imageUrl;
    if (!src) {
      return (
        <div
          style={{
            ...posStyle,
            background: "rgba(128,128,128,0.2)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <span style={{ color: "rgba(128,128,128,0.6)", fontSize: "10px" }}>
            Image
          </span>
        </div>
      );
    }
    return (
      <div style={posStyle}>
        <img
          src={src}
          alt=""
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            ...elem.style,
          }}
        />
      </div>
    );
  }

  if (elem.type === "chart") {
    return (
      <div
        style={{
          ...posStyle,
          background: "rgba(128,128,128,0.1)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          border: "1px dashed rgba(128,128,128,0.3)",
        }}
      >
        <span style={{ color: "rgba(128,128,128,0.6)", fontSize: "10px" }}>
          Chart
        </span>
      </div>
    );
  }

  return null;
}

export default SlideRenderer;
