"use client";

import { useState } from "react";
import axios from "axios";

export default function ProductForm() {
  const [formData, setFormData] = useState({
    name: "",
    price: "",
    description: "",
  });

  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
   const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  const handleChange = (e:any) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e:any) => {
    e.preventDefault();
   
    try {
      setLoading(true);

      const response = await axios.post(
        `${apiUrl}/products`,
        {
          name: formData.name,
          price: Number(formData.price),
          description: formData.description,
        }
      );

      console.log(response.data);

      setMessage("Product added successfully");

      setFormData({
        name: "",
        price: "",
        description: "",
      });
    } catch (error) {
      console.log(error);
      setMessage("Failed to add product");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        width: "400px",
        margin: "50px auto",
        padding: "20px",
        border: "1px solid #ccc",
        borderRadius: "10px",
        background:"#f9f9f9",
      }}
    >
      <h2>Add Product</h2>

      {message && (
        <p style={{ color: "green" }}>
          {message}
        </p>
      )}

      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: "15px" }}>
          <label>Product Name</label>
          <br />

          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            placeholder="Enter product name"
            required
            style={{
              width: "100%",
              padding: "10px",
            }}
          />
        </div>

        <div style={{ marginBottom: "15px" }}>
          <label>Price</label>
          <br />

          <input
            type="number"
            name="price"
            value={formData.price}
            onChange={handleChange}
            placeholder="Enter price"
            required
            style={{
              width: "100%",
              padding: "10px",
            }}
          />
        </div>

        <div style={{ marginBottom: "15px" }}>
          <label>Description</label>
          <br />

          <textarea
            name="description"
            value={formData.description}
            onChange={handleChange}
            placeholder="Enter description"
            rows={4}
            style={{
              width: "100%",
              padding: "10px",
            }}
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          style={{
            width: "100%",
            padding: "10px",
            background: "#0070f3",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
        >
          {loading ? "Saving..." : "Add Product"}
        </button>
      </form>
    </div>
  );
}