import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Copy, Plus, X, GripVertical } from "lucide-react";
import { cn } from "@/lib/utils";

interface Specification {
  key: string;
  value: string;
}

interface ProductSpecificationsProps {
  specifications: Specification[];
  onChange: (specs: Specification[]) => void;
  onOpenCopyDialog: () => void;
}

export function ProductSpecifications({ specifications, onChange, onOpenCopyDialog }: ProductSpecificationsProps) {
  const addSpecification = () => {
    onChange([...specifications, { key: "", value: "" }]);
  };

  const updateSpecification = (index: number, field: "key" | "value", value: string) => {
    const newSpecs = [...specifications];
    newSpecs[index][field] = value;
    onChange(newSpecs);
  };

  const removeSpecification = (index: number) => {
    onChange(specifications.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <Label className="text-sm font-medium">商品规格</Label>
          <p className="text-xs text-muted-foreground mt-1">
            添加商品的详细规格参数
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onOpenCopyDialog}
            className="h-8"
          >
            <Copy className="w-3.5 h-3.5 mr-1.5" />
            从其他商品复制
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={addSpecification}
            className="h-8"
          >
            <Plus className="w-3.5 h-3.5 mr-1.5" />
            添加规格
          </Button>
        </div>
      </div>

      {specifications.length === 0 ? (
        <div className="border-2 border-dashed border-muted-foreground/25 rounded-xl p-8 text-center">
          <div className="h-12 w-12 rounded-full bg-muted mx-auto flex items-center justify-center mb-3">
            <Plus className="h-5 w-5 text-muted-foreground" />
          </div>
          <p className="text-sm text-muted-foreground mb-3">暂无规格参数</p>
          <Button variant="outline" size="sm" onClick={addSpecification}>
            添加第一个规格
          </Button>
        </div>
      ) : (
        <div className="space-y-3">
          {specifications.map((spec, index) => (
            <div
              key={index}
              className={cn(
                "group flex items-center gap-3 p-3 rounded-lg border bg-card transition-all",
                "hover:border-primary/30 hover:shadow-sm"
              )}
            >
              <div className="text-muted-foreground/50 cursor-grab">
                <GripVertical className="h-4 w-4" />
              </div>
              <div className="flex-1 grid grid-cols-2 gap-3">
                <Input
                  placeholder="规格名称（如：内存、颜色）"
                  value={spec.key}
                  onChange={(e) => updateSpecification(index, "key", e.target.value)}
                  className="h-9 text-sm"
                />
                <Input
                  placeholder="规格值（如：8GB、星空黑）"
                  value={spec.value}
                  onChange={(e) => updateSpecification(index, "value", e.target.value)}
                  className="h-9 text-sm"
                />
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
                onClick={() => removeSpecification(index)}
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
