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

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

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

    const initChart = async () => {
      try {
        const { createChart } = await import('lightweight-charts')
        
        const chart = createChart(chartContainerRef.current!, {
          width: 800,
          height: 400,
          layout: {
            textColor: '#ffffff',
            background: { color: '#1a1a1a' },
          },
        })

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

        // Simple working data - last 30 days
        const data = []
        const today = new Date()
        let price = 166.5

        for (let i = 29; i >= 0; i--) {
          const date = new Date(today)
          date.setDate(date.getDate() - i)
          const timeString = date.toISOString().split('T')[0]
          
          const change = (Math.random() - 0.5) * 4
          const open = price
          const close = price + change
          const high = Math.max(open, close) + Math.random() * 2
          const low = Math.min(open, close) - Math.random() * 2

          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
        }

        candlestickSeries.setData(data)

        return () => {
          chart.remove()
        }
      } catch (error) {
        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">Working Chart Test</h1>
      <div 
        ref={chartContainerRef} 
        className="bg-gray-800 border border-gray-600"
      />
    </div>
  )
}