star-erp/resources/js/Components/Product/ProductDialog.tsx

import { useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { useForm } from "@inertiajs/react";
import { toast } from "sonner";
import type { Product, Category } from "@/Pages/Product/Index";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { ChevronDown } from "lucide-react";

interface ProductDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  product: Product | null;
  categories: Category[];
  onSave?: (product: any) => void; // Legacy prop, can be removed if fully switching to Inertia submit within dialog
}

export default function ProductDialog({
  open,
  onOpenChange,
  product,
  categories,
}: ProductDialogProps) {
  const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
    name: "",
    category_id: "",
    brand: "",
    specification: "",
    base_unit: "公斤",
    large_unit: "",
    conversion_rate: "",
    purchase_unit: "",
  });

  useEffect(() => {
    if (open) {
      clearErrors();
      if (product) {
        setData({
          name: product.name,
          category_id: product.category_id.toString(),
          brand: product.brand || "",
          specification: product.specification || "",
          base_unit: product.base_unit,
          large_unit: product.large_unit || "",
          conversion_rate: product.conversion_rate ? product.conversion_rate.toString() : "",
          purchase_unit: product.purchase_unit || "",
        });
      } else {
        reset();
        // Set default category if available
        if (categories.length > 0) {
          setData("category_id", categories[0].id.toString());
        }
      }
    }
  }, [open, product, categories]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (product) {
      put(route("products.update", product.id), {
        onSuccess: () => {
          toast.success("商品已更新");
          onOpenChange(false);
          reset();
        },
        onError: () => {
          toast.error("更新失敗，請檢查輸入資料");
        }
      });
    } else {
      post(route("products.store"), {
        onSuccess: () => {
          toast.success("商品已新增");
          onOpenChange(false);
          reset();
        },
        onError: () => {
          toast.error("新增失敗，請檢查輸入資料");
        }
      });
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{product ? "編輯商品" : "新增商品"}</DialogTitle>
          <DialogDescription>
            {product ? "修改商品資料" : "建立新的商品資料"}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-6 py-4">

          {/* 基本資訊區塊 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium border-b pb-2">基本資訊</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="category_id">
                  分類 <span className="text-red-500">*</span>
                </Label>
                <Select
                  value={data.category_id}
                  onValueChange={(value) => setData("category_id", value)}
                >
                  <SelectTrigger id="category_id" className={errors.category_id ? "border-red-500" : ""}>
                    <SelectValue placeholder="選擇分類" />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((category) => (
                      <SelectItem key={category.id} value={category.id.toString()}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="name">
                  商品名稱 <span className="text-red-500">*</span>
                </Label>
                <Input
                  id="name"
                  value={data.name}
                  onChange={(e) => setData("name", e.target.value)}
                  placeholder="例：法國麵粉"
                  className={errors.name ? "border-red-500" : ""}
                />
                {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="brand">品牌</Label>
                <Input
                  id="brand"
                  value={data.brand}
                  onChange={(e) => setData("brand", e.target.value)}
                  placeholder="例：鳥越製粉"
                />
                {errors.brand && <p className="text-sm text-red-500">{errors.brand}</p>}
              </div>

              <div className="space-y-2 col-span-2">
                <Label htmlFor="specification">規格描述</Label>
                <Textarea
                  id="specification"
                  value={data.specification}
                  onChange={(e) => setData("specification", e.target.value)}
                  placeholder="例：25kg/袋，灰分0.45%"
                  className="resize-none"
                />
                {errors.specification && <p className="text-sm text-red-500">{errors.specification}</p>}
              </div>
            </div>
          </div>

          {/* 單位設定區塊 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium border-b pb-2">單位設定</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="space-y-2">
                <Label htmlFor="base_unit">
                  基本庫存單位 <span className="text-red-500">*</span>
                </Label>
                <div className="flex gap-2">
                  <Input
                    id="base_unit"
                    value={data.base_unit}
                    onChange={(e) => setData("base_unit", e.target.value)}
                    placeholder="可輸入或選擇..."
                    className={errors.base_unit ? "border-red-500 flex-1" : "flex-1"}
                  />
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="outline" size="icon" className="shrink-0">
                        <ChevronDown className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      {["公斤", "公克", "公升", "毫升", "個", "支", "包", "罐", "瓶", "箱", "袋"].map((u) => (
                        <DropdownMenuItem key={u} onClick={() => setData("base_unit", u)}>
                          {u}
                        </DropdownMenuItem>
                      ))}
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
                {errors.base_unit && <p className="text-sm text-red-500">{errors.base_unit}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="large_unit">大單位</Label>
                <Input
                  id="large_unit"
                  value={data.large_unit}
                  onChange={(e) => setData("large_unit", e.target.value)}
                  placeholder="例：箱、袋"
                />
                {errors.large_unit && <p className="text-sm text-red-500">{errors.large_unit}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="conversion_rate">
                  換算率
                  {data.large_unit && <span className="text-red-500">*</span>}
                </Label>
                <Input
                  id="conversion_rate"
                  type="number"
                  step="0.0001"
                  value={data.conversion_rate}
                  onChange={(e) => setData("conversion_rate", e.target.value)}
                  placeholder={data.large_unit ? `1 ${data.large_unit} = ? ${data.base_unit}` : ""}
                  disabled={!data.large_unit}
                />
                {errors.conversion_rate && <p className="text-sm text-red-500">{errors.conversion_rate}</p>}
              </div>

              <div className="space-y-2">
                <Label htmlFor="purchase_unit">採購單位</Label>
                <Input
                  id="purchase_unit"
                  value={data.purchase_unit}
                  onChange={(e) => setData("purchase_unit", e.target.value)}
                  placeholder="通常同大單位"
                />
                {errors.purchase_unit && <p className="text-sm text-red-500">{errors.purchase_unit}</p>}
              </div>
            </div>

            {data.large_unit && data.base_unit && data.conversion_rate && (
              <div className="bg-blue-50 p-3 rounded text-sm text-blue-700">
                預覽：1 {data.large_unit} = {data.conversion_rate} {data.base_unit}
              </div>
            )}
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              className="button-outlined-primary"
            >
              取消
            </Button>
            <Button type="submit" className="button-filled-primary" disabled={processing}>
              {processing ? "儲存... " : (product ? "儲存變更" : "新增")}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog >
  );
}