import { useEffect, useRef } from "react";
import * as LightweightCharts from "lightweight-charts";

type ChartTime = string | number;

interface ChartDataPoint {
  time: ChartTime;
  open: number;
  high: number;
  low: number;
  close: number;
}

interface TradingViewChartProps {
  ticker: string;
  data?: ChartDataPoint[];
  timeframe?: string;
}

const TIMEFRAME_HEIGHTS: Record<string, number> = {
  "1D": 300,
  "5Min": 250,
  "15Min": 250,
  "1H": 350,
  "1W": 400,
};

export default function TradingViewChart({ ticker, data, timeframe = "1D" }: TradingViewChartProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const height = TIMEFRAME_HEIGHTS[timeframe] ?? 400;

  const isIntraday = ["1Min", "5Min", "15Min", "30Min", "1H"].includes(timeframe);
  
  useEffect(() => {
    if (!containerRef.current) {
      return;
    }

    const chart = LightweightCharts.createChart(containerRef.current, {
      height,
      autoSize: true,
    });

    // Configure time scale based on timeframe and range
    chart.timeScale().applyOptions({
      timeVisible: isIntraday,
      secondsVisible: timeframe === "1Min",
    });

    const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries, {
      upColor: "#26a69a",
      downColor: "#ef5350",
      borderUpColor: "#26a69a",
      borderDownColor: "#ef5350",
      wickUpColor: "#26a69a",
      wickDownColor: "#ef5350",
    });
    
    if (data && data.length > 0) {
      try {
        candlestickSeries.setData(data as any);
        // Fit the visible data range
        chart.timeScale().fitContent();
      } catch (err) {
        console.error(`TradingViewChart: error setting data for ${ticker}`, err);
      }
    }

    return () => chart.remove();
  }, [data, ticker, isIntraday, timeframe]);

  return (
    <div className="bg-white rounded-xl shadow-lg p-4">
      <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
      <div ref={containerRef} className="w-full" />
    </div>
  );
}