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

export default function DirectChart() {
  useEffect(() => {
    const container = document.getElementById('chart-container')
    if (!container) return

    const initChart = async () => {
      try {
        console.log('Starting direct chart...')
        
        // Import with explicit .mjs extension
        const chartModule = await import('lightweight-charts')
        console.log('Module loaded:', chartModule)
        
        const { createChart } = chartModule
        console.log('Functions extracted')
        
        const chart = createChart(container, {
          width: 800,
          height: 400,
          layout: {
            background: { color: '#1a1a1a' },
            textColor: '#ffffff',
          },
        })
        console.log('Chart created')
        
        const series = chart.addCandlestickSeries({
          upColor: '#26a69a',
          downColor: '#ef5350',
        })
        console.log('Series added')
        
        series.setData([
          { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
          { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
          { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
        ])
        console.log('Data set - should be visible!')
        
      } catch (error) {
        console.error('Direct chart error:', error)
        const statusDiv = document.getElementById('status')
        if (statusDiv) {
          statusDiv.textContent = `Error: ${error}`
          statusDiv.className = 'text-red-400 text-lg mb-4'
        }
      }
    }

    // Add a small delay to ensure DOM is ready
    setTimeout(initChart, 100)
  }, [])

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <h1 className="text-white text-3xl mb-4">Direct DOM Chart</h1>
      <div id="status" className="text-yellow-400 text-lg mb-4">Loading...</div>
      
      <div 
        id="chart-container"
        className="border-2 border-green-500 bg-gray-800"
        style={{ 
          width: '800px', 
          height: '400px',
        }}
      />
    </div>
  )
}