/* global React */
// Shared UI primitives
const { useState: useStateUI, useEffect: useEffectUI } = React;

function Modal({ open, onClose, title, children, footer, size }) {
  useEffectUI(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={(e) => e.target.classList.contains("modal-backdrop") && onClose && onClose()}>
      <div className={"modal " + (size || "")}>
        <div className="modal-head">
          <h3>{title}</h3>
          <div className="spacer" />
          <button className="btn ghost sm" onClick={onClose}><Icon name="close" /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

function Pill({ tone, children }) {
  return <span className={"pill " + (tone || "")}><span className="dot" />{children}</span>;
}

function StatusPill({ status }) {
  const map = {
    vacant: { tone: "", label: "ห้องว่าง" },
    occupied: { tone: "ok", label: "มีผู้เช่า" },
    overdue: { tone: "danger", label: "ค้างชำระ" },
    daily: { tone: "info", label: "เข้าพักรายวัน" },
    cleaning: { tone: "warn", label: "ทำความสะอาด" },
    reserved: { tone: "warn", label: "จองไว้" },
  };
  const v = map[status] || { tone: "", label: status };
  return <Pill tone={v.tone}>{v.label}</Pill>;
}

function KPI({ label, value, sub, trend, trendVal, accent }) {
  return (
    <div className="kpi">
      <div className="deco" />
      <div className="label">{label}</div>
      <div className="val">{value}</div>
      <div className="row" style={{justifyContent:"space-between"}}>
        <div className="sub">{sub}</div>
        {trend && <span className={"trend " + trend}><Icon name={trend === "up" ? "up" : "down"} size={14}/>{trendVal}</span>}
      </div>
    </div>
  );
}

function Field({ label, children, hint }) {
  return (<div className="field"><label>{label}</label>{children}{hint && <div style={{fontSize:"0.78rem",color:"var(--ink-3)"}}>{hint}</div>}</div>);
}

function QR({ seed = "PROMPTPAY", size = 120 }) {
  // generate a deterministic 21x21 pseudo-QR pattern
  const cells = [];
  let s = 0;
  for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) >>> 0;
  for (let y = 0; y < 21; y++) {
    for (let x = 0; x < 21; x++) {
      // finder patterns at corners
      const finder = (X, Y) => (X >= 0 && X < 7 && Y >= 0 && Y < 7) && ((X === 0 || X === 6 || Y === 0 || Y === 6) || (X >= 2 && X <= 4 && Y >= 2 && Y <= 4));
      const isFinder = finder(x, y) || finder(x - 14, y) || finder(x, y - 14);
      let on;
      if (isFinder) on = true;
      else if ((x === 7 || y === 7) && (x < 8 || y < 8 || x > 13 || y > 13)) on = false;
      else { s = (s * 1103515245 + 12345) >>> 0; on = (s & 1) === 1; }
      cells.push(on);
    }
  }
  return (
    <div className="qr-box">
      <div className="qr" style={{ width: size, height: size }}>
        {cells.map((c, i) => <i key={i} style={{ visibility: c ? "visible" : "hidden" }} />)}
      </div>
      <div className="lbl">PromptPay · ParkingHome</div>
    </div>
  );
}

function MiniBars({ data, max, alt }) {
  const M = max || Math.max(...data);
  return (
    <div>
      <div className="bars">
        {data.map((v, i) => (
          <div key={i} className={"bar " + (alt && i === data.length-1 ? "alt" : "")} style={{ height: (v / M * 100) + "%" }}>
            <div className="top">{Math.round(v/1000)}k</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// CSV export
function toCSV(rows) {
  if (!rows.length) return "";
  const keys = Object.keys(rows[0]);
  const esc = (v) => {
    const s = String(v ?? "");
    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
  };
  return [keys.join(","), ...rows.map(r => keys.map(k => esc(r[k])).join(","))].join("\n");
}

function downloadCSV(filename, rows) {
  const csv = "\uFEFF" + toCSV(rows); // BOM for Excel/Thai
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  document.body.appendChild(a); a.click(); a.remove();
}

Object.assign(window, { Modal, Pill, StatusPill, KPI, Field, QR, MiniBars, downloadCSV });