import PageLayout from "../components/PageLayout";
import * as api from "../api/index";
import { useState } from "react";

export default function AddItem() {
  const [formData, setFormData] = useState({
    name: "",
    city: "",
    unit: "",
    price: "",
    category: "",
  });

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await api.addItem(formData);
      alert("Товар успешно добавлен");
      setFormData({
        name: "",
        city: "",
        unit: "",
        price: "",
        category: "",
      });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <PageLayout>
      <main className="px-6 md:px-16 grow w-full">
        <h1 className="text-2xl text-white font-medium my-6">
          Добавление товара
        </h1>
        <form onSubmit={handleSubmit} className="w-full max-w-md p-6">
          <div>
            <label className="block text-slate-300 mb-1 text-sm">
              Название
            </label>
            <input
              type="text"
              placeholder="Введите название"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              required
              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
            />
          </div>
          <div>
            <label className="block text-slate-300 mb-1 text-sm">Город</label>
            <input
              type="text"
              placeholder="Введите город"
              value={formData.city}
              onChange={(e) =>
                setFormData({ ...formData, city: e.target.value })
              }
              required
              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
            />
          </div>
          <div>
            <label className="block text-slate-300 mb-1 text-sm">
              Единица измерения
            </label>
            <input
              type="text"
              placeholder="Введите единицу измерения"
              value={formData.unit}
              onChange={(e) =>
                setFormData({ ...formData, unit: e.target.value })
              }
              required
              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
            />
          </div>
          <div>
            <label className="block text-slate-300 mb-1 text-sm">Цена</label>
            <input
              type="text"
              placeholder="Введите цену"
              value={formData.price}
              onChange={(e) =>
                setFormData({ ...formData, price: parseInt(e.target.value) })
              }
              required
              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
            />
          </div>
          <div>
            <label className="block text-slate-300 mb-1 text-sm">
              Категория
            </label>
            <input
              type="text"
              placeholder="Введите категорию"
              value={formData.category}
              onChange={(e) =>
                setFormData({ ...formData, category: e.target.value })
              }
              required
              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
            />
          </div>
          <button
            type="submit"
            className="w-full bg-gold hover:bg-red-400 text-white font-medium py-2 rounded transition-colors duration-200 ease-in-out"
          >
            Создать товар
          </button>
        </form>
      </main>
    </PageLayout>
  );
}