/**
 * 編輯安全庫存對話框
 */

import { useState, useEffect } from "react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { SafetyStockSetting } from "@/types/warehouse";

interface EditSafetyStockDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    setting: SafetyStockSetting;
    onSave: (updatedSetting: SafetyStockSetting) => void;
}

export default function EditSafetyStockDialog({
    open,
    onOpenChange,
    setting,
    onSave,
}: EditSafetyStockDialogProps) {
    const [safetyStock, setSafetyStock] = useState<number>(setting.safetyStock);

    useEffect(() => {
        setSafetyStock(setting.safetyStock);
    }, [setting]);

    const handleSave = () => {
        onSave({
            ...setting,
            safetyStock,
            updatedAt: new Date().toISOString(),
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>編輯安全庫存</DialogTitle>
                    <DialogDescription>
                        修改 <span className="font-semibold text-gray-900">{setting.productName}</span> 在此倉庫的安全庫存警戒量。
                    </DialogDescription>
                </DialogHeader>

                <div className="grid gap-4 py-4">
                    <div className="flex flex-col gap-2">
                        <Label htmlFor="edit-safety" className="text-sm font-medium">
                            庫存警示數量 ({setting.unit || '個'})
                        </Label>
                        <Input
                            id="edit-safety"
                            type="number"
                            min="0"
                            step="any"
                            value={safetyStock}
                            onChange={(e) => setSafetyStock(parseFloat(e.target.value) || 0)}
                            className="button-outlined-primary"
                            autoFocus
                        />
                        <p className="text-xs text-gray-500">
                            當此商品在此倉庫的庫存餘額低於此數值時，系統將顯示警告標記。
                        </p>
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                    >
                        取消
                    </Button>
                    <Button
                        type="button"
                        onClick={handleSave}
                        className="button-filled-primary"
                    >
                        儲存變更
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}