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

export default function SimpleChart() {
  const chartContainerRef = useRef<HTMLDivElement>(null)
  const [status, setStatus] = useState('Initializing...')

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

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

        const chart = createChart(chartContainerRef.current!, {
          layout: {
            background: { type: ColorType.Solid, color: '#1a1a1a' },
            textColor: '#ffffff',
          },
          width: chartContainerRef.current!.clientWidth || 800,
          height: 400,
          grid: {
            vertLines: { color: 'rgba(42, 46, 57, 0.5)' },
            horzLines: { color: 'rgba(42, 46, 57, 0.5)' },
          },
        })

        setStatus('Adding candlestick series...')
        console.log('Chart created, adding candlestick series...')

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

        // Generate sample data
        const data = []
        const baseTime = new Date(Date.now() - 100 * 60 * 1000) // 100 minutes ago
        let price = 166.5

        for (let i = 0; i < 100; i++) {
          const currentTime = new Date(baseTime.getTime() + i * 60 * 1000) // 1 minute intervals
          const timeString = currentTime.toISOString().split('T')[0] // YYYY-MM-DD format
          const change = (Math.random() - 0.5) * 2 // Random price change
          const open = price
          const close = price + change
          const high = Math.max(open, close) + Math.random() * 1
          const low = Math.min(open, close) - Math.random() * 1

          data.push({
            time: timeString,
            open: Number(open.toFixed(2)),
            high: Number(high.toFixed(2)),
            low: Number(low.toFixed(2)),
            close: Number(close.toFixed(2)),
          })

          price = close
        }

        console.log('Setting chart data...', data.length, 'points')
        candlestickSeries.setData(data)

        setStatus('Chart loaded successfully!')
        console.log('Chart created successfully!')

        // Handle resize
        const handleResize = () => {
          if (chartContainerRef.current) {
            chart.applyOptions({
              width: chartContainerRef.current.clientWidth,
            })
          }
        }

        window.addEventListener('resize', handleResize)

        return () => {
          window.removeEventListener('resize', handleResize)
          chart.remove()
        }

      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error)
        console.error('Error creating chart:', error)
        setStatus(`Error: ${errorMessage}`)
      }
    }

    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 className="text-gray-400 mb-4">Status: {status}</div>
      <div 
        ref={chartContainerRef} 
        className="bg-gray-800 rounded w-full h-96" 
        style={{ minHeight: '400px' }}
      />
    </div>
  )
}