/* ============================================================
   articles.jsx — Articles list, single article view, admin panel
   Stored in localStorage so the school can add/edit articles in browser
   ============================================================ */

const STORAGE_KEY = "bm_articles_v1";

function loadArticles() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return SEED_ARTICLES;
}

function saveArticles(items) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
  } catch (e) {}
}

function formatDate(iso) {
  try {
    const d = new Date(iso);
    return d.toLocaleDateString("th-TH", { year: "numeric", month: "short", day: "numeric" });
  } catch (e) { return iso; }
}

function ArticlesPreview({ articles, onOpen, onAll }) {
  const recent = articles.slice(0, 3);
  return (
    <section className="section" id="articles">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">บทความ · JOURNAL</div>
            <h2 className="section-title">
              อ่าน <em>เกร็ดเล็ก</em><br />จากครูบ้านมาริ
            </h2>
          </div>
          <button className="btn" onClick={onAll}>อ่านทั้งหมด →</button>
        </div>
        <div className="articles-list">
          {recent.map(a => (
            <article key={a.id} className="article-card" onClick={() => onOpen(a)}>
              <div className="article-cover">
                {a.coverUrl ? <img src={a.coverUrl} alt="" /> : <ArticleCover kind={a.cover || 1} />}
              </div>
              <div className="article-body">
                <div className="article-meta">
                  <span>{a.category}</span>
                  <span>·</span>
                  <span>{a.readTime}</span>
                </div>
                <h3>{a.title}</h3>
                <p>{a.excerpt}</p>
                <div className="article-foot">
                  <span>{a.author}</span>
                  <span>{formatDate(a.date)}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArticlesPage({ articles, onOpen, onNew, onAdmin, onBack, isAdmin }) {
  const [cat, setCat] = React.useState("ทั้งหมด");
  const cats = ["ทั้งหมด", ...new Set(articles.map(a => a.category))];
  const list = cat === "ทั้งหมด" ? articles : articles.filter(a => a.category === cat);

  return (
    <div className="container" style={{ paddingTop: 64, paddingBottom: 80 }}>
      <button className="btn btn-ghost btn-sm" style={{ marginBottom: 24 }} onClick={onBack}>← กลับสู่หน้าแรก</button>
      <div className="section-head">
        <div>
          <div className="section-eyebrow">บทความ · JOURNAL</div>
          <h2 className="section-title">
            ทุก<em>บทเรียน</em>เริ่มจากคำถามเล็กๆ
          </h2>
        </div>
        {isAdmin && (
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn" onClick={onAdmin}>จัดการบทความ</button>
            <button className="btn btn-primary" onClick={onNew}>+ เขียนบทความ</button>
          </div>
        )}
      </div>

      <div className="course-filters" style={{ marginBottom: 36 }}>
        <span className="filter-label">หมวดหมู่</span>
        {cats.map(c => (
          <button key={c} className={`chip ${cat === c ? "active" : ""}`} onClick={() => setCat(c)}>{c}</button>
        ))}
      </div>

      <div className="articles-list">
        {list.map(a => (
          <article key={a.id} className="article-card" onClick={() => onOpen(a)}>
            <div className="article-cover">
              {a.coverUrl ? <img src={a.coverUrl} alt="" /> : <ArticleCover kind={a.cover || 1} />}
            </div>
            <div className="article-body">
              <div className="article-meta">
                <span>{a.category}</span>
                <span>·</span>
                <span>{a.readTime}</span>
              </div>
              <h3>{a.title}</h3>
              <p>{a.excerpt}</p>
              <div className="article-foot">
                <span>{a.author}</span>
                <span>{formatDate(a.date)}</span>
              </div>
            </div>
          </article>
        ))}
      </div>

      {list.length === 0 && (
        <div style={{ padding: "80px 0", textAlign: "center", color: "var(--ink-3)" }}>
          ยังไม่มีบทความในหมวดนี้
        </div>
      )}
    </div>
  );
}

function ArticleView({ article, onBack, onEdit }) {
  if (!article) return null;
  return (
    <article className="article-view">
      <button className="btn btn-ghost btn-sm back" onClick={onBack}>← ทุกบทความ</button>
      <div className="article-meta" style={{ marginBottom: 4 }}>
        <span>{article.category}</span>
        <span>·</span>
        <span>{article.author}</span>
        <span>·</span>
        <span>{formatDate(article.date)}</span>
        <span>·</span>
        <span>{article.readTime}</span>
      </div>
      <h1>{article.title}</h1>
      <div className="article-cover" style={{ aspectRatio: "16/9", borderRadius: "var(--radius-lg)", overflow: "hidden", marginBottom: 36 }}>
        {article.coverUrl ? <img src={article.coverUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <ArticleCover kind={article.cover || 1} />}
      </div>
      <div className="content">{article.content}</div>
      <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px dashed var(--line-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ color: "var(--ink-3)", fontSize: 13 }}>เขียนโดย <strong style={{ color: "var(--ink)" }}>{article.author}</strong></span>
        <button className="btn btn-sm" onClick={() => onEdit(article)}>แก้ไขบทความ</button>
      </div>
    </article>
  );
}

function ArticleEditor({ article, onSave, onCancel, onDelete }) {
  const isNew = !article;
  const [draft, setDraft] = React.useState(() => article || {
    id: "a" + Date.now(),
    title: "",
    excerpt: "",
    category: "เปียโน",
    author: "ครูมาริ",
    date: new Date().toISOString().slice(0, 10),
    readTime: "5 นาที",
    cover: Math.floor(Math.random() * 8),
    coverUrl: "",
    content: "",
  });

  const update = (k, v) => setDraft(d => ({ ...d, [k]: v }));

  const submit = () => {
    if (!draft.title.trim() || !draft.content.trim()) {
      alert("กรอกชื่อบทความและเนื้อหาด้วยค่ะ");
      return;
    }
    onSave(draft);
  };

  const handleImage = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => update("coverUrl", reader.result);
    reader.readAsDataURL(file);
  };

  return (
    <div className="editor-shell">
      <button className="btn btn-ghost btn-sm" style={{ marginBottom: 24 }} onClick={onCancel}>← ยกเลิก</button>
      <div className="editor-card">
        <div className="section-eyebrow">{isNew ? "บทความใหม่ · NEW" : "แก้ไขบทความ · EDIT"}</div>
        <h2>{isNew ? "เขียนบทความใหม่" : "แก้ไขบทความ"}</h2>
        <p style={{ color: "var(--ink-3)", margin: "0 0 28px", fontSize: 14 }}>
          บทความจะถูกบันทึกในเบราว์เซอร์ของคุณ (localStorage) สามารถแก้ไขหรือลบได้ตลอดเวลา
        </p>

        <div className="field">
          <label>ชื่อบทความ</label>
          <input value={draft.title} onChange={e => update("title", e.target.value)} placeholder="เช่น เริ่มต้นเรียนเปียโนตอนไหนดี?" />
        </div>

        <div className="field">
          <label>เกริ่นสั้นๆ (excerpt)</label>
          <textarea value={draft.excerpt} onChange={e => update("excerpt", e.target.value)} placeholder="1-2 ประโยคสั้นๆ ที่จะแสดงในการ์ดบทความ" style={{ minHeight: 80 }}></textarea>
        </div>

        <div className="field-row">
          <div className="field">
            <label>หมวดหมู่</label>
            <select value={draft.category} onChange={e => update("category", e.target.value)}>
              <option>เปียโน</option>
              <option>ร้องเพลง</option>
              <option>เต้น</option>
              <option>กลอง</option>
              <option>กีตาร์</option>
              <option>ผู้ใหญ่</option>
              <option>เด็กเล็ก</option>
              <option>กิจกรรม</option>
              <option>เคล็ดลับ</option>
            </select>
          </div>
          <div className="field">
            <label>ผู้เขียน</label>
            <input value={draft.author} onChange={e => update("author", e.target.value)} />
          </div>
        </div>

        <div className="field-row">
          <div className="field">
            <label>วันที่</label>
            <input type="date" value={draft.date} onChange={e => update("date", e.target.value)} />
          </div>
          <div className="field">
            <label>เวลาอ่าน</label>
            <input value={draft.readTime} onChange={e => update("readTime", e.target.value)} placeholder="เช่น 5 นาที" />
          </div>
        </div>

        <div className="field">
          <label>รูปปก (ไม่บังคับ)</label>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <div style={{ width: 140, aspectRatio: "16/10", borderRadius: 10, overflow: "hidden", border: "1px solid var(--line)", flexShrink: 0 }}>
              {draft.coverUrl
                ? <img src={draft.coverUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                : <ArticleCover kind={draft.cover} />}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
              <input type="file" accept="image/*" onChange={handleImage} style={{ fontSize: 13 }} />
              {draft.coverUrl && <button className="btn btn-sm" onClick={() => update("coverUrl", "")} style={{ alignSelf: "flex-start" }}>เอารูปออก (ใช้ภาพประกอบดีฟอลต์)</button>}
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>หากไม่อัปโหลดรูป จะใช้ภาพประกอบสไตล์บ้านมาริแทน</div>
            </div>
          </div>
        </div>

        <div className="field">
          <label>เนื้อหา</label>
          <textarea value={draft.content} onChange={e => update("content", e.target.value)} placeholder="เขียนเนื้อหาบทความที่นี่ ขึ้นบรรทัดใหม่ด้วย Enter" style={{ minHeight: 320 }}></textarea>
        </div>

        <div className="editor-actions">
          {!isNew && <button className="btn" style={{ color: "oklch(0.5 0.15 25)" }} onClick={() => { if (confirm("ลบบทความนี้?")) onDelete(article); }}>ลบบทความ</button>}
          <button className="btn" onClick={onCancel}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={submit}>{isNew ? "เผยแพร่บทความ" : "บันทึกการแก้ไข"}</button>
        </div>
      </div>
    </div>
  );
}

function AdminPanel({ articles, onEdit, onDelete, onNew, onBack, onReset }) {
  return (
    <div className="editor-shell">
      <button className="btn btn-ghost btn-sm" style={{ marginBottom: 24 }} onClick={onBack}>← กลับ</button>
      <div className="editor-card">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 16, marginBottom: 28 }}>
          <div>
            <div className="section-eyebrow">จัดการบทความ · ADMIN</div>
            <h2 style={{ margin: "4px 0 0" }}>บทความทั้งหมด ({articles.length})</h2>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-sm" onClick={onReset} title="กลับไปใช้บทความเริ่มต้น">รีเซ็ต</button>
            <button className="btn btn-primary" onClick={onNew}>+ บทความใหม่</button>
          </div>
        </div>
        {articles.map(a => (
          <div key={a.id} className="admin-row">
            <div style={{ width: 80, aspectRatio: "16/10", borderRadius: 6, overflow: "hidden", flexShrink: 0, border: "1px solid var(--line-soft)" }}>
              {a.coverUrl ? <img src={a.coverUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <ArticleCover kind={a.cover || 1} />}
            </div>
            <div className="title-line">
              <h4>{a.title}</h4>
              <div className="meta">{a.category} · {a.author} · {formatDate(a.date)}</div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn btn-sm" onClick={() => onEdit(a)}>แก้ไข</button>
              <button className="btn btn-sm" onClick={() => { if (confirm("ลบ \"" + a.title + "\" ?")) onDelete(a); }}>ลบ</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  loadArticles, saveArticles,
  ArticlesPreview, ArticlesPage, ArticleView, ArticleEditor, AdminPanel,
});