"use client";

import { useState, useMemo } from "react";
import Image from "next/image";
import cloudinaryLoader from "@/lib/cloudinaryLoader";
import { MagnifyingGlass, Newspaper, X, Clock, CaretLeft, CaretRight, Funnel } from "@phosphor-icons/react";
import { useLanguage } from "@/lib/i18n/context";

interface Actualite {
  id:         number;
  title:      string;
  excerpt:    string;
  content:    string;
  tag:        string;
  image_url:  string;
  video_url:  string;
  created_at: string;
}

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

const TAG_COLORS: Record<string, string> = {
  "Nouveauté":      "bg-brand-peach    text-brand-dark",
  "Promotion":      "bg-emerald-500    text-white",
  "Publicité":      "bg-brand-yellow   text-brand-dark",
  "Offre d'emploi": "bg-blue-500       text-white",
  "Solidarité":     "bg-orange-500     text-white",
  "Événement":      "bg-violet-500     text-white",
};

const PAGE_SIZE = 5;

export default function ActualitesClient({ actualites }: { actualites: Actualite[] }) {
  const { t, locale } = useLanguage();
  const isRTL = locale === "ar";
  const fmt = (d: string) => new Date(d).toLocaleDateString(locale === "en" ? "en-GB" : "fr-FR", { day: "numeric", month: "short", year: "numeric" });
  const [search,     setSearch]     = useState("");
  const [activeTag,  setActiveTag]  = useState("Tous");
  const [selectedId, setSelectedId] = useState<number>(actualites[0]?.id ?? 0);
  const [page,       setPage]       = useState(0);
  const [filterOpen, setFilterOpen] = useState(false);

  const filtered = useMemo(() => {
    setPage(0);
    const q = search.toLowerCase().trim();
    return actualites.filter((a) => {
      const matchSearch = !q || a.title.toLowerCase().includes(q) || a.excerpt.toLowerCase().includes(q);
      const matchTag    = activeTag === "Tous" || a.tag === activeTag;
      return matchSearch && matchTag;
    });
  }, [actualites, search, activeTag]);

  const selected    = filtered.find(a => a.id === selectedId) ?? filtered[0];
  const others      = filtered.filter(a => a.id !== selected?.id);
  const totalPages  = Math.ceil(others.length / PAGE_SIZE);
  const pagedOthers = others.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);

  const selectArticle = (id: number) => {
    setSelectedId(id);
    setPage(0);
  };

  return (
    <div className="bg-brand-sand-light min-h-screen pt-24 sm:pt-28 pb-16">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">

        {/* ── Top bar ── */}
        <div className="flex items-center justify-between gap-3 mb-6 sm:mb-8 border-b border-brand-dark/10 pb-5">
          <div>
            <h1 className="text-2xl font-black text-brand-dark" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
              {t.actualites.title}
            </h1>
            <p className="text-brand-dark/40 text-xs font-medium mt-0.5">
              {actualites.length} {actualites.length !== 1 ? t.actualites.articles : t.actualites.article}
            </p>
          </div>

          <div className="flex items-center gap-2">
            {/* Filter button */}
            <div className="relative lg:hidden">
              <button
                onClick={() => setFilterOpen(o => !o)}
                className={`flex items-center gap-1.5 px-3 py-2.5 rounded-xl border text-xs font-bold transition-all ${
                  activeTag !== "Tous"
                    ? "bg-brand-yellow text-brand-dark border-brand-yellow"
                    : "bg-brand-off-white border-brand-dark/12 text-brand-dark/60 hover:text-brand-dark"
                }`}
              >
                <Funnel size={13} weight="bold" />
                <span className="hidden sm:inline">{activeTag === "Tous" ? t.actualites.filter : (t.actualites.tags[activeTag as keyof typeof t.actualites.tags] ?? activeTag)}</span>
                {activeTag !== "Tous" && <X size={10} weight="bold" onClick={e => { e.stopPropagation(); setActiveTag("Tous"); setPage(0); }} />}
              </button>

              {filterOpen && (
                <div className={`absolute ${isRTL ? "left-0" : "right-0"} top-full mt-2 w-44 bg-brand-sand-light border border-brand-dark/10 rounded-2xl shadow-xl overflow-hidden z-20`}>
                  {TAGS.map(tag => (
                    <button
                      key={tag}
                      onClick={() => { setActiveTag(tag); setPage(0); setFilterOpen(false); }}
                      className={`w-full px-4 py-2.5 text-xs font-semibold transition-colors ${
                        activeTag === tag
                          ? "bg-brand-yellow text-brand-dark font-black"
                          : "text-brand-dark/60 hover:text-brand-dark hover:bg-brand-dark/5"
                      }`}
                    >
                      {t.actualites.tags[tag as keyof typeof t.actualites.tags] ?? tag}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Search */}
            <div className="relative">
              <MagnifyingGlass size={14} weight="bold" className={`absolute ${isRTL ? "right-3.5" : "left-3.5"} top-1/2 -translate-y-1/2 text-brand-dark/40 pointer-events-none`} />
              <input
                type="search"
                value={search}
                onChange={e => setSearch(e.target.value)}
                placeholder={t.actualites.search}
                className={`${isRTL ? "pr-9 pl-8" : "pl-9 pr-8"} py-2.5 rounded-xl bg-brand-off-white border border-brand-dark/12 text-sm text-brand-dark placeholder:text-brand-dark/40 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow/20 transition-all w-48 sm:w-72`}
              />
              {search && (
                <button onClick={() => setSearch("")} className={`absolute ${isRTL ? "left-3" : "right-3"} top-1/2 -translate-y-1/2 text-brand-dark/40 hover:text-brand-dark transition-colors`}>
                  <X size={12} weight="bold" />
                </button>
              )}
            </div>
          </div>
        </div>

        {/* ── Layout ── */}
        <div className="flex flex-col lg:flex-row gap-8 lg:gap-10">

          {/* Sidebar categories — desktop only */}
          <aside className="hidden lg:flex flex-col gap-1 w-44 flex-shrink-0 pt-1">
            <p className="text-[10px] font-black text-brand-dark/35 tracking-[0.3em] uppercase mb-3">{t.actualites.categories}</p>
            {TAGS.map(tag => (
              <button
                key={tag}
                onClick={() => { setActiveTag(tag); setPage(0); }}
                className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all duration-150 ${
                  activeTag === tag
                    ? "bg-brand-yellow text-brand-dark font-black"
                    : "text-brand-dark/50 hover:text-brand-dark hover:bg-brand-dark/5"
                }`}
              >
                {t.actualites.tags[tag as keyof typeof t.actualites.tags] ?? tag}
              </button>
            ))}
          </aside>

          {/* Main column */}
          <div className="flex-1 min-w-0">

            {filtered.length === 0 ? (
              <div className="text-center py-20 bg-brand-off-white rounded-2xl">
                <Newspaper size={36} weight="light" className="text-brand-dark/20 mx-auto mb-3" />
                <p className="text-brand-dark/40 text-sm font-semibold">{t.actualites.notFound}</p>
                <button onClick={() => { setSearch(""); setActiveTag("Tous"); }} className="mt-2 text-xs text-brand-dark/35 hover:text-brand-dark underline underline-offset-2 transition-colors">
                  {t.actualites.reset}
                </button>
              </div>
            ) : (
              <div className="flex flex-col sm:flex-row gap-6 sm:gap-8 sm:items-start">

                {/* ── Featured / selected ── */}
                {selected && (
                  <div className="w-full sm:flex-1 sm:min-w-0">
                    {(selected.video_url || selected.image_url) && (
                      <div className="relative w-full h-56 sm:h-72 lg:h-80 rounded-2xl overflow-hidden bg-brand-peach mb-4 sm:mb-5">
                        {selected.video_url ? (
                          <video
                            src={selected.video_url}
                            controls
                            playsInline
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <Image loader={cloudinaryLoader} src={selected.image_url} alt={selected.title} fill sizes="(max-width: 640px) 100vw, 700px" className="object-cover" priority />
                        )}
                      </div>
                    )}
                    <div className="flex items-center gap-3 mb-3">
                      {selected.tag && (
                        <span className={`text-[10px] font-black px-2.5 py-1 rounded-full tracking-widest uppercase ${TAG_COLORS[selected.tag] ?? "bg-brand-dark text-white"}`}>
                          {t.actualites.tags[selected.tag as keyof typeof t.actualites.tags] ?? selected.tag}
                        </span>
                      )}
                      <span className="flex items-center gap-1 text-brand-dark/35 text-xs font-medium">
                        <Clock size={11} weight="bold" /> {fmt(selected.created_at)}
                      </span>
                    </div>
                    <h2 className="text-brand-dark font-black text-xl sm:text-2xl leading-snug mb-3" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
                      {selected.title}
                    </h2>
                    {selected.excerpt && (
                      <p className={`text-brand-dark/65 text-sm leading-relaxed mb-5 ${isRTL ? "border-r-[3px] pr-3" : "border-l-[3px] pl-3"} border-brand-yellow`}>
                        {selected.excerpt}
                      </p>
                    )}
                    {selected.content && (
                      <div className="text-brand-dark/70 text-sm leading-[1.9] whitespace-pre-wrap border-t border-brand-dark/8 pt-5">
                        {selected.content}
                      </div>
                    )}
                  </div>
                )}

                {/* ── Others — right panel (sm+) ── */}
                {others.length > 0 && (
                  <div className="hidden sm:flex flex-col gap-0 w-56 lg:w-60 xl:w-72 flex-shrink-0">
                    <div className="flex items-center justify-between mb-4">
                      <p className="text-[10px] font-black text-brand-dark/35 tracking-[0.3em] uppercase">{t.actualites.others}</p>
                      {totalPages > 1 && (
                        <span className="text-[10px] text-brand-dark/30 font-semibold">{page + 1}/{totalPages}</span>
                      )}
                    </div>

                    {pagedOthers.map((a, idx) => (
                      <button
                        key={a.id}
                        onClick={() => selectArticle(a.id)}
                        className={`group text-left flex gap-3 items-start py-4 transition-all duration-150 ${
                          idx !== 0 ? "border-t border-brand-dark/8" : ""
                        } hover:opacity-80`}
                      >
                        <div className="relative w-16 h-14 flex-shrink-0 rounded-xl overflow-hidden bg-brand-peach">
                          {a.video_url ? (
                            <video src={a.video_url} className="w-full h-full object-cover" muted playsInline />
                          ) : a.image_url ? (
                            <Image loader={cloudinaryLoader} src={a.image_url} alt={a.title} fill sizes="64px" className="object-cover group-hover:scale-105 transition-transform duration-500" />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center">
                              <Newspaper size={14} weight="light" className="text-brand-dark/20" />
                            </div>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          {a.tag && (
                            <span className={`inline-block text-[9px] font-black px-2 py-0.5 rounded-full tracking-widest uppercase mb-1 ${TAG_COLORS[a.tag] ?? "bg-brand-dark text-white"}`}>
                              {t.actualites.tags[a.tag as keyof typeof t.actualites.tags] ?? a.tag}
                            </span>
                          )}
                          <h3 className="text-brand-dark text-xs font-bold leading-snug line-clamp-2 group-hover:text-brand-section transition-colors" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
                            {a.title}
                          </h3>
                          <p className="text-brand-dark/35 text-[10px] font-medium mt-0.5">{fmt(a.created_at)}</p>
                        </div>
                      </button>
                    ))}

                    {totalPages > 1 && (
                      <div className="flex items-center justify-between pt-4 mt-2 border-t border-brand-dark/8">
                        <button
                          onClick={() => setPage(p => Math.max(0, p - 1))}
                          disabled={page === 0}
                          className="flex items-center gap-1 text-[11px] font-bold text-brand-dark/40 hover:text-brand-dark disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                        >
                          {isRTL ? <CaretRight size={11} weight="bold" /> : <CaretLeft size={11} weight="bold" />} {t.actualites.prev}
                        </button>
                        <div className="flex gap-1">
                          {Array.from({ length: totalPages }, (_, i) => (
                            <button
                              key={i}
                              onClick={() => setPage(i)}
                              className={`w-5 h-5 rounded-full text-[10px] font-black transition-all ${
                                i === page ? "bg-brand-yellow text-brand-dark" : "text-brand-dark/30 hover:text-brand-dark"
                              }`}
                            >
                              {i + 1}
                            </button>
                          ))}
                        </div>
                        <button
                          onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}
                          disabled={page === totalPages - 1}
                          className="flex items-center gap-1 text-[11px] font-bold text-brand-dark/40 hover:text-brand-dark disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                        >
                          {t.actualites.next} {isRTL ? <CaretLeft size={11} weight="bold" /> : <CaretRight size={11} weight="bold" />}
                        </button>
                      </div>
                    )}
                  </div>
                )}

              </div>
            )}

            {/* ── Others — mobile (below featured) ── */}
            {others.length > 0 && (
              <div className="sm:hidden mt-8 border-t border-brand-dark/8 pt-6">
                <div className="flex items-center justify-between mb-3">
                  <p className="text-[10px] font-black text-brand-dark/35 tracking-[0.3em] uppercase">{t.actualites.others}</p>
                  {totalPages > 1 && (
                    <span className="text-[10px] text-brand-dark/30 font-semibold">{page + 1}/{totalPages}</span>
                  )}
                </div>

                {pagedOthers.map((a, idx) => (
                  <button
                    key={a.id}
                    onClick={() => { selectArticle(a.id); window.scrollTo({ top: 0, behavior: "smooth" }); }}
                    className={`w-full flex gap-3 items-start py-4 ${idx !== 0 ? "border-t border-brand-dark/8" : ""}`}
                  >
                    <div className="relative w-16 h-14 flex-shrink-0 rounded-xl overflow-hidden bg-brand-peach">
                      {a.video_url ? (
                        <video src={a.video_url} className="w-full h-full object-cover" muted playsInline />
                      ) : a.image_url ? (
                        <Image loader={cloudinaryLoader} src={a.image_url} alt={a.title} fill sizes="64px" className="object-cover" />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center">
                          <Newspaper size={14} weight="light" className="text-brand-dark/20" />
                        </div>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      {a.tag && (
                        <span className={`inline-block text-[9px] font-black px-2 py-0.5 rounded-full tracking-widest uppercase mb-1 ${TAG_COLORS[a.tag] ?? "bg-brand-dark text-white"}`}>
                          {a.tag}
                        </span>
                      )}
                      <h3 className="text-brand-dark text-sm font-bold leading-snug line-clamp-2" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
                        {a.title}
                      </h3>
                      <p className="text-brand-dark/35 text-[10px] mt-0.5">{fmt(a.created_at)}</p>
                    </div>
                  </button>
                ))}

                {totalPages > 1 && (
                  <div className="flex items-center justify-between pt-4 mt-2 border-t border-brand-dark/8">
                    <button
                      onClick={() => setPage(p => Math.max(0, p - 1))}
                      disabled={page === 0}
                      className="flex items-center gap-1 text-xs font-bold text-brand-dark/40 hover:text-brand-dark disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    >
                      {isRTL ? <CaretRight size={12} weight="bold" /> : <CaretLeft size={12} weight="bold" />} {t.actualites.prev}
                    </button>
                    <span className="text-xs font-semibold text-brand-dark/40">{page + 1} / {totalPages}</span>
                    <button
                      onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}
                      disabled={page === totalPages - 1}
                      className="flex items-center gap-1 text-xs font-bold text-brand-dark/40 hover:text-brand-dark disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    >
                      {t.actualites.next} {isRTL ? <CaretLeft size={12} weight="bold" /> : <CaretRight size={12} weight="bold" />}
                    </button>
                  </div>
                )}
              </div>
            )}

          </div>
        </div>
      </div>
    </div>
  );
}