"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import {
  Plus, PencilSimple, Trash, Newspaper, X, UploadSimple, Check, VideoCamera, Image as ImageIcon,
} from "@phosphor-icons/react";

/* ─── Constants ──────────────────────────────────────────────────── */

const ACTUALITE_TAGS = [
  "",
  "Nouveauté",
  "Promotion",
  "Publicité",
  "Offre d'emploi",
  "Solidarité",
  "Événement",
];

interface Actualite {
  id:              number;
  title:           string;
  excerpt:         string;
  content:         string;
  tag:             string;
  image_url:       string;
  image_public_id: string;
  video_url:       string;
  video_public_id: string;
  published:       boolean;
  created_at:      string;
  updated_at:      string;
}

const EMPTY_ACTUALITE_FORM = {
  title:     "",
  excerpt:   "",
  content:   "",
  tag:       "",
  published: true,
};

type ActualiteFormData = typeof EMPTY_ACTUALITE_FORM;
type ModalMode         = "add" | "edit" | null;
type MediaType         = "image" | "video";

/* ─── Page ───────────────────────────────────────────────────────── */

export default function ActualitesPage() {
  const [actualites,        setActualites]        = useState<Actualite[]>([]);
  const [actualitesLoading, setActualitesLoading] = useState(false);
  const [actualiteModal,    setActualiteModal]    = useState<ModalMode>(null);
  const [editingActualite,  setEditingActualite]  = useState<Actualite | null>(null);
  const [actualiteForm,     setActualiteForm]     = useState<ActualiteFormData>(EMPTY_ACTUALITE_FORM);

  // Media
  const [mediaType,         setMediaType]         = useState<MediaType>("image");
  const [actualiteImage,    setActualiteImage]    = useState<File | null>(null);
  const [actualitePreview,  setActualitePreview]  = useState("");
  const [actualiteVideo,    setActualiteVideo]    = useState<File | null>(null);
  const [videoPreview,      setVideoPreview]      = useState("");

  const [savingActualite,   setSavingActualite]   = useState(false);
  const [deletingActualite, setDeletingActualite] = useState<number | null>(null);

  const actualiteFileRef = useRef<HTMLInputElement>(null);
  const actualiteVideoRef = useRef<HTMLInputElement>(null);

  const loadActualites = async () => {
    setActualitesLoading(true);
    const res  = await fetch("/api/actualites");
    const data = await res.json();
    setActualites(Array.isArray(data) ? data : []);
    setActualitesLoading(false);
  };

  useEffect(() => { loadActualites(); }, []);

  /* ── Modal helpers ── */
  const openAddActualite = () => {
    setEditingActualite(null);
    setActualiteForm(EMPTY_ACTUALITE_FORM);
    setMediaType("image");
    setActualiteImage(null);
    setActualitePreview("");
    setActualiteVideo(null);
    setVideoPreview("");
    setActualiteModal("add");
  };

  const openEditActualite = (a: Actualite) => {
    setEditingActualite(a);
    setActualiteForm({
      title:     a.title,
      excerpt:   a.excerpt,
      content:   a.content,
      tag:       a.tag ?? "",
      published: a.published,
    });
    setActualiteImage(null);
    setActualiteVideo(null);
    if (a.video_url) {
      setMediaType("video");
      setVideoPreview(a.video_url);
      setActualitePreview("");
    } else {
      setMediaType("image");
      setActualitePreview(a.image_url ?? "");
      setVideoPreview("");
    }
    setActualiteModal("edit");
  };

  const closeActualiteModal = () => {
    setActualiteModal(null);
    setEditingActualite(null);
  };

  const handleMediaTypeSwitch = (type: MediaType) => {
    setMediaType(type);
    if (type === "image") {
      setActualiteVideo(null);
      setVideoPreview("");
    } else {
      setActualiteImage(null);
      setActualitePreview("");
    }
  };

  const handleActualiteImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setActualiteImage(file);
    setActualitePreview(URL.createObjectURL(file));
  };

  const handleActualiteVideoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setActualiteVideo(file);
    setVideoPreview(URL.createObjectURL(file));
  };

  const handleSaveActualite = async (e: React.FormEvent) => {
    e.preventDefault();
    setSavingActualite(true);
    try {
      let image_url       = mediaType === "image" ? (editingActualite?.image_url       ?? "") : "";
      let image_public_id = mediaType === "image" ? (editingActualite?.image_public_id ?? "") : "";
      let video_url       = mediaType === "video" ? (editingActualite?.video_url       ?? "") : "";
      let video_public_id = mediaType === "video" ? (editingActualite?.video_public_id ?? "") : "";

      if (mediaType === "image" && actualiteImage) {
        const fd = new FormData();
        fd.append("file", actualiteImage);
        if (image_public_id) fd.append("old_public_id", image_public_id);
        const upData = await fetch("/api/upload", { method: "POST", body: fd }).then(r => r.json());
        image_url       = upData.url;
        image_public_id = upData.public_id;
      }

      if (mediaType === "video" && actualiteVideo) {
        const fd = new FormData();
        fd.append("file", actualiteVideo);
        if (video_public_id) fd.append("old_public_id", video_public_id);
        const upData = await fetch("/api/upload", { method: "POST", body: fd }).then(r => r.json());
        video_url       = upData.url;
        video_public_id = upData.public_id;
      }

      const body = { ...actualiteForm, image_url, image_public_id, video_url, video_public_id };

      if (actualiteModal === "add") {
        await fetch("/api/actualites", {
          method:  "POST",
          headers: { "Content-Type": "application/json" },
          body:    JSON.stringify(body),
        });
      } else if (editingActualite) {
        await fetch(`/api/actualites/${editingActualite.id}`, {
          method:  "PUT",
          headers: { "Content-Type": "application/json" },
          body:    JSON.stringify(body),
        });
      }

      await loadActualites();
      closeActualiteModal();
    } finally {
      setSavingActualite(false);
    }
  };

  const handleDeleteActualite = async (a: Actualite) => {
    if (!confirm(`Supprimer "${a.title}" ? Cette action est irréversible.`)) return;
    setDeletingActualite(a.id);
    await fetch(`/api/actualites/${a.id}`, { method: "DELETE" });
    await loadActualites();
    setDeletingActualite(null);
  };

  return (
    <main className="max-w-5xl mx-auto px-4 py-6 space-y-5">

      {/* Header action */}
      <div className="flex justify-end">
        <button
          onClick={openAddActualite}
          className="flex items-center gap-1.5 bg-brand-dark text-brand-yellow font-bold px-4 py-2 rounded-full text-xs tracking-wide hover:scale-105 transition-transform duration-200"
        >
          <Plus size={14} weight="bold" />
          <span>Ajouter une actualité</span>
        </button>
      </div>

      <div className="space-y-4">
        {/* Stats */}
        <div className="grid grid-cols-2 gap-3">
          {[
            { label: "Total",    value: actualites.length,                            bg: "bg-white"           },
            { label: "Publiées", value: actualites.filter((a) => a.published).length, bg: "bg-brand-yellow/15" },
          ].map((s) => (
            <div key={s.label} className={`${s.bg} rounded-2xl p-4 border border-brand-dark/8`}>
              <div className="text-2xl font-bold text-brand-dark" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                {s.value}
              </div>
              <div className="text-[10px] font-bold text-brand-dark/40 tracking-wider uppercase mt-0.5">
                {s.label}
              </div>
            </div>
          ))}
        </div>

        {actualitesLoading ? (
          <LoadingSkeleton />
        ) : actualites.length === 0 ? (
          <div className="text-center py-20 bg-white rounded-3xl border border-brand-dark/8">
            <Newspaper size={52} weight="light" className="text-brand-dark/20 mx-auto mb-4" />
            <h3 className="text-base font-bold text-brand-dark mb-1.5">Aucune actualité</h3>
            <p className="text-brand-dark/40 text-sm mb-6">Commencez par ajouter votre première actualité.</p>
            <button
              onClick={openAddActualite}
              className="inline-flex items-center gap-2 bg-brand-dark text-brand-yellow font-bold px-6 py-3 rounded-full text-sm hover:scale-105 transition-transform duration-200"
            >
              <Plus size={15} weight="bold" />
              Ajouter une actualité
            </button>
          </div>
        ) : (
          <div className="space-y-3">
            {actualites.map((a) => (
              <div key={a.id} className="bg-white rounded-3xl border border-brand-dark/8 p-4 flex items-start gap-4">
                {/* Thumbnail */}
                <div className="relative w-24 h-24 flex-shrink-0 rounded-2xl overflow-hidden bg-brand-off-white">
                  {a.video_url ? (
                    <>
                      <video src={a.video_url} className="w-full h-full object-cover" muted playsInline />
                      <div className="absolute inset-0 flex items-center justify-center bg-black/20">
                        <VideoCamera size={22} weight="fill" className="text-white" />
                      </div>
                    </>
                  ) : a.image_url ? (
                    <Image src={a.image_url} alt={a.title} fill className="object-cover" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center">
                      <Newspaper size={28} weight="light" className="text-brand-dark/20" />
                    </div>
                  )}
                </div>

                {/* Info */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1.5">
                    <h3 className="font-bold text-brand-dark text-sm leading-tight flex-1" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                      {a.title}
                    </h3>
                    <span className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border flex-shrink-0 ${
                      a.published
                        ? "bg-green-100 text-green-700 border-green-200"
                        : "bg-brand-dark/8 text-brand-dark/40 border-brand-dark/10"
                    }`}>
                      {a.published ? "Publiée" : "Brouillon"}
                    </span>
                  </div>
                  {a.tag && (
                    <span className="inline-block bg-brand-yellow text-brand-dark text-[9px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full mb-1.5">
                      {a.tag}
                    </span>
                  )}
                  {a.video_url && (
                    <span className="inline-flex items-center gap-1 text-[9px] font-bold text-brand-dark/40 uppercase tracking-wide mb-1.5">
                      <VideoCamera size={10} weight="bold" /> Vidéo
                    </span>
                  )}
                  {a.excerpt && (
                    <p className="text-brand-dark/60 text-xs leading-relaxed line-clamp-2 mb-1.5">
                      {a.excerpt}
                    </p>
                  )}
                  <p className="text-brand-dark/40 text-[10px]">
                    {new Date(a.created_at).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
                  </p>
                </div>

                {/* Actions */}
                <div className="flex gap-2 flex-shrink-0">
                  <button
                    onClick={() => openEditActualite(a)}
                    className="flex items-center justify-center w-8 h-8 border border-brand-dark/15 rounded-full hover:border-brand-dark transition-colors text-brand-dark"
                    title="Modifier"
                  >
                    <PencilSimple size={13} weight="bold" />
                  </button>
                  <button
                    onClick={() => handleDeleteActualite(a)}
                    disabled={deletingActualite === a.id}
                    className="flex items-center justify-center w-8 h-8 border border-red-200 rounded-full hover:bg-red-50 transition-colors text-red-500 disabled:opacity-40"
                    title="Supprimer"
                  >
                    {deletingActualite === a.id
                      ? <span className="w-3 h-3 border border-red-300 border-t-red-500 rounded-full animate-spin" />
                      : <Trash size={13} weight="bold" />
                    }
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* ─── Actualite Modal ───────────────────────────────────────── */}
      {actualiteModal && (
        <div
          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
          onClick={(e) => { if (e.target === e.currentTarget) closeActualiteModal(); }}
        >
          <div className="absolute inset-0 bg-brand-dark/50 backdrop-blur-sm" />
          <div className="relative w-full sm:max-w-lg bg-white rounded-t-3xl sm:rounded-3xl shadow-2xl max-h-[92dvh] flex flex-col overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300">
            <div className="flex items-center justify-between px-5 pt-5 pb-4 border-b border-brand-dark/8 flex-shrink-0">
              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-brand-dark/15 rounded-full sm:hidden" />
              <h2 className="font-bold text-brand-dark" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
                {actualiteModal === "add" ? "Nouvelle actualité" : "Modifier l'actualité"}
              </h2>
              <button type="button" onClick={closeActualiteModal} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-brand-dark/8 text-brand-dark/50 hover:text-brand-dark transition-colors">
                <X size={16} weight="bold" />
              </button>
            </div>
            <form onSubmit={handleSaveActualite} className="overflow-y-auto overscroll-contain flex-1 px-5 py-5 space-y-4" style={{ WebkitOverflowScrolling: "touch" }} onWheel={(e) => e.stopPropagation()}>

              {/* ── Media type toggle ── */}
              <div>
                <label className="block text-[10px] font-bold text-brand-dark/50 tracking-widest uppercase mb-2">Média</label>
                <div className="flex gap-2">
                  {([["image", "Image", ImageIcon], ["video", "Vidéo", VideoCamera]] as const).map(([type, label, Icon]) => (
                    <button
                      key={type}
                      type="button"
                      onClick={() => handleMediaTypeSwitch(type)}
                      className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-bold border transition-colors duration-200 ${
                        mediaType === type
                          ? "bg-brand-dark text-brand-yellow border-brand-dark"
                          : "bg-brand-sand-light text-brand-dark/50 border-brand-dark/10 hover:text-brand-dark"
                      }`}
                    >
                      <Icon size={13} weight="bold" />
                      {label}
                    </button>
                  ))}
                </div>
              </div>

              {/* ── Image upload ── */}
              {mediaType === "image" && (
                <div>
                  <div
                    role="button" tabIndex={0}
                    onClick={() => actualiteFileRef.current?.click()}
                    onKeyDown={(e) => e.key === "Enter" && actualiteFileRef.current?.click()}
                    className="relative h-36 bg-brand-off-white rounded-2xl border-2 border-dashed border-brand-dark/15 flex items-center justify-center cursor-pointer hover:border-brand-yellow transition-colors overflow-hidden group"
                  >
                    {actualitePreview ? (
                      <>
                        <Image src={actualitePreview} alt="aperçu" fill className="object-cover" />
                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/15 transition-colors flex items-center justify-center">
                          <UploadSimple size={22} weight="bold" className="text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" />
                        </div>
                      </>
                    ) : (
                      <div className="flex flex-col items-center gap-1.5 text-brand-dark/30 group-hover:text-brand-dark/60 transition-colors select-none">
                        <UploadSimple size={30} weight="light" />
                        <span className="text-xs font-semibold">Choisir une image</span>
                      </div>
                    )}
                  </div>
                  <input ref={actualiteFileRef} type="file" accept="image/*" className="hidden" onChange={handleActualiteImageChange} />
                </div>
              )}

              {/* ── Video upload ── */}
              {mediaType === "video" && (
                <div>
                  <div
                    role="button" tabIndex={0}
                    onClick={() => actualiteVideoRef.current?.click()}
                    onKeyDown={(e) => e.key === "Enter" && actualiteVideoRef.current?.click()}
                    className="relative h-36 bg-brand-off-white rounded-2xl border-2 border-dashed border-brand-dark/15 flex items-center justify-center cursor-pointer hover:border-brand-yellow transition-colors overflow-hidden group"
                  >
                    {videoPreview ? (
                      <>
                        <video src={videoPreview} className="absolute inset-0 w-full h-full object-cover" muted playsInline />
                        <div className="absolute inset-0 bg-black/20 group-hover:bg-black/35 transition-colors flex items-center justify-center">
                          <UploadSimple size={22} weight="bold" className="text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" />
                        </div>
                      </>
                    ) : (
                      <div className="flex flex-col items-center gap-1.5 text-brand-dark/30 group-hover:text-brand-dark/60 transition-colors select-none">
                        <VideoCamera size={30} weight="light" />
                        <span className="text-xs font-semibold">Choisir une vidéo</span>
                      </div>
                    )}
                  </div>
                  <input ref={actualiteVideoRef} type="file" accept="video/*" className="hidden" onChange={handleActualiteVideoChange} />
                </div>
              )}

              {/* ── Title ── */}
              <div>
                <label className="block text-[10px] font-bold text-brand-dark/50 tracking-widest uppercase mb-1.5">Titre <span className="text-red-400">*</span></label>
                <input required value={actualiteForm.title} onChange={(e) => setActualiteForm((f) => ({ ...f, title: e.target.value }))} placeholder="Titre de l'actualité" className="w-full px-4 py-2.5 rounded-xl border border-brand-dark/15 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow/25 text-sm text-brand-dark placeholder:text-brand-dark/25 transition-all" />
              </div>
              {/* ── Tag ── */}
              <div>
                <label className="block text-[10px] font-bold text-brand-dark/50 tracking-widests uppercase mb-2">Tag <span className="normal-case font-normal text-brand-dark/30">(optionnel)</span></label>
                <div className="flex gap-1.5 flex-wrap">
                  {ACTUALITE_TAGS.filter(t => t !== "").map((t) => (
                    <button
                      key={t}
                      type="button"
                      onClick={() => setActualiteForm((f) => ({ ...f, tag: f.tag === t ? "" : t }))}
                      className={`flex-shrink-0 px-2.5 py-1 rounded-full text-[11px] font-bold transition-colors duration-200 ${
                        actualiteForm.tag === t
                          ? "bg-brand-dark text-brand-yellow"
                          : "bg-brand-sand-light text-brand-dark/60 hover:text-brand-dark border border-brand-dark/10"
                      }`}
                    >
                      {t}
                    </button>
                  ))}
                </div>
              </div>
              {/* ── Excerpt ── */}
              <div>
                <label className="block text-[10px] font-bold text-brand-dark/50 tracking-widest uppercase mb-1.5">Résumé <span className="normal-case font-normal text-brand-dark/30">(court)</span></label>
                <textarea rows={2} value={actualiteForm.excerpt} onChange={(e) => setActualiteForm((f) => ({ ...f, excerpt: e.target.value }))} placeholder="Courte description visible dans la liste..." className="w-full px-4 py-2.5 rounded-xl border border-brand-dark/15 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow/25 text-sm text-brand-dark placeholder:text-brand-dark/25 transition-all resize-none" />
              </div>
              {/* ── Content ── */}
              <div>
                <label className="block text-[10px] font-bold text-brand-dark/50 tracking-widest uppercase mb-1.5">Contenu <span className="normal-case font-normal text-brand-dark/30">(texte complet)</span></label>
                <textarea rows={6} value={actualiteForm.content} onChange={(e) => setActualiteForm((f) => ({ ...f, content: e.target.value }))} placeholder="Contenu complet de l'actualité..." className="w-full px-4 py-2.5 rounded-xl border border-brand-dark/15 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow/25 text-sm text-brand-dark placeholder:text-brand-dark/25 transition-all resize-none" />
              </div>
              {/* ── Published toggle ── */}
              <div className="flex items-center justify-between bg-brand-sand-light rounded-xl px-4 py-3">
                <div>
                  <div className="text-sm font-bold text-brand-dark">Publier</div>
                  <div className="text-[10px] text-brand-dark/40 mt-0.5">Visible sur le site public</div>
                </div>
                <button type="button" onClick={() => setActualiteForm((f) => ({ ...f, published: !f.published }))} aria-checked={actualiteForm.published} role="switch" className={`relative w-11 h-6 rounded-full transition-colors duration-300 flex-shrink-0 ${actualiteForm.published ? "bg-brand-dark" : "bg-brand-dark/20"}`}>
                  <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm flex items-center justify-center transition-transform duration-300 ${actualiteForm.published ? "translate-x-5" : "translate-x-0"}`}>
                    {actualiteForm.published && <Check size={10} weight="bold" className="text-brand-dark" />}
                  </span>
                </button>
              </div>
              {/* ── Submit ── */}
              <div className="pb-safe">
                <button type="submit" disabled={savingActualite} className="w-full bg-brand-dark text-brand-yellow font-bold py-3.5 rounded-full text-sm tracking-wide flex items-center justify-center gap-2 disabled:opacity-50 hover:scale-[1.01] active:scale-[0.99] transition-transform duration-200 mt-1">
                  {savingActualite && <span className="w-4 h-4 border-2 border-brand-yellow/30 border-t-brand-yellow rounded-full animate-spin" />}
                  {savingActualite ? "Enregistrement..." : actualiteModal === "add" ? "Ajouter l'actualité" : "Enregistrer les modifications"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

    </main>
  );
}

function LoadingSkeleton() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="bg-white rounded-3xl overflow-hidden border border-brand-dark/8 animate-pulse">
          <div className="h-40 bg-brand-dark/5" />
          <div className="p-4 space-y-2.5">
            <div className="h-3.5 bg-brand-dark/8 rounded-full w-3/4" />
            <div className="h-3   bg-brand-dark/5 rounded-full w-1/2" />
            <div className="h-3   bg-brand-dark/5 rounded-full w-full" />
          </div>
        </div>
      ))}
    </div>
  );
}