// CompanyGear — a unified "settings" button that lives on every main screen.
// Default: a clean stroked gear icon.
// When the user enables `useLogoIcon` in Einstellungen → Darstellung AND has
// uploaded a logo, the gear is swapped for the logo (same tap-target, same
// behaviour — opens the global FirmenprofilSheet).

const CompanyCtx = React.createContext({ company: {}, openSettings: () => {} });
window.CompanyCtx = CompanyCtx;

// Feather-style 6-tooth settings gear in a 24×24 viewBox.
const GEAR_PATH =
  'M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z';

function CompanyGear({ size = 38, style }) {
  const t = useTheme();
  const ctx = React.useContext(CompanyCtx);
  const company = (ctx && ctx.company) || {};
  const open    = (ctx && ctx.openSettings) || (() => {});

  // Studio design: render the round bordered gear in-place (matches the home one),
  // so it sits correctly in each screen's header action row.
  if (t.studio) {
    return (
      <Pressable onClick={open} scale={0.9} style={style}>
        <div style={{ width: size, height: size, borderRadius: 999, border: `0.5px solid ${t.sep}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon d="M12 9a3 3 0 100 6 3 3 0 000-6zM19 12a7 7 0 00-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 00-2-1.2l-.4-2.6H10l-.4 2.6a7 7 0 00-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 002 1.2l.4 2.6h4l.4-2.6a7 7 0 002-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0019 12z" color={t.text} size={Math.round(size * 0.48)} sw={1.6}/>
        </div>
      </Pressable>
    );
  }

  // The "Firmenlogo statt Zahnrad" toggle lives on the company object so it
  // travels through the same persistence and context as everything else.
  const showLogo = !!(company.useLogoIcon && company.logo);

  if (showLogo) {
    // Logo mode — circular chip with the user's logo inside.
    const pad = Math.round(size * 0.18);
    return (
      <Pressable onClick={open} scale={0.88} style={style}>
        <div style={{
          width: size, height: size, borderRadius: size / 2,
          background: t.card,
          border: `0.5px solid ${t.dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.06)'}`,
          boxShadow: t.shadowCard,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          overflow: 'hidden',
        }}>
          <img
            src={company.logo} alt=""
            style={{
              width: size - pad * 2, height: size - pad * 2,
              objectFit: 'contain',
            }}
            onError={(e) => { e.target.style.display = 'none'; }}
          />
        </div>
      </Pressable>
    );
  }

  // Default — clean settings gear in the standard chip treatment used by the
  // sibling header buttons (search, reorder, …).
  const iconSize = Math.round(size * 0.5);
  return (
    <Pressable onClick={open} scale={0.88} style={style}>
      <div style={{
        width: size, height: size, borderRadius: size / 2,
        background: t.chip,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon d={GEAR_PATH} color={t.text} size={iconSize} sw={1.8}/>
      </div>
    </Pressable>
  );
}

Object.assign(window, { CompanyGear, CompanyCtx });