import Input from "@/components/Input";
import ColorPicker from "@/components/ColorPicker";
import type { EditorObject } from "@/pages/editor/store/editorStore";

type ShapeSettingsProps = {
    selectedObject: EditorObject;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
};

const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
    const baseWidth = selectedObject.width ?? 100;
    const baseHeight = selectedObject.height ?? 100;
    const baseFill = selectedObject.fill ?? "#3b82f6";
    const fillType = selectedObject.fillType ?? "solid";
    const gradient = selectedObject.gradient ?? {
        from: "#3b82f6",
        to: "#1d4ed8",
        angle: 135,
    };
    const baseStroke = selectedObject.stroke ?? "#1e40af";
    const baseStrokeWidth = selectedObject.strokeWidth ?? 0;
    const baseBorderRadius = selectedObject.borderRadius ?? 0;
    const baseBlur = selectedObject.blur ?? 0;
    const isSquareShape =
        selectedObject.shapeType === "square" || selectedObject.shapeType === undefined;

    return (
        <div className="space-y-4">
            <Input
                label="عرض"
                type="number"
                value={baseWidth}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        width: parseInt(e.target.value) || baseWidth,
                    })
                }
            />
            <Input
                label="ارتفاع"
                type="number"
                value={baseHeight}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        height: parseInt(e.target.value) || baseHeight,
                    })
                }
            />
            <ColorPicker
                label="رنگ پس‌زمینه"
                value={baseFill}
                readOnly={fillType === "gradient"}
                onChange={(value) =>
                    onUpdate(selectedObject.id, {
                        fill: value,
                    })
                }
            />
            <div className="space-y-2">
                <label className="text-sm">نوع Fill</label>
                <div className="flex gap-2">
                    <button
                        type="button"
                        onClick={() =>
                            onUpdate(selectedObject.id, {
                                fillType: "solid",
                            })
                        }
                        className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "solid" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
                            }`}
                    >
                        رنگ ساده
                    </button>
                    <button
                        type="button"
                        onClick={() =>
                            onUpdate(selectedObject.id, {
                                fillType: "gradient",
                                gradient: selectedObject.gradient ?? {
                                    from: "#3b82f6",
                                    to: "#1d4ed8",
                                    angle: 135,
                                },
                            })
                        }
                        className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "gradient" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
                            }`}
                    >
                        گرادیانت
                    </button>
                </div>
            </div>
            {fillType === "gradient" && (
                <div className="space-y-3 border border-border rounded-xl p-3">
                    <ColorPicker
                        label="رنگ شروع"
                        value={gradient.from}
                        onChange={(value) =>
                            onUpdate(selectedObject.id, {
                                gradient: { ...gradient, from: value },
                            })
                        }
                    />
                    <ColorPicker
                        label="رنگ پایان"
                        value={gradient.to}
                        onChange={(value) =>
                            onUpdate(selectedObject.id, {
                                gradient: { ...gradient, to: value },
                            })
                        }
                    />
                    <div className="space-y-1">
                        <label className="text-sm">زاویه گرادیانت</label>
                        <div className="flex items-center gap-2">
                            <input
                                type="range"
                                min={0}
                                max={360}
                                value={gradient.angle}
                                onChange={(e) =>
                                    onUpdate(selectedObject.id, {
                                        gradient: {
                                            ...gradient,
                                            angle: Number(e.target.value),
                                        },
                                    })
                                }
                                className="w-full"
                            />
                            <input
                                type="number"
                                min={0}
                                max={360}
                                value={gradient.angle}
                                onChange={(e) =>
                                    onUpdate(selectedObject.id, {
                                        gradient: {
                                            ...gradient,
                                            angle: Number(e.target.value) || 0,
                                        },
                                    })
                                }
                                className="w-16 h-9 rounded-lg border border-border px-2 text-xs"
                            />
                        </div>
                    </div>
                </div>
            )}
            <ColorPicker
                label="رنگ خط"
                value={baseStroke}
                onChange={(value) =>
                    onUpdate(selectedObject.id, {
                        stroke: value,
                    })
                }
            />
            <Input
                label="ضخامت خط"
                type="number"
                value={baseStrokeWidth}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        strokeWidth: parseInt(e.target.value) || 0,
                    })
                }
                min={0}
            />
            {isSquareShape && (
                <Input
                    label="گردی گوشه"
                    type="number"
                    value={baseBorderRadius}
                    onChange={(e) =>
                        onUpdate(selectedObject.id, {
                            borderRadius: Math.max(0, parseInt(e.target.value) || 0),
                        })
                    }
                    min={0}
                />
            )}
            <div className="space-y-1">
                <label className="text-sm">بلور</label>
                <div className="flex items-center gap-2">
                    <input
                        type="range"
                        min={0}
                        max={50}
                        value={baseBlur}
                        onChange={(e) =>
                            onUpdate(selectedObject.id, {
                                blur: Math.max(0, Math.min(50, Number(e.target.value))),
                            })
                        }
                        className="w-full"
                    />
                    <input
                        type="number"
                        min={0}
                        max={50}
                        value={baseBlur}
                        onChange={(e) =>
                            onUpdate(selectedObject.id, {
                                blur: Math.max(0, Math.min(50, Number(e.target.value) || 0)),
                            })
                        }
                        className="w-16 h-9 rounded-lg border border-border px-2 text-xs"
                    />
                </div>
            </div>
        </div>
    );
};

export default ShapeSettings;

