"use client";

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

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

export default function ProjectEditPage() {
  const params = useParams();
  const router = useRouter();

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

  const [project, setProject] =
    useState<Project | null>(null);

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

      const data = await res.json();

      setProject(data);
    }

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

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

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

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

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

    router.push("/admin/projects");
  };

  if (!project) {
    return <div className="p-10">Chargement...</div>;
  }

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

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

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

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