import { useEffect } from "react"
import { addPropertyControls, ControlType, RenderTarget } from "framer"

/**
 * Techvea Support Bot
 * Adds your AI support chat to the page. Paste your Widget ID (from the Techvea dashboard).
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export default function TechveaSupportBot(props) {
    const { widgetId } = props
    const target = RenderTarget.current()
    const onCanvas = target === RenderTarget.canvas || target === RenderTarget.thumbnail
    const valid = /^[A-Za-z0-9_-]{6,40}$/.test(widgetId || "")

    useEffect(() => {
        if (onCanvas || !valid || typeof document === "undefined") return
        // Only ever add the chat once, even if the component is on several pages.
        if (document.querySelector('script[data-widget-id="' + widgetId + '"]')) return
        const s = document.createElement("script")
        s.src = "https://techvea.com/widget.js"
        s.async = true
        s.setAttribute("data-widget-id", widgetId)
        document.body.appendChild(s)
    }, [widgetId, onCanvas, valid])

    // On the Framer canvas show a small label. On the live site the component takes no space.
    if (!onCanvas) return <div aria-hidden style={{ display: "none" }} />
    return (
        <div
            style={{
                width: "100%", height: "100%", minHeight: 64, display: "flex", alignItems: "center",
                justifyContent: "center", gap: 10, borderRadius: 12, background: "#111", color: "#fff",
                font: "600 14px system-ui, sans-serif", padding: 12, boxSizing: "border-box", textAlign: "center",
            }}
        >
            {valid ? "Techvea Support Bot ready: " + widgetId : "Techvea Support Bot: paste your Widget ID"}
        </div>
    )
}

TechveaSupportBot.defaultProps = { widgetId: "" }

addPropertyControls(TechveaSupportBot, {
    widgetId: {
        type: ControlType.String,
        title: "Widget ID",
        placeholder: "wgt_xxxxxxxx",
        defaultValue: "",
    },
})