/* App primitives: icons, buttons, modals, layout helpers */ const Icons = { search:'', plus:'', x:'', check:'', arrow:'', chevR:'', chevL:'', chevD:'', chevU:'', cal:'', home:'', users:'', user:'', whats:'', money:'', chart:'', cog:'', tooth:'', bell:'', inbox:'', star:'', filter:'', pin:'', phone:'', mail:'', download:'', edit:'', trash:'', info:'', alert:'', more:'', sliders:'', qr:'', doc:'', upload:'', link:'', power:'', zap:'', tag:'', eye:'', gift:'', refresh:'', copy:'', globe:'', video:'', shield:'', printer:'', send:'', lock:'', loc:'', }; const Icon = ({ name, size = 18, stroke = 1.5, ...rest }) => ( ); const Btn = ({ kind = 'primary', size = 'md', icon, children, onClick, type = 'button', disabled, className = '', style }) => ( ); const IconBtn = ({ name, onClick, title, size = 18, ariaLabel, kind = 'ghost' }) => ( ); const Badge = ({ children, color, kind = 'soft' }) => ( {children} ); const Avatar = ({ initials, color, size = 36 }) => (

{initials}

); const Field = ({ label, hint, error, children, required }) => ( {label && {label}{required && *}} {children} {hint && !error && {hint}} {error && {error}} ); const Input = (props) => ; const Select = ({ children, ...p }) => ; const Textarea = (props) =>

;

const Toggle = ({ checked, onChange, label }) => (
  <label className="toggle">
    <input type="checkbox" checked={checked} onChange={(e) => onChange?.(e.target.checked)} />
    <span className="toggle-track"><span className="toggle-thumb"></span></span>
    {label && <span className="toggle-label">{label}</span>}
  </label>
);

const Card = ({ children, padding = '20px', className = '', style, onClick }) => (
  <div className={`card ${className}`} style={{ padding, ...style }} onClick={onClick}>{children}</div>
);

const StatTile = ({ label, value, delta, deltaDir, icon, accent }) => (
  <Card className="stat-tile">
    <div className="stat-head">
      <span className="stat-label">{label}</span>
      {icon && <span className="stat-icon" style={accent ? {color: accent} : null}><Icon name={icon} size={20} /></span>}
    </div>
    <div className="stat-value">{value}</div>
    {delta != null && (
      <div className={`stat-delta stat-delta-${deltaDir || (delta > 0 ? 'up' : 'down')}`}>
        <Icon name={delta > 0 ? 'chevU' : 'chevD'} size={12} />
        {Math.abs(delta)}% vs mês anterior
      </div>
    )}
  </Card>
);

const Tabs = ({ tabs, active, onChange }) => (
  <div className="tabs" role="tablist">
    {tabs.map(t => (
      <button key={t.id} role="tab" aria-selected={active === t.id}
        className={`tab ${active === t.id ? 'is-active' : ''}`}
        onClick={() => onChange(t.id)}>
        {t.icon && <Icon name={t.icon} size={16} />}
        {t.label}
        {t.count != null && <span className="tab-count">{t.count}</span>}
      </button>
    ))}
  </div>
);

const EmptyState = ({ icon, title, body, action }) => (
  <div className="empty-state">
    {icon && <div className="empty-icon"><Icon name={icon} size={32} /></div>}
    <h4>{title}</h4>
    {body && <p>{body}</p>}
    {action}
  </div>
);

const Spinner = ({ size = 20 }) => (
  <span className="spinner" style={{ width: size, height: size }}></span>
);

// Toast system
const ToastCtx = React.createContext(null);
const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = React.useState([]);
  const push = React.useCallback((t) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(prev => [...prev, { id, ...t }]);
    setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), t.duration || 3500);
  }, []);
  return (
    <ToastCtx.Provider value={{ push }}>
      {children}
      <div className="toast-stack">
        {toasts.map(t => (
          <div key={t.id} className={`toast toast-${t.kind || 'info'}`}>
            <Icon name={t.kind === 'success' ? 'check' : t.kind === 'error' ? 'alert' : 'info'} size={16} />
            <div><div className="toast-title">{t.title}</div>{t.body && <div className="toast-body">{t.body}</div>}</div>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
};
const useToast = () => React.useContext(ToastCtx);

Object.assign(window, {
  Icons, Icon, Btn, IconBtn, Badge, Avatar, Field, Input, Select, Textarea,
  Toggle, Modal, Card, StatTile, Tabs, EmptyState, Spinner, ToastProvider, useToast
});

Object.assign(window, { Icon, Btn, IconBtn, Badge, Avatar, Field, Input, Select, Textarea, Toggle, Card, StatTile, Tabs, findClient, findPro, findService, fmtMoney, fmtMoneyShort, dayLabels, dayLabelsLong, statusColor, statusLabel, InfoRow });