"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";
import { Trash, PlusCircle } from "lucide-react";
import { toast } from "sonner";

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

interface PricingTier {
  minQuantity: number;
  pricePerUnit: number;
  _id?: string;
}

interface ProductData {
  name: string;
  description: string;
  unitType: string;
  category: string;
  pricing: PricingTier[];
  image: string | File | null;
}

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

export const ProductModal = ({
  open,
  onClose,
  onSave,
  productData,
  categories,
  editing,
  handleChange,
  setProductData,
}: ProductModalProps) => {
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [newCategory, setNewCategory] = useState("");
  const [imageDimensions, setImageDimensions] = useState({
    width: 300,
    height: 200,
  });

  useEffect(() => {
    if (productData?.pricing) {
      setProductData((prev) => ({
        ...prev,
        tieredPricing: productData.pricing,
      }));
    }
  }, [productData.pricing]);

  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) {
      const image = new Image();
      const objectUrl = URL.createObjectURL(file);

      image.onload = () => {
        const aspectRatio = image.naturalWidth / image.naturalHeight;
        let width = 300;
        let height = 200;

        if (aspectRatio > 1) {
          width = 300;
          height = 300 / aspectRatio;
        } else {
          height = 200;
          width = 200 * aspectRatio;
        }

        setProductData({ ...productData, image: file });
        setImagePreview(objectUrl);
        setImageDimensions({ width, height });
      };

      image.src = objectUrl;
    } else {
      setProductData({ ...productData, image: null });
      setImagePreview(null);
    }
  };

  const handleSave = () => {
    onSave(productData);
    toast.success(
      editing ? "Product updated successfully!" : "Product added successfully!"
    );
    onClose();
  };

  const handleTieredPricingChange = (
    e: ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    const { name, valueAsNumber } = e.target;

    if (!productData.pricing) return;
    const updatedPricing = [...productData.pricing];

    updatedPricing[index] = {
      ...updatedPricing[index],
      [name]: isNaN(valueAsNumber) ? 0 : valueAsNumber, // Ensure valid numbers
    };

    setProductData((prev) => ({
      ...prev,
      tieredPricing: updatedPricing,
    }));
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl">
        <DialogHeader>
          <DialogTitle className="text-base">
            {editing ? "Edit Product" : "Add Product"}
          </DialogTitle>
        </DialogHeader>

        <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 py-4">
          <div className="space-y-6">
            <div>
              <label className="text-sm font-medium">Product Name</label>
              <Input
                name="name"
                placeholder="Product Name"
                value={productData.name}
                onChange={handleChange}
                className="text-sm h-9"
              />
            </div>

            {/* Description */}
            <div>
              <label className="text-sm font-medium">Description</label>
              <Textarea
                name="description"
                placeholder="Product Description"
                value={productData.description}
                onChange={handleChange}
                rows={4}
                className="text-sm h-24"
              />
            </div>

            {/* Category and Unit Type */}
            <div>
              <label className="text-sm font-medium">Category</label>
              <div className="flex items-center gap-2">
                <Select
                  value={productData.category || "placeholder"}
                  onValueChange={(value) =>
                    setProductData((prev) => ({
                      ...prev,
                      category: value === "placeholder" ? "" : value,
                    }))
                  }
                >
                  <SelectTrigger className="flex-1 h-9 text-sm">
                    <SelectValue
                      placeholder={
                        productData.category === "placeholder"
                          ? "Select category..."
                          : "Select a category"
                      }
                    />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="placeholder">
                      Select category...
                    </SelectItem>
                    {categories.map((cat) => (
                      <SelectItem key={cat._id} value={cat._id}>
                        {cat.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                {productData.category === "placeholder" && (
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-9 text-xs"
                    onClick={() => {
                      // Handle adding a category (e.g., open modal, show input field, etc.)
                      console.log("Open category creation modal");
                    }}
                  >
                    + Add
                  </Button>
                )}
              </div>
            </div>

            <div>
              <label className="text-sm font-medium">Unit Type</label>
              <Select
                value={productData.unitType || "placeholder"}
                onValueChange={(value) =>
                  setProductData({
                    ...productData,
                    unitType: value === "placeholder" ? "" : value,
                  })
                }
              >
                <SelectTrigger className="h-9 text-sm">
                  <SelectValue placeholder="Select a unit type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="placeholder" disabled>
                    Select a unit type
                  </SelectItem>
                  <SelectItem value="pcs">Pieces (pcs)</SelectItem>
                  <SelectItem value="gr">Grams (gr)</SelectItem>
                  <SelectItem value="kg">Kilograms (kg)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Column 2: Image and Tiered Pricing */}
          <div className="space-y-6">
            {/* Product Image */}
            <div>
              <label className="text-sm font-medium">Product Image</label>
              <div className="relative border rounded-md flex items-center justify-center bg-gray-50 dark:bg-gray-800 w-full h-48">
                {imagePreview ? (
                  <img
                    src={imagePreview}
                    alt="Preview"
                    className="object-contain w-full h-full rounded-md"
                  />
                ) : (
                  <span className="text-gray-400 text-sm">
                    No Image Selected
                  </span>
                )}
              </div>
              <Input
                type="file"
                accept="image/*"
                onChange={handleImageChange}
                className="mt-2 h-9 text-sm"
              />
            </div>

            {/* Tiered Pricing */}
            <div>
              <h3 className="text-sm font-medium">Tiered Pricing</h3>

              {productData.pricing?.length > 0 ? (
                productData.pricing.map((tier, index) => (
                  <div
                    key={tier._id || index}
                    className="flex items-center gap-2"
                  >
                    <Input
                      name="minQuantity"
                      type="number"
                      min="1"
                      placeholder="Min Quantity"
                      value={tier.minQuantity}
                      onChange={(e) => handleTieredPricingChange(e, index)}
                      className="h-8 text-sm px-2 flex-1"
                    />
                    <Input
                      name="pricePerUnit"
                      type="number"
                      placeholder="Price per unit"
                      value={tier.pricePerUnit}
                      onChange={(e) => handleTieredPricingChange(e, index)}
                      className="h-8 text-sm px-2 flex-1"
                    />
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-red-500 hover:bg-red-100"
                      onClick={() => {
                        const updatedPricing = [...productData.pricing];
                        updatedPricing.splice(index, 1);
                        setProductData({
                          ...productData,
                          pricing: updatedPricing, // Update `pricing`
                        });
                      }}
                    >
                      <Trash className="h-5 w-5" />
                    </Button>
                  </div>
                ))
              ) : (
                <p className="text-sm text-gray-500">No pricing tiers added.</p>
              )}

              <Button
                variant="outline"
                size="sm"
                className="mt-2"
                onClick={() =>
                  setProductData((prev) => ({
                    ...prev,
                    pricing: [
                      ...(prev.pricing || []),
                      { minQuantity: 1, pricePerUnit: 0 },
                    ],
                  }))
                }
              >
                <PlusCircle className="w-4 h-4 mr-1" />
                Add Tier
              </Button>
            </div>
          </div>
        </div>

        <DialogFooter className="flex justify-end gap-2">
          <Button
            variant="outline"
            size="sm"
            className="h-9 text-sm px-4"
            onClick={onClose}
          >
            Cancel
          </Button>
          <Button size="sm" className="h-9 text-sm px-4" onClick={handleSave}>
            {editing ? "Update Product" : "Create Product"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};