/* ============================================================
   ADMIN POST EDITOR — create / edit, with live preview
   window: AdminEditor
   ============================================================ */
(function () {
  const { useApp, H, Icon, useCurrentStaff, ImgPH } = window;

  function AdminEditor({ id }) {
    const app = useApp();
    const me = useCurrentStaff();
    const existing = id ? app.state.posts.find(p => p.id === id) : null;

    const cats = window.SEED.CATEGORIES.filter(c => me.cats.includes("all") || me.cats.includes(c.slug));
    const [form, setForm] = React.useState(existing ? { ...existing,
        mediaKind: existing.mediaKind || (existing.img ? "image" : "none"),
        mediaUrl: existing.mediaUrl || "",
        mediaThumbnail: existing.mediaThumbnail || existing.img || "",
      } : {
      bn: "", en: "", excerpt_bn: "", excerpt_en: "", cat: (cats[0] || {}).slug || "bangladesh",
      author: me.name, img: "", special: false, source: "manual", status: "draft", ts: Date.now(),
      body: "", body_en: "", mins: 3,
      mediaKind: "none", mediaUrl: "", mediaThumbnail: "",
    });
    const [saving, setSaving] = React.useState(false);
    const [errors, setErrors] = React.useState({});
    const set = (k, v) => {
      setForm(f => ({ ...f, [k]: v }));
      setErrors(e => (e[k] ? { ...e, [k]: undefined } : e));
    };
    const valid = form.bn.trim().length > 3 && !!(form.body || "").trim();

    const validate = () => {
      const errs = {};
      if (form.bn.trim().length < 4) errs.bn = "শিরোনাম দিন (কমপক্ষে ৪ অক্ষর)";
      else if (form.bn.trim().length > 500) errs.bn = "শিরোনাম ৫০০ অক্ষরের মধ্যে রাখুন";
      if (!(form.body || "").trim()) errs.body = "মূল বিবরণ লিখুন";
      const m = Number(form.mins);
      if (form.mins !== "" && form.mins != null && (!Number.isFinite(m) || m < 1 || m > 120)) errs.mins = "পড়ার সময় ১–১২০ মিনিটের মধ্যে দিন";
      return errs;
    };

    const save = async (status) => {
      if (saving) return;
      const errs = validate();
      setErrors(errs);
      const first = Object.values(errs).find(Boolean);
      if (first) { app.toast(first); return; }
      // For embed kind, derive a YouTube thumbnail when missing.
      let thumb = form.mediaThumbnail;
      if (form.mediaKind === "embed" && !thumb && form.mediaUrl) {
        const m = form.mediaUrl.match(/(?:youtube\.com\/watch\?(?:[^&]*&)*v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]{6,})/i);
        if (m) thumb = "https://img.youtube.com/vi/" + m[1] + "/hqdefault.jpg";
      }
      const post = { ...form, status, ts: existing ? form.ts : Date.now(),
        excerpt_bn: form.excerpt_bn || form.bn,
        img: form.mediaKind === "image" ? (form.img || form.mediaUrl) : (thumb || form.img || null),
        mediaKind: form.mediaKind,
        mediaUrl: form.mediaUrl || null,
        mediaThumbnail: thumb || null,
        id: existing ? existing.id : undefined };
      setSaving(true);
      const ok = await app.savePost(post);
      setSaving(false);
      if (ok) app.nav("admin-posts");
    };

    const remove = async () => {
      if (saving) return;
      setSaving(true);
      const ok = await app.deletePost(existing.id);
      setSaving(false);
      if (ok) app.nav("admin-posts");
    };

    const fieldErr = (k) => errors[k]
      ? <span style={{ color: "var(--red, #c0392b)", fontSize: 12.5 }}>{errors[k]}</span>
      : null;

    const canPublish = me.perms.publish;

    return (
      <div className="fade-in">
        <button className="btn ghost sm" onClick={() => app.nav("admin-posts")} style={{ marginBottom: 14 }}><Icon name="chevR" size={15} /> সব পোস্টে ফিরুন</button>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 24, alignItems: "start" }} className="editor-grid">
          {/* form */}
          <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: 26 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <h1 className="serif nowrap" style={{ fontSize: 24, fontWeight: 700 }}>{existing ? "পোস্ট সম্পাদনা" : "নতুন পোস্ট"}</h1>
              {existing && <span className={"badge " + (existing.source === "rss" ? "gray" : "teal")}>{existing.source === "rss" ? "RSS উৎস" : "নিজস্ব"}</span>}
            </div>

            <div style={{ display: "grid", gap: 18 }}>
              <label className="field"><span className="lbl">শিরোনাম (বাংলা)</span>
                <textarea rows={2} value={form.bn} onChange={e => set("bn", e.target.value)} placeholder="সংবাদের শিরোনাম লিখুন…"
                  style={{ fontFamily: "var(--font-head)", fontSize: 20, lineHeight: 1.3, resize: "vertical" }} />
                {fieldErr("bn")}</label>

              <label className="field"><span className="lbl">শিরোনাম (English)</span>
                <input value={form.en} onChange={e => set("en", e.target.value)} placeholder="English headline (optional)" /></label>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 120px", gap: 16 }}>
                <label className="field"><span className="lbl">বিভাগ</span>
                  <select value={form.cat} onChange={e => set("cat", e.target.value)}>
                    {cats.map(c => <option key={c.slug} value={c.slug}>{c.bn}</option>)}
                  </select></label>
                <label className="field"><span className="lbl">লেখক / প্রতিবেদক</span>
                  <input value={form.author} onChange={e => set("author", e.target.value)} /></label>
                <label className="field"><span className="lbl">পড়ার সময় (মিনিট)</span>
                  <input type="number" min={1} max={120} value={form.mins ?? 3} onChange={e => set("mins", e.target.value)} />
                  {fieldErr("mins")}</label>
              </div>

              <label className="field"><span className="lbl">সারাংশ</span>
                <textarea rows={2} value={form.excerpt_bn} onChange={e => set("excerpt_bn", e.target.value)} placeholder="সংক্ষিপ্ত বিবরণ…" style={{ resize: "vertical" }} /></label>

              <label className="field"><span className="lbl">সারাংশ (English) <span className="muted" style={{ fontWeight: 400 }}>(ঐচ্ছিক)</span></span>
                <textarea rows={2} value={form.excerpt_en || ""} onChange={e => set("excerpt_en", e.target.value)} placeholder="English excerpt (optional)" style={{ resize: "vertical" }} /></label>

              <label className="field"><span className="lbl">মূল বিবরণ</span>
                <textarea rows={6} value={form.body} onChange={e => set("body", e.target.value)} placeholder="সংবাদের বিস্তারিত লিখুন…" style={{ fontFamily: "var(--font-head)", fontSize: 16, lineHeight: 1.7, resize: "vertical" }} />
                {fieldErr("body")}</label>

              <label className="field"><span className="lbl">মূল বিবরণ (English) <span className="muted" style={{ fontWeight: 400 }}>(ঐচ্ছিক)</span></span>
                <textarea rows={4} value={form.body_en || ""} onChange={e => set("body_en", e.target.value)} placeholder="English body (optional)" style={{ fontSize: 15, lineHeight: 1.6, resize: "vertical" }} /></label>

              {/* media kind selector */}
              <div>
                <span className="lbl" style={{ display: "block", marginBottom: 6 }}>মিডিয়া ধরন</span>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {[["image", "ছবি"], ["video", "ভিডিও (URL)"], ["embed", "ইউটিউব / ভিমিও"], ["audio", "অডিও"], ["none", "কোনোটি নয়"]].map(([k, label]) => (
                    <button key={k} type="button" onClick={() => set("mediaKind", k)}
                      style={{ padding: "7px 12px", border: "1px solid " + (form.mediaKind === k ? "var(--accent)" : "var(--line)"),
                        background: form.mediaKind === k ? "var(--accent-wash)" : "var(--surface)",
                        color: form.mediaKind === k ? "var(--accent-ink)" : "var(--ink-2)",
                        borderRadius: 999, cursor: "pointer", fontSize: 13, fontWeight: 600 }}>{label}</button>
                  ))}
                </div>
              </div>

              {form.mediaKind === "image" && (
                <label className="field"><span className="lbl">ছবির URL</span>
                  <input value={form.img || form.mediaUrl} onChange={e => { set("img", e.target.value); set("mediaUrl", e.target.value); }}
                    placeholder="/uploads/your-image.jpg অথবা https://…/image.jpg" />
                </label>
              )}

              {(form.mediaKind === "video" || form.mediaKind === "audio") && (
                <label className="field"><span className="lbl">{form.mediaKind === "video" ? "ভিডিও URL (mp4 / webm)" : "অডিও URL (mp3 / m4a)"}</span>
                  <input value={form.mediaUrl || ""} onChange={e => set("mediaUrl", e.target.value)}
                    placeholder={form.mediaKind === "video" ? "https://…/video.mp4" : "https://…/audio.mp3"} />
                </label>
              )}

              {form.mediaKind === "embed" && (
                <label className="field"><span className="lbl">ইউটিউব / ভিমিও URL</span>
                  <input value={form.mediaUrl || ""} onChange={e => set("mediaUrl", e.target.value)}
                    placeholder="https://www.youtube.com/watch?v=XXXX" />
                </label>
              )}

              {(form.mediaKind === "video" || form.mediaKind === "embed" || form.mediaKind === "audio") && (
                <label className="field"><span className="lbl">থাম্বনেইল URL <span className="muted" style={{ fontWeight: 400 }}>(ঐচ্ছিক; ইউটিউবের ক্ষেত্রে স্বয়ংক্রিয়ভাবে নেওয়া হবে)</span></span>
                  <input value={form.mediaThumbnail || ""} onChange={e => set("mediaThumbnail", e.target.value)}
                    placeholder="https://…/poster.jpg" />
                </label>
              )}

              <label style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, cursor: "pointer" }}>
                <input type="checkbox" checked={form.special} onChange={e => set("special", e.target.checked)} style={{ width: 18, height: 18 }} />
                <span><strong>বিশেষ সংবাদ</strong> — হোমপেজের স্লাইডারে দেখান</span>
              </label>
            </div>

            {/* actions */}
            <div style={{ display: "flex", gap: 10, marginTop: 26, paddingTop: 20, borderTop: "1px solid var(--line)", flexWrap: "wrap" }}>
              {existing ? (
                <>
                  {/* keep-status save: a no-publish moderator can edit a published post without unpublishing it */}
                  <button className="btn primary" disabled={!valid || saving} onClick={() => save(form.status)}>
                    <Icon name="check" size={16} /> {saving ? "সংরক্ষণ হচ্ছে…" : "সংরক্ষণ"}
                  </button>
                  {canPublish && (form.status === "published" ? (
                    <button className="btn" disabled={!valid || saving} onClick={() => save("draft")}><Icon name="file" size={15} /> খসড়ায় নিন</button>
                  ) : (
                    <button className="btn" disabled={!valid || saving} onClick={() => save("published")}><Icon name="up" size={15} /> প্রকাশ করুন</button>
                  ))}
                  {me.perms.delete && (
                    <button className="btn danger" style={{ marginRight: "auto" }} disabled={saving} onClick={remove}><Icon name="trash" size={15} /> মুছে ফেলুন</button>
                  )}
                </>
              ) : (
                <>
                  <button className="btn primary" disabled={!valid || !canPublish || saving} onClick={() => save("published")} title={canPublish ? "" : "প্রকাশের অনুমতি নেই — খসড়া হিসেবে জমা দিন"}>
                    <Icon name="check" size={16} /> {saving ? "সংরক্ষণ হচ্ছে…" : "প্রকাশ করুন"}
                  </button>
                  <button className="btn" disabled={!valid || saving} onClick={() => save("draft")}>{saving ? "সংরক্ষণ হচ্ছে…" : "খসড়া সংরক্ষণ"}</button>
                </>
              )}
            </div>
            {!canPublish && !existing && <p className="muted" style={{ fontSize: 12.5, marginTop: 12, display: "flex", alignItems: "center", gap: 6 }}><Icon name="clock" size={13} /> আপনার ভূমিকায় সরাসরি প্রকাশের অনুমতি নেই; খসড়া জমা দিলে অ্যাডমিন তা পর্যালোচনা করবেন।</p>}
          </div>

          {/* live preview */}
          <div style={{ position: "sticky", top: 90 }}>
            <div className="kicker" style={{ marginBottom: 10 }}>সরাসরি প্রিভিউ</div>
            <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: 22, boxShadow: "var(--shadow-1)" }}>
              {window.MediaFrame ? (
                <window.MediaFrame kind={form.mediaKind || "none"} url={form.mediaUrl || form.img}
                  thumbnail={form.mediaThumbnail || form.img} label={form.bn || "preview"}
                  style={{ width: "100%", aspectRatio: "16/9", borderRadius: "var(--radius)", marginBottom: 14 }} />
              ) : (
                <ImgPH label={form.img || "no image"} style={{ width: "100%", aspectRatio: "16/9", borderRadius: "var(--radius)", marginBottom: 14 }} />
              )}
              <div className="kicker bn" style={{ marginBottom: 7 }}>{H.catBy(form.cat).bn}</div>
              <h2 className="serif" style={{ fontSize: 23, fontWeight: 700, lineHeight: 1.18, marginBottom: 10 }}>{form.bn || "শিরোনাম এখানে দেখা যাবে"}</h2>
              <p className="ink2" style={{ fontSize: 14.5, lineHeight: 1.55, marginBottom: 12 }}>{form.excerpt_bn || "সারাংশ এখানে প্রদর্শিত হবে।"}</p>
              <div className="meta" style={{ fontSize: 12.5 }}>{form.author}<span className="dot" />এইমাত্র{form.special && <><span className="dot" /><span className="badge teal">বিশেষ</span></>}</div>
            </div>
            <p className="muted" style={{ fontSize: 12, marginTop: 12, textAlign: "center" }}>পাঠক যেভাবে দেখবেন তার একটি ঝলক</p>
          </div>
        </div>
      </div>
    );
  }

  window.AdminEditor = AdminEditor;
})();