"use client";

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

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

export default function ServicesAdmin() {
  const [services, setServices] = useState<Service[]>([]);

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

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

    if (!confirmDelete) return;

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

    setServices((prev) =>
      prev.filter((service) => service.id !== id)
    );
  }

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

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

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

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

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

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