"use client"

import { useState, useEffect } from "react"
import { useForm } from "react-hook-form"
import api from "@/lib/axios"
import { useRouter } from "next/navigation"
import { Loader2, Sparkles, AlertCircle, Image as ImageIcon, Trash2, UploadCloud, Save, ArrowLeft, Plus, FileText, Settings, Layers } from "lucide-react"
import Link from "next/link"

import VariantForm from "./VariantForm"
import VariantTable from "./VariantTable"
import Swal from "sweetalert2";

type Props = {
  productId: string
}

type FormValues = {
  title: string
  slug: string
  categoryId: string
  brandId: string
  description: string
  thumbnail: string
  sizeChart?: string
  basePrice: number
  flashSaleEndDate?: string
}

type Variant = {
  size: string
  color: string
  length?: string
  stock: number
  sku: string
  image?: string
  images: any
}

type ProductImageInput = {
  url: string
  color: string // Color name, or "" for General
}

export default function ProductEditForm({ productId }: Props) {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)

  const {
    register,
    handleSubmit,
    reset,
    setValue,
    watch,
  } = useForm<FormValues>()

  const [categories, setCategories] = useState<{ id: string; name: string }[]>([])
  const [brands, setBrands] = useState<{ id: string; name: string }[]>([])
  const [dbColors, setDbColors] = useState<{ id: string; name: string; value: string }[]>([])

  // MULTIPLE IMAGES STATE
  const [productImages, setProductImages] = useState<ProductImageInput[]>([])
  const [imageInputUrl, setImageInputUrl] = useState("")
  const [imageInputColor, setImageInputColor] = useState("")

  // VARIANT STATE
  const [variants, setVariants] = useState<Variant[]>([])

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true)
        // 1. Fetch auxiliary dropdown elements
        const catRes = await api.get("/admin/categories")
        setCategories(catRes.data)
        const brandRes = await api.get("/admin/brands")
        setBrands(brandRes.data)
        const colorRes = await api.get("/admin/colors")
        setDbColors(colorRes.data)

        // 2. Fetch the target product
        const prodRes = await api.get(`/admin/products/${productId}`)
        const product = prodRes.data

        // 3. Prepopulate FormValues
        reset({
          title: product.title,
          slug: product.slug,
          categoryId: product.categoryId,
          brandId: product.brandId || "",
          description: product.description,
          thumbnail: product.thumbnail,
          sizeChart: product.sizeChart || "",
          basePrice: product.basePrice,
          flashSaleEndDate: product.flashSaleEndDate ? new Date(product.flashSaleEndDate).toISOString().slice(0, 16) : "",
        })

        // 4. Prepopulate image list
        if (product.images) {
          setProductImages(
            product.images.map((img: any) => ({
              url: img.url,
              color: img.color || "",
            }))
          )
        }

        // 5. Prepopulate variants list
        if (product.variants) {
          setVariants(
            product.variants.map((v: any) => ({
              size: v.size,
              color: v.color,
              length: v.length || undefined,
              stock: v.stock,
              sku: v.sku,
              image: v.image || undefined,
              images: v.images || [],
            }))
          )
        }
      } catch (err) {
        console.error("Failed to load edit details:", err)
      } finally {
        setLoading(false)
      }
    }
    loadData()
  }, [productId, reset])

  // ADD VARIANT
  function addVariant(variant: Variant) {
    setVariants((prev) => [...prev, variant])
  }

  // REMOVE VARIANT
  function removeVariant(index: number) {
    setVariants((prev) => prev.filter((_, i) => i !== index))
  }

  // AUTOMATED SLUG GENERATION
  function handleTitleChange(title: string) {
    const slug = title
      .toLowerCase()
      .trim()
      .replace(/[^\w\s-]/g, "")
      .replace(/[\s_-]+/g, "-")
      .replace(/^-+|-+$/g, "")
    setValue("slug", slug)
  }

  // FILE UPLOAD STATES
  const [uploading, setUploading] = useState(false)
  const [uploadError, setUploadError] = useState("")

  // MULTI-FILE LOCAL UPLOADER
  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const files = e.target.files
    if (!files || files.length === 0) return

    setUploading(true)
    setUploadError("")

    try {
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append("files", files[i])
      }

      const res = await api.post("/admin/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })

      const urls = res.data.urls as string[]
      const newImages = urls.map((url) => ({
        url,
        color: imageInputColor, // Associate with current selected color tag
      }))

      setProductImages((prev) => {
        const updated = [...prev, ...newImages]
        const currentThumbnail = watch("thumbnail")
        if (!currentThumbnail && updated.length > 0) {
          setValue("thumbnail", updated[0].url)
        }
        return updated
      })

      e.target.value = ""
    } catch (err: any) {
      console.error(err)
      setUploadError(err.response?.data?.error || "Failed to upload files.")
    } finally {
      setUploading(false)
    }
  }

  // ADD MULTIPLE COLOR MATCHED IMAGES (MANUAL URL)
  function addProductImage() {
    if (!imageInputUrl) {
      Swal.fire({ text: "Please input an image URL link.", confirmButtonColor: "#18181b" })
      return
    }
    setProductImages((prev) => {
      const updated = [
        ...prev,
        {
          url: imageInputUrl,
          color: imageInputColor, // Can be empty for General
        },
      ]
      const currentThumbnail = watch("thumbnail")
      if (!currentThumbnail && updated.length > 0) {
        setValue("thumbnail", imageInputUrl)
      }
      return updated
    })
    setImageInputUrl("")
  }

  // REMOVE IMAGE
  function removeProductImage(index: number) {
    setProductImages((prev) => prev.filter((_, i) => i !== index))
  }

  async function onSubmit(data: FormValues) {
    try {
      setSubmitting(true)
      
      const imagesToSend = productImages.length > 0 
        ? productImages 
        : [{ url: data.thumbnail, color: "" }]

      await api.put(`/admin/products/${productId}`, {
        ...data,
        featured: false,
        images: imagesToSend,
        variants,
      })

      router.push("/admin/products")
      router.refresh()
    } catch (error: any) {
      console.log(error)
      Swal.fire({ text: error.response?.data?.message || "Failed to update product. Ensure the product slug/title remains unique.", confirmButtonColor: "#18181b", icon: "error" })
    } finally {
      setSubmitting(false)
    }
  }

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center py-32 bg-white/50 backdrop-blur-sm rounded-3xl border border-zinc-100">
        <Loader2 className="w-12 h-12 animate-spin text-zinc-950 mb-4" />
        <span className="text-zinc-500 font-bold uppercase tracking-wider text-xs">Loading Catalog Spec sheets...</span>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      {/* BRAND CARD HEADER */}
      <div className="flex items-center justify-between bg-zinc-50 border border-zinc-200/60 p-5 rounded-3xl">
        <div className="flex items-center gap-3">
          <div className="p-2.5 bg-zinc-950 text-white rounded-xl">
            <Sparkles size={16} className="text-amber-400" />
          </div>
          <div>
            <h2 className="text-sm font-black text-zinc-950">Editing: {watch("title")}</h2>
            <p className="text-[10px] font-extrabold text-zinc-400 uppercase tracking-widest mt-0.5">Edit specifications, stock levels, size chart & galleries.</p>
          </div>
        </div>

        <Link
          href="/admin/products"
          className="px-4 py-2.5 rounded-xl bg-white border border-zinc-200 hover:bg-zinc-50 transition text-[10px] font-bold uppercase tracking-wider flex items-center gap-1.5"
        >
          <ArrowLeft size={12} />
          Back to List
        </Link>
      </div>

      {/* BLOCK 1: Specifications & Details */}
      <div className="bg-white border border-zinc-150 rounded-3xl p-6 shadow-sm hover:shadow-md transition duration-300 space-y-5">
        <div className="flex items-center gap-3 pb-4 border-b border-zinc-100">
          <div className="p-2.5 bg-zinc-50 text-zinc-900 rounded-xl">
            <Settings size={16} className="text-zinc-950" />
          </div>
          <div>
            <h3 className="text-xs font-black uppercase tracking-widest text-zinc-950">1. Specifications & Details</h3>
            <p className="text-[10px] text-zinc-400 font-extrabold uppercase tracking-wider mt-0.5">Assign main descriptors, identifying labels, and pricing tiers.</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {/* TITLE */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Product Title
            </label>
            <input
              {...register("title", { required: true })}
              onChange={(e) => handleTitleChange(e.target.value)}
              placeholder="e.g. Minimalist Trenchcoat"
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400"
            />
          </div>

          {/* SLUG */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              SEO Slug URL
            </label>
            <input
              {...register("slug", { required: true })}
              placeholder="e.g. minimalist-trenchcoat"
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400 font-mono text-zinc-650"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {/* CATEGORY */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Category Label
            </label>
            <select
              {...register("categoryId", { required: true })}
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 bg-white transition text-xs font-medium text-zinc-900"
            >
              <option value="">Select Category</option>
              {categories.map((cat) => (
                <option key={cat.id} value={cat.id}>
                  {cat.name}
                </option>
              ))}
            </select>
          </div>

          {/* BRAND */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Brand Label (Optional)
            </label>
            <select
              {...register("brandId")}
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 bg-white transition text-xs font-medium text-zinc-900"
            >
              <option value="">Select Brand (No Brand)</option>
              {brands.map((brand) => (
                <option key={brand.id} value={brand.id}>
                  {brand.name}
                </option>
              ))}
            </select>
          </div>

          {/* PRICE */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Base Selling Price ($)
            </label>
            <input
              type="number"
              step="0.01"
              {...register("basePrice", {
                required: true,
                valueAsNumber: true,
              })}
              placeholder="240.00"
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400 font-mono"
            />
          </div>

          {/* FLASH SALE END DATE */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Flash Sale End Date (Optional)
            </label>
            <input
              type="datetime-local"
              {...register("flashSaleEndDate")}
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400 font-mono"
            />
          </div>
        </div>
      </div>

      {/* BLOCK 2: Visual Assets & Media */}
      <div className="bg-white border border-zinc-150 rounded-3xl p-6 shadow-sm hover:shadow-md transition duration-300 space-y-5">
        <div className="flex items-center gap-3 pb-4 border-b border-zinc-100">
          <div className="p-2.5 bg-zinc-50 text-zinc-900 rounded-xl">
            <ImageIcon size={16} className="text-zinc-950" />
          </div>
          <div>
            <h3 className="text-xs font-black uppercase tracking-widest text-zinc-950">2. Visual Assets & Media</h3>
            <p className="text-[10px] text-zinc-400 font-extrabold uppercase tracking-wider mt-0.5">Assign primary thumbnail image, size charts, and target color tags.</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {/* THUMBNAIL */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Main Thumbnail Image Link
            </label>
            <input
              {...register("thumbnail", { required: true })}
              placeholder="e.g. https://images.unsplash.com/photo-..."
              className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400"
            />
          </div>

          {/* SIZE CHART */}
          <div>
            <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
              Size Chart Image Link (Optional)
            </label>
            <div className="flex gap-2 items-center">
              <input
                {...register("sizeChart")}
                placeholder="e.g. https://images.unsplash.com/photo-..."
                className="flex-1 border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400"
              />
              <label className="bg-zinc-900 hover:bg-zinc-800 text-white font-bold py-3 px-4 rounded-xl cursor-pointer text-[10px] uppercase tracking-wider shadow-sm transition whitespace-nowrap">
                Upload
                <input
                  type="file"
                  accept="image/*"
                  onChange={async (e) => {
                    const files = e.target.files
                    if (!files || files.length === 0) return
                    try {
                      const formData = new FormData()
                      formData.append("files", files[0])
                      const res = await api.post("/admin/upload", formData, {
                        headers: {
                          "Content-Type": "multipart/form-data",
                        },
                      })
                      if (res.data.urls && res.data.urls.length > 0) {
                        setValue("sizeChart", res.data.urls[0])
                      }
                    } catch (err) {
                      console.error("Size chart upload failed:", err)
                      Swal.fire({ text: "Size chart upload failed.", confirmButtonColor: "#18181b", icon: "error" })
                    }
                  }}
                  className="hidden"
                />
              </label>
            </div>
          </div>
        </div>

        {/* GALLERY Zone */}
        <div className="border-t border-zinc-100 pt-6 space-y-5">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between pb-3 border-b border-zinc-100">
            <div>
              <span className="text-[9px] font-black text-zinc-400 uppercase tracking-widest block">Gallery Association</span>
              <h4 className="text-xs font-bold text-zinc-800">Select Target Color Swatch</h4>
            </div>
            <div className="w-full md:w-56">
              <select
                value={imageInputColor}
                onChange={(e) => setImageInputColor(e.target.value)}
                className="w-full border border-zinc-200 rounded-xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-950 bg-white text-xs font-semibold transition"
              >
                <option value="">General (No Color Match)</option>
                {dbColors.map((color) => (
                  <option key={color.id} value={color.name}>
                    {color.name}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            {/* FILE UPLOAD DROPZONE */}
            <div className="relative group border-2 border-dashed border-zinc-200 hover:border-zinc-400 rounded-2xl bg-white p-4 transition flex flex-col items-center justify-center text-center min-h-[120px] cursor-pointer">
              <input
                type="file"
                multiple
                accept="image/*"
                onChange={handleFileUpload}
                disabled={uploading}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
              />
              
              {uploading ? (
                <div className="space-y-2 flex flex-col items-center">
                  <Loader2 className="w-6 h-6 text-zinc-950 animate-spin" />
                  <p className="text-zinc-650 text-[10px] font-bold uppercase tracking-wider animate-pulse">Uploading files...</p>
                </div>
              ) : (
                <div className="space-y-2 flex flex-col items-center">
                  <div className="p-2.5 bg-zinc-50 rounded-xl group-hover:scale-105 transition duration-300">
                    <UploadCloud className="w-5 h-5 text-zinc-600" />
                  </div>
                  <div>
                    <p className="text-zinc-900 text-xs font-bold">Drag & drop product images</p>
                    <p className="text-zinc-400 text-[9px] mt-0.5">or click to browse from device (Multiple supported)</p>
                  </div>
                </div>
              )}
            </div>

            {/* MANUAL URL INPUT */}
            <div className="border border-zinc-200/60 rounded-2xl bg-white p-4 flex flex-col justify-between space-y-3">
              <div>
                <h5 className="text-xs font-bold text-zinc-800">Or Paste Image URL Link</h5>
                <p className="text-zinc-400 text-[9px] mt-0.5">Enter a direct image link from Unsplash, CDN, etc.</p>
              </div>

              <input
                type="text"
                value={imageInputUrl}
                onChange={(e) => setImageInputUrl(e.target.value)}
                placeholder="https://images.unsplash.com/photo-..."
                className="w-full border border-zinc-200 rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-zinc-950 bg-zinc-50/50 text-xs font-mono"
              />

              <button
                type="button"
                onClick={addProductImage}
                className="w-full bg-zinc-950 text-white font-bold py-2.5 px-4 rounded-xl hover:bg-zinc-800 transition flex items-center justify-center gap-1.5 cursor-pointer text-[10px] uppercase tracking-wider shadow-sm"
              >
                <Plus className="w-3.5 h-3.5" />
                Add URL to Gallery
              </button>
            </div>
          </div>

          {uploadError && (
            <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-center gap-3 text-red-700 text-[11px]">
              <AlertCircle className="w-4 h-4 shrink-0" />
              <p className="font-semibold">{uploadError}</p>
            </div>
          )}

          {/* IMAGES GRID LIST */}
          {productImages.length > 0 ? (
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-3">
              {productImages.map((img, idx) => {
                const matchedColor = dbColors.find(c => c.name === img.color);
                return (
                  <div key={idx} className="group relative border border-zinc-150 rounded-2xl overflow-hidden bg-white shadow-sm hover:shadow transition flex flex-col justify-between">
                    <div className="aspect-square relative overflow-hidden bg-zinc-100 shrink-0">
                      <img src={img.url} alt="Product Gallery" className="w-full h-full object-cover group-hover:scale-105 transition duration-300" />
                    </div>
                    
                    <div className="p-2 border-t border-zinc-50 bg-zinc-50/20 space-y-1.5">
                      <div className="flex items-center gap-1">
                        {matchedColor && (
                          <span 
                            className="w-2 h-2 rounded-full border border-zinc-200/80 shrink-0 shadow-inner" 
                            style={{ backgroundColor: matchedColor.value }} 
                          />
                        )}
                        <span className="text-[8px] font-extrabold text-zinc-400 uppercase tracking-widest">
                          Color Tag
                        </span>
                      </div>

                      <select
                        value={img.color}
                        onChange={(e) => {
                          const newColor = e.target.value
                          setProductImages((prev) =>
                            prev.map((item, i) =>
                              i === idx ? { ...item, color: newColor } : item
                            )
                          )
                        }}
                        className="w-full border border-zinc-200/60 rounded-lg px-1.5 py-1 focus:outline-none focus:ring-1 focus:ring-zinc-950 bg-white text-[10px] font-semibold transition"
                      >
                        <option value="">General</option>
                        {dbColors.map((color) => (
                          <option key={color.id} value={color.name}>
                            {color.name}
                          </option>
                        ))}
                      </select>
                    </div>

                    <button
                      type="button"
                      onClick={() => removeProductImage(idx)}
                      className="absolute top-1.5 right-1.5 p-1.5 bg-white/90 hover:bg-red-50 text-zinc-500 hover:text-red-500 rounded-lg shadow transition backdrop-blur-sm cursor-pointer"
                    >
                      <Trash2 size={12} />
                    </button>
                  </div>
                )
              })}
            </div>
          ) : (
            <div className="p-4 rounded-xl bg-zinc-50/50 border border-dashed border-zinc-200 text-center text-zinc-500 text-[11px] font-medium flex items-center justify-center gap-1.5">
              <ImageIcon className="w-3.5 h-3.5 text-zinc-400" />
              No additional gallery images uploaded. Choose a color and drag files or paste a link above.
            </div>
          )}
        </div>
      </div>

      {/* BLOCK 3: Product Storytelling */}
      <div className="bg-white border border-zinc-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition duration-300 space-y-5">
        <div className="flex items-center gap-3 pb-4 border-b border-zinc-100">
          <div className="p-2.5 bg-zinc-50 text-zinc-900 rounded-xl">
            <FileText size={16} className="text-zinc-950" />
          </div>
          <div>
            <h3 className="text-xs font-black uppercase tracking-widest text-zinc-950">3. Product Storytelling</h3>
            <p className="text-[10px] text-zinc-400 font-extrabold uppercase tracking-wider mt-0.5">Provide premium styling notes, fabric weave, cut fits, and care details.</p>
          </div>
        </div>

        <div>
          <label className="block text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
            Product Narrative Description
          </label>
          <textarea
            {...register("description", { required: true })}
            placeholder="Narrate details regarding material, fit type, design cuts..."
            className="w-full border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/30 hover:bg-zinc-50/50 focus:bg-white text-xs font-medium text-zinc-900 placeholder:text-zinc-400 h-28 resize-none"
          />
        </div>
      </div>

      {/* BLOCK 4: Stock Variants & SKUs */}
      <div className="bg-white border border-zinc-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition duration-300 space-y-5">
        <div className="flex items-center gap-3 pb-4 border-b border-zinc-100">
          <div className="p-2.5 bg-zinc-50 text-zinc-900 rounded-xl">
            <Layers size={16} className="text-zinc-950" />
          </div>
          <div>
            <h3 className="text-xs font-black uppercase tracking-widest text-zinc-950">4. Stock Variants & SKUs</h3>
            <p className="text-[10px] text-zinc-400 font-extrabold uppercase tracking-wider mt-0.5">Bind size scales, color swatches, custom lengths, and stock volumes.</p>
          </div>
        </div>

        <div className="space-y-4">
          <VariantForm onAdd={addVariant} />

          {variants.length > 0 ? (
            <VariantTable variants={variants} onRemove={removeVariant} />
          ) : (
            <div className="p-4 rounded-xl bg-zinc-50/50 border border-dashed border-zinc-200 text-center text-zinc-500 text-[11px] font-medium flex items-center justify-center gap-1.5">
              <AlertCircle className="w-3.5 h-3.5 text-zinc-400" />
              No sizes or color variants added yet. Please add variants above to save stock units.
            </div>
          )}
        </div>
      </div>

      {/* SAVE BUTTON */}
      <button
        type="submit"
        disabled={submitting}
        className="w-full bg-zinc-950 text-white font-bold py-4 rounded-2xl hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-950 transition-all flex items-center justify-center gap-2 cursor-pointer shadow-xl disabled:opacity-50 mt-6 text-sm tracking-wider uppercase"
      >
        {submitting ? (
          <>
            <Loader2 className="w-5 h-5 animate-spin" />
            Saving Luxury Modifications to Catalog...
          </>
        ) : (
          <>
            <Save className="w-5 h-5" />
            Save Product Changes
          </>
        )}
      </button>
    </form>
  )
}