"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

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

export default function ProjectsAdmin() {
  const [projects, setProjects] = useState<Project[]>([]);

  useEffect(() => {
    fetch("/api/projects")
      .then((res) => res.json())
      .then(setProjects);
  }, []);

  async function deleteProject(id: string) {
    const confirmDelete = confirm(
      "Supprimer ce projet ?"
    );

    if (!confirmDelete) return;

    await fetch(`/api/projects/${id}`, {
      method: "DELETE",
    });

    setProjects((prev) =>
      prev.filter(
        (project) => project.id !== id
      )
    );
  }

  return (
    <div>
      <div className="flex justify-between mb-8">
        <h1 className="text-3xl font-bold">
          Projects
        </h1>

        <Link
          href="/admin/projects/create"
          className="bg-black text-white px-4 py-2 rounded"
        >
          Ajouter
        </Link>
      </div>

      <div className="space-y-4">
        {projects.map((project) => (
          <div
            key={project.id}
            className="bg-white border rounded-xl p-6"
          >
            <h2 className="font-bold text-xl">
              {project.title_fr}
            </h2>

            <p className="text-gray-600 mt-2">
              {project.description_fr}
            </p>

            <div className="flex gap-4 mt-4">
              <Link
                href={`/admin/projects/${project.id}`}
                className="text-blue-600"
              >
                Modifier
              </Link>

              <button
                onClick={() =>
                  deleteProject(project.id)
                }
                className="text-red-600"
              >
                Supprimer
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}