"use client"
import React, { useState } from 'react'

export default function AutoTradingPanel() {
  const [status, setStatus] = useState<'idle'|'running'|'stopped'>('idle')
  const [message, setMessage] = useState<string>('')

  async function handleAction(action: 'start'|'stop') {
    setMessage('')
    setStatus('idle')
    const res = await fetch('/api/auto-trading', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action })
    })
    if (res.ok) {
      setStatus(action === 'start' ? 'running' : 'stopped')
      setMessage(`Auto-trading ${action}ed`)
    } else {
      setMessage('Error: ' + (await res.text()))
    }
  }

  return (
    <div className="p-4 border rounded bg-gray-900">
      <h2 className="text-lg font-bold mb-2">Auto-Trading Control</h2>
      <div className="flex gap-2 mb-2">
        <button className="btn btn-primary" onClick={() => handleAction('start')}>Start</button>
        <button className="btn btn-secondary" onClick={() => handleAction('stop')}>Stop</button>
      </div>
      <div className="text-sm text-gray-400">Status: {status}</div>
      {message && <div className="mt-2 text-yellow-400">{message}</div>}
    </div>
  )
}