import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Eye, Star, Flame } from "lucide-react";
import { cn } from "@/lib/utils";

interface ProductStatusToggleProps {
  isActive: boolean;
  isRecommended: boolean;
  isHot: boolean;
  onChange: (field: string, value: boolean) => void;
}

export function ProductStatusToggle({ isActive, isRecommended, isHot, onChange }: ProductStatusToggleProps) {
  const statusItems = [
    {
      id: "is_active",
      label: "上架状态",
      description: "商品是否在前台显示",
      icon: Eye,
      checked: isActive,
      activeColor: "bg-success/10 text-success border-success/20",
    },
    {
      id: "is_recommended",
      label: "推荐商品",
      description: "在首页推荐位展示",
      icon: Star,
      checked: isRecommended,
      activeColor: "bg-warning/10 text-warning border-warning/20",
    },
    {
      id: "is_hot",
      label: "热门商品",
      description: "标记为热销商品",
      icon: Flame,
      checked: isHot,
      activeColor: "bg-destructive/10 text-destructive border-destructive/20",
    },
  ];

  return (
    <div className="space-y-4">
      <Label className="text-sm font-medium">商品状态</Label>
      <div className="grid gap-3">
        {statusItems.map((item) => (
          <div
            key={item.id}
            className={cn(
              "flex items-center justify-between p-4 rounded-xl border transition-all duration-200",
              item.checked ? item.activeColor : "bg-card border-border"
            )}
          >
            <div className="flex items-center gap-3">
              <div className={cn(
                "h-10 w-10 rounded-lg flex items-center justify-center transition-colors",
                item.checked ? "bg-current/10" : "bg-muted"
              )}>
                <item.icon className={cn(
                  "h-5 w-5",
                  item.checked ? "text-current" : "text-muted-foreground"
                )} />
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <Label htmlFor={item.id} className="font-medium cursor-pointer">
                    {item.label}
                  </Label>
                  {item.checked && (
                    <Badge variant="secondary" className="text-xs font-normal">
                      已启用
                    </Badge>
                  )}
                </div>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {item.description}
                </p>
              </div>
            </div>
            <Switch
              id={item.id}
              checked={item.checked}
              onCheckedChange={(checked) => onChange(item.id, checked)}
            />
          </div>
        ))}
      </div>
    </div>
  );
}
