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

export default function ChartDebug() {
  const chartContainerRef = useRef<HTMLDivElement>(null)
  const [logs, setLogs] = useState<string[]>([])
  const [chartCreated, setChartCreated] = useState(false)

  const addLog = (message: string) => {
    console.log(message)
    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
  }

  useEffect(() => {
    if (!chartContainerRef.current) {
      addLog('Chart container ref not available')
      return
    }

    const initChart = async () => {
      try {
        addLog('Starting chart initialization...')
        
        // Import lightweight-charts
        const LightweightCharts = await import('lightweight-charts')
        addLog('Lightweight charts imported successfully')
        
        const { createChart } = LightweightCharts
        addLog('createChart extracted')

        // Create chart with minimal options
        const chart = createChart(chartContainerRef.current!, {
          width: 600,
          height: 300,
        })
        addLog('Chart created successfully')
        setChartCreated(true)

        // Add candlestick series with the correct v5 API
        const candlestickSeries = chart.addCandlestickSeries({
          upColor: '#26a69a',
          downColor: '#ef5350',
          borderDownColor: '#ef5350',
          borderUpColor: '#26a69a',
          wickDownColor: '#ef5350',
          wickUpColor: '#26a69a',
        })
        addLog('Candlestick series added')

        // Very simple test data
        const testData = [
          { time: '2023-01-01', open: 100, high: 110, low: 95, close: 105 },
          { time: '2023-01-02', open: 105, high: 115, low: 100, close: 110 },
          { time: '2023-01-03', open: 110, high: 120, low: 105, close: 115 },
          { time: '2023-01-04', open: 115, high: 125, low: 110, close: 120 },
          { time: '2023-01-05', open: 120, high: 130, low: 115, close: 125 },
        ]
        
        addLog(`Setting data with ${testData.length} points`)
        candlestickSeries.setData(testData)
        addLog('Data set successfully - chart should be visible now')

        // Cleanup function
        return () => {
          addLog('Cleaning up chart')
          chart.remove()
        }

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

    initChart()
  }, [])

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <h1 className="text-white text-2xl mb-4">Chart Debug Test</h1>
      
      <div className="mb-4">
        <h2 className="text-white text-lg mb-2">Status</h2>
        <div className="text-gray-400">
          Chart Created: {chartCreated ? '✅ Yes' : '❌ No'}
        </div>
      </div>

      <div className="mb-4">
        <h2 className="text-white text-lg mb-2">Chart Container</h2>
        <div 
          ref={chartContainerRef} 
          className="bg-gray-800 border border-gray-600 rounded"
          style={{ width: '600px', height: '300px' }}
        />
      </div>

      <div>
        <h2 className="text-white text-lg mb-2">Debug Logs</h2>
        <div className="bg-gray-800 p-4 rounded max-h-60 overflow-y-auto">
          {logs.map((log, index) => (
            <div key={index} className="text-gray-300 text-sm font-mono">
              {log}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}