Blame for frontend/src/components/BacktestingInterface.tsx

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Play, RotateCcw, Download, Save, AlertCircle } from "lucide-react";
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from "recharts";
import { useToast } from "@/hooks/use-toast";
import { supabase } from "@/integrations/supabase/client";
import { z } from "zod";

// Input validation schema
const backtestConfigSchema = z.object({
  symbol: z.string().min(1, "Symbol is required").max(20, "Symbol too long"),
  startDate: z.string().refine((date) => !isNaN(Date.parse(date)), "Invalid start date"),
  endDate: z.string().refine((date) => !isNaN(Date.parse(date)), "Invalid end date"),
  initialCapital: z.number().min(10, "Minimum capital is $10").max(1000000000, "Capital too large"),
  tradeSize: z.number().min(0.01, "Minimum 0.01").max(1, "Maximum 1 (100%)"),
  stopLoss: z.number().min(0.1, "Minimum 0.1%").max(50, "Maximum 50%"),
  takeProfit: z.number().min(0.1, "Minimum 0.1%").max(100, "Maximum 100%"),
  coherenceThreshold: z.number().min(0.1, "Minimum 0.1").max(1, "Maximum 1"),
  kellySafety: z.number().min(0.1, "Minimum 0.1").max(1, "Maximum 1"),
  lighthouseConfidence: z.number().min(0.1, "Minimum 0.1").max(1, "Maximum 1"),
  minPrismLevel: z.number().int().min(1, "Minimum 1").max(5, "Maximum 5"),
  requireLHE: z.boolean(),
});

type BacktestConfig = z.infer<typeof backtestConfigSchema>;

interface BacktestResults {
  totalTrades: number;
  winRate: number;
  totalReturn: number;
  sharpeRatio: number;
  maxDrawdown: number;
  profitFactor: number;
  avgWin: number;
  avgLoss: number;
  equityCurve: Array<{ date: string; equity: number }>;
  trades: Array<any>;
}

export function BacktestingInterface() {
  const { toast } = useToast();
  const [isRunning, setIsRunning] = useState(false);
  const [results, setResults] = useState<BacktestResults | null>(null);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Configuration state
  const [config, setConfig] = useState<BacktestConfig>({
    symbol: "BTCUSDT",
    startDate: "2024-01-01",
    endDate: "2024-11-01",
    initialCapital: 10000,
    tradeSize: 0.98,
    stopLoss: 2.0,
    takeProfit: 5.0,
    coherenceThreshold: 0.945,
    kellySafety: 0.5,
    lighthouseConfidence: 0.7,
    minPrismLevel: 3,
    requireLHE: true,
  });

  const validateConfig = (): boolean => {
    try {
      backtestConfigSchema.parse(config);
      
      // Additional validation: end date must be after start date
      if (new Date(config.endDate) <= new Date(config.startDate)) {
        setErrors({ endDate: "End date must be after start date" });
        return false;
      }
      
      setErrors({});
      return true;
    } catch (error) {
      if (error instanceof z.ZodError) {
        const newErrors: Record<string, string> = {};
        error.errors.forEach((err) => {
          if (err.path.length > 0) {
            newErrors[err.path[0].toString()] = err.message;
          }
        });
        setErrors(newErrors);
      }
      return false;
    }
  };

  const runBacktest = async () => {
    if (!validateConfig()) {
      toast({
        title: "Invalid Configuration",
        description: "Please check your input parameters",
        variant: "destructive",
      });
      return;
    }

    setIsRunning(true);
    setResults(null);

    try {
      // Call edge function to run backtest
      const { data, error } = await supabase.functions.invoke('run-backtest', {
        body: {
          config: {
            symbol: config.symbol.trim(),
            startDate: config.startDate,
            endDate: config.endDate,
            initialCapital: config.initialCapital,
            tradeSize: config.tradeSize,
            stopLoss: config.stopLoss,
            takeProfit: config.takeProfit,
            coherenceThreshold: config.coherenceThreshold,
            kellySafety: config.kellySafety,
            lighthouseConfidence: config.lighthouseConfidence,
            minPrismLevel: config.minPrismLevel,
            requireLHE: config.requireLHE,
          }
        }
      });

      if (error) throw error;

      // LIVE DATA ONLY - Use real results from edge function
      if (!data || !data.results) {
        throw new Error('LIVE_DATA_REQUIRED: Backtest edge function did not return results. No simulation allowed.');
      }

      const realResults: BacktestResults = {
        totalTrades: data.results.totalTrades || 0,
        winRate: data.results.winRate || 0,
        totalReturn: data.results.totalReturn || 0,
        sharpeRatio: data.results.sharpeRatio || 0,
        maxDrawdown: data.results.maxDrawdown || 0,
        profitFactor: data.results.profitFactor || 0,
        avgWin: data.results.avgWin || 0,
        avgLoss: data.results.avgLoss || 0,
        equityCurve: data.results.equityCurve || [],
        trades: data.results.trades || [],
      };

      setResults(realResults);

      toast({
        title: "Backtest Complete",
        description: `Analyzed ${realResults.totalTrades} trades with ${realResults.winRate.toFixed(1)}% win rate`,
      });
    } catch (error) {
      console.error('Backtest error:', error);
      toast({
        title: "Backtest Failed",
        description: "An error occurred during backtesting",
        variant: "destructive",
      });
    } finally {
      setIsRunning(false);
    }
  };

  const saveResults = async () => {
    if (!results) return;

    try {
      const { error } = await supabase.from('backtest_results').insert({
        symbol: config.symbol.trim(),
        start_date: config.startDate,
        end_date: config.endDate,
        initial_capital: config.initialCapital,
        final_capital: results.equityCurve[results.equityCurve.length - 1].equity,
        total_trades: results.totalTrades,
        winning_trades: Math.round(results.totalTrades * results.winRate / 100),
        losing_trades: results.totalTrades - Math.round(results.totalTrades * results.winRate / 100),
        win_rate: results.winRate,
        total_return: results.totalReturn,
        max_drawdown: results.maxDrawdown,
        sharpe_ratio: results.sharpeRatio,
        profit_factor: results.profitFactor,
        config: config,
        trades: results.trades,
        equity_curve: results.equityCurve,
        status: 'completed',
      });

      if (error) throw error;

      toast({
        title: "Results Saved",
        description: "Backtest results saved to database",
      });
    } catch (error) {
      console.error('Save error:', error);
      toast({
        title: "Save Failed",
        description: "Could not save results",
        variant: "destructive",
      });
    }
  };

  const resetConfig = () => {
    setConfig({
      symbol: "BTCUSDT",
      startDate: "2024-01-01",
      endDate: "2024-11-01",
      initialCapital: 10000,
      tradeSize: 0.98,
      stopLoss: 2.0,
      takeProfit: 5.0,
      coherenceThreshold: 0.945,
      kellySafety: 0.5,
      lighthouseConfidence: 0.7,
      minPrismLevel: 3,
      requireLHE: true,
    });
    setResults(null);
    setErrors({});
  };

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value);
  };

  return (
    <Card className="bg-card/50 backdrop-blur border-border/50">

      <CardHeader>

        <div className="flex items-center justify-between">

          <div>

            <CardTitle className="text-xl font-bold">Backtesting Interface</CardTitle>

            <CardDescription>Test strategies on historical data with custom parameters</CardDescription>

          </div>

          <Badge variant="outline" className="text-primary">

            AUREON Engine

          </Badge>

        </div>

      </CardHeader>

      <CardContent>

        <Tabs defaultValue="config" className="w-full">

          <TabsList className="grid w-full grid-cols-2">

            <TabsTrigger value="config">Configuration</TabsTrigger>

            <TabsTrigger value="results" disabled={!results}>Results</TabsTrigger>

          </TabsList>



          <TabsContent value="config" className="space-y-6 mt-6">

            {/* Basic Settings */}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

              <div className="space-y-2">

                <Label htmlFor="symbol">Symbol</Label>

                <Select

                  value={config.symbol}

                  onValueChange={(value) => setConfig({ ...config, symbol: value })}

                >

                  <SelectTrigger id="symbol">

                    <SelectValue />

                  </SelectTrigger>

                  <SelectContent>

                    <SelectItem value="BTCUSDT">BTCUSDT</SelectItem>

                    <SelectItem value="ETHUSDT">ETHUSDT</SelectItem>

                    <SelectItem value="BNBUSDT">BNBUSDT</SelectItem>

                  </SelectContent>

                </Select>

                {errors.symbol && <p className="text-xs text-destructive">{errors.symbol}</p>}

              </div>



              <div className="space-y-2">

                <Label htmlFor="capital">Initial Capital ($)</Label>

                <Input

                  id="capital"

                  type="number"

                  value={config.initialCapital}

                  onChange={(e) => setConfig({ ...config, initialCapital: Number(e.target.value) })}

                  min={10}

                  max={1000000000}

                  className="font-mono"

                />

                {errors.initialCapital && <p className="text-xs text-destructive">{errors.initialCapital}</p>}

              </div>



              <div className="space-y-2">

                <Label htmlFor="startDate">Start Date</Label>

                <Input

                  id="startDate"

                  type="date"

                  value={config.startDate}

                  onChange={(e) => setConfig({ ...config, startDate: e.target.value })}

                />

                {errors.startDate && <p className="text-xs text-destructive">{errors.startDate}</p>}

              </div>



              <div className="space-y-2">

                <Label htmlFor="endDate">End Date</Label>

                <Input

                  id="endDate"

                  type="date"

                  value={config.endDate}

                  onChange={(e) => setConfig({ ...config, endDate: e.target.value })}

                />

                {errors.endDate && <p className="text-xs text-destructive">{errors.endDate}</p>}

              </div>

            </div>



            {/* Risk Parameters */}

            <div className="space-y-4 p-4 bg-muted/30 rounded-lg border border-border/30">

              <h4 className="text-sm font-semibold text-foreground">Risk Parameters</h4>

              

              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Trade Size ({(config.tradeSize * 100).toFixed(0)}%)</Label>

                  <span className="text-sm font-mono text-muted-foreground">

                    {formatCurrency(config.initialCapital * config.tradeSize)}

                  </span>

                </div>

                <Slider

                  value={[config.tradeSize]}

                  onValueChange={([value]) => setConfig({ ...config, tradeSize: value })}

                  min={0.01}

                  max={1}

                  step={0.01}

                />

              </div>



              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Stop Loss ({config.stopLoss.toFixed(1)}%)</Label>

                </div>

                <Slider

                  value={[config.stopLoss]}

                  onValueChange={([value]) => setConfig({ ...config, stopLoss: value })}

                  min={0.1}

                  max={50}

                  step={0.1}

                />

              </div>



              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Take Profit ({config.takeProfit.toFixed(1)}%)</Label>

                </div>

                <Slider

                  value={[config.takeProfit]}

                  onValueChange={([value]) => setConfig({ ...config, takeProfit: value })}

                  min={0.1}

                  max={100}

                  step={0.1}

                />

              </div>

            </div>



            {/* AUREON Parameters */}

            <div className="space-y-4 p-4 bg-primary/5 rounded-lg border border-primary/30">

              <h4 className="text-sm font-semibold text-foreground">AUREON Field Parameters</h4>

              

              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Coherence Threshold (Γ min)</Label>

                  <Badge variant="outline" className="font-mono">

                    {config.coherenceThreshold.toFixed(3)}

                  </Badge>

                </div>

                <Slider

                  value={[config.coherenceThreshold]}

                  onValueChange={([value]) => setConfig({ ...config, coherenceThreshold: value })}

                  min={0.1}

                  max={1}

                  step={0.001}

                />

              </div>



              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Kelly Safety Factor (φ)</Label>

                  <Badge variant="outline" className="font-mono">

                    {config.kellySafety.toFixed(2)}

                  </Badge>

                </div>

                <Slider

                  value={[config.kellySafety]}

                  onValueChange={([value]) => setConfig({ ...config, kellySafety: value })}

                  min={0.1}

                  max={1}

                  step={0.05}

                />

              </div>



              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Lighthouse Confidence</Label>

                  <Badge variant="outline" className="font-mono">

                    {config.lighthouseConfidence.toFixed(2)}

                  </Badge>

                </div>

                <Slider

                  value={[config.lighthouseConfidence]}

                  onValueChange={([value]) => setConfig({ ...config, lighthouseConfidence: value })}

                  min={0.1}

                  max={1}

                  step={0.05}

                />

              </div>



              <div className="space-y-3">

                <div className="flex items-center justify-between">

                  <Label>Minimum Prism Level</Label>

                  <Badge variant="outline" className="font-mono">

                    {config.minPrismLevel}

                  </Badge>

                </div>

                <Slider

                  value={[config.minPrismLevel]}

                  onValueChange={([value]) => setConfig({ ...config, minPrismLevel: Math.round(value) })}

                  min={1}

                  max={5}

                  step={1}

                />

              </div>



              <div className="flex items-center justify-between p-3 bg-background/50 rounded">

                <Label htmlFor="requireLHE">Require LHE (Lighthouse Event)</Label>

                <input

                  id="requireLHE"

                  type="checkbox"

                  checked={config.requireLHE}

                  onChange={(e) => setConfig({ ...config, requireLHE: e.target.checked })}

                  className="h-4 w-4 accent-primary"

                />

              </div>

            </div>



            {/* Action Buttons */}

            <div className="flex gap-3">

              <Button

                onClick={runBacktest}

                disabled={isRunning}

                className="flex-1"

              >

                {isRunning ? (

                  <>

                    <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" />

                    Running...

                  </>

                ) : (

                  <>

                    <Play className="h-4 w-4 mr-2" />

                    Run Backtest

                  </>

                )}

              </Button>

              <Button onClick={resetConfig} variant="outline">

                <RotateCcw className="h-4 w-4 mr-2" />

                Reset

              </Button>

            </div>



            {Object.keys(errors).length > 0 && (

              <div className="flex items-start gap-2 p-3 bg-destructive/10 border border-destructive/30 rounded-lg">

                <AlertCircle className="h-4 w-4 text-destructive mt-0.5" />

                <div className="text-xs">

                  <p className="font-semibold text-destructive">Configuration Errors</p>

                  <p className="text-muted-foreground">Please correct the errors above</p>

                </div>

              </div>

            )}

          </TabsContent>



          <TabsContent value="results" className="space-y-6 mt-6">

            {results && (

              <>

                {/* Performance Metrics */}

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">

                  <div className="p-4 bg-muted/30 rounded-lg border border-border/30">

                    <p className="text-xs text-muted-foreground mb-1">Total Trades</p>

                    <p className="text-2xl font-bold font-mono text-foreground">{results.totalTrades}</p>

                  </div>

                  <div className="p-4 bg-muted/30 rounded-lg border border-border/30">

                    <p className="text-xs text-muted-foreground mb-1">Win Rate</p>

                    <p className="text-2xl font-bold font-mono text-success">{results.winRate.toFixed(1)}%</p>

                  </div>

                  <div className="p-4 bg-muted/30 rounded-lg border border-border/30">

                    <p className="text-xs text-muted-foreground mb-1">Total Return</p>

                    <p className="text-2xl font-bold font-mono text-primary">{results.totalReturn.toFixed(1)}%</p>

                  </div>

                  <div className="p-4 bg-muted/30 rounded-lg border border-border/30">

                    <p className="text-xs text-muted-foreground mb-1">Sharpe Ratio</p>

                    <p className="text-2xl font-bold font-mono text-foreground">{results.sharpeRatio.toFixed(2)}</p>

                  </div>

                </div>



                {/* Equity Curve */}

                <div className="p-4 bg-muted/30 rounded-lg border border-border/30">

                  <h4 className="text-sm font-semibold mb-4 text-foreground">Equity Curve</h4>

                  <div className="h-80">

                    <ResponsiveContainer width="100%" height="100%">

                      <AreaChart data={results.equityCurve}>

                        <defs>

                          <linearGradient id="equityGradient" x1="0" y1="0" x2="0" y2="1">

                            <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3}/>

                            <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0}/>

                          </linearGradient>

                        </defs>

                        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />

                        <XAxis 

                          dataKey="date" 

                          stroke="hsl(var(--muted-foreground))"

                          style={{ fontSize: '12px' }}

                        />

                        <YAxis 

                          stroke="hsl(var(--muted-foreground))"

                          style={{ fontSize: '12px' }}

                          tickFormatter={(value) => `$${(value / 1000).toFixed(0)}K`}

                        />

                        <Tooltip 

                          contentStyle={{ 

                            backgroundColor: 'hsl(var(--card))',

                            border: '1px solid hsl(var(--border))',

                            borderRadius: '8px'

                          }}

                          formatter={(value: number) => [`${formatCurrency(value)}`, 'Equity']}

                        />

                        <Area 

                          type="monotone" 

                          dataKey="equity" 

                          stroke="hsl(var(--primary))"

                          strokeWidth={2}

                          fillOpacity={1}

                          fill="url(#equityGradient)"

                        />

                      </AreaChart>

                    </ResponsiveContainer>

                  </div>

                </div>



                {/* Additional Metrics */}

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">

                  <div className="p-3 bg-background/50 rounded border border-border/30">

                    <p className="text-xs text-muted-foreground">Max Drawdown</p>

                    <p className="text-lg font-bold font-mono text-destructive">-{results.maxDrawdown.toFixed(1)}%</p>

                  </div>

                  <div className="p-3 bg-background/50 rounded border border-border/30">

                    <p className="text-xs text-muted-foreground">Profit Factor</p>

                    <p className="text-lg font-bold font-mono text-foreground">{results.profitFactor.toFixed(2)}</p>

                  </div>

                  <div className="p-3 bg-background/50 rounded border border-border/30">

                    <p className="text-xs text-muted-foreground">Avg Win</p>

                    <p className="text-lg font-bold font-mono text-success">+{results.avgWin.toFixed(2)}%</p>

                  </div>

                  <div className="p-3 bg-background/50 rounded border border-border/30">

                    <p className="text-xs text-muted-foreground">Avg Loss</p>

                    <p className="text-lg font-bold font-mono text-destructive">-{results.avgLoss.toFixed(2)}%</p>

                  </div>

                </div>



                {/* Actions */}

                <div className="flex gap-3">

                  <Button onClick={saveResults} className="flex-1">

                    <Save className="h-4 w-4 mr-2" />

                    Save Results

                  </Button>

                  <Button variant="outline">

                    <Download className="h-4 w-4 mr-2" />

                    Export CSV

                  </Button>

                </div>

              </>

            )}

          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}