// Shared UI helpers, placeholders, icons
(function(){

// Simple inline SVG icons - outline style, 20px default
const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.8 }) => {
  const paths = {
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    search: <><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    bell: <><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    filter: <><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    alert: <><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    folder: <><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></>,
    file: <><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"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    home: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    chart: <><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>,
    chevron: <><polyline points="9 18 15 12 9 6"/></>,
    chevronR: <><polyline points="15 18 9 12 15 6"/></>,
    chevronD: <><polyline points="6 9 12 15 18 9"/></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowR: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    camera: <><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    msg: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    star: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>,
    trend: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,
    dollar: <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    list: <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    map: <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></>,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    more: <><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>,
    back: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></>,
    building: <><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></>,
    logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    send: <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    task: <><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    bolt: <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
    edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
      {paths[name]}
    </svg>
  );
};

// Themed placeholder for project imagery (striped SVG)
const ProjectPlaceholder = ({ kind = 'restaurant', style = {}, label }) => {
  const palettes = {
    restaurant: { base: '#8b6f47', stripe: '#6d553310' },
    office: { base: '#4a5568', stripe: '#2d374810' },
    retail: { base: '#6b5b95', stripe: '#4a3f6810' },
  };
  const p = palettes[kind] || palettes.office;
  const id = `stripe-${kind}-${Math.random().toString(36).slice(2,7)}`;
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: p.base, ...style }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={id} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
            <rect width="14" height="14" fill={p.base}/>
            <line x1="0" y1="0" x2="0" y2="14" stroke={p.stripe} strokeWidth="6"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`}/>
      </svg>
      {label && (
        <div style={{
          position: 'absolute', bottom: 8, right: 8,
          fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 10,
          color: 'rgba(255,255,255,0.7)', letterSpacing: 0.5,
        }}>{label}</div>
      )}
    </div>
  );
};

// Avatar with initials
const Avatar = ({ name, size = 28, style = {} }) => {
  const initials = name ? name.split(' ').map(p => p[0]).slice(0, 2).join('') : '?';
  // Deterministic color from name
  const hues = [210, 240, 25, 160, 280, 340];
  const hue = hues[(name || '').length % hues.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: size,
      background: `oklch(0.62 0.08 ${hue})`,
      color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.4, fontWeight: 600, flexShrink: 0,
      ...style,
    }}>{initials}</div>
  );
};

// Format currency
const fmtMoney = (n) => {
  if (n >= 1000000) return (n / 1000000).toFixed(1).replace('.0','') + 'M ₪';
  if (n >= 1000) return Math.round(n / 1000) + 'K ₪';
  return n + ' ₪';
};

// PhotoPickerInline — two visible buttons: 📷 צלם  🖼️ גלריה
// Use this where space allows (reports, forms). No popup, no extra step.
const PhotoPickerInline = ({ onFiles, multiple = false, style = {} }) => {
  const camRef = React.useRef();
  const galRef = React.useRef();
  const handle = (e) => { if (e.target.files?.length) onFiles(e.target.files); e.target.value = ''; };
  const btn = {
    display: 'flex', alignItems: 'center', gap: 5, padding: '8px 14px',
    borderRadius: 8, border: '1px solid #d1d5db', background: '#f9fafb',
    cursor: 'pointer', fontSize: 13, fontWeight: 600, color: '#374151',
    fontFamily: 'Assistant, sans-serif', whiteSpace: 'nowrap',
  };
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center', ...style }}>
      <input ref={camRef} type="file" accept="image/*" capture="environment" multiple={multiple} onChange={handle} style={{ display:'none' }}/>
      <input ref={galRef} type="file" accept="image/*"                        multiple={multiple} onChange={handle} style={{ display:'none' }}/>
      <button style={btn} onClick={() => camRef.current?.click()}>📷 צלם</button>
      <button style={btn} onClick={() => galRef.current?.click()}>🖼️ גלריה</button>
    </div>
  );
};

// PhotoPickerSheet — action sheet for camera OR gallery on mobile
// On desktop goes straight to gallery. On mobile shows bottom sheet with both options.
const PhotoPickerSheet = ({ onFiles, multiple = false, children, style = {} }) => {
  const [open, setOpen] = React.useState(false);
  const cameraRef = React.useRef();
  const galleryRef = React.useRef();
  const { isMobile } = useViewport();

  const handleChange = (e) => {
    if (e.target.files && e.target.files.length) onFiles(e.target.files);
    e.target.value = '';
  };

  const pickCamera  = () => { setOpen(false); setTimeout(() => cameraRef.current?.click(),  60); };
  const pickGallery = () => { setOpen(false); setTimeout(() => galleryRef.current?.click(), 60); };
  const handleTrigger = () => isMobile ? setOpen(true) : galleryRef.current?.click();

  const btnSt = {
    width: '100%', padding: '14px 18px', borderRadius: 10,
    border: '1px solid #e5e7eb', background: '#f8fafc',
    color: '#1f2937', fontSize: 15, fontWeight: 600,
    cursor: 'pointer', display: 'flex', alignItems: 'center',
    gap: 12, marginBottom: 10, fontFamily: 'inherit', textAlign: 'right',
  };

  return (
    <>
      <input ref={cameraRef}  type="file" accept="image/*" capture="environment" multiple={multiple} onChange={handleChange} style={{ display:'none' }}/>
      <input ref={galleryRef} type="file" accept="image/*"                        multiple={multiple} onChange={handleChange} style={{ display:'none' }}/>
      <div onClick={handleTrigger} style={{ display:'contents', ...style }}>
        {children}
      </div>
      {open && <>
        <div onClick={() => setOpen(false)} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.45)', zIndex:9950 }}/>
        <div style={{ position:'fixed', bottom:0, left:0, right:0, background:'#fff', borderRadius:'18px 18px 0 0', padding:'14px 20px 36px', zIndex:9951, boxShadow:'0 -4px 24px rgba(0,0,0,0.18)', direction:'rtl' }}>
          <div style={{ width:40, height:4, background:'#e5e7eb', borderRadius:2, margin:'0 auto 18px' }}/>
          <button style={btnSt} onClick={pickCamera}>
            <span style={{ fontSize:24 }}>📷</span> צלם עכשיו
          </button>
          <button style={btnSt} onClick={pickGallery}>
            <span style={{ fontSize:24 }}>🖼️</span> בחר מהגלריה
          </button>
          <button onClick={() => setOpen(false)} style={{ width:'100%', padding:'12px', borderRadius:10, border:'none', background:'transparent', color:'#6b7280', fontSize:14, cursor:'pointer', fontFamily:'inherit' }}>ביטול</button>
        </div>
      </>}
    </>
  );
};

Object.assign(window, { Icon, ProjectPlaceholder, Avatar, fmtMoney, PhotoPickerSheet, PhotoPickerInline });
})();