"use client";

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

type Lang = "fr" | "en";

type PageData = {
  fr: { title: string; content: string };
  en: { title: string; content: string };
};

export default function ContentEditor() {
  const params = useParams();
  const page = typeof params.page === "string" ? params.page : "";

  const [lang, setLang] = useState<Lang>("fr");

  const [data, setData] = useState<PageData>({
    fr: { title: "", content: "" },
    en: { title: "", content: "" },
  });

  const [loading, setLoading] = useState(true);

 useEffect(() => {
  const load = async () => {
    try {
      const res = await fetch(`/api/content/${page}`);

      if (!res.ok) {
        setLoading(false);
        return;
      }

      const json = await res.json();

      if (json?.content) {
        setData(json.content);
      }
    } catch (err) {
      console.error("Load error", err);
    } finally {
      setLoading(false);
    }
  };

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

  const save = async () => {
    await fetch(`/api/content/${page}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    const [saving, setSaving] = useState(false);
  };

  if (!page) {
    return <div className="p-10">Page invalide</div>;
  }

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

  return (
  <div className="max-w-4xl mx-auto p-10">
    {/* HEADER */}
    <div className="mb-10">
      <h1 className="text-4xl font-bold mb-2">
        Gestion du contenu
      </h1>

      <p className="text-gray-500">
        Modifier le contenu de la page :
        <span className="font-semibold ml-2 capitalize">
          {page}
        </span>
      </p>
    </div>

    {/* LANG SWITCH */}
    <div className="flex gap-3 mb-8">
      <button
        onClick={() => setLang("fr")}
        className={`px-5 py-2 rounded-lg border transition ${
          lang === "fr"
            ? "bg-black text-white"
            : "bg-white"
        }`}
      >
        Français
      </button>

      <button
        onClick={() => setLang("en")}
        className={`px-5 py-2 rounded-lg border transition ${
          lang === "en"
            ? "bg-black text-white"
            : "bg-white"
        }`}
      >
        English
      </button>
    </div>

    {/* CARD */}
    <div className="bg-white border rounded-2xl p-8 shadow-sm space-y-6">

      {/* TITLE */}
      <div>
        <label className="block text-sm font-semibold mb-2 text-gray-700">
          Titre principal
        </label>

        <input
          type="text"
          className="w-full border rounded-lg p-3 outline-none focus:ring-2 focus:ring-black"
          placeholder="Ex: Teknov Ingénierie"
          value={data[lang].title}
          onChange={(e) =>
            setData({
              ...data,
              [lang]: {
                ...data[lang],
                title: e.target.value,
              },
            })
          }
        />
      </div>

      {/* CONTENT */}
      <div>
        <label className="block text-sm font-semibold mb-2 text-gray-700">
          Description / Contenu
        </label>

        <textarea
          className="w-full border rounded-lg p-4 h-56 outline-none focus:ring-2 focus:ring-black resize-none"
          placeholder="Ajouter une description, présentation de l’entreprise, informations importantes..."
          value={data[lang].content}
          onChange={(e) =>
            setData({
              ...data,
              [lang]: {
                ...data[lang],
                content: e.target.value,
              },
            })
          }
        />
      </div>

      {/* SAVE BUTTON */}
      <div className="pt-4">
        <button
          onClick={save}
          className="bg-black text-white px-6 py-3 rounded-lg hover:opacity-90 transition"
        >
          Sauvegarder les modifications
        </button>
      </div>
    </div>
  </div>
);
}