const { useState, useEffect, useMemo, useRef } = React; Object.assign(window, { useState, useEffect, useMemo, useRef });

const Icon = ({ d, size = 16, ...p }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>{d}</svg>;
const I = {
  grid: <Icon d={<><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect></>}></Icon>,
  orders: <Icon d={<><path d="M9 4h6l1 2h3v14H5V6h3z"></path><path d="M9 12h6M9 16h4"></path></>}></Icon>,
  box: <Icon d={<><path d="M3 8l9-5 9 5v8l-9 5-9-5z"></path><path d="M3 8l9 5 9-5M12 13v8"></path></>}></Icon>,
  dollar: <Icon d={<><path d="M12 2v20M17 6.5c0-1.9-2.2-3-5-3s-5 1.1-5 3 2 2.5 5 3.5 5 1.6 5 3.5-2.2 3-5 3-5-1.1-5-3"></path></>}></Icon>,
  search: <Icon d={<><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></>}></Icon>,
  plus: <Icon d={<path d="M12 5v14M5 12h14"></path>}></Icon>,
  back: <Icon d={<path d="M15 6l-6 6 6 6"></path>}></Icon>,
  right: <Icon d={<path d="M9 6l6 6-6 6"></path>}></Icon>,
  down: <Icon d={<path d="M6 9l6 6 6-6"></path>}></Icon>,
  logout: <Icon d={<><path d="M10 4H5v16h5M14 8l4 4-4 4M18 12H9"></path></>}></Icon>,
  alert: <Icon d={<><path d="M12 3l10 18H2z"></path><path d="M12 10v4M12 17.5v.5"></path></>}></Icon>,
  check: <Icon d={<path d="M5 12l5 5 9-10"></path>}></Icon>,
  x: <Icon d={<path d="M6 6l12 12M18 6L6 18"></path>}></Icon>,
  download: <Icon d={<><path d="M12 3v12M7 10l5 5 5-5M4 21h16"></path></>}></Icon>,
  user: <Icon d={<><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-6 8-6s8 2 8 6"></path></>}></Icon>,
  trash: <Icon d={<><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"></path></>}></Icon>,
  ship: <Icon d={<><path d="M3 17l2 3h14l2-3M5 17V9l7-3 7 3v8M12 6V3"></path></>}></Icon>,
  lock: <Icon d={<><rect x="5" y="11" width="14" height="10" rx="2"></rect><path d="M8 11V7a4 4 0 018 0v4"></path></>}></Icon>,
  bell: <Icon d={<><path d="M6 16V11a6 6 0 0112 0v5l2 2H4z"></path><path d="M10 21h4"></path></>}></Icon>,
  chart: <Icon d={<><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"></path></>}></Icon>,
  shield: <Icon d={<><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"></path></>}></Icon>,
  play: <Icon d={<path d="M7 5l12 7-12 7z"></path>}></Icon>,
  pause: <Icon d={<><path d="M8 5v14M16 5v14"></path></>}></Icon>,
  map: <Icon d={<><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z"></path><path d="M9 4v14M15 6v14"></path></>}></Icon>,
  sparkle: <Icon d={<><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"></path></>}></Icon>,
};

const STATUS_TONE = { Draft:'mute', Confirmed:'ink', Purchased:'ink', 'In Production':'ink', Shipped:'blue', 'In Transit':'blue', Arrived:'green', Delivered:'green', Stuck:'red', Cancelled:'mute',
  Booked:'mute', Loading:'ink', Departed:'blue', 'At Sea':'blue', 'At Port':'green', 'Customs Hold':'amber' };
const Status = ({ s }) => <span className={`st st-${STATUS_TONE[s] || 'ink'}`}><i></i>{s}</span>;
const Pill = ({ children, tone = 'tag' }) => <span className={`pill pill-${tone}`}>{children}</span>;
const Btn = ({ v = 'outline', sm, icon, children, ...p }) => <button className={`btn btn-${v}${sm ? ' btn-sm' : ''}`} {...p}>{icon}{children}</button>;
const Card = ({ title, action, children, className = '', pad = true }) => <section className={`card ${className}`}>{(title || action) && <header className="card-h"><h4>{title}</h4>{action}</header>}<div className={pad ? 'card-b' : ''}>{children}</div></section>;
const Field = ({ label, children, hint, req }) => <label className="field"><span className="field-l">{label}{req && <em>*</em>}</span>{children}{hint && <span className="field-hint">{hint}</span>}</label>;
const Select = ({ value, onChange, options, placeholder, ...p }) => <span className="sel"><select value={value || ''} onChange={e => onChange(e.target.value)} {...p}>{placeholder && <option value="">{placeholder}</option>}{options.map(o => typeof o === 'string' ? <option key={o} value={o}>{o}</option> : <option key={o.id} value={o.id}>{o.name}</option>)}</select>{I.down}</span>;
const Empty = ({ children }) => <div className="empty">{children}</div>;
const Money = ({ v, strong }) => <span className={`mono${strong ? ' strong' : ''}`}>{fmt(v)}</span>;
const Stat = ({ label, value, sub, tone, onClick }) => <button className={`stat${tone ? ' stat-' + tone : ''}`} onClick={onClick}><span className="stat-l">{label}</span><span className="stat-v">{value}</span>{sub && <span className="stat-s">{sub}</span>}</button>;
const PageHead = ({ title, kicker, children, back }) => <div className="ph">{back && <button className="btn btn-icon" onClick={back} aria-label="Back">{I.back}</button>}<div className="ph-t">{kicker && <span className="kicker">{kicker}</span>}<h1>{title}</h1></div>{children && <div className="ph-a">{children}</div>}</div>;
const Toast = ({ msg }) => msg ? <div className="toast">{I.check}{msg}</div> : null;

const Timeline = ({ items }) => <ol className="tl">{[...items].sort((a, b) => new Date(b.at) - new Date(a.at)).map((h, i) => <li key={i}><span className="tl-d">{fdateY(h.at)}</span><span className="tl-e">{h.text || h.event}</span><span className="tl-b">{h.by}</span></li>)}</ol>;

const useToast = () => { const [msg, set] = useState(''); const ref = useRef(); const show = (m) => { set(m); clearTimeout(ref.current); ref.current = setTimeout(() => set(''), 2400); }; return [msg, show]; };

Object.assign(window, { I, Status, Pill, Btn, Card, Field, Select, Empty, Money, Stat, PageHead, Toast, Timeline, useToast });