'use client'
import React, { useEffect, useRef } from 'react'

export default function SimpleChart() {
  const chartContainerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!chartContainerRef.current) return

    const initChart = async () => {
      try {
        console.log('Importing lightweight-charts...')
        const LightweightCharts = await import('lightweight-charts')
        console.log('Lightweight charts imported:', LightweightCharts)
        
        const { createChart, ColorType } = LightweightCharts

        const chart = createChart(chartContainerRef.current!, {
          layout: {
            background: { type: ColorType.Solid, color: '#1a1a1a' },
            textColor: '#ffffff',
          },
          width: 800,
          height: 400,
        })

        const candlestickSeries = chart.addCandlestickSeries({
          upColor: '#26a69a',
          downColor: '#ef5350',
          borderDownColor: '#ef5350',
          borderUpColor: '#26a69a',
          wickDownColor: '#ef5350',
          wickUpColor: '#26a69a',
        })

        // Simple test data
        candlestickSeries.setData([
          { time: '2023-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
          { time: '2023-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
          { time: '2023-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
          { time: '2023-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
          { time: '2023-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
        ])

        console.log('Chart created successfully!')

      } catch (error) {
        console.error('Error creating chart:', error)
      }
    }

    initChart()
  }, [])

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <h1 className="text-white text-2xl mb-4">Lightweight Charts Test</h1>
      <div ref={chartContainerRef} className="bg-gray-800 rounded" />
    </div>
  )
}