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

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

export default function SimpleChart({ symbol = 'SOL/USDC', positions = [] }: SimpleChartProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

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

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

    // Draw grid
    ctx.strokeStyle = '#333'
    ctx.lineWidth = 1

    // Vertical lines
    for (let x = 0; x < canvas.width; x += 40) {
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, canvas.height)
      ctx.stroke()
    }

    // Horizontal lines
    for (let y = 0; y < canvas.height; y += 40) {
      ctx.beginPath()
      ctx.moveTo(0, y)
      ctx.lineTo(canvas.width, y)
      ctx.stroke()
    }

    // Draw sample candlesticks
    const candleWidth = 20
    const basePrice = 166.5
    const priceScale = 2

    for (let i = 0; i < 30; i++) {
      const x = 40 + i * 25
      const open = basePrice + (Math.random() - 0.5) * 10
      const close = open + (Math.random() - 0.5) * 5
      const high = Math.max(open, close) + Math.random() * 3
      const low = Math.min(open, close) - Math.random() * 3

      const openY = canvas.height - (open - 150) * priceScale
      const closeY = canvas.height - (close - 150) * priceScale
      const highY = canvas.height - (high - 150) * priceScale
      const lowY = canvas.height - (low - 150) * priceScale

      // Determine color
      const isGreen = close > open
      ctx.fillStyle = isGreen ? '#26a69a' : '#ef5350'
      ctx.strokeStyle = isGreen ? '#26a69a' : '#ef5350'

      // Draw wick
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.moveTo(x + candleWidth / 2, highY)
      ctx.lineTo(x + candleWidth / 2, lowY)
      ctx.stroke()

      // Draw body
      const bodyTop = Math.min(openY, closeY)
      const bodyHeight = Math.abs(closeY - openY)
      ctx.fillRect(x, bodyTop, candleWidth, Math.max(bodyHeight, 2))
    }

    // Draw price labels
    ctx.fillStyle = '#ffffff'
    ctx.font = '12px Arial'
    ctx.fillText(`${symbol} - $${basePrice.toFixed(2)}`, 10, 30)
    ctx.fillStyle = '#26a69a'
    ctx.fillText('+2.45%', 10, 50)

  }, [symbol, positions])

  return (
    <div className="w-full">
      <canvas 
        ref={canvasRef}
        className="w-full h-96 bg-gray-800 rounded border border-gray-600"
        style={{ maxWidth: '100%', height: '400px' }}
      />
    </div>
  )
}