import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Badge } from '@/components/ui/badge';
import { TrendingUp, DollarSign, Shield, Zap } from 'lucide-react';

interface CopyStrategyProps {
  selectedStrategy: string;
  setSelectedStrategy: (strategy: string) => void;
}

const strategies = [
  {
    id: 'proportional',
    name: 'Proportional Allocation',
    description: 'Copy trades proportionally based on your wallet size vs target wallet',
    icon: TrendingUp,
    badge: 'Recommended',
    badgeVariant: 'default' as const,
    example: 'Target trades $100, you have $1000 (10x), you trade $10'
  },
  {
    id: 'fixed',
    name: 'Fixed Amount',
    description: 'Trade a fixed amount for every copied trade regardless of target size',
    icon: DollarSign,
    badge: 'Simple',
    badgeVariant: 'secondary' as const,
    example: 'Every trade executes with your preset amount (e.g., $50)'
  },
  {
    id: 'risk-adjusted',
    name: 'Risk-Adjusted Copying',
    description: 'Adjust trade size based on target wallet performance and risk metrics',
    icon: Shield,
    badge: 'Advanced',
    badgeVariant: 'outline' as const,
    example: 'Higher performing wallets get larger allocations'
  },
  {
    id: 'momentum',
    name: 'Momentum Based',
    description: 'Increase allocation size during winning streaks, decrease during losses',
    icon: Zap,
    badge: 'Dynamic',
    badgeVariant: 'outline' as const,
    example: 'Trade size adjusts based on recent performance trends'
  }
];

export const CopyStrategySelector: React.FC<CopyStrategyProps> = ({
  selectedStrategy,
  setSelectedStrategy
}) => {
  return (
    <Card className="bg-gradient-card border-border/50">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <TrendingUp className="h-5 w-5 text-primary" />
          Copy Strategy
        </CardTitle>
      </CardHeader>
      <CardContent>
        <RadioGroup 
          value={selectedStrategy} 
          onValueChange={setSelectedStrategy}
          className="space-y-4"
        >
          {strategies.map((strategy, index) => {
            const IconComponent = strategy.icon;
            return (
              <div
                key={strategy.id}
                className={`p-4 rounded-lg border cursor-pointer transition-all duration-300 animate-fade-in ${
                  selectedStrategy === strategy.id
                    ? 'border-primary bg-primary/5 shadow-lg'
                    : 'border-border bg-secondary/50 hover:border-primary/50'
                }`}
                style={{ animationDelay: `${index * 0.1}s` }}
                onClick={() => setSelectedStrategy(strategy.id)}
              >
                <div className="flex items-start space-x-3">
                  <RadioGroupItem 
                    value={strategy.id} 
                    id={strategy.id}
                    className="mt-1"
                  />
                  <div className="flex-1 space-y-2">
                    <div className="flex items-center gap-2">
                      <IconComponent className="h-4 w-4 text-primary" />
                      <Label 
                        htmlFor={strategy.id}
                        className="font-medium cursor-pointer"
                      >
                        {strategy.name}
                      </Label>
                      <Badge variant={strategy.badgeVariant}>
                        {strategy.badge}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {strategy.description}
                    </p>
                    <div className="bg-muted/50 p-2 rounded text-xs">
                      <span className="font-medium">Example: </span>
                      {strategy.example}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </RadioGroup>

        {!selectedStrategy && (
          <div className="mt-4 p-3 bg-warning/10 border border-warning/20 rounded-lg">
            <p className="text-sm text-warning-foreground">
              Please select a copy strategy to continue
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
};