/* ==========================================================================
 * ADMIN NEXT — page-common.jsx  (แยกไฟล์ละหน้า; โหลดผ่าน <script type="text/babel">)
 * ========================================================================== */

/* ตัวช่วย toolbar ช่วงวันที่ + ค้นหา ใช้ร่วมทุกหน้าประวัติ */
function HistToolbar({ q, setQ, range, setRange, custom, setCustom, onReload, onExport, loading, count, placeholder, children }) {
  return (<div className="flex flex-wrap items-center gap-2">
    {setQ && <div className="relative flex-1 sm:max-w-xs">
      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted"><Ic d={I.search} size={16}/></span>
      <input value={q} onChange={(e)=>setQ(e.target.value)} placeholder={placeholder||"ค้นหา…"} className="h-9 w-full rounded-lg border border-line bg-surface pl-9 pr-3 text-sm text-fg placeholder:text-faint focus:border-accent focus:outline-none focus:ring-4 focus:ring-[var(--accent-ring)]"/>
    </div>}
    <div className="flex flex-wrap items-center gap-1 rounded-lg border border-line bg-sunken p-0.5">
      {FIN_RANGES.filter(r=>r[0]!=="").map(([k,l])=>(<button key={k} onClick={()=>setRange(k)} className={"rounded-md px-2 py-1 text-xs font-medium transition-colors "+(range===k?"bg-accent text-accent-fg shadow-sm":"text-fg-2 hover:text-fg")}>{l}</button>))}
    </div>
    {range==="custom" && (<div className="flex items-center gap-1.5">
      <input type="date" value={custom.from} onChange={(e)=>setCustom(c=>({...c,from:e.target.value}))} className="h-8 rounded-lg border border-line bg-surface px-2 text-xs"/>
      <span className="text-xs text-faint">-</span>
      <input type="date" value={custom.to} onChange={(e)=>setCustom(c=>({...c,to:e.target.value}))} className="h-8 rounded-lg border border-line bg-surface px-2 text-xs"/>
      <button onClick={onReload} className="h-8 rounded-lg bg-accent px-3 text-xs font-semibold text-accent-fg">ดู</button>
    </div>)}
    <button onClick={onReload} className="flex h-9 items-center gap-1.5 rounded-lg border border-line bg-surface px-3 text-sm font-medium text-fg-2 hover:bg-sunken"><Ic d={I.refresh} size={16} cls={loading?"animate-spin":""}/> รีเฟรช</button>
    {onExport && <ExportBtn onClick={onExport}/>}
    {children}
    <div className="ml-auto hidden text-xs text-muted sm:block tnum">{count} รายการ</div>
  </div>);
}

function HistErr({ msg, onRetry }) {
  return (<div className="rounded-xl border border-line bg-surface px-4 py-16 text-center shadow-sm"><div className="mx-auto mb-2 grid h-10 w-10 place-items-center rounded-full text-danger" style={{background:"var(--danger-soft)"}}><Ic d={I.warn2} size={20}/></div><div className="text-sm font-medium text-fg-2">{msg}</div><button onClick={onRetry} className="mt-3 rounded-lg border border-line px-3 py-1.5 text-xs font-medium text-fg-2 hover:bg-sunken">ลองใหม่</button></div>);
}

const histTh=(children,extra="")=>(<th className={"whitespace-nowrap px-3 py-2.5 text-left text-[13px] font-bold text-fg-2 "+extra}>{children}</th>);

function StatMini({ k, v, sub, color }) {
  const c = color || "var(--accent)";
  return (<div className="rounded-xl border p-4 shadow-sm" style={{borderColor:`color-mix(in srgb, ${c} 32%, var(--line))`, background:`color-mix(in srgb, ${c} 9%, var(--surface))`}}><div className="text-[13px] font-semibold" style={{color:c}}>{k}</div><div className="mt-1 text-2xl font-bold tnum" style={{color:c}}>{v}</div>{sub&&<div className="mt-0.5 text-[11px] text-muted">{sub}</div>}</div>);
}