/* Shared UI primitives: Logo, Icons, formatters */

const BRL = (n) => 'R$ ' + n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const NUM = (n) => n.toLocaleString('pt-BR');
const PCT = (n) => (n >= 0 ? '+' : '') + n.toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + '%';

/* Typographic wordmark only */
function Logo({ variant = 'dark', size = 24, withWordmark = true }) {
  const wordColor = variant === 'light' ? '#FFFFFF' : 'var(--ink-900)';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', lineHeight: 1 }}>
      <span style={{
        fontFamily: 'Manrope', fontWeight: 800, fontSize: size * 0.85,
        letterSpacing: '-0.025em', color: wordColor
      }}>
        smart<span style={{ ...{ color: variant === 'light' ? 'var(--brand-300)' : 'var(--brand-500)' }, color: "rgb(11, 105, 199)" }}>farma</span>
      </span>
    </div>);

}

function LogoMark({ size = 28, variant = 'dark' }) {
  // Retained for any callers; renders nothing now that the mark is removed.
  return null;
}

/* Tiny icon set — stroke icons matching minimal aesthetic. 1.5 stroke. */
const Icon = ({ name, size = 18, color = 'currentColor', strokeWidth = 1.75 }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'cart':return <svg {...props}><circle cx="9" cy="20" r="1.4" /><circle cx="18" cy="20" r="1.4" /><path d="M3 4h2l2.5 12h12l2-9H6.2" /></svg>;
    case 'bag':return <svg {...props}><path d="M5 8h14l-1 12H6L5 8Z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" /></svg>;
    case 'trophy':return <svg {...props}><path d="M8 21h8M12 17v4M7 4h10v4a5 5 0 0 1-10 0V4Z" /><path d="M17 4h3v3a3 3 0 0 1-3 3M7 4H4v3a3 3 0 0 0 3 3" /></svg>;
    case 'barcode':return <svg {...props}><path d="M4 6v12M7 6v12M10 6v12M14 6v12M17 6v12M20 6v12" /></svg>;
    case 'trend':return <svg {...props}><path d="M3 17l6-6 4 4 8-8" /><path d="M14 7h7v7" /></svg>;
    case 'truck':return <svg {...props}><path d="M3 7h11v10H3zM14 10h4l3 3v4h-7" /><circle cx="7" cy="18" r="1.6" /><circle cx="17" cy="18" r="1.6" /></svg>;
    case 'money':return <svg {...props}><rect x="2.5" y="6.5" width="19" height="11" rx="2" /><circle cx="12" cy="12" r="2.5" /><path d="M6 9.5v.01M18 14.5v.01" /></svg>;
    case 'home':return <svg {...props}><path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-8.5Z" /></svg>;
    case 'search':return <svg {...props}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>;
    case 'bell':return <svg {...props}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15L6 16Z" /><path d="M10 20a2 2 0 0 0 4 0" /></svg>;
    case 'calendar':return <svg {...props}><rect x="3.5" y="5" width="17" height="15" rx="2" /><path d="M3.5 10h17M8 3v4M16 3v4" /></svg>;
    case 'store':return <svg {...props}><path d="M3 9l1.5-5h15L21 9M3 9h18v11H3zM10 20v-6h4v6" /></svg>;
    case 'chevron-down':return <svg {...props}><path d="m6 9 6 6 6-6" /></svg>;
    case 'chevron-right':return <svg {...props}><path d="m9 6 6 6-6 6" /></svg>;
    case 'arrow-up':return <svg {...props}><path d="M12 19V5M5 12l7-7 7 7" /></svg>;
    case 'arrow-down':return <svg {...props}><path d="M12 5v14M5 12l7 7 7-7" /></svg>;
    case 'arrow-right':return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case 'check':return <svg {...props}><path d="m5 12.5 4.5 4.5L19 7.5" /></svg>;
    case 'plus':return <svg {...props}><path d="M12 5v14M5 12h14" /></svg>;
    case 'filter':return <svg {...props}><path d="M3 5h18l-7 9v5l-4 2v-7L3 5Z" /></svg>;
    case 'download':return <svg {...props}><path d="M12 4v12M6 12l6 6 6-6M4 21h16" /></svg>;
    case 'eye':return <svg {...props}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></svg>;
    case 'eye-off':return <svg {...props}><path d="M3 3l18 18M10.6 6.1A10.4 10.4 0 0 1 12 6c6.5 0 10 6 10 6a17.5 17.5 0 0 1-3.2 4M6.6 6.6A17.5 17.5 0 0 0 2 12s3.5 6 10 6c1.6 0 3-0.3 4.2-0.8M9.9 9.9a3 3 0 0 0 4.2 4.2" /></svg>;
    case 'mail':return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>;
    case 'lock':return <svg {...props}><rect x="4.5" y="11" width="15" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>;
    case 'user':return <svg {...props}><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>;
    case 'users':return <svg {...props}><circle cx="9" cy="8" r="3.5"/><path d="M1.5 21a7.5 7.5 0 0 1 15 0"/><circle cx="17" cy="7" r="3"/><path d="M22.5 20a5.5 5.5 0 0 0-5.5-4.8"/></svg>;
    case 'logout':return <svg {...props}><path d="M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h12" /></svg>;
    case 'sparkle':return <svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.5 5.5l2.8 2.8M15.7 15.7l2.8 2.8M5.5 18.5l2.8-2.8M15.7 8.3l2.8-2.8" /></svg>;
    case 'shield':return <svg {...props}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z" /></svg>;
    case 'flash':return <svg {...props}><path d="M13 3 4 14h7l-1 7 9-11h-7l1-7Z" /></svg>;
    case 'pill':return <svg {...props}><rect x="2.5" y="8" width="19" height="8" rx="4" transform="rotate(-30 12 12)" /><path d="m8.5 5.5 10 10" /></svg>;
    case 'dots':return <svg {...props}><circle cx="5" cy="12" r="1.4" fill="currentColor" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /><circle cx="19" cy="12" r="1.4" fill="currentColor" /></svg>;
    case 'sun': return <svg {...props}><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>;
    case 'moon':return <svg {...props}><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z"/></svg>;

    /* ── Ícones do mobile (filled, espelham components/icons/index.tsx) ─────── */
    // Vendas — SailsIcon (carrinho personalizado)
    case 'sf-sales': return (
      <svg width={size} height={size} viewBox="0 0 28.629 29.177" fill={color} xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-51 880)">
          <path d="M59.61-850.823a2.514 2.514 0 01-1.855-.775 2.552 2.552 0 01-.767-1.862 2.514 2.514 0 01.775-1.855 2.552 2.552 0 011.862-.767 2.514 2.514 0 011.855.775 2.552 2.552 0 01.767 1.862 2.514 2.514 0 01-.775 1.854 2.552 2.552 0 01-1.862.768zm14.606 0a2.514 2.514 0 01-1.855-.775 2.552 2.552 0 01-.767-1.862 2.514 2.514 0 01.775-1.855 2.552 2.552 0 011.862-.767 2.514 2.514 0 011.855.775 2.552 2.552 0 01.767 1.862 2.513 2.513 0 01-.775 1.854 2.552 2.552 0 01-1.861.768zm-16.5-24.1l4.017 8.326h10.519l4.565-8.326zm-1.1-2.191h21.518a1.39 1.39 0 011.276.767 1.453 1.453 0 010 1.534l-4.93 8.873a3.26 3.26 0 01-1.043 1.114 2.511 2.511 0 01-1.4.42H60.969l-2.045 3.8h17.929v2.191h-17.6a2.451 2.451 0 01-2.209-1.022 2.1 2.1 0 01.018-2.3l2.337-4.309-5.55-11.758H51V-880h4.272zm5.12 10.514z"/>
        </g>
      </svg>
    );
    // Compras — PurchasesIcon (prédio/loja)
    case 'sf-purchases': return (
      <svg width={size} height={size} viewBox="0 0 25.683 25.683" fill={color} xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-80 880)">
          <path d="M85.779-871.974a1.855 1.855 0 01-1.36-.566 1.855 1.855 0 01-.566-1.36v-4.173a1.855 1.855 0 01.566-1.36 1.855 1.855 0 011.36-.566H99.9a1.855 1.855 0 011.36.566 1.855 1.855 0 01.566 1.36v4.173a1.855 1.855 0 01-.566 1.36 1.855 1.855 0 01-1.36.566zm0-1.926H99.9v-4.173H85.779zm-3.852 19.583a1.855 1.855 0 01-1.36-.566 1.855 1.855 0 01-.566-1.36v-2.247h25.683v2.247a1.855 1.855 0 01-.566 1.36 1.855 1.855 0 01-1.36.566zM80-859.454l4.655-10.4a2.173 2.173 0 01.726-.835 1.751 1.751 0 011.008-.321h12.905a1.751 1.751 0 011.008.321 2.173 2.173 0 01.726.835l4.655 10.4zm8.347-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.45.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.284a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.45.616.616 0 00.449.193zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.284a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.193zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.284a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.192zm3.852 5.137h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.45.616.616 0 00-.193-.449.616.616 0 00-.449-.193H92.2a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.45.616.616 0 00.449.192zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193H92.2a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.192zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193H92.2a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.191zm3.852 5.137h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.45.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.283a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.45.616.616 0 00.449.191zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.283a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.191zm0-2.568h1.284a.616.616 0 00.449-.193.616.616 0 00.193-.449.616.616 0 00-.193-.449.616.616 0 00-.449-.193h-1.283a.616.616 0 00-.449.193.616.616 0 00-.193.449.616.616 0 00.193.449.616.616 0 00.449.19z"/>
        </g>
      </svg>
    );
    // Metas — GoalsIcon (barras subindo)
    case 'sf-goals': return (
      <svg width={size} height={size} viewBox="0 0 26.27 26.27" fill={color} xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-120 840)">
          <path d="M120-813.73v-2.77l2.189-2.189v4.962zm6.02 0v-8.611l2.189-2.189v10.8zm6.02 0v-10.8l2.189 2.226v8.574zm6.02 0v-8.57l2.189-2.189v10.763zm6.02 0v-14.448l2.189-2.189v16.638zM120-822.341v-3.1l10.216-10.143 5.838 5.838L146.27-840v3.1l-10.216 10.253-5.838-5.838z"/>
        </g>
      </svg>
    );
    // Estoque — InventoryIcon (prateleira)
    case 'sf-stock': return (
      <svg width={size} height={size} viewBox="0 0 26.973 25" fill={color} xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-80 880)">
          <path d="M81.349-856.937v-15.375a1.45 1.45 0 01-.91-.625 1.943 1.943 0 01-.439-1.219v-3.969a1.756 1.756 0 01.607-1.3 1.988 1.988 0 011.416-.575h22.927a2.008 2.008 0 011.4.578 1.736 1.736 0 01.624 1.3v3.969a1.943 1.943 0 01-.438 1.219 1.45 1.45 0 01-.91.625v15.375a1.833 1.833 0 01-.624 1.328 1.956 1.956 0 01-1.4.609h-20.23a1.937 1.937 0 01-1.416-.609 1.855 1.855 0 01-.607-1.331zm2.023-15.344v15.406H103.6v-15.406zm21.578-1.875v-3.969H82.023v3.969zm-15.509 8.438h8.092v-1.875h-8.092zm-6.069 8.844z"/>
        </g>
      </svg>
    );
    // Comparativo — ChartIcon (gráfico de barras em caixa)
    case 'sf-comparative': return (
      <svg width={size} height={size} viewBox="0 0 27.129 27.129" fill={color} xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-120 840)">
          <path d="M126.179-818.787h2.261v-7.724h-2.261zm12.509 0h2.261v-15.825h-2.261zm-6.255 0h2.261v-4.446h-2.261zm0-7.724h2.261v-2.261h-2.261zm-10.173 13.64a2.169 2.169 0 01-1.583-.678 2.169 2.169 0 01-.678-1.583v-22.607a2.169 2.169 0 01.678-1.583 2.169 2.169 0 011.583-.678h22.607a2.169 2.169 0 011.583.678 2.169 2.169 0 01.678 1.583v22.607a2.169 2.169 0 01-.678 1.583 2.169 2.169 0 01-1.583.678zm0-2.261h22.607v-22.607h-22.606zm0-22.607z"/>
        </g>
      </svg>
    );
    // Visão geral / Análises — AnalyticsIcon (linha de tendência)
    case 'sf-overview': return (
      <svg width={size} height={size} viewBox="0 -960 960 960" fill={color} xmlns="http://www.w3.org/2000/svg">
        <path d="M136-240l-56-56 296-298 160 160 208-206H640v-80h240v240h-80v-104L536-320 376-480 136-240z"/>
      </svg>
    );
    // Entregas — DeliveryIcon (caminhão)
    case 'sf-deliveries': return (
      <svg width={size} height={size} viewBox="0 -960 960 960" fill={color} xmlns="http://www.w3.org/2000/svg">
        <path d="M240-160q-50 0-85-35t-35-85H40v-440q0-33 23.5-56.5T120-800h560v160h120l120 160v200h-80q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35zm0-80q17 0 28.5-11.5T280-280q0-17-11.5-28.5T240-320q-17 0-28.5 11.5T200-280q0 17 11.5 28.5T240-240zM120-360h32q17-18 39-29t49-11q27 0 49 11t39 29h272v-360H120v360zm600 120q17 0 28.5-11.5T760-280q0-17-11.5-28.5T720-320q-17 0-28.5 11.5T680-280q0 17 11.5 28.5T720-240zm-40-200h170l-90-120h-80v120zM360-540z"/>
      </svg>
    );
    // DRE — documento com barras de resultado (financial statement)
    case 'dre': return (
      <svg {...props}>
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/>
        <line x1="9" y1="16" x2="9" y2="18"/>
        <line x1="12" y1="13" x2="12" y2="18"/>
        <line x1="15" y1="15" x2="15" y2="18"/>
      </svg>
    );
    // Contas a pagar — BillsIcon (cédula/pagamento)
    case 'sf-bills': return (
      <svg width={size} height={size} viewBox="0 -960 960 960" fill={color} xmlns="http://www.w3.org/2000/svg">
        <path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35zM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80zM280-400v-320 320z"/>
      </svg>
    );

    default:return null;
  }
};

/* Delta badge */
function Delta({ value, suffix = '%' }) {
  const positive = value >= 0;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      fontSize: 12, fontWeight: 600,
      color: positive ? 'var(--positive)' : 'var(--danger)',
      background: positive ? 'var(--positive-bg)' : 'var(--danger-bg)',
      padding: '3px 7px', borderRadius: 999,
      fontFeatureSettings: '"tnum"'
    }}>
      <Icon name={positive ? 'arrow-up' : 'arrow-down'} size={11} strokeWidth={2.5} />
      {Math.abs(value).toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}{suffix}
    </span>);

}

Object.assign(window, { Logo, LogoMark, Icon, Delta, BRL, NUM, PCT });