// Shared UI primitives for the Help prototype
// Visual language sourced from the AIDAPP B2C Figma file

const C = {
  text: 'rgb(30,30,30)',
  textMuted: 'rgb(117,117,117)',
  textFaint: 'rgb(179,179,179)',
  surface: 'rgb(245,245,245)',
  surfaceAlt: 'rgb(227,227,227)',
  hairline: 'rgb(217,217,217)',
  greenBg: 'rgb(207,247,211)',
  greenBgSoft: 'rgb(235,255,238)',
  greenText: 'rgb(2,84,45)',
  greenSolid: 'rgb(20,174,92)',
  greenIcon: 'rgb(4,150,64)',
  redBg: 'rgb(253,211,208)',
  redBgSoft: 'rgb(254,233,231)',
  redText: 'rgb(144,11,9)',
  redSolid: 'rgb(236,34,31)',
  redDeep: 'rgb(198,40,40)',
  navy: 'rgb(24,32,87)',
  navySolid: 'rgb(34,37,138)',
  navyBg: 'rgb(241,243,253)',
  yellow: 'rgb(255,193,7)',
  white: '#fff',
  black: 'rgb(0,0,0)',
};
window.C = C;

// Inline SVG icon set (Feather-flavored, stroke 1.8, currentColor)
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.8, style }) {
  const common = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
    style: { display: 'block', flexShrink: 0, ...style }
  };
  const paths = {
    'alert-triangle': <><path d="M10.29 3.86 1.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"/></>,
    'message-circle': <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></>,
    '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"/></>,
    'map-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"/></>,
    'navigation': <><polygon points="3 11 22 2 13 21 11 13 3 11"/></>,
    '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"/></>,
    'chevron-right': <><polyline points="9 18 15 12 9 6"/></>,
    'chevron-left': <><polyline points="15 18 9 12 15 6"/></>,
    'chevron-down': <><polyline points="6 9 12 15 18 9"/></>,
    'arrow-up': <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></>,
    'arrow-right': <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    'x': <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    'check': <><polyline points="20 6 9 17 4 12"/></>,
    'check-circle': <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></>,
    'home': <><path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V9.5z"/></>,
    'more': <><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></>,
    'wrench': <><path d="M14.7 6.3a4 4 0 0 0-5.6 5.6L3 18l3 3 6.1-6.1a4 4 0 0 0 5.6-5.6l-3 3-2.6-.4-.4-2.6 3-3z"/></>,
    'battery': <><rect x="1" y="6" width="18" height="12" rx="2" ry="2"/><line x1="23" y1="13" x2="23" y2="11"/></>,
    'fuel': <><line x1="3" y1="22" x2="15" y2="22"/><line x1="4" y1="9" x2="14" y2="9"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2 2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></>,
    'truck': <><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
    'crash': <><path d="M12 2v6"/><path d="m4.93 10.93 4.24 4.24"/><path d="M2 18h6"/><path d="M19.07 10.93l-4.24 4.24"/><path d="M22 18h-6"/><path d="m15.5 21.5-1.5-4-3-1-2 4"/></>,
    'key': <><circle cx="8" cy="15" r="4"/><line x1="10.85" y1="12.15" x2="19" y2="4"/><line x1="18" y1="5" x2="20" y2="7"/><line x1="15" y1="8" x2="17" y2="10"/></>,
    'tire': <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/><line x1="12" y1="3" x2="12" y2="8.5"/><line x1="12" y1="15.5" x2="12" y2="21"/><line x1="3" y1="12" x2="8.5" y2="12"/><line x1="15.5" y1="12" x2="21" y2="12"/></>,
    'send': <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    'mic': <><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></>,
    'image': <><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></>,
    'paperclip': <><path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></>,
    'crosshair': <><circle cx="12" cy="12" r="9"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></>,
    '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"/></>,
    'shield': <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
    'sliders': <><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></>,
    'clock': <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></>,
    'sparkle': <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    'sos': <><path d="M12 2a10 10 0 1 0 10 10"/><path d="M22 2 12 12"/><circle cx="12" cy="12" r="2"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
}
window.Icon = Icon;

// Status bar matching the original screenshot
function StatusBar({ time = '9:41', dark = false }) {
  const c = dark ? '#fff' : '#000';
  return (
    <div style={{
      height: 44, padding: '0 24px', display: 'flex',
      alignItems: 'center', justifyContent: 'space-between',
      fontFamily: '-apple-system, "SF Pro", system-ui',
    }}>
      <span style={{ fontSize: 17, fontWeight: 600, color: c, letterSpacing: -0.4 }}>{time}</span>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <svg width="18" height="11" viewBox="0 0 18 11">
          <rect x="0" y="6.5" width="3" height="4" rx="0.5" fill={c}/>
          <rect x="4.5" y="4.5" width="3" height="6" rx="0.5" fill={c}/>
          <rect x="9" y="2.5" width="3" height="8" rx="0.5" fill={c}/>
          <rect x="13.5" y="0" width="3" height="10.5" rx="0.5" fill={c}/>
        </svg>
        <svg width="16" height="11" viewBox="0 0 16 11">
          <path d="M8 2.5C10.2 2.5 12.2 3.4 13.6 4.8L14.6 3.8C12.9 2.1 10.6 1 8 1C5.4 1 3.1 2.1 1.4 3.8L2.4 4.8C3.8 3.4 5.8 2.5 8 2.5Z" fill={c}/>
          <path d="M8 5.5C9.3 5.5 10.4 6 11.3 6.9L12.3 5.9C11.1 4.7 9.6 4 8 4C6.4 4 4.9 4.7 3.7 5.9L4.7 6.9C5.6 6 6.7 5.5 8 5.5Z" fill={c}/>
          <circle cx="8" cy="9" r="1.3" fill={c}/>
        </svg>
        <svg width="25" height="11" viewBox="0 0 25 11">
          <rect x="0.5" y="0.5" width="21" height="10" rx="2.5" stroke={c} strokeOpacity="0.4" fill="none"/>
          <rect x="2" y="2" width="18" height="7" rx="1.3" fill={c}/>
          <path d="M22.5 3.5V7.5C23.2 7.2 23.7 6.5 23.7 5.5C23.7 4.5 23.2 3.8 22.5 3.5Z" fill={c} fillOpacity="0.6"/>
        </svg>
      </div>
    </div>
  );
}
window.StatusBar = StatusBar;

// Bottom tab bar (replicates the screen the user shared)
function TabBar({ active = 'help', onChange }) {
  const tabs = [
    { id: 'home', label: 'Главная', icon: 'home' },
    { id: 'service', label: 'Обслуживание', icon: 'check-circle' },
    { id: 'help', label: 'Помощь', icon: 'alert-triangle' },
    { id: 'more', label: 'Еще', icon: 'more' },
  ];
  return (
    <div style={{
      height: 83, paddingTop: 8,
      borderTop: `1px solid ${C.hairline}`,
      background: 'rgba(255,255,255,0.96)',
      backdropFilter: 'blur(20px)',
      display: 'flex', justifyContent: 'space-around',
      position: 'relative', zIndex: 10,
    }}>
      {tabs.map(t => {
        const on = t.id === active;
        return (
          <button key={t.id}
            onClick={() => onChange && onChange(t.id)}
            style={{
              border: 'none', background: 'transparent', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 2, padding: '4px 12px', flex: 1,
              color: on ? C.text : 'rgb(120,120,128)',
            }}>
            <Icon name={t.icon} size={24} strokeWidth={on ? 2 : 1.6}/>
            <span style={{ fontSize: 10, fontWeight: on ? 600 : 500, fontFamily: 'Inter' }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}
window.TabBar = TabBar;

// Sub-header for inner screens
function SubHeader({ title, subtitle, onBack, right, dark = false }) {
  return (
    <div style={{
      padding: '8px 20px 16px', display: 'flex', alignItems: 'center', gap: 12,
      background: dark ? C.navy : 'transparent',
      color: dark ? '#fff' : C.text,
    }}>
      <button onClick={onBack} style={{
        width: 36, height: 36, borderRadius: 999, border: 'none',
        background: dark ? 'rgba(255,255,255,0.12)' : C.surface,
        display: 'grid', placeItems: 'center', cursor: 'pointer',
        color: dark ? '#fff' : C.text, flexShrink: 0,
      }}>
        <Icon name="chevron-left" size={20}/>
      </button>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 16, lineHeight: 1.2 }}>{title}</div>
        {subtitle && (
          <div style={{ fontFamily: 'Inter', fontSize: 12, opacity: dark ? 0.7 : 1, color: dark ? '#fff' : C.textMuted, marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
            {subtitle}
          </div>
        )}
      </div>
      {right}
    </div>
  );
}
window.SubHeader = SubHeader;

// Phone frame
function Phone({ children }) {
  return (
    <div style={{
      width: 375, height: 812, background: '#fff',
      borderRadius: 44, overflow: 'hidden', position: 'relative',
      boxShadow: '0 30px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06), inset 0 0 0 6px #1a1a1a',
      fontFamily: 'Inter, -apple-system, system-ui, sans-serif',
      color: C.text,
    }}>
      <div style={{
        position: 'absolute', inset: '6px', borderRadius: 38, overflow: 'hidden',
        background: '#fff', display: 'flex', flexDirection: 'column',
      }}>
        {children}
      </div>
    </div>
  );
}
window.Phone = Phone;