import React, {useState} from 'react';
import {AccountClient, BacktestClient} from '../../generated/ManagingApi';
import type {
  MoneyManagementRequest,
  RunBacktestRequest,
  ScenarioRequest,
  TradingBotConfigRequest,
} from '../../generated/ManagingApiTypes';
import {Ticker, Timeframe} from '../../generated/ManagingApiTypes';
import CustomScenario from '../../components/organism/CustomScenario/CustomScenario';
import {useCustomScenario} from '../../app/store/customScenario';
import useApiUrlStore from '../../app/store/apiStore';
import Toast from '../../components/mollecules/Toast/Toast';
import BundleRequestsTable from './bundleRequestsTable';
import {useQuery} from '@tanstack/react-query';

// Placeholder types (replace with your actual types)
type Indicator = { name: string; params?: Record<string, any> };
type MoneyManagementVariant = { leverage: number; tp: number; sl: number };
type TimeRangeVariant = { start: string; end: string };

type Asset = 'BTC' | 'ETH' | 'GMX';

const allAssets: Asset[] = ['BTC', 'ETH', 'GMX'];
const allIndicators: Indicator[] = [
  { name: 'EMA Cross' },
  { name: 'MACD Cross' },
  { name: 'SuperTrend', params: { period: 12, multiplier: 4 } },
  { name: 'EMA Trend' },
  { name: 'Chandelier Exit' },
];

const allTimeframes = [
  { label: '5 minutes', value: '5m' },
  { label: '15 minutes', value: '15m' },
  { label: '1 hour', value: '1h' },
  { label: '4 hours', value: '4h' },
  { label: '1 day', value: '1d' },
];

const tickerMap: Record<string, Ticker> = {
  BTC: Ticker.BTC,
  ETH: Ticker.ETH,
  GMX: Ticker.GMX,
};
const timeframeMap: Record<string, Timeframe> = {
  '5m': Timeframe.FiveMinutes,
  '15m': Timeframe.FifteenMinutes,
  '1h': Timeframe.OneHour,
  '4h': Timeframe.FourHour,
  '1d': Timeframe.OneDay,
};

const BacktestBundleForm: React.FC = () => {
  const {apiUrl} = useApiUrlStore()
  
  // API clients
  const accountClient = new AccountClient({}, apiUrl);
  
  // Data fetching
  const { data: accounts, isSuccess } = useQuery({
    queryFn: async () => {
      const fetchedAccounts = await accountClient.account_GetAccounts();
      if (fetchedAccounts.length > 0 && accountName === 'default') {
        setAccountName(fetchedAccounts[0].name);
      }
      return fetchedAccounts;
    },
    queryKey: ['accounts'],
  });
  
  // Form state
  const [strategyName, setStrategyName] = useState('');
  const [loopback, setLoopback] = useState(14);
  // Remove selectedIndicators, use scenario from store
  const [selectedAssets, setSelectedAssets] = useState<Asset[]>([]);
  const [timeframe, setTimeframe] = useState('5m');
  const [moneyManagementVariants, setMoneyManagementVariants] = useState<MoneyManagementVariant[]>([
    { leverage: 2, tp: 1.5, sl: 1 },
  ]);
  const [timeRangeVariants, setTimeRangeVariants] = useState<TimeRangeVariant[]>([
    { start: '', end: '' },
  ]);
  const [cooldown, setCooldown] = useState(0);
  const [maxLossStreak, setMaxLossStreak] = useState(0);
  const [maxPositionTime, setMaxPositionTime] = useState(0);
  const [positionFlipping, setPositionFlipping] = useState(false);
  const [flipOnlyInProfit, setFlipOnlyInProfit] = useState(false);
  const [closeEarly, setCloseEarly] = useState(false);
  const [startingCapital, setStartingCapital] = useState(10000);
  const [accountName, setAccountName] = useState(accounts?.[0]?.name ?? '');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const { scenario, setCustomScenario } = useCustomScenario();

  // Placeholder for cart summary
  const totalBacktests =
    moneyManagementVariants.length * timeRangeVariants.length * (selectedAssets.length || 1);

  // Handlers (add/remove variants, select assets/indicators, etc.)
  // ...

  // Generate all combinations of variants using scenario from store
  const generateRequests = (): RunBacktestRequest[] => {
    const requests: RunBacktestRequest[] = [];
    if (!scenario) return requests;
    selectedAssets.forEach(asset => {
      moneyManagementVariants.forEach(mm => {
        timeRangeVariants.forEach(tr => {
          const mmReq: MoneyManagementRequest = {
            name: `${strategyName}-MM`,
            leverage: mm.leverage,
            takeProfit: mm.tp,
            stopLoss: mm.sl,
            timeframe: timeframeMap[timeframe],
          };
          const config: TradingBotConfigRequest = {
            accountName: accountName,
            ticker: tickerMap[asset],
            timeframe: timeframeMap[timeframe],
            isForWatchingOnly: false,
            botTradingBalance: startingCapital,
            name: `${strategyName} - ${asset}`,
            flipPosition: positionFlipping,
            cooldownPeriod: cooldown,
            maxLossStreak: maxLossStreak,
            scenario: scenario as ScenarioRequest,
            moneyManagement: mmReq,
            maxPositionTimeHours: maxPositionTime,
            closeEarlyWhenProfitable: closeEarly,
            flipOnlyWhenInProfit: flipOnlyInProfit,
            useSynthApi: false,
            useForPositionSizing: true,
            useForSignalFiltering: true,
            useForDynamicStopLoss: true,
          };
          requests.push({
            config,
            startDate: tr.start ? new Date(tr.start) : undefined,
            endDate: tr.end ? new Date(tr.end) : undefined,
            save: false,
            withCandles: false,
          });
        });
      });
    });
    return requests;
  };

  // API call
  const handleRunBundle = async () => {
    setLoading(true);
    setError(null);
    setSuccess(null);
    const toast = new Toast('Starting bundle backtest...', true);
    try {
      const client = new BacktestClient({} as any, apiUrl);
      const requests = generateRequests();
      if (!strategyName) throw new Error('Strategy name is required');
      if (requests.length === 0) throw new Error('No backtest variants to run');
      await client.backtest_RunBundle({ name: strategyName, requests });
      setSuccess('Bundle backtest started successfully!');
      toast.update('success', 'Bundle backtest started successfully!');
    } catch (e: any) {
      setError(e.message || 'Failed to start bundle backtest');
      toast.update('error', e.message || 'Failed to start bundle backtest');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-10 max-w-7xl mx-auto">
      <h2 className="text-2xl font-bold mb-6">Bundle Backtest</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Left column: Main form */}
        <div>
          {/* Name your strategy */}
          <div className="mb-4">
            <label className="label">Name your strategy</label>
            <input
              className="input input-bordered w-full"
              value={strategyName}
              onChange={e => setStrategyName(e.target.value)}
              placeholder="Road to $100k..."
            />
          </div>

          {/* Select account */}
          <div className="mb-4">
            <label className="label">Select account</label>
            <select
              className="select select-bordered w-full"
              value={accountName}
              onChange={e => setAccountName(e.target.value)}
            >
              {accounts?.map(account => (
                <option key={account.name} value={account.name}>
                  {account.name}
                </option>
              ))}
            </select>
          </div>

          {/* Scenario/Indicators section */}
          <div className="mb-4">
            <CustomScenario
              onCreateScenario={setCustomScenario}
              showCustomScenario={true}
            />
          </div>

          {/* Select asset(s) */}
          <div className="mb-4">
            <label className="label">Select asset(s)</label>
            <div className="flex flex-wrap gap-2">
              {allAssets.map(asset => (
                <button
                  key={asset}
                  className={`btn btn-sm ${selectedAssets.includes(asset) ? 'btn-primary' : 'btn-outline'}`}
                  onClick={e => {
                    e.preventDefault();
                    setSelectedAssets(sel =>
                      sel.includes(asset)
                        ? sel.filter(a => a !== asset)
                        : [...sel, asset]
                    );
                  }}
                >
                  {asset}
                </button>
              ))}
            </div>
          </div>

          {/* Select timeframe */}
          <div className="mb-4">
            <label className="label">Select timeframe</label>
            <select
              className="select select-bordered w-full"
              value={timeframe}
              onChange={e => setTimeframe(e.target.value)}
            >
              {allTimeframes.map(tf => (
                <option key={tf.value} value={tf.value}>
                  {tf.label}
                </option>
              ))}
            </select>
          </div>

          {/* Money management variants */}
          <div className="mb-4">
            <label className="label">Choose your money management approach(s)</label>
            {moneyManagementVariants.map((mm, idx) => (
              <div key={idx} className="flex gap-2 items-center mb-2">
                <input
                  type="number"
                  className="input input-bordered w-16"
                  value={mm.leverage}
                  onChange={e => {
                    const v = [...moneyManagementVariants];
                    v[idx].leverage = Number(e.target.value);
                    setMoneyManagementVariants(v);
                  }}
                  placeholder="Leverage"
                  min={1}
                />
                <input
                  type="number"
                  className="input input-bordered w-16"
                  value={mm.tp}
                  onChange={e => {
                    const v = [...moneyManagementVariants];
                    v[idx].tp = Number(e.target.value);
                    setMoneyManagementVariants(v);
                  }}
                  placeholder="TP %"
                  min={0}
                />
                <input
                  type="number"
                  className="input input-bordered w-16"
                  value={mm.sl}
                  onChange={e => {
                    const v = [...moneyManagementVariants];
                    v[idx].sl = Number(e.target.value);
                    setMoneyManagementVariants(v);
                  }}
                  placeholder="SL %"
                  min={0}
                />
                <button
                  className="btn btn-xs btn-error"
                  onClick={e => {
                    e.preventDefault();
                    setMoneyManagementVariants(v => v.filter((_, i) => i !== idx));
                  }}
                  disabled={moneyManagementVariants.length === 1}
                >
                  ✕
                </button>
              </div>
            ))}
            <button
              className="btn btn-sm btn-outline"
              onClick={e => {
                e.preventDefault();
                setMoneyManagementVariants(v => [...v, { leverage: 1, tp: 1, sl: 1 }]);
              }}
            >
              + Add variant
            </button>
          </div>
        </div>

        {/* Right column: Test period, advanced params, capital, cart */}
        <div>
          {/* Test period variants */}
          <div className="mb-4">
            <label className="label">Select the test period</label>
            {timeRangeVariants.map((tr, idx) => (
              <div key={idx} className="flex gap-2 items-center mb-2">
                <input
                  type="date"
                  className="input input-bordered"
                  value={tr.start}
                  onChange={e => {
                    const v = [...timeRangeVariants];
                    v[idx].start = e.target.value;
                    setTimeRangeVariants(v);
                  }}
                />
                <input
                  type="date"
                  className="input input-bordered"
                  value={tr.end}
                  onChange={e => {
                    const v = [...timeRangeVariants];
                    v[idx].end = e.target.value;
                    setTimeRangeVariants(v);
                  }}
                />
                <button
                  className="btn btn-xs btn-error"
                  onClick={e => {
                    e.preventDefault();
                    setTimeRangeVariants(v => v.filter((_, i) => i !== idx));
                  }}
                  disabled={timeRangeVariants.length === 1}
                >
                  ✕
                </button>
              </div>
            ))}
            <button
              className="btn btn-sm btn-outline"
              onClick={e => {
                e.preventDefault();
                setTimeRangeVariants(v => [...v, { start: '', end: '' }]);
              }}
            >
              + Add variant
            </button>
          </div>

          {/* Advanced Parameters */}
          <div className="mb-4">
            <div className="collapse collapse-arrow bg-base-200">
              <input type="checkbox" />
              <div className="collapse-title font-medium">Advanced Parameters</div>
              <div className="collapse-content">
                <div className="flex gap-2 mb-2">
                  <input
                    type="number"
                    className="input input-bordered w-20"
                    value={cooldown}
                    onChange={e => setCooldown(Number(e.target.value))}
                    placeholder="Cooldown"
                  />
                  <input
                    type="number"
                    className="input input-bordered w-20"
                    value={maxLossStreak}
                    onChange={e => setMaxLossStreak(Number(e.target.value))}
                    placeholder="Max Loss Streak"
                  />
                  <input
                    type="number"
                    className="input input-bordered w-20"
                    value={maxPositionTime}
                    onChange={e => setMaxPositionTime(Number(e.target.value))}
                    placeholder="Max Position Time"
                  />
                </div>
                <div className="form-control mb-2">
                  <label className="cursor-pointer label">
                    <span className="label-text">Position flipping</span>
                    <input
                      type="checkbox"
                      className="toggle"
                      checked={positionFlipping}
                      onChange={e => setPositionFlipping(e.target.checked)}
                    />
                  </label>
                </div>
                <div className="form-control mb-2">
                  <label className="cursor-pointer label">
                    <span className="label-text">Flip only when in profit</span>
                    <input
                      type="checkbox"
                      className="toggle"
                      checked={flipOnlyInProfit}
                      onChange={e => setFlipOnlyInProfit(e.target.checked)}
                    />
                  </label>
                </div>
                <div className="form-control mb-2">
                  <label className="cursor-pointer label">
                    <span className="label-text">Close early when profitable</span>
                    <input
                      type="checkbox"
                      className="toggle"
                      checked={closeEarly}
                      onChange={e => setCloseEarly(e.target.checked)}
                    />
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Starting Capital */}
          <div className="mb-4">
            <label className="label">Starting Capital</label>
            <input
              type="number"
              className="input input-bordered w-full"
              value={startingCapital}
              onChange={e => setStartingCapital(Number(e.target.value))}
              min={1}
            />
          </div>

          {/* Backtest Cart */}
          <div className="mb-4 bg-base-200 rounded-lg p-4">
            <div className="font-bold mb-2">Backtest Cart</div>
            <div>Total number of backtests: <span className="font-mono">{totalBacktests}</span></div>
            <div>Total number of credits used: <span className="font-mono">{totalBacktests}</span></div>
            <div>Estimated time: <span className="font-mono">~ 1 min</span></div>
            <button className="btn btn-primary w-full mt-4" onClick={handleRunBundle}>
              Run Backtest
            </button>
            <button className="btn btn-outline w-full mt-2">Save this backtest</button>
            <button className="btn btn-ghost w-full mt-2">Clear all</button>
          </div>
        </div>
      </div>
      <div className="mt-10">
        <BundleRequestsTable />
      </div>
    </div>
  );
};

export default BacktestBundleForm;