"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import api from "@/lib/api";
import ProductForm from "@/components/vendor/ProductForm";
import toast from "react-hot-toast";

export default function EditProductPage() {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");

  const [product, setProduct] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!id) {
      setLoading(false);
      return;
    }

    loadProduct();
  }, [id]);

  const loadProduct = async () => {
    try {
      const token = localStorage.getItem("auth_token");

      const res = await api.get(`/vendor/products/${id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      setProduct(res.data.data);
    } catch (error) {
      console.log("Load error:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleUpdate = async (formData: FormData) => {
    try {
      setSaving(true);

      const token = localStorage.getItem("auth_token");

      await api.post(`/vendor/products/${id}`, formData, {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      });

      toast.success("Product updated successfully");

      await loadProduct();
    } catch (error) {
      console.log("Update error:", error);
      toast.error("Update failed");
    } finally {
      setSaving(false);
    }
  };

  // ❗ if no id
  if (!id) {
    return (
      <div className="p-10 text-red-500">
        Invalid product ID
      </div>
    );
  }

  // ⏳ loading state
  if (loading) {
    return (
      <div className="p-10 text-gray-500">
        Loading product...
      </div>
    );
  }

  // ❌ no product
  if (!product) {
    return (
      <div className="p-10 text-red-500">
        Product not found
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto p-6">

      <div className="mb-6">
        <h1 className="text-3xl font-black">
          Edit Product
        </h1>

        {product?.product_type === "variable" && (
          <p className="text-sm text-red-500 mt-2">
            ⚠ Variations will be regenerated after saving changes
          </p>
        )}
      </div>

      <ProductForm
        product={product}
        onSubmit={handleUpdate}
      />

      {saving && (
        <p className="mt-4 text-blue-500">
          Saving changes...
        </p>
      )}

    </div>
  );
}