/* global React */
const { useState, useEffect, useRef, useCallback, useMemo } = React;

// =====================================================================
// Ícones (stroke SVG, inline)
// =====================================================================
const Ico = ({ d, size = 14, className = 'ico' }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
    <path d={d}></path>
  </svg>
);
const IcoCart = (p) => <Ico {...p} d="M3 4h2l2 12h11l2-8H7M9 20a1 1 0 100 2 1 1 0 000-2zm9 0a1 1 0 100 2 1 1 0 000-2z" />;
const IcoBox = (p) => <Ico {...p} d="M3 7l9-4 9 4-9 4-9-4zm0 0v10l9 4 9-4V7" />;
const IcoClock = (p) => <Ico {...p} d="M12 7v5l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z" />;
const IcoStack = (p) => <Ico {...p} d="M3 7l9-4 9 4-9 4-9-4zm0 5l9 4 9-4M3 17l9 4 9-4" />;
const IcoSliders = (p) => <Ico {...p} d="M4 6h13m4 0h-1M4 12h5m12 0H13M4 18h13m4 0h-1M14 4v4m-9 6v4m12-4v4" />;
const IcoMap = (p) => <Ico {...p} d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2-6-2zm0 0v14m6-12v14" />;
const IcoPlus = (p) => <Ico {...p} d="M12 5v14m-7-7h14" />;
const IcoX = (p) => <Ico {...p} d="M6 6l12 12M18 6L6 18" />;
const IcoSave = (p) => <Ico {...p} d="M5 5v14a1 1 0 001 1h12a1 1 0 001-1V7l-3-3H6a1 1 0 00-1 1zm5 2h4m-7 8h12" />;
const IcoDownload = (p) => <Ico {...p} d="M12 4v12m-5-5l5 5 5-5M4 20h16" />;
const IcoUpload = (p) => <Ico {...p} d="M12 20V8m-5 5l5-5 5 5M4 4h16" />;
const IcoRefresh = (p) => <Ico {...p} d="M4 4v6h6M20 20v-6h-6M5 14a8 8 0 0014 4M19 10a8 8 0 00-14-4" />;
const IcoTrash = (p) => <Ico {...p} d="M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2m1 0v12a2 2 0 01-2 2H9a2 2 0 01-2-2V7" />;
const IcoEye = (p) => <Ico {...p} d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zm10 3a3 3 0 100-6 3 3 0 000 6z" />;
const IcoFile = (p) => <Ico {...p} d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9zm0 0v6h6" />;
const IcoSparkle = (p) => <Ico {...p} d="M12 3v3m0 12v3m-9-9H6m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6l2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6l2.1-2.1" />;
const IcoLogout = (p) => <Ico {...p} d="M15 4h4a2 2 0 012 2v12a2 2 0 01-2 2h-4M10 17l-5-5 5-5M5 12h11" />;

window.Icons = { IcoCart, IcoBox, IcoClock, IcoStack, IcoSliders, IcoMap,
                 IcoPlus, IcoX, IcoSave, IcoDownload, IcoUpload, IcoRefresh,
                 IcoTrash, IcoEye, IcoFile, IcoSparkle, IcoLogout };

// =====================================================================
// Tooltip (hover sobre .tip)
// =====================================================================
function Tooltip({ children, text }) {
  const [show, setShow] = useState(false);
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const ref = useRef();
  const onEnter = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setPos({ x: r.left + r.width/2, y: r.top });
    setShow(true);
  };
  return (
    <>
      <span ref={ref} className="tip" onMouseEnter={onEnter} onMouseLeave={() => setShow(false)} tabIndex={0}>?</span>
      {show && (
        <div style={{
          position: 'fixed',
          left: pos.x, top: pos.y - 10,
          transform: 'translate(-50%, -100%)',
          background: '#08090b',
          color: 'var(--text)',
          border: '1px solid var(--border-strong)',
          borderRadius: 8,
          padding: '9px 12px',
          fontSize: 11.5,
          maxWidth: 280,
          lineHeight: 1.5,
          zIndex: 9999,
          boxShadow: 'var(--sh-3)',
          pointerEvents: 'none',
          fontFamily: 'var(--font-sans)',
          fontWeight: 400,
        }}>{text}</div>
      )}
    </>
  );
}
window.Tooltip = Tooltip;

// =====================================================================
// Segmented (Sim/Não toggle moderno)
// =====================================================================
function Segmented({ value, options, onChange, full = true }) {
  return (
    <div className={`segmented ${full ? 'full' : ''}`}>
      {options.map(o => (
        <button
          key={o.value}
          className={`seg-btn ${value === o.value ? 'active' : ''}`}
          onClick={() => onChange(o.value)}
          type="button">
          {o.label}
        </button>
      ))}
    </div>
  );
}
window.Segmented = Segmented;

// =====================================================================
// Toast
// =====================================================================
function ToastHost({ toast }) {
  if (!toast) return null;
  return (
    <div className={`toast show ${toast.kind || ''}`}>
      {toast.kind === 'ok' && <IcoSparkle size={13} />}
      {toast.msg}
    </div>
  );
}
window.ToastHost = ToastHost;

// =====================================================================
// NumInput: input numérico tolerante (aceita vírgula, decimal incremental)
// =====================================================================
function NumInput({ value, onChange, ...rest }) {
  const [draft, setDraft] = useState(String(value ?? ''));
  const [focused, setFocused] = useState(false);
  useEffect(() => {
    if (!focused) setDraft(String(value ?? ''));
  }, [value, focused]);
  return (
    <input
      type="text"
      inputMode="decimal"
      value={draft}
      className="mono"
      onFocus={() => setFocused(true)}
      onBlur={() => {
        setFocused(false);
        const num = parseFloat(String(draft).replace(',', '.'));
        if (!isNaN(num)) onChange(num);
        else if (draft === '') onChange(0);
        else setDraft(String(value ?? ''));
      }}
      onChange={(e) => {
        const v = e.target.value;
        setDraft(v);
        const num = parseFloat(v.replace(',', '.'));
        if (!isNaN(num) && /^-?\d+([.,]\d+)?$/.test(v.trim())) onChange(num);
      }}
      {...rest}
    />
  );
}
window.NumInput = NumInput;