"use client"

import { useEffect, useRef } from "react"
import styles from "./chart.module.scss"

const AdminTradingChart: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
    // Prevent duplicate script insertion
    if (!containerRef.current) return
    containerRef.current.innerHTML = ""

    const script = document.createElement("script")
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"
    script.type = "text/javascript"
    script.async = true

    // ✅ Correct JSON structure and syntax
    script.innerHTML = JSON.stringify({
      height: 550,
      symbol: "NASDAQ:AAPL",
      interval: "D",
      timezone: "Etc/UTC",
      theme: "light",
      style: "1",
      locale: "en",
      withdateranges: true,
      "border-radius": 10,
      allow_symbol_change: true,
      calendar: false,
      support_host: "https://www.tradingview.com",
    })

    containerRef.current.appendChild(script)
  }, [])

  return (
    <div className={styles.chart}>
      <div
        className="tradingview-widget-container__widget"
        ref={containerRef}
      ></div>
    </div>
  )
}

export default AdminTradingChart