"use client";

import { useEffect, useRef } from "react";
import { useSearchParams } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FooterBase from "@/components/sections/footer/FooterBase";
import ReactLenis from "lenis/react";

export default function ChartPage() {
  const searchParams = useSearchParams();
  const pair = searchParams.get("pair") || "EURUSD";
  const container = useRef<HTMLDivElement>(null);

  useEffect(() => {
    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;
    script.innerHTML = JSON.stringify({
      "autosize": true,
      "symbol": `FX:${pair}`,
      "interval": "D",      "timezone": "Etc/UTC",      "theme": "dark",      "style": "1",      "locale": "en",      "enable_publishing": false,
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "support_host": "https://www.tradingview.com"
    });
    if (container.current) {
      container.current.innerHTML = "";
      container.current.appendChild(script);
    }
  }, [pair]);

  const currencyPairs = [
    { name: "EUR/USD", href: "/chart?pair=EURUSD" },
    { name: "GBP/USD", href: "/chart?pair=GBPUSD" },
    { name: "USD/JPY", href: "/chart?pair=USDJPY" },
    { name: "AUD/USD", href: "/chart?pair=AUDUSD" }
  ];

  return (
    <ThemeProvider 
        defaultButtonVariant="expand-hover" 
        defaultTextAnimation="background-highlight" 
        borderRadius="soft" 
        contentWidth="mediumSmall" 
        sizing="mediumLargeSizeLargeTitles" 
        background="floatingGradient" 
        cardStyle="outline" 
        primaryButtonStyle="gradient" 
        secondaryButtonStyle="solid" 
        headingFontWeight="normal"
    >
        <ReactLenis root>
            <div id="nav" data-section="nav">
                <NavbarStyleApple
                    navItems={[
                        { name: "Dashboard", id: "/" },
                        ...currencyPairs.map(p => ({ name: p.name, id: p.href }))
                    ]}
                    brandName="ForexFlow"
                />
            </div>

            <div style={{ height: "85vh", width: "100%", padding: "2rem" }}>
                <h1 style={{ marginBottom: "1rem" }}>{pair} Advanced Chart</h1>
                <div ref={container} style={{ height: "100%", width: "100%" }} />
            </div>

            <div id="footer" data-section="footer">
                <FooterBase
                    columns={[
                        { title: "Product", items: currencyPairs.map(p => ({ label: p.name, href: p.href })) },
                        { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Community", href: "#" }] },
                        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }] },
                    ]}
                    logoText="ForexFlow"
                />
            </div>
        </ReactLenis>
    </ThemeProvider>
  );
}