import React, { useState } from 'react';
import SectionMain from '../components/SectionMain';
import LayoutAuthenticated from '../layouts/Authenticated';
import { Button } from '../components/BaseButton';
import * as icon from '@mdi/js';

const StrategyBuilderPage: React.FC = () => {
  const [maxOpenDeals, setMaxOpenDeals] = useState(false);
  const [multiplier, setMultiplier] = useState(1);
  const [orderVolumeEnabled, setOrderVolumeEnabled] = useState(false);
  const [orderVolume, setOrderVolume] = useState(1);
  const [backtestEnabled, setBacktestEnabled] = useState(false);

  return (
    <SectionMain>
      {/* Top toolbar */}
      <div className="flex items-center justify-between mb-6">
        <Button variant="ghost" icon={icon.mdiArrowLeft}>Back</Button>
        <div className="flex space-x-4">
          <Button variant="outline">Overview</Button>
          <Button variant="outline">Editor</Button>
          <Button variant="outline">Trades</Button>
          <Button variant="outline">Export CSV</Button>
        </div>
      </div>

      {/* Buy/Sell panels */}
      <div className="grid grid-cols-2 gap-6 mb-6">
        {/* Buy Panel */}
        <div className="p-4 border rounded-lg">
          <h3 className="text-lg font-semibold mb-4">Buy</h3>
          <div className="flex items-center mb-3">
            <span className="mr-2">Max. open deals</span>
            <input type="checkbox" checked={maxOpenDeals} onChange={() => setMaxOpenDeals(!maxOpenDeals)} />
          </div>
          <div className="flex items-center mb-3">
            <label className="mr-2">Multiplier</label>
            <input
              type="number"
              className="border p-1 w-16"
              value={multiplier}
              onChange={e => setMultiplier(Number(e.target.value))}
            />
          </div>
          <div className="flex items-center mb-3">
            <span className="mr-2">Order volume</span>
            <input type="checkbox" checked={orderVolumeEnabled} onChange={() => setOrderVolumeEnabled(!orderVolumeEnabled)} />
            <input
              type="number"
              className="border p-1 w-16 ml-2"
              value={orderVolume}
              onChange={e => setOrderVolume(Number(e.target.value))}
              disabled={!orderVolumeEnabled}
            />
          </div>
          <div className="flex items-center mb-3">
            <span className="mr-2">Backtest</span>
            <input type="checkbox" checked={backtestEnabled} onChange={() => setBacktestEnabled(!backtestEnabled)} />
          </div>
          <div className="mt-4">
            <h4 className="font-medium">Entry when <Button size="sm">+ Add rule</Button></h4>
            <p className="text-sm text-gray-500 ml-4">Enter every 10 ticks below last entry</p>
          </div>
          <div className="mt-4">
            <h4 className="font-medium">Exit when <Button size="sm">+ Add rule</Button></h4>
            <ul className="list-disc ml-6 text-sm">
              <li>close at SL</li>
              <li>close at TP</li>
              <li>close if lifetime</li>
            </ul>
          </div>
        </div>

        {/* Sell Panel */}
        <div className="p-4 border rounded-lg">
          <h3 className="text-lg font-semibold mb-4">Sell</h3>
          <div className="mt-4">
            <h4 className="font-medium">Entry when <Button size="sm">+ Add rule</Button></h4>
            <p className="text-sm text-gray-500 ml-4">Enter every 0 ticks above last entry</p>
          </div>
          <div className="mt-4">
            <h4 className="font-medium">Exit when <Button size="sm">+ Add rule</Button></h4>
            <ul className="list-disc ml-6 text-sm">
              <li>close at SL</li>
              <li>close at TP</li>
              <li>close if lifetime</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Footer actions */}
      <div className="flex justify-between">
        <Button variant="link">Help</Button>
        <div className="flex space-x-2">
          <Button variant="outline">Discard</Button>
          <Button>Save changes</Button>
          <Button variant="ghost" icon={icon.mdiCogOutline} />
        </div>
      </div>
    </SectionMain>
  );
};

StrategyBuilderPage.getLayout = (page: React.ReactElement) => (
  <LayoutAuthenticated>{page}</LayoutAuthenticated>
);

export default StrategyBuilderPage;