trading_bot_v3/components/WorkingTradingChart.tsx

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

interface CandlestickData {
  time: string
  open: number
  high: number
  low: number
  close: number
}

interface TradingChartProps {
  symbol?: string
  positions?: any[]
}

export default function WorkingTradingChart({ symbol = 'SOL/USDC', positions = [] }: TradingChartProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [status, setStatus] = useState('Initializing...')
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    try {
      setStatus('Generating data...')
      
      // Generate sample candlestick data
      const data: CandlestickData[] = []
      const basePrice = 166.5
      let currentPrice = basePrice
      const today = new Date()

      for (let i = 29; i >= 0; i--) {
        const date = new Date(today)
        date.setDate(date.getDate() - i)
        
        const volatility = 0.02
        const change = (Math.random() - 0.5) * volatility * currentPrice
        
        const open = currentPrice
        const close = currentPrice + change
        const high = Math.max(open, close) + Math.random() * 0.01 * currentPrice
        const low = Math.min(open, close) - Math.random() * 0.01 * currentPrice

        data.push({
          time: date.toISOString().split('T')[0],
          open: Number(open.toFixed(2)),
          high: Number(high.toFixed(2)),
          low: Number(low.toFixed(2)),
          close: Number(close.toFixed(2)),
        })

        currentPrice = close
      }

      setStatus('Drawing chart...')
      drawChart(data)
      setStatus('Chart ready!')

    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : String(err)
      setError(errorMessage)
      setStatus(`Error: ${errorMessage}`)
      console.error('Chart error:', err)
    }
  }, [])

  const drawChart = (data: CandlestickData[]) => {
    const canvas = canvasRef.current
    if (!canvas) {
      throw new Error('Canvas element not found')
    }

    const ctx = canvas.getContext('2d')
    if (!ctx) {
      throw new Error('Could not get 2D context')
    }

    // Set canvas size
    canvas.width = 800
    canvas.height = 400

    // Clear canvas
    ctx.fillStyle = '#1a1a1a'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    if (data.length === 0) {
      ctx.fillStyle = '#ffffff'
      ctx.font = '16px Arial'
      ctx.textAlign = 'center'
      ctx.fillText('No data available', canvas.width / 2, canvas.height / 2)
      return
    }

    // Calculate price range
    const prices = data.flatMap(d => [d.open, d.high, d.low, d.close])
    const minPrice = Math.min(...prices)
    const maxPrice = Math.max(...prices)
    const priceRange = maxPrice - minPrice
    const padding = priceRange * 0.1

    // Chart dimensions
    const chartLeft = 60
    const chartRight = canvas.width - 40
    const chartTop = 40
    const chartBottom = canvas.height - 60
    const chartWidth = chartRight - chartLeft
    const chartHeight = chartBottom - chartTop

    // Draw grid lines
    ctx.strokeStyle = '#333333'
    ctx.lineWidth = 1

    // Horizontal grid lines (price levels)
    for (let i = 0; i <= 5; i++) {
      const y = chartTop + (chartHeight / 5) * i
      ctx.beginPath()
      ctx.moveTo(chartLeft, y)
      ctx.lineTo(chartRight, y)
      ctx.stroke()

      // Price labels
      const price = maxPrice + padding - ((maxPrice + padding - (minPrice - padding)) / 5) * i
      ctx.fillStyle = '#888888'
      ctx.font = '12px Arial'
      ctx.textAlign = 'right'
      ctx.fillText(price.toFixed(2), chartLeft - 10, y + 4)
    }

    // Vertical grid lines (time)
    const timeStep = Math.max(1, Math.floor(data.length / 6))
    for (let i = 0; i < data.length; i += timeStep) {
      const x = chartLeft + (chartWidth / (data.length - 1)) * i
      ctx.beginPath()
      ctx.moveTo(x, chartTop)
      ctx.lineTo(x, chartBottom)
      ctx.stroke()

      // Time labels
      ctx.fillStyle = '#888888'
      ctx.font = '12px Arial'
      ctx.textAlign = 'center'
      ctx.fillText(data[i].time.split('-')[1] + '/' + data[i].time.split('-')[2], x, chartBottom + 20)
    }

    // Draw candlesticks
    const candleWidth = Math.max(2, chartWidth / data.length * 0.6)

    data.forEach((candle, index) => {
      const x = chartLeft + (chartWidth / (data.length - 1)) * index
      const openY = chartBottom - ((candle.open - (minPrice - padding)) / (maxPrice + padding - (minPrice - padding))) * chartHeight
      const closeY = chartBottom - ((candle.close - (minPrice - padding)) / (maxPrice + padding - (minPrice - padding))) * chartHeight
      const highY = chartBottom - ((candle.high - (minPrice - padding)) / (maxPrice + padding - (minPrice - padding))) * chartHeight
      const lowY = chartBottom - ((candle.low - (minPrice - padding)) / (maxPrice + padding - (minPrice - padding))) * chartHeight

      const isGreen = candle.close > candle.open
      ctx.strokeStyle = isGreen ? '#26a69a' : '#ef5350'
      ctx.fillStyle = isGreen ? '#26a69a' : '#ef5350'
      ctx.lineWidth = 1

      // Draw wick
      ctx.beginPath()
      ctx.moveTo(x, highY)
      ctx.lineTo(x, lowY)
      ctx.stroke()

      // Draw body
      const bodyTop = Math.min(openY, closeY)
      const bodyHeight = Math.abs(closeY - openY)
      
      if (bodyHeight < 1) {
        // Doji - draw a line
        ctx.beginPath()
        ctx.moveTo(x - candleWidth / 2, openY)
        ctx.lineTo(x + candleWidth / 2, openY)
        ctx.stroke()
      } else {
        ctx.fillRect(x - candleWidth / 2, bodyTop, candleWidth, bodyHeight)
      }
    })

    // Draw chart border
    ctx.strokeStyle = '#555555'
    ctx.lineWidth = 1
    ctx.strokeRect(chartLeft, chartTop, chartWidth, chartHeight)

    // Draw title
    ctx.fillStyle = '#ffffff'
    ctx.font = 'bold 16px Arial'
    ctx.textAlign = 'left'
    ctx.fillText(symbol, chartLeft, 25)

    // Draw current price
    const currentPrice = data[data.length - 1].close
    ctx.fillStyle = '#26a69a'
    ctx.font = 'bold 14px Arial'
    ctx.textAlign = 'right'
    ctx.fillText(`$${currentPrice.toFixed(2)}`, chartRight, 25)
  }

  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-white text-sm">Status: <span className="text-green-400">{status}</span></div>
        {error && (
          <div className="text-red-400 text-sm mt-2">Error: {error}</div>
        )}
      </div>
      
      <div className="bg-gray-800 rounded-lg p-4">
        <canvas 
          ref={canvasRef}
          className="w-full h-auto border border-gray-600 rounded"
          style={{ maxWidth: '100%', height: 'auto' }}
        />
      </div>
    </div>
  )
}