import React, {useState} from 'react'
import {toast} from 'react-toastify'
import {SettingsClient} from '../../../generated/ManagingApi'
import useApiUrlStore from '../../../app/store/apiStore'

const DefaultConfig: React.FC = () => {
  const [isCreating, setIsCreating] = useState(false)
  const { apiUrl } = useApiUrlStore()

  const createDefaultConfig = async () => {
    try {
      const client = new SettingsClient({}, apiUrl)
      setIsCreating(true)
      const response = await client.settings_CreateDefaultConfiguration()
        .then((response) => {
          if (response) {
            toast.success('Default configuration created successfully!')
          } else {
            toast.error(`Failed to create default configuration`)
          }
        })
    } catch (error) {
      toast.error(`Error: ${error instanceof Error ? error.message : String(error)}`)
    } finally {
      setIsCreating(false)
    }
  }

  return (
    <div className="max-w-3xl mx-auto p-4">
      <div className="card bg-base-100 shadow-xl p-6">
        <h2 className="text-2xl font-bold mb-4">Default Configuration</h2>
        
        <div className="mb-6">
          <p className="mb-2">Create a default configuration to get started quickly with backtesting:</p>
          
          <div className="bg-base-200 p-4 rounded-lg mb-4">
            <h3 className="text-lg font-semibold mb-2">Money Management:</h3>
            <ul className="list-disc pl-6 mb-2">
              <li>Name: Default Hourly</li>
              <li>Timeframe: 1 Hour</li>
              <li>Balance at Risk: 25%</li>
              <li>Stop Loss: 2%</li>
              <li>Take Profit: 4%</li>
              <li>Leverage: 1x</li>
            </ul>
            
            <h3 className="text-lg font-semibold mb-2">Strategy:</h3>
            <ul className="list-disc pl-6 mb-2">
              <li>Type: StcTrend</li>
              <li>Name: Default StcTrend</li>
              <li>SignalType: Both</li>
              <li>FastPeriods: 23</li>
              <li>SlowPeriods: 50</li>
              <li>StochPeriods: 10</li>
            </ul>
            
            <h3 className="text-lg font-semibold mb-2">Scenario:</h3>
            <ul className="list-disc pl-6">
              <li>Name: Default Scenario</li>
              <li>Contains: Default StcTrend strategy</li>
            </ul>
          </div>
        </div>
        
        <div className="flex justify-center">
          <button 
            onClick={createDefaultConfig}
            disabled={isCreating}
            className="btn btn-primary"
          >
            {isCreating ? 'Creating...' : 'Create Default Configuration'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default DefaultConfig 
