// ui.jsx — UI atoms ที่ใช้ร่วมกัน (export ขึ้น window)
const { useState } = React;

// ---------- ลำดับหมวดหมู่ (ใช้ร่วมกันทั้งหน้าบทความและอีบุ๊ก) ----------
// หมวดใน CAT_PRIORITY จะถูกปักหมุดไว้หน้าสุด (ถัดจาก "ทั้งหมด") ตามลำดับในลิสต์
// ที่เหลือเรียงตามลำดับที่พบในข้อมูล — แก้ที่เดียว ใช้เหมือนกันทั้งสองหน้า
const CAT_PRIORITY = ["AI Engineering", "Cloud & Data", "Career"];
function orderedCategories(items) {
  const found = Array.from(new Set((items || []).map((x) => x.category).filter(Boolean)));
  return [
    "ทั้งหมด",
    ...CAT_PRIORITY.filter((c) => found.includes(c)),
    ...found.filter((c) => !CAT_PRIORITY.includes(c)),
  ];
}

// ---------- ไอคอนเส้นเรียบ ----------
function Icon({ name, size = 20, stroke = "currentColor", sw = 1.6 }) {
  const p = {
    arrow: "M5 12h14M13 6l6 6-6 6",
    arrowLeft: "M19 12H5M11 18l-6-6 6-6",
    book: "M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2zM8 3v16",
    article: "M5 4h14v16H5zM8 8h8M8 12h8M8 16h5",
    clock: "M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
    mail: "M3 6h18v12H3zM3 7l9 6 9-6",
    check: "M5 12l5 5L20 6",
    spark: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18",
    cart: "M3 4h2l2.4 12.5A2 2 0 0 0 9.4 18h7.7a2 2 0 0 0 2-1.6L21 8H6M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM18 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
    layers: "M12 3l9 5-9 5-9-5zM3 13l9 5 9-5",
    menu: "M4 7h16M4 12h16M4 17h16",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0 }}>
      <path d={p[name]} />
    </svg>
  );
}

// ---------- โลโก้ ----------
function Logo({ onClick }) {
  return (
    <button onClick={onClick} className="logo" aria-label="หน้าแรก">
      <span className="logo-mark">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" />
          <path d="M12 7v10M7 12h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
        </svg>
      </span>
      <span className="logo-text">AI<span className="logo-amp">&amp;</span>IT<span className="logo-sub">Pulse</span></span>
    </button>
  );
}

// ---------- ปุ่ม ----------
function Button({ children, onClick, variant = "solid", size = "md", icon, iconRight, full, href }) {
  const cls = `btn btn-${variant} btn-${size}${full ? " btn-full" : ""}`;
  const inner = (
    <>
      {icon && <Icon name={icon} size={size === "lg" ? 20 : 18} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={size === "lg" ? 20 : 18} />}
    </>
  );
  if (href) return <a className={cls} href={href} target="_blank" rel="noreferrer">{inner}</a>;
  return <button className={cls} onClick={onClick}>{inner}</button>;
}

// ---------- แท็ก / ป้ายหมวด ----------
function Pill({ children, tone = "default" }) {
  return <span className={`pill pill-${tone}`}>{children}</span>;
}

// ---------- ปกหนังสือ (รูปจริง) ----------
function BookCover({ book, size = "md" }) {
  return (
    <div className={`bookcover bookcover-${size}`}>
      <img src={book.image} alt={book.title} loading="lazy" />
    </div>
  );
}

// ---------- placeholder รูปภาพ (ลายเส้นบาง + คำอธิบาย mono) ----------
function ImgSlot({ label, ratio = "16 / 9", round = 16 }) {
  return (
    <div className="imgslot" style={{ aspectRatio: ratio, borderRadius: round }}>
      <span className="imgslot-label">{label}</span>
    </div>
  );
}

// ---------- การ์ดบทความ ----------
function ArticleCard({ article, onOpen, layout = "card" }) {
  if (layout === "row") {
    return (
      <button className="acard acard-row" onClick={() => onOpen(article)}>
        <div className="acard-row-main">
          <div className="acard-meta">
            <Pill tone="accent">{article.category}</Pill>
            <span className="acard-dot">·</span>
            <span className="acard-time"><Icon name="clock" size={14} /> {article.readTime}</span>
          </div>
          <h3 className="acard-title">{article.title}</h3>
          <p className="acard-excerpt">{article.excerpt}</p>
          <span className="acard-date">{article.date}</span>
        </div>
        <div className="acard-row-thumb">
          {article.image
            ? <img className="acard-img" src={article.image} alt={article.title} loading="lazy" />
            : <ImgSlot label={article.category} ratio="4 / 3" round={14} />}
        </div>
      </button>
    );
  }
  return (
    <button className="acard" onClick={() => onOpen(article)}>
      <div className="acard-thumb">
        {article.image
          ? <img className="acard-img" src={article.image} alt={article.title} loading="lazy" />
          : <ImgSlot label={article.category} ratio="16 / 10" round={0} />}
        <span className="acard-cat">{article.category}</span>
      </div>
      <div className="acard-body">
        <h3 className="acard-title">{article.title}</h3>
        <p className="acard-excerpt">{article.excerpt}</p>
        <div className="acard-foot">
          <span className="acard-date">{article.date}</span>
          <span className="acard-time"><Icon name="clock" size={14} /> {article.readTime}</span>
        </div>
      </div>
    </button>
  );
}

Object.assign(window, { Icon, Logo, Button, Pill, BookCover, ImgSlot, ArticleCard, orderedCategories });