ember-market-frontend/components/product-modal.tsx

"use client";

import { ChangeEvent, useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Product } from "@/models/products";

interface Category {
  _id: string;
  name: string;
}

interface ProductModalProps {
  open: boolean;
  onClose: () => void;
  onSave: (productData: Product) => void;
  productData: Product;
  categories: Category[];
  editing: boolean;
  handleChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  setProductData: React.Dispatch<React.SetStateAction<Product>>;
  handleTieredPricingChange: (
    e: ChangeEvent<HTMLInputElement>,
    index: number
  ) => void;
}

export const ProductModal = ({
  open,
  onClose,
  onSave,
  productData,
  categories,
  editing,
  handleChange,
  handleTieredPricingChange,
  setProductData,
}: ProductModalProps) => {
  const [imagePreview, setImagePreview] = useState<string | null>(null);

  // Update image preview when product data changes
  useEffect(() => {
    if (productData.image && typeof productData.image === "string") {
      setImagePreview(productData.image);
    }
  }, [productData.image]);

  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setProductData({ ...productData, image: file });
      setImagePreview(URL.createObjectURL(file));
    } else {
      setProductData({ ...productData, image: null });
      setImagePreview(null);
    }
  };

  // ✅ FIXED: Moved Inside the Component & Used Type Assertion
  const handleTieredPricingChangeInternal = (
    e: ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    const updatedPricing = [...productData.tieredPricing];
    const field = e.target.name as keyof (typeof productData.tieredPricing)[number];

    updatedPricing[index] = {
      ...updatedPricing[index],
      [field]: e.target.valueAsNumber || 0,
    };

    setProductData({
      ...productData,
      tieredPricing: updatedPricing,
    });
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="text-lg">
            {editing ? "Edit Product" : "Add Product"}
          </DialogTitle>
        </DialogHeader>

        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">Product Name</label>
            <Input name="name" placeholder="Product Name" value={productData.name} onChange={handleChange} />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Description</label>
            <Textarea name="description" placeholder="Product Description" value={productData.description} onChange={handleChange} rows={3} />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Category</label>
            <Select value={productData.category} onValueChange={(value) => setProductData({ ...productData, category: value })}>
              <SelectTrigger>
                <SelectValue placeholder="Select a category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((cat) => (
                  <SelectItem key={cat._id} value={cat._id}>
                    {cat.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <h3 className="text-sm font-medium">Tiered Pricing</h3>
            {productData.tieredPricing.map((tier, index) => (
              <div key={index} className="flex gap-2">
                <Input name="minQuantity" type="number" min="1" placeholder="Quantity" value={tier.minQuantity} onChange={(e) => handleTieredPricingChangeInternal(e, index)} />
                <Input name="pricePerUnit" type="number" step="0.01" placeholder="Price" value={tier.pricePerUnit} onChange={(e) => handleTieredPricingChangeInternal(e, index)} />
              </div>
            ))}
            <Button variant="outline" size="sm" onClick={() => setProductData({ ...productData, tieredPricing: [...productData.tieredPricing, { minQuantity: 1, pricePerUnit: 0 }] })}>
              + Add Tier
            </Button>
          </div>
        </div>

        <DialogFooter className="flex justify-end gap-2">
          <Button variant="outline" onClick={onClose}>Cancel</Button>
          <Button onClick={() => onSave(productData)}>{editing ? "Update Product" : "Create Product"}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};