import React, {useEffect, useState} from 'react'
import {useQuery} from '@tanstack/react-query'
import useApiUrlStore from '../../../app/store/apiStore'
import {
  AccountClient,
  Backtest,
  BotClient,
  BotType,
  MoneyManagement,
  MoneyManagementClient,
  ScenarioClient,
  StartBotRequest,
  Ticker,
  Timeframe,
  TradingBotConfig,
  TradingBotConfigRequest,
  UpdateBotConfigRequest
} from '../../../generated/ManagingApi'
import Toast from '../Toast/Toast'

interface BotConfigModalProps {
  showModal: boolean
  onClose: () => void
  backtest?: Backtest // When creating from backtest
  existingBot?: {
    identifier: string
    config: TradingBotConfig
  } // When updating existing bot
  mode: 'create' | 'update' // Explicitly specify the mode
}

const BotConfigModal: React.FC<BotConfigModalProps> = ({
  showModal,
  onClose,
  backtest,
  existingBot,
  mode
}) => {
  const { apiUrl } = useApiUrlStore()
  
  // Form state
  const [formData, setFormData] = useState<{
    name: string
    accountName: string
    moneyManagementName: string
    ticker: Ticker
    scenarioName: string
    timeframe: Timeframe
    isForWatchingOnly: boolean
    botTradingBalance: number
    botType: BotType
    cooldownPeriod: number
    maxLossStreak: number
    maxPositionTimeHours: number | null
    flipOnlyWhenInProfit: boolean
    flipPosition: boolean
    closeEarlyWhenProfitable: boolean
    useCustomMoneyManagement: boolean
    customStopLoss: number
    customTakeProfit: number
    customLeverage: number
    // Synth API fields
    useSynthApi: boolean
    useForPositionSizing: boolean
    useForSignalFiltering: boolean
    useForDynamicStopLoss: boolean
  }>({
    name: '',
    accountName: '',
    moneyManagementName: '',
    ticker: Ticker.BTC,
    scenarioName: '',
    timeframe: Timeframe.FifteenMinutes,
    isForWatchingOnly: false,
    botTradingBalance: 1000,
    botType: BotType.ScalpingBot,
    cooldownPeriod: 1,
    maxLossStreak: 0,
    maxPositionTimeHours: null,
    flipOnlyWhenInProfit: true,
    flipPosition: false,
    closeEarlyWhenProfitable: false,
    useCustomMoneyManagement: false,
    customStopLoss: 0.01,
    customTakeProfit: 0.02,
    customLeverage: 1,
    useSynthApi: false,
    useForPositionSizing: true,
    useForSignalFiltering: true,
    useForDynamicStopLoss: true
  })

  // State for advanced parameters dropdown
  const [showAdvancedParams, setShowAdvancedParams] = useState(false)

  // Fetch data
  const { data: accounts } = useQuery({
    queryFn: async () => {
      const accountClient = new AccountClient({}, apiUrl)
      return await accountClient.account_GetAccounts()
    },
    queryKey: ['accounts']
  })

  const { data: moneyManagements } = useQuery({
    queryFn: async () => {
      const moneyManagementClient = new MoneyManagementClient({}, apiUrl)
      return await moneyManagementClient.moneyManagement_GetMoneyManagements()
    },
    queryKey: ['moneyManagements']
  })

  const { data: scenarios } = useQuery({
    queryFn: async () => {
      const scenarioClient = new ScenarioClient({}, apiUrl)
      return await scenarioClient.scenario_GetScenarios()
    },
    queryKey: ['scenarios']
  })

  // Initialize form data based on props
  useEffect(() => {
    if (mode === 'create' && backtest) {
      // Initialize from backtest
      setFormData({
        name: `Bot-${backtest.config.scenarioName || 'Custom'}-${new Date().toISOString().slice(0, 19).replace(/[-:]/g, '')}`,
        accountName: backtest.config.accountName,
        moneyManagementName: moneyManagements?.[0]?.name || '',
        ticker: backtest.config.ticker,
        scenarioName: backtest.config.scenarioName || '',
        timeframe: backtest.config.timeframe,
        isForWatchingOnly: false,
        botTradingBalance: 1000,
        botType: backtest.config.botType,
        cooldownPeriod: backtest.config.cooldownPeriod,
        maxLossStreak: backtest.config.maxLossStreak,
        maxPositionTimeHours: backtest.config.maxPositionTimeHours ?? null,
        flipOnlyWhenInProfit: backtest.config.flipOnlyWhenInProfit,
        flipPosition: backtest.config.flipPosition,
        closeEarlyWhenProfitable: backtest.config.closeEarlyWhenProfitable || false,
        useCustomMoneyManagement: true, // Default to custom for backtests
        customStopLoss: backtest.config.moneyManagement?.stopLoss || 0.01,
        customTakeProfit: backtest.config.moneyManagement?.takeProfit || 0.02,
        customLeverage: backtest.config.moneyManagement?.leverage || 1,
        useSynthApi: false,
        useForPositionSizing: true,
        useForSignalFiltering: true,
        useForDynamicStopLoss: true
      })
    } else if (mode === 'update' && existingBot) {
      // Initialize from existing bot
      setFormData({
        name: existingBot.config.name,
        accountName: existingBot.config.accountName,
        moneyManagementName: existingBot.config.moneyManagement?.name || '',
        ticker: existingBot.config.ticker,
        scenarioName: existingBot.config.scenarioName || '',
        timeframe: existingBot.config.timeframe,
        isForWatchingOnly: existingBot.config.isForWatchingOnly,
        botTradingBalance: existingBot.config.botTradingBalance,
        botType: existingBot.config.botType,
        cooldownPeriod: existingBot.config.cooldownPeriod,
        maxLossStreak: existingBot.config.maxLossStreak,
        maxPositionTimeHours: existingBot.config.maxPositionTimeHours ?? null,
        flipOnlyWhenInProfit: existingBot.config.flipOnlyWhenInProfit,
        flipPosition: existingBot.config.flipPosition,
        closeEarlyWhenProfitable: existingBot.config.closeEarlyWhenProfitable || false,
        useCustomMoneyManagement: false,
        customStopLoss: existingBot.config.moneyManagement?.stopLoss || 0.01,
        customTakeProfit: existingBot.config.moneyManagement?.takeProfit || 0.02,
        customLeverage: existingBot.config.moneyManagement?.leverage || 1,
        useSynthApi: existingBot.config.useSynthApi || false,
        useForPositionSizing: existingBot.config.useForPositionSizing || true,
        useForSignalFiltering: existingBot.config.useForSignalFiltering || true,
        useForDynamicStopLoss: existingBot.config.useForDynamicStopLoss || true
      })
    } else if (mode === 'create' && !backtest) {
      // Initialize for new bot creation
      setFormData({
        name: `Bot-${new Date().toISOString().slice(0, 19).replace(/[-:]/g, '')}`,
        accountName: accounts?.[0]?.name || '',
        moneyManagementName: moneyManagements?.[0]?.name || '',
        ticker: Ticker.BTC,
        scenarioName: scenarios?.[0]?.name || '',
        timeframe: Timeframe.FifteenMinutes,
        isForWatchingOnly: false,
        botTradingBalance: 1000,
        botType: BotType.ScalpingBot,
        cooldownPeriod: 1,
        maxLossStreak: 0,
        maxPositionTimeHours: null,
        flipOnlyWhenInProfit: true,
        flipPosition: false,
        closeEarlyWhenProfitable: false,
        useCustomMoneyManagement: false,
        customStopLoss: 0.01,
        customTakeProfit: 0.02,
        customLeverage: 1,
        useSynthApi: false,
        useForPositionSizing: true,
        useForSignalFiltering: true,
        useForDynamicStopLoss: true
      })
    }
  }, [mode, backtest, existingBot, accounts, moneyManagements, scenarios])

  // Set default money management when data loads
  useEffect(() => {
    if (moneyManagements && moneyManagements.length > 0 && !formData.moneyManagementName) {
      setFormData(prev => ({
        ...prev,
        moneyManagementName: moneyManagements[0].name
      }))
    }
  }, [moneyManagements])

  // Set default account when data loads
  useEffect(() => {
    if (accounts && accounts.length > 0 && !formData.accountName) {
      setFormData(prev => ({
        ...prev,
        accountName: accounts[0].name
      }))
    }
  }, [accounts])

  // Set default scenario when data loads
  useEffect(() => {
    if (scenarios && scenarios.length > 0 && !formData.scenarioName) {
      setFormData(prev => ({
        ...prev,
        scenarioName: scenarios[0].name || ''
      }))
    }
  }, [scenarios])

  const handleInputChange = (field: string, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleSynthApiToggle = (enabled: boolean) => {
    setFormData(prev => ({
      ...prev,
      useSynthApi: enabled,
      // Reset sub-options when main toggle is turned off
      useForPositionSizing: enabled ? prev.useForPositionSizing : false,
      useForSignalFiltering: enabled ? prev.useForSignalFiltering : false,
      useForDynamicStopLoss: enabled ? prev.useForDynamicStopLoss : false
    }))
  }

  const handleSubmit = async () => {
    const t = new Toast(mode === 'create' ? 'Creating bot...' : 'Updating bot...')
    const client = new BotClient({}, apiUrl)

    try {
      // Create the money management object
      let moneyManagement: MoneyManagement | undefined = undefined
      
      if (formData.useCustomMoneyManagement || (mode === 'create' && backtest)) {
        // Use custom money management
        moneyManagement = {
          name: 'custom',
          leverage: formData.customLeverage,
          stopLoss: formData.customStopLoss,
          takeProfit: formData.customTakeProfit,
          timeframe: formData.timeframe
        }
      } else {
        // Use saved money management - load the complete object
        const selectedMoneyManagement = moneyManagements?.find(mm => mm.name === formData.moneyManagementName)
        if (selectedMoneyManagement) {
          moneyManagement = selectedMoneyManagement
        } else {
          t.update('error', 'Selected money management not found')
          return
        }
      }

      if (!moneyManagement) {
        t.update('error', 'Money management is required')
        return
      }

      // Create TradingBotConfigRequest (instead of TradingBotConfig)
      const tradingBotConfigRequest: TradingBotConfigRequest = {
        accountName: formData.accountName,
        ticker: formData.ticker,
        scenarioName: formData.scenarioName || undefined,
        timeframe: formData.timeframe,
        botType: formData.botType,
        isForWatchingOnly: formData.isForWatchingOnly,
        cooldownPeriod: formData.cooldownPeriod,
        maxLossStreak: formData.maxLossStreak,
        maxPositionTimeHours: formData.maxPositionTimeHours,
        flipOnlyWhenInProfit: formData.flipOnlyWhenInProfit,
        name: formData.name,
        botTradingBalance: formData.botTradingBalance,
        closeEarlyWhenProfitable: formData.closeEarlyWhenProfitable,
        useSynthApi: formData.useSynthApi,
        useForPositionSizing: formData.useForPositionSizing,
        useForSignalFiltering: formData.useForSignalFiltering,
        useForDynamicStopLoss: formData.useForDynamicStopLoss
      }

      if (mode === 'create') {
        // Create new bot
        const request: StartBotRequest = {
          config: tradingBotConfigRequest,
          moneyManagementName: formData.useCustomMoneyManagement ? undefined : formData.moneyManagementName
        }

        await client.bot_Start(request)
        t.update('success', 'Bot created successfully!')
      } else {
        // Update existing bot
        const request: UpdateBotConfigRequest = {
          identifier: existingBot!.identifier,
          config: tradingBotConfigRequest,
          moneyManagementName: formData.useCustomMoneyManagement ? undefined : formData.moneyManagementName
        }

        await client.bot_UpdateBotConfig(request)
        t.update('success', 'Bot updated successfully!')
      }

      onClose()
    } catch (error: any) {
      t.update('error', `Error: ${error.message || error}`)
    }
  }

  if (!showModal) return null

  return (
    <div className="modal modal-open">
      <div className="modal-box w-11/12 max-w-4xl">
        <h3 className="font-bold text-lg mb-4">
          {mode === 'create' ? 'Create Bot' : 'Update Bot Configuration'}
          {backtest && ` from Backtest`}
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Basic Configuration */}
          <div className="form-control">
            <label className="label">
              <span className="label-text">Bot Name</span>
            </label>
            <input
              type="text"
              className="input input-bordered"
              value={formData.name}
              onChange={(e) => handleInputChange('name', e.target.value)}
            />
          </div>

          <div className="form-control">
            <label className="label">
              <span className="label-text">Account</span>
            </label>
            <select
              className="select select-bordered"
              value={formData.accountName}
              onChange={(e) => handleInputChange('accountName', e.target.value)}
            >
              {accounts?.map((account) => (
                <option key={account.name} value={account.name}>
                  {account.name}
                </option>
              ))}
            </select>
          </div>

          <div className="form-control">
            <label className="label">
              <span className="label-text">Ticker</span>
            </label>
            <select
              className="select select-bordered"
              value={formData.ticker}
              onChange={(e) => handleInputChange('ticker', e.target.value as Ticker)}
            >
              {Object.values(Ticker).map((ticker) => (
                <option key={ticker} value={ticker}>
                  {ticker}
                </option>
              ))}
            </select>
          </div>

          <div className="form-control">
            <label className="label">
              <span className="label-text">Scenario</span>
            </label>
            <select
              className="select select-bordered"
              value={formData.scenarioName}
              onChange={(e) => handleInputChange('scenarioName', e.target.value)}
            >
              {scenarios?.map((scenario) => (
                <option key={scenario.name || ''} value={scenario.name || ''}>
                  {scenario.name}
                </option>
              ))}
            </select>
          </div>

          <div className="form-control">
            <label className="label">
              <div className="flex items-center gap-2">
                <span className="label-text">Timeframe</span>
                <div className="tooltip tooltip-top" data-tip="Chart timeframe for analysis. Lower timeframes (1m, 5m) for scalping, higher timeframes (1h, 4h) for swing trading">
                  <span className="badge badge-info badge-xs">i</span>
                </div>
              </div>
            </label>
            <select
              className="select select-bordered"
              value={formData.timeframe}
              onChange={(e) => handleInputChange('timeframe', e.target.value as Timeframe)}
            >
              {Object.values(Timeframe).map((timeframe) => (
                <option key={timeframe} value={timeframe}>
                  {timeframe}
                </option>
              ))}
            </select>
          </div>

          <div className="form-control">
            <label className="label">
              <div className="flex items-center gap-2">
                <span className="label-text">Bot Type</span>
                <div className="tooltip tooltip-top" data-tip="ScalpingBot: Quick trades based on short-term signals. FlippingBot: Position reversal strategy that flips between long/short">
                  <span className="badge badge-info badge-xs">i</span>
                </div>
              </div>
            </label>
            <select
              className="select select-bordered"
              value={formData.botType}
              onChange={(e) => handleInputChange('botType', e.target.value as BotType)}
              disabled={mode === 'update'} // Can't change bot type for existing bots
            >
              {Object.values(BotType).map((botType) => (
                <option key={botType} value={botType}>
                  {botType}
                </option>
              ))}
            </select>
          </div>

          <div className="form-control">
            <label className="label">
              <div className="flex items-center gap-2">
                <span className="label-text">Trading Balance</span>
                <div className="tooltip tooltip-top" data-tip="Amount of capital allocated for this bot's trading activities. This determines maximum position sizes">
                  <span className="badge badge-info badge-xs">i</span>
                </div>
              </div>
            </label>
            <input
              type="number"
              className="input input-bordered"
              value={formData.botTradingBalance}
              onChange={(e) => handleInputChange('botTradingBalance', parseFloat(e.target.value))}
              min="1"
              step="0.01"
            />
          </div>

          <div className="form-control">
            <label className="label cursor-pointer">
              <div className="flex items-center gap-2">
                <span className="label-text">Watch Only Mode</span>
                <div className="tooltip tooltip-top" data-tip="Bot will analyze and generate signals but won't execute actual trades. Good for testing strategies">
                  <span className="badge badge-info badge-xs">i</span>
                </div>
              </div>
              <input
                type="checkbox"
                className="checkbox"
                checked={formData.isForWatchingOnly}
                onChange={(e) => handleInputChange('isForWatchingOnly', e.target.checked)}
              />
            </label>
          </div>
        </div>

        {/* Advanced Parameters Dropdown */}
        <div className="divider">
          <button
            type="button"
            className="btn btn-outline btn-sm normal-case"
            onClick={() => setShowAdvancedParams(!showAdvancedParams)}
          >
            <svg 
              className="w-4 h-4 mr-2" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            Advanced Parameters
            <svg 
              className={`w-4 h-4 ml-2 transition-transform duration-200 ${showAdvancedParams ? 'rotate-180' : ''}`} 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
        </div>

        {showAdvancedParams && (
          <div className="space-y-4 border border-primary rounded-lg p-4 bg-base-100">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="form-control">
                <label className="label">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Cooldown Period (candles)</span>
                    <div className="tooltip tooltip-top" data-tip="Number of candles to wait before allowing another trade after closing a position. Prevents overtrading and allows market to settle">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                </label>
                <input
                  type="number"
                  className="input input-bordered"
                  value={formData.cooldownPeriod}
                  onChange={(e) => handleInputChange('cooldownPeriod', parseInt(e.target.value))}
                  min="1"
                />
              </div>

              <div className="form-control">
                <label className="label">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Max Loss Streak</span>
                    <div className="tooltip tooltip-top" data-tip="Maximum number of consecutive losing trades before stopping the bot. Set to 0 for no limit">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                </label>
                <input
                  type="number"
                  className="input input-bordered"
                  value={formData.maxLossStreak}
                  onChange={(e) => handleInputChange('maxLossStreak', parseInt(e.target.value))}
                  min="0"
                />
              </div>

              <div className="form-control">
                <label className="label">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Max Position Time (hours)</span>
                    <div className="tooltip tooltip-top" data-tip="Maximum time to hold a position before force closing. Leave empty to disable time-based position closure">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                </label>
                <input
                  type="number"
                  className="input input-bordered"
                  value={formData.maxPositionTimeHours || ''}
                  onChange={(e) => handleInputChange('maxPositionTimeHours', e.target.value ? parseFloat(e.target.value) : null)}
                  min="0.1"
                  step="0.1"
                  placeholder="Optional"
                />
              </div>

              <div className="form-control">
                <label className="label cursor-pointer">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Flip Only When In Profit</span>
                    <div className="tooltip tooltip-top" data-tip="If enabled, positions will only flip when current position is profitable. Helps avoid flipping during losing streaks">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    className="checkbox"
                    checked={formData.flipOnlyWhenInProfit}
                    onChange={(e) => handleInputChange('flipOnlyWhenInProfit', e.target.checked)}
                  />
                </label>
              </div>

              <div className="form-control">
                <label className="label cursor-pointer">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Enable Position Flipping</span>
                    <div className="tooltip tooltip-top" data-tip="Allow the bot to flip between long and short positions based on signals. More aggressive trading strategy">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    className="checkbox"
                    checked={formData.flipPosition}
                    onChange={(e) => handleInputChange('flipPosition', e.target.checked)}
                  />
                </label>
              </div>

              <div className="form-control">
                <label className="label cursor-pointer">
                  <div className="flex items-center gap-2">
                    <span className="label-text">Close Early When Profitable</span>
                    <div className="tooltip tooltip-top" data-tip="If enabled, positions will close early when they become profitable. Conservative approach to lock in gains">
                      <span className="badge badge-info badge-xs">i</span>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    className="checkbox"
                    checked={formData.closeEarlyWhenProfitable}
                    onChange={(e) => handleInputChange('closeEarlyWhenProfitable', e.target.checked)}
                    disabled={!formData.maxPositionTimeHours}
                  />
                </label>
              </div>
            </div>
          </div>
        )}

        {/* Money Management Section */}
        <div className="divider">Money Management</div>
        
        <div className="form-control">
          <label className="label cursor-pointer">
            <div className="flex items-center gap-2">
              <span className="label-text">Use Custom Money Management</span>
              <div className="tooltip tooltip-top" data-tip="Create custom risk management settings instead of using saved presets. Allows fine-tuning stop loss, take profit, and leverage">
                <span className="badge badge-info badge-xs">i</span>
              </div>
            </div>
            <input
              type="checkbox"
              className="checkbox"
              checked={formData.useCustomMoneyManagement}
              onChange={(e) => handleInputChange('useCustomMoneyManagement', e.target.checked)}
            />
          </label>
        </div>

        {formData.useCustomMoneyManagement ? (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div className="form-control">
              <label className="label">
                <span className="label-text">Stop Loss (%)</span>
              </label>
              <input
                type="number"
                className="input input-bordered"
                value={formData.customStopLoss}
                onChange={(e) => handleInputChange('customStopLoss', parseFloat(e.target.value))}
                min="0.001"
                max="1"
                step="0.001"
              />
            </div>

            <div className="form-control">
              <label className="label">
                <span className="label-text">Take Profit (%)</span>
              </label>
              <input
                type="number"
                className="input input-bordered"
                value={formData.customTakeProfit}
                onChange={(e) => handleInputChange('customTakeProfit', parseFloat(e.target.value))}
                min="0.001"
                max="1"
                step="0.001"
              />
            </div>

            <div className="form-control">
              <label className="label">
                <span className="label-text">Leverage</span>
              </label>
              <input
                type="number"
                className="input input-bordered"
                value={formData.customLeverage}
                onChange={(e) => handleInputChange('customLeverage', parseInt(e.target.value))}
                min="1"
                max="100"
              />
            </div>
          </div>
        ) : (
          <div className="form-control mt-4">
            <label className="label">
              <span className="label-text">Money Management</span>
            </label>
            <select
              className="select select-bordered"
              value={formData.moneyManagementName}
              onChange={(e) => handleInputChange('moneyManagementName', e.target.value)}
            >
              {moneyManagements?.map((mm) => (
                <option key={mm.name} value={mm.name}>
                  {mm.name} (SL: {(mm.stopLoss * 100).toFixed(2)}%, TP: {(mm.takeProfit * 100).toFixed(2)}%)
                </option>
              ))}
            </select>
          </div>
        )}

        {/* Synth API Section */}
        <div className="divider">Synth API Configuration</div>
        
        <div className="grid grid-cols-1 gap-4">
          <div className="form-control">
            <label className="label cursor-pointer">
              <div className="flex items-center gap-2">
                <span className="label-text">Enable Synth API</span>
                <div className="tooltip tooltip-top" data-tip="Enable AI-powered probabilistic price forecasts and risk assessment using advanced machine learning models for enhanced trading decisions">
                  <span className="badge badge-info badge-xs">i</span>
                </div>
              </div>
              <input
                type="checkbox"
                className="checkbox"
                checked={formData.useSynthApi}
                onChange={(e) => handleSynthApiToggle(e.target.checked)}
              />
            </label>
          </div>
        </div>

        {/* Show sub-options only when Synth API is enabled */}
        {formData.useSynthApi && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="form-control">
              <label className="label cursor-pointer">
                <div className="flex items-center gap-2">
                  <span className="label-text">Use for Position Sizing</span>
                  <div className="tooltip tooltip-top" data-tip="Use Synth predictions for position sizing adjustments and risk assessment. Optimizes trade size based on confidence levels">
                    <span className="badge badge-info badge-xs">i</span>
                  </div>
                </div>
                <input
                  type="checkbox"
                  className="checkbox"
                  checked={formData.useForPositionSizing}
                  onChange={(e) => handleInputChange('useForPositionSizing', e.target.checked)}
                />
              </label>
            </div>

            <div className="form-control">
              <label className="label cursor-pointer">
                <div className="flex items-center gap-2">
                  <span className="label-text">Use for Signal Filtering</span>
                  <div className="tooltip tooltip-top" data-tip="Use Synth predictions to filter trading signals. Only executes trades when AI confidence is high">
                    <span className="badge badge-info badge-xs">i</span>
                  </div>
                </div>
                <input
                  type="checkbox"
                  className="checkbox"
                  checked={formData.useForSignalFiltering}
                  onChange={(e) => handleInputChange('useForSignalFiltering', e.target.checked)}
                />
              </label>
            </div>

            <div className="form-control">
              <label className="label cursor-pointer">
                <div className="flex items-center gap-2">
                  <span className="label-text">Use for Dynamic Stop Loss</span>
                  <div className="tooltip tooltip-top" data-tip="Use Synth predictions for dynamic stop-loss/take-profit adjustments. Adapts levels based on market conditions">
                    <span className="badge badge-info badge-xs">i</span>
                  </div>
                </div>
                <input
                  type="checkbox"
                  className="checkbox"
                  checked={formData.useForDynamicStopLoss}
                  onChange={(e) => handleInputChange('useForDynamicStopLoss', e.target.checked)}
                />
              </label>
            </div>
          </div>
        )}

        {/* Validation Messages */}
        {formData.closeEarlyWhenProfitable && !formData.maxPositionTimeHours && (
          <div className="alert alert-warning mt-4">
            <span>Close Early When Profitable requires Max Position Time to be set.</span>
          </div>
        )}

        <div className="modal-action">
          <button className="btn" onClick={onClose}>
            Cancel
          </button>
          <button 
            className="btn btn-primary" 
            onClick={handleSubmit}
            disabled={formData.closeEarlyWhenProfitable && !formData.maxPositionTimeHours}
          >
            {mode === 'create' ? 'Create Bot' : 'Update Bot'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default BotConfigModal 