import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Bot, Globe, MapPin, Plus, Minus } from "lucide-react";

interface Robot {
  id: string;
  name: string;
  icon: string;
  galacticDemand: number;
  localPrice: number;
  galacticPrice: number;
  unlocked: boolean;
  researched: boolean;
  productionBonus: number;
  salesBonus: number;
}

interface RobotManagerProps {
  robots: Robot[];
  onGalacticDemandChange: (robotId: string, demand: number) => void;
  onProductionBonusChange: (robotId: string, bonus: number) => void;
  onSalesBonusChange: (robotId: string, bonus: number) => void;
  onResearchedChange: (robotId: string, researched: boolean) => void;
}

export const RobotManager = ({ robots, onGalacticDemandChange, onProductionBonusChange, onSalesBonusChange, onResearchedChange }: RobotManagerProps) => {
  const unlockedRobots = robots.filter(robot => robot.unlocked);

  return (
    <Card className="p-4 border-steel gradient-panel shadow-panel">
      <div className="flex items-center gap-3 mb-4">
        <Bot className="w-5 h-5 text-electric" />
        <h3 className="font-semibold text-electric">Robot Production</h3>
      </div>

      <div className="space-y-6">
        {unlockedRobots.map((robot) => (
          <div key={robot.id} className="border border-steel rounded-lg p-4 bg-background/50">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id={`researched-${robot.id}`}
                  checked={robot.researched}
                  onCheckedChange={(checked) => onResearchedChange(robot.id, checked as boolean)}
                />
                <Label htmlFor={`researched-${robot.id}`} className="text-sm text-muted-foreground">
                  Researched
                </Label>
              </div>
              <span className="text-2xl">{robot.icon}</span>
              <h4 className="font-medium">{robot.name}</h4>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Local Sales */}
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <MapPin className="w-4 h-4 text-neon-green" />
                  <Label className="font-medium">Local Sales</Label>
                </div>
                
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Local Price:</span>
                  <Badge variant="secondary" className="bg-neon-green/20 text-neon-green">
                    ${(robot.localPrice * (1 + robot.salesBonus * 0.05)).toLocaleString()}
                  </Badge>
                </div>
              </div>

              {/* Galactic Sales */}
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <Globe className="w-4 h-4 text-electric" />
                  <Label className="font-medium">Galactic Sales</Label>
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor={`galactic-${robot.id}`} className="text-sm text-muted-foreground">
                    Demand Quantity
                  </Label>
                  <Input
                    id={`galactic-${robot.id}`}
                    type="number"
                    min="0"
                    value={robot.galacticDemand}
                    onChange={(e) => onGalacticDemandChange(robot.id, parseInt(e.target.value) || 0)}
                    className="bg-input border-steel focus:border-electric"
                    placeholder="Enter quantity..."
                  />
                </div>

                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Galactic Price:</span>
                  <Badge variant="secondary" className="bg-electric/20 text-electric">
                    ${(robot.galacticPrice * (1 + robot.salesBonus * 0.05)).toLocaleString()}
                  </Badge>
                </div>
              </div>
            </div>

            {/* Bonuses */}
            <div className="mt-4 pt-4 border-t border-steel">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">Production Bonus</Label>
                    <div className="flex items-center gap-1">
                      <Badge variant="secondary" className="bg-warning/20 text-warning">
                        +{robot.productionBonus * 10}%
                      </Badge>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onProductionBonusChange(robot.id, Math.max(0, robot.productionBonus - 1))}
                        className="h-6 w-6 p-0"
                        disabled={robot.productionBonus <= 0}
                      >
                        <Minus className="w-3 h-3" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onProductionBonusChange(robot.id, robot.productionBonus + 1)}
                        className="h-6 w-6 p-0"
                      >
                        <Plus className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">Sales Bonus</Label>
                    <div className="flex items-center gap-1">
                      <Badge variant="secondary" className="bg-electric/20 text-electric">
                        +{robot.salesBonus * 5}%
                      </Badge>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onSalesBonusChange(robot.id, Math.max(0, robot.salesBonus - 1))}
                        className="h-6 w-6 p-0"
                        disabled={robot.salesBonus <= 0}
                      >
                        <Minus className="w-3 h-3" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => onSalesBonusChange(robot.id, robot.salesBonus + 1)}
                        className="h-6 w-6 p-0"
                      >
                        <Plus className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        ))}
      </div>

      {unlockedRobots.length === 0 && (
        <div className="text-center py-8 text-muted-foreground">
          <Bot className="w-12 h-12 mx-auto mb-2 opacity-50" />
          <p>No robots unlocked yet</p>
        </div>
      )}
    </Card>
  );
};