import React, {useEffect, useState} from 'react'

import type {Backtest, MoneyManagement} from '../../../generated/ManagingApi'
import {Modal} from '../../mollecules'
import type {IModalProps} from '../../../global/type.tsx'

interface IBotNameModalProps extends IModalProps {
  backtest: Backtest
  isForWatchOnly: boolean
  onSubmitBotName: (botName: string, backtest: Backtest, isForWatchOnly: boolean, moneyManagementName: string, initialTradingBalance: number) => void
  moneyManagements: MoneyManagement[]
  selectedMoneyManagement: string
  setSelectedMoneyManagement: (name: string) => void
}

const BotNameModal: React.FC<IBotNameModalProps> = ({
  showModal,
  onClose,
  backtest,
  isForWatchOnly,
  onSubmitBotName,
  moneyManagements,
  selectedMoneyManagement,
  setSelectedMoneyManagement,
}) => {
  const [botName, setBotName] = useState<string>('')
  const [initialTradingBalance, setInitialTradingBalance] = useState<number>(1000)
  
  // Initialize botName when backtest changes
  useEffect(() => {
    if (backtest) {
      setBotName(`${backtest.config.ticker}-${backtest.config.timeframe}`)
    }
  }, [backtest])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (botName.trim() && initialTradingBalance > 0) {
      onSubmitBotName(botName, backtest, isForWatchOnly, selectedMoneyManagement, initialTradingBalance)
    }
  }

  const handleMoneyManagementChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedMoneyManagement(e.target.value)
  }

  const titleHeader = isForWatchOnly ? 'Run Bot in Watch Mode' : 'Run Bot'

  return (
    <Modal
      showModal={showModal}
      onSubmit={handleSubmit}
      onClose={onClose}
      titleHeader={titleHeader}
    >
      <div className="form-control w-full mb-4">
        <label className="label">
          <span className="label-text">Bot Name</span>
        </label>
        <input
          type="text"
          placeholder="Enter bot name"
          className="input input-bordered w-full"
          value={botName}
          onChange={(e) => setBotName(e.target.value)}
          required
        />
      </div>

      <div className="form-control w-full mb-4">
        <label className="label">
          <span className="label-text">Money Management</span>
        </label>
        <select
          className="select select-bordered w-full"
          value={selectedMoneyManagement}
          onChange={handleMoneyManagementChange}
          required
        >
          {moneyManagements.map((item) => (
            <option key={item.name} value={item.name}>
              {item.name}
            </option>
          ))}
        </select>
      </div>

      <div className="form-control w-full mb-4">
        <label className="label">
          <span className="label-text">Initial Trading Balance ($)</span>
        </label>
        <input
          type="number"
          placeholder="Enter initial trading balance"
          className="input input-bordered w-full"
          value={initialTradingBalance}
          onChange={(e) => setInitialTradingBalance(Number(e.target.value))}
          min="10"
          step="0.01"
          required
        />
      </div>

      <p className="text-xs text-gray-500 mt-2 mb-4">
        {isForWatchOnly 
          ? 'The bot will run in watch-only mode and will not execute trades.' 
          : 'The bot will run and execute trades based on signals.'}
      </p>
      
      <div className="modal-action">
        <button type="button" className="btn" onClick={onClose as () => void}>
          Cancel
        </button>
        <button type="submit" className="btn btn-primary">
          Run Bot
        </button>
      </div>
    </Modal>
  )
}

export default BotNameModal 