import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
import { Shield, AlertTriangle, TrendingDown, TrendingUp, DollarSign } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

export const RiskManagement: React.FC = () => {
  const [settings, setSettings] = useState({
    stopLossEnabled: true,
    stopLossPercentage: [5],
    takeProfitEnabled: true,
    takeProfitPercentage: [15],
    maxPositionSize: [20],
    maxDailyLoss: [100],
    enableTrailingStop: false,
    trailingStopPercentage: [3],
    maxConcurrentTrades: [5]
  });

  const { toast } = useToast();

  const handleSaveSettings = () => {
    toast({
      title: "Risk Settings Saved",
      description: "Your risk management preferences have been updated",
    });
  };

  const handleResetToDefaults = () => {
    setSettings({
      stopLossEnabled: true,
      stopLossPercentage: [5],
      takeProfitEnabled: true,
      takeProfitPercentage: [15],
      maxPositionSize: [20],
      maxDailyLoss: [100],
      enableTrailingStop: false,
      trailingStopPercentage: [3],
      maxConcurrentTrades: [5]
    });
    toast({
      title: "Settings Reset",
      description: "Risk management settings have been reset to defaults",
    });
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <Card className="bg-gradient-card border-border/50">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5 text-primary" />
            Stop Loss & Take Profit
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Stop Loss */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label className="flex items-center gap-2">
                <TrendingDown className="h-4 w-4 text-loss" />
                Stop Loss
              </Label>
              <Switch
                checked={settings.stopLossEnabled}
                onCheckedChange={(checked) =>
                  setSettings(prev => ({ ...prev, stopLossEnabled: checked }))
                }
              />
            </div>
            {settings.stopLossEnabled && (
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span>Percentage Loss Limit</span>
                  <span className="text-loss font-mono">
                    -{settings.stopLossPercentage[0]}%
                  </span>
                </div>
                <Slider
                  value={settings.stopLossPercentage}
                  onValueChange={(value) =>
                    setSettings(prev => ({ ...prev, stopLossPercentage: value }))
                  }
                  max={20}
                  min={1}
                  step={0.5}
                  className="py-2"
                />
              </div>
            )}
          </div>

          {/* Take Profit */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label className="flex items-center gap-2">
                <TrendingUp className="h-4 w-4 text-profit" />
                Take Profit
              </Label>
              <Switch
                checked={settings.takeProfitEnabled}
                onCheckedChange={(checked) =>
                  setSettings(prev => ({ ...prev, takeProfitEnabled: checked }))
                }
              />
            </div>
            {settings.takeProfitEnabled && (
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span>Percentage Profit Target</span>
                  <span className="text-profit font-mono">
                    +{settings.takeProfitPercentage[0]}%
                  </span>
                </div>
                <Slider
                  value={settings.takeProfitPercentage}
                  onValueChange={(value) =>
                    setSettings(prev => ({ ...prev, takeProfitPercentage: value }))
                  }
                  max={50}
                  min={5}
                  step={1}
                  className="py-2"
                />
              </div>
            )}
          </div>

          {/* Trailing Stop */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label className="flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-warning" />
                Trailing Stop
              </Label>
              <Switch
                checked={settings.enableTrailingStop}
                onCheckedChange={(checked) =>
                  setSettings(prev => ({ ...prev, enableTrailingStop: checked }))
                }
              />
            </div>
            {settings.enableTrailingStop && (
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span>Trailing Distance</span>
                  <span className="text-warning font-mono">
                    {settings.trailingStopPercentage[0]}%
                  </span>
                </div>
                <Slider
                  value={settings.trailingStopPercentage}
                  onValueChange={(value) =>
                    setSettings(prev => ({ ...prev, trailingStopPercentage: value }))
                  }
                  max={10}
                  min={1}
                  step={0.5}
                  className="py-2"
                />
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <Card className="bg-gradient-card border-border/50">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <DollarSign className="h-5 w-5 text-primary" />
            Position & Risk Limits
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Max Position Size */}
          <div className="space-y-3">
            <Label>Maximum Position Size</Label>
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Per Trade (% of wallet)</span>
                <span className="font-mono">{settings.maxPositionSize[0]}%</span>
              </div>
              <Slider
                value={settings.maxPositionSize}
                onValueChange={(value) =>
                  setSettings(prev => ({ ...prev, maxPositionSize: value }))
                }
                max={50}
                min={1}
                step={1}
                className="py-2"
              />
            </div>
          </div>

          {/* Max Daily Loss */}
          <div className="space-y-3">
            <Label>Daily Loss Limit</Label>
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Maximum Daily Loss ($)</span>
                <span className="font-mono text-loss">
                  ${settings.maxDailyLoss[0]}
                </span>
              </div>
              <Slider
                value={settings.maxDailyLoss}
                onValueChange={(value) =>
                  setSettings(prev => ({ ...prev, maxDailyLoss: value }))
                }
                max={1000}
                min={10}
                step={10}
                className="py-2"
              />
            </div>
          </div>

          {/* Max Concurrent Trades */}
          <div className="space-y-3">
            <Label>Concurrent Trades Limit</Label>
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Maximum Active Trades</span>
                <span className="font-mono">{settings.maxConcurrentTrades[0]}</span>
              </div>
              <Slider
                value={settings.maxConcurrentTrades}
                onValueChange={(value) =>
                  setSettings(prev => ({ ...prev, maxConcurrentTrades: value }))
                }
                max={20}
                min={1}
                step={1}
                className="py-2"
              />
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex gap-3 pt-4">
            <Button onClick={handleSaveSettings} className="flex-1">
              Save Settings
            </Button>
            <Button 
              variant="outline" 
              onClick={handleResetToDefaults}
              className="flex-1"
            >
              Reset to Defaults
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};