"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter} from "next/navigation";

type Service = {
  id: string;
  title_fr: string;
  title_en: string;
  description_fr: string;
  description_en: string;
};

export default function ServiceEditPage() {
  const params = useParams();

  const router = useRouter();

  const id =
    typeof params.id === "string"
      ? params.id
      : "";

  const [service, setService] =
    useState<Service | null>(null);

  useEffect(() => {
    async function load() {
      const res = await fetch(
        `/api/services/${id}`
      );

      const data = await res.json();

      setService(data);
    }

    if (id) {
      load();
    }
  }, [id]);

  const save = async () => {
  if (!service) return;

  await fetch(`/api/services/${id}`, {
    method: "PUT",

    headers: {
      "Content-Type": "application/json",
    },

    body: JSON.stringify(service),
  });

  router.push("/admin/services");
};
  
  if (!service) {
    return <div className="p-10">Chargement...</div>;
  }

  return (
    <div className="p-10">
      <h1 className="text-3xl font-bold mb-6">
        Modifier le service
      </h1>

      <input
        className="border p-2 w-full mb-3"
        value={service.title_fr}
        onChange={(e) =>
          setService({
            ...service,
            title_fr: e.target.value,
          })
        }
      />

      <textarea
        className="border p-2 w-full mb-6"
        value={service.description_fr}
        onChange={(e) =>
          setService({
            ...service,
            description_fr: e.target.value,
          })
        }
      />

      <button
        onClick={save}
        className="bg-black text-white px-4 py-2 rounded"
      >
        Sauvegarder
      </button>
    </div>
  );
}