"use client";

import { ChangeEvent, FormEvent } 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 { ShippingData } from "@/lib/types";

interface ShippingModalProps {
  open: boolean;
  onClose: () => void;
  onSave: (shippingData: ShippingData) => void; // ✅ Allow passing shippingData
  shippingData: ShippingData;
  setShippingData: React.Dispatch<React.SetStateAction<ShippingData>>;
  editing: boolean;
  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
}

export const ShippingModal = ({
  open,
  onClose,
  onSave,
  shippingData,
  editing,
  handleChange,
  setShippingData,
}: ShippingModalProps) => {
  
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    onSave(shippingData);
  };
  
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="text-lg">
            {editing ? "Edit Shipping Method" : "Add Shipping Method"}
          </DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Method Name</label>
              <Input
                name="name"
                placeholder="Shipping Method Name"
                value={shippingData.name}
                onChange={handleChange}
                required
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium">Price</label>
              <Input
                name="price"
                type="number"
                step="0.01"
                placeholder="Price (£)"
                value={shippingData.price}
                onChange={handleChange}
                required
              />
            </div>
          </div>

          <DialogFooter className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit">
              {editing ? "Update Shipping Method" : "Create Shipping Method"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};