import { useLoaderData } from "react-router-dom";

// 1. Компонент тепер "тупий" і чистий. Він просто показує дані.
export default function ProductDetailsPage() {
  const product = useLoaderData(); // Хук для доступу до даних з loader-а
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price}$</p>
    </div>
  );
}

// 2. Експортуємо лоадер для використання в роутері
export const productLoader = async ({ params }) => {
  const res = await fetch(`/api/products/${params.productId}`);
  
  if (!res.ok) {
    // Викидаємо помилку, яку спіймає <ErrorPage> (errorElement)
    throw new Response("Not Found", { status: 404 });
  }
  
  return res.json();
};

import { useForm } from "react-hook-form";
import { useSubmit, useActionData, redirect } from "react-router-dom";

export default function NewProductPage() {
  // 1. React Hook Form ініціалізація
  const { 
    register, 
    handleSubmit, 
    formState: { errors: clientErrors } // Помилки валідації на клієнті
  } = useForm();

  // 2. React Router хуки
  const submit = useSubmit(); // Функція для запуску action
  const serverErrors = useActionData(); // Помилки, що повернув action (якщо були)

  // 3. Обробник сабміту
  const onSubmit = (data) => {
    // data — це чистий JS об'єкт { title: "...", price: "..." }
    
    // Ми передаємо його в submit. 
    // Другим аргументом вказуємо метод і action (опціонально, якщо поточний URL)
    // encType: "application/json" дозволить прочитати дані через request.json() в action
    submit(data, { method: "post", encType: "application/json" });
  };

  return (
    <div className="form-container">
      <h1>Створити товар</h1>

      {/* RHF handleSubmit перевіряє валідацію перед викликом onSubmit */}
      <form onSubmit={handleSubmit(onSubmit)}>
        
        <div className="form-group">
          <label>Назва</label>
          <input 
            {...register("title", { required: "Це поле обов'язкове" })} 
            className={clientErrors.title ? "error" : ""}
          />
          {/* Показуємо помилку від RHF */}
          {clientErrors.title && <span className="error-msg">{clientErrors.title.message}</span>}
          {/* АБО помилку від сервера */}
          {serverErrors?.title && <span className="error-msg">{serverErrors.title}</span>}
        </div>

        <div className="form-group">
          <label>Ціна</label>
          <input 
            type="number"
            {...register("price", { min: { value: 1, message: "Ціна має бути > 0" } })} 
          />
           {clientErrors.price && <span className="error-msg">{clientErrors.price.message}</span>}
        </div>

        <button type="submit">Створити</button>
      </form>
    </div>
  );
}

// Action для обробки JSON даних
export const createProductAction = async ({ request }) => {
  // Оскільки ми вказали encType: "application/json", читаємо JSON
  const data = await request.json();
  
  // Тут також можна робити серверну валідацію
  if (data.title === "Заборонене слово") {
    return { title: "Ця назва недопустима" }; // Повернеться в useActionData
  }

  await fetch('/api/products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

  return redirect('/products');
};