"use client";

import { useEffect, useState } from "react";
import { ArrowLeft } from "lucide-react";
import { EditableSection } from "@/components/admin/EditableSection";
import { useEditMode } from "@/context/EditModeContext";

type PresidentMessage = {
  presidentName: string;
  presidentTitle: string;
  introText: string;
  message: string;
};

const DEFAULTS: PresidentMessage = {
  presidentName: "La Présidente",
  presidentTitle: "Association Nutrition Et Développement",
  introText:
    "Fondée en 2002, l'ANED œuvre depuis plus de vingt ans pour la lutte contre la malnutrition et l'insécurité alimentaire en Mauritanie.",
  message:
    "Bonjour à toutes et à tous,\n\nL'Association Nutrition Et Développement (ANED) est une organisation mauritanienne, d'envergure nationale et pionnière dans la lutte contre la malnutrition et l'insécurité alimentaire. Elle promeut le genre et le bien-être de la famille en particulier les femmes et les enfants.\n\nDurant plus de vingt ans d'action, ANED a intervenu dans les Wilayas/régions du Brakna, du Gorgol, du Guidimakha, de l'Assaba, de l'Inchiri, des 2 Hodhs et les 3 wilayas de Nouakchott.\n\nCe site Web, créé par ANED, se veut d'abord une vitrine qui met en exergue nos différentes interventions, nos partenaires techniques et les personnes pour lesquelles et avec lesquelles nous travaillons.\n\nIl se veut ensuite aussi un outil de communication envers les populations, les décideurs nationaux, les organisations de développement et humanitaire, les institutions de coopération internationales pour montrer notre contribution à la réalisation de la Stratégie Nationale de Croissance Accélérée et de Prospérité Partagée (SCAPP) des Objectifs de Développement Durable (ODD).\n\nIl se veut enfin un moyen efficace pour renforcer la visibilité sur nos actions et sur les appuis multiformes de nos partenaires institutionnels, technique et financier sans lesquels nous n'aurions pas produits des changements dans la vie des communautés bénéficiaires.\n\nJe vous invite à consulter régulièrement ce site pour cheminer durablement avec ANED et ses équipes dans la mise en œuvre des différents projets.\n\nCe site est le nôtre mais aussi le vôtre, c'est pour cette raison je vous exhorte à partager avec nous vos impressions, vos recommandations et vos conseils afin d'améliorer son contenu et promouvoir nos actions.\n\nMerci à toutes et à tous",
};

export default function MotDeLaPresidentePage() {
  const [content, setContent] = useState<PresidentMessage>(DEFAULTS);
  const { contentVersion } = useEditMode();

  useEffect(() => {
    fetch("/api/president-message")
      .then((r) => r.json())
      .then((data) => setContent({ ...DEFAULTS, ...data }))
      .catch(console.error);
  }, [contentVersion]);

  const paragraphs = content.message
    .split(/\n\n+/)
    .map((p) => p.trim())
    .filter(Boolean);

  return (
    <main className="min-h-screen bg-white pt-28 pb-20">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Back link */}
        <a
          href="/"
          className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-[#4A7C59] transition-colors mb-10"
        >
          <ArrowLeft size={15} />
          Retour à l&apos;accueil
        </a>

        {/* Header */}
        <div className="mb-12">
          <p className="text-xs font-semibold text-[#4A7C59] uppercase tracking-widest mb-3 flex items-center gap-2">
            <span className="w-6 h-px bg-[#4A7C59]" />
            À propos
          </p>
          <h1 className="font-serif text-4xl sm:text-5xl font-black text-[#2C3E50] leading-tight">
            Mot de la Présidente
          </h1>
        </div>

        {/* Intro card */}
        <EditableSection sectionId="president-message" label="Mot de la Présidente" className="mb-12">
          <div className="p-8 bg-gradient-to-br from-[#4A7C59]/5 to-white rounded-2xl border border-[#4A7C59]/15">
            <h2 className="font-serif text-xl font-bold text-[#2C3E50] mb-1">{content.presidentName}</h2>
            <p className="text-sm text-[#4A7C59] font-medium mb-3">{content.presidentTitle}</p>
            <p className="text-gray-600 text-sm leading-relaxed">{content.introText}</p>
          </div>
        </EditableSection>

        {/* Message */}
        <div className="prose prose-lg max-w-none">
          <div className="font-serif text-[100px] leading-none text-[#4A7C59]/15 select-none -mb-6">
            &ldquo;
          </div>

          <div className="space-y-5 text-gray-700 text-base sm:text-lg leading-relaxed">
            {paragraphs.map((para, i) => (
              <p
                key={i}
                className={
                  i === 0
                    ? "font-medium text-gray-900"
                    : i === paragraphs.length - 1
                    ? "font-semibold text-[#2C3E50] text-xl"
                    : ""
                }
              >
                {para}
              </p>
            ))}
          </div>

          {/* Closing quote & signature */}
          <div className="mt-10 flex items-end justify-between gap-4 flex-wrap border-t border-gray-100 pt-8">
            <div className="font-serif text-[80px] leading-none text-[#4A7C59]/15 select-none">
              &rdquo;
            </div>
            <div className="text-right">
              <p className="font-bold text-[#2C3E50] text-lg">{content.presidentName}</p>
              <p className="text-[#4A7C59] text-sm">{content.presidentTitle}</p>
            </div>
          </div>
        </div>

      </div>
    </main>
  );
}