"use client";

import { useState, useTransition } from "react";
import { updateSiteSetting } from "@/lib/content-actions";
import { Plus, Trash2, ChevronDown, ChevronUp } from "lucide-react";
import type { Article, ArticleSection } from "@/lib/data/types";

function toLines(arr?: string[]): string {
  return (arr || []).join("\n");
}
function fromLines(text: string): string[] {
  return text
    .split("\n")
    .map((s) => s.trim())
    .filter(Boolean);
}

const emptySection: ArticleSection = { heading: "", headingEn: "", paragraphs: [], paragraphsEn: [] };

function emptyArticle(): Article {
  return {
    slug: "",
    title: "",
    titleEn: "",
    category: "",
    categoryEn: "",
    excerpt: "",
    excerptEn: "",
    readMinutes: 5,
    imageUrl: "/illustrations/door-double.svg",
    keyTakeaways: [],
    keyTakeawaysEn: [],
    sections: [{ ...emptySection }],
  };
}

export default function ArticlesEditor({ articles }: { articles: Article[] }) {
  const [items, setItems] = useState<Article[]>(articles);
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

  function update(i: number, patch: Partial<Article>) {
    setItems((prev) => prev.map((a, idx) => (idx === i ? { ...a, ...patch } : a)));
  }

  function updateSection(articleIdx: number, sectionIdx: number, patch: Partial<ArticleSection>) {
    setItems((prev) =>
      prev.map((a, idx) => {
        if (idx !== articleIdx) return a;
        const sections = (a.sections || []).map((s, sIdx) => (sIdx === sectionIdx ? { ...s, ...patch } : s));
        return { ...a, sections };
      })
    );
  }

  function addSection(articleIdx: number) {
    setItems((prev) =>
      prev.map((a, idx) => (idx === articleIdx ? { ...a, sections: [...(a.sections || []), { ...emptySection }] } : a))
    );
  }

  function removeSection(articleIdx: number, sectionIdx: number) {
    setItems((prev) =>
      prev.map((a, idx) =>
        idx === articleIdx ? { ...a, sections: (a.sections || []).filter((_, sIdx) => sIdx !== sectionIdx) } : a
      )
    );
  }

  function addArticle() {
    setItems((prev) => [emptyArticle(), ...prev]);
    setOpenIndex(0);
  }

  function removeArticle(i: number) {
    if (!confirm("حذف هذا المقال نهائياً؟")) return;
    setItems((prev) => prev.filter((_, idx) => idx !== i));
    setOpenIndex(null);
  }

  function handleSave() {
    setMessage(null);
    const slugs = items.map((a) => a.slug.trim());
    if (slugs.some((s) => !s)) {
      setMessage("كل مقال يحتاج معرّف (slug) بالإنجليزية");
      return;
    }
    if (new Set(slugs).size !== slugs.length) {
      setMessage("لا يمكن تكرار نفس المعرّف (slug) في أكثر من مقال");
      return;
    }
    startTransition(async () => {
      const result = await updateSiteSetting("articles", items);
      setMessage(result.ok ? "تم الحفظ ✓" : result.error || "تعذّر الحفظ");
    });
  }

  return (
    <div className="rounded-2xl border border-black/10 bg-white p-6">
      <div className="mb-4 flex items-center justify-between gap-3">
        <div>
          <h3 className="font-bold text-[#1A1A1A]">مقالات مركز المعرفة</h3>
          <p className="mt-1 text-xs text-[#8A8A8A]">إضافة أو تعديل أو حذف مقالات مركز المعرفة — تظهر فوراً للزوار.</p>
        </div>
        <button
          type="button"
          onClick={addArticle}
          className="flex shrink-0 items-center gap-1.5 rounded-lg border border-dashed border-black/20 px-3 py-1.5 text-xs font-semibold text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
        >
          <Plus size={14} /> مقال جديد
        </button>
      </div>

      <div className="space-y-3">
        {items.map((a, i) => {
          const open = openIndex === i;
          return (
            <div key={i} className="rounded-xl border border-black/10 bg-[#FAFAF8]">
              <div className="flex items-center justify-between gap-3 p-4">
                <button
                  type="button"
                  onClick={() => setOpenIndex(open ? null : i)}
                  className="flex flex-1 items-center gap-2 text-start"
                >
                  {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                  <span className="font-semibold text-[#1A1A1A]">{a.title || "(مقال بدون عنوان)"}</span>
                  <span className="font-mono text-[11px] text-[#B0B0B0]">{a.slug || "—"}</span>
                </button>
                <button
                  type="button"
                  onClick={() => removeArticle(i)}
                  className="rounded-lg p-1.5 text-[#B0B0B0] transition hover:bg-red-50 hover:text-red-600"
                  aria-label="حذف"
                >
                  <Trash2 size={15} />
                </button>
              </div>

              {open && (
                <div className="space-y-4 border-t border-black/10 p-4">
                  <div className="grid gap-3 sm:grid-cols-2">
                    <TextField label="المعرّف (slug بالإنجليزية)" value={a.slug} onChange={(v) => update(i, { slug: v })} dir="ltr" />
                    <TextField
                      label="دقائق القراءة"
                      value={String(a.readMinutes)}
                      onChange={(v) => update(i, { readMinutes: Number(v) || 0 })}
                      dir="ltr"
                    />
                    <TextField label="العنوان (عربي)" value={a.title} onChange={(v) => update(i, { title: v })} />
                    <TextField label="Title (EN)" value={a.titleEn || ""} onChange={(v) => update(i, { titleEn: v })} dir="ltr" />
                    <TextField label="التصنيف (عربي)" value={a.category} onChange={(v) => update(i, { category: v })} />
                    <TextField label="Category (EN)" value={a.categoryEn || ""} onChange={(v) => update(i, { categoryEn: v })} dir="ltr" />
                    <div className="sm:col-span-2">
                      <TextField label="رابط الصورة" value={a.imageUrl} onChange={(v) => update(i, { imageUrl: v })} dir="ltr" />
                    </div>
                    <div className="sm:col-span-2">
                      <TextField label="ملخص (عربي)" value={a.excerpt} onChange={(v) => update(i, { excerpt: v })} textarea />
                    </div>
                    <div className="sm:col-span-2">
                      <TextField label="Excerpt (EN)" value={a.excerptEn || ""} onChange={(v) => update(i, { excerptEn: v })} textarea dir="ltr" />
                    </div>
                    <div className="sm:col-span-2">
                      <TextField
                        label="أهم النقاط (كل نقطة في سطر)"
                        value={toLines(a.keyTakeaways)}
                        onChange={(v) => update(i, { keyTakeaways: fromLines(v) })}
                        textarea
                        rows={3}
                      />
                    </div>
                    <div className="sm:col-span-2">
                      <TextField
                        label="Key Takeaways (EN, one per line)"
                        value={toLines(a.keyTakeawaysEn)}
                        onChange={(v) => update(i, { keyTakeawaysEn: fromLines(v) })}
                        textarea
                        rows={3}
                        dir="ltr"
                      />
                    </div>
                  </div>

                  <div>
                    <div className="mb-2 flex items-center justify-between">
                      <h4 className="text-sm font-bold text-[#1A1A1A]">أقسام المقال</h4>
                      <button
                        type="button"
                        onClick={() => addSection(i)}
                        className="flex items-center gap-1.5 rounded-lg border border-dashed border-black/20 px-2.5 py-1 text-xs font-semibold text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
                      >
                        <Plus size={13} /> إضافة قسم
                      </button>
                    </div>
                    <div className="space-y-3">
                      {(a.sections || []).map((sec, sIdx) => (
                        <div key={sIdx} className="rounded-lg border border-black/10 bg-white p-3">
                          <div className="mb-2 flex items-center justify-between">
                            <span className="font-mono text-[10px] text-[#B0B0B0]">قسم #{sIdx + 1}</span>
                            <button
                              type="button"
                              onClick={() => removeSection(i, sIdx)}
                              className="rounded p-1 text-[#B0B0B0] transition hover:bg-red-50 hover:text-red-600"
                              aria-label="حذف القسم"
                            >
                              <Trash2 size={13} />
                            </button>
                          </div>
                          <div className="grid gap-2 sm:grid-cols-2">
                            <TextField label="عنوان القسم (عربي)" value={sec.heading} onChange={(v) => updateSection(i, sIdx, { heading: v })} />
                            <TextField label="Heading (EN)" value={sec.headingEn || ""} onChange={(v) => updateSection(i, sIdx, { headingEn: v })} dir="ltr" />
                            <div className="sm:col-span-2">
                              <TextField
                                label="فقرات القسم (كل فقرة في سطر)"
                                value={toLines(sec.paragraphs)}
                                onChange={(v) => updateSection(i, sIdx, { paragraphs: fromLines(v) })}
                                textarea
                                rows={3}
                              />
                            </div>
                            <div className="sm:col-span-2">
                              <TextField
                                label="Paragraphs (EN, one per line)"
                                value={toLines(sec.paragraphsEn)}
                                onChange={(v) => updateSection(i, sIdx, { paragraphsEn: fromLines(v) })}
                                textarea
                                rows={3}
                                dir="ltr"
                              />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="mt-4 flex items-center gap-3">
        <button
          onClick={handleSave}
          disabled={isPending}
          className="rounded-lg bg-[#1A1A1A] px-4 py-2 text-sm font-semibold text-white transition hover:bg-black disabled:opacity-60"
        >
          {isPending ? "جارِ الحفظ..." : "حفظ كل المقالات"}
        </button>
        {message && (
          <span className={`text-xs ${message.includes("✓") ? "text-emerald-600" : "text-red-500"}`}>{message}</span>
        )}
      </div>
    </div>
  );
}

function TextField({
  label,
  value,
  onChange,
  dir,
  textarea,
  rows,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  dir?: "ltr" | "rtl";
  textarea?: boolean;
  rows?: number;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">{label}</label>
      {textarea ? (
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          dir={dir}
          rows={rows || 2}
          className="w-full resize-none rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
        />
      ) : (
        <input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          dir={dir}
          className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
        />
      )}
    </div>
  );
}