// Shared icons + tiny UI primitives.

// SVG icons — single-color stroke style, 20px default.
const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.6, style }) => {
  const paths = {
    dashboard: <><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></>,
    drivers:   <><circle cx="12" cy="8" r="3.5"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></>,
    vehicles:  <><path d="M3 13l1.5-5.5A2 2 0 0 1 6.4 6h11.2a2 2 0 0 1 1.9 1.5L21 13"/><rect x="2" y="13" width="20" height="5" rx="1.5"/><circle cx="7" cy="18" r="1.5" fill="currentColor"/><circle cx="17" cy="18" r="1.5" fill="currentColor"/></>,
    fuel:      <><rect x="4" y="3" width="9" height="18" rx="1"/><path d="M13 8h2.5a1.5 1.5 0 0 1 1.5 1.5V16a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8l-2.5-2.5"/><path d="M6 7h5"/></>,
    settle:    <><path d="M4 5h16M4 12h16M4 19h10"/><circle cx="18" cy="19" r="2"/></>,
    chevDown:  <path d="M6 9l6 6 6-6" fill="none"/>,
    chevRight: <path d="M9 6l6 6-6 6" fill="none"/>,
    chevLeft:  <path d="M15 6l-6 6 6 6" fill="none"/>,
    plus:      <path d="M12 5v14M5 12h14"/>,
    edit:      <><path d="M4 20h4l11-11-4-4L4 16v4z"/><path d="M14 6l4 4"/></>,
    trash:     <><path d="M5 7h14M10 11v6M14 11v6"/><path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></>,
    search:    <><circle cx="11" cy="11" r="6"/><path d="M16 16l4 4"/></>,
    filter:    <path d="M3 5h18l-7 8v6l-4-2v-4L3 5z"/>,
    download:  <><path d="M12 4v12M7 11l5 5 5-5"/><path d="M5 20h14"/></>,
    logout:    <><path d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4"/><path d="M16 8l4 4-4 4M20 12H10"/></>,
    user:      <><circle cx="12" cy="9" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>,
    lock:      <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    eye:       <><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"/></>,
    check:     <path d="M5 12l5 5L20 7" fill="none"/>,
    x:         <path d="M6 6l12 12M18 6L6 18" fill="none"/>,
    menu:      <path d="M4 6h16M4 12h16M4 18h16" fill="none"/>,
    arrowLeft: <path d="M19 12H5M12 19l-7-7 7-7" fill="none"/>,
    calendar:  <><rect x="4" y="6" width="16" height="14" rx="1.5"/><path d="M4 10h16M9 3v4M15 3v4"/></>,
    history:   <><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/><path d="M4 12a8 8 0 0 1 8-8" /></>,
    car:       <><path d="M5 15l1.4-4.2A2 2 0 0 1 8.3 9.5h7.4a2 2 0 0 1 1.9 1.3L19 15"/><rect x="4" y="14" width="16" height="5" rx="1.5"/><circle cx="8" cy="19" r="1.5" fill="currentColor"/><circle cx="16" cy="19" r="1.5" fill="currentColor"/></>,
    speedometer: <><circle cx="12" cy="13" r="8"/><path d="M12 13l4-3"/><path d="M8 4l1 2M16 4l-1 2"/></>,
    chartBar:  <><path d="M4 20V10M9 20V4M14 20v-8M19 20v-5"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name]}
    </svg>
  );
};

// Fuel-station mini logos as colored chips (placeholders — branded logos
// would be dropped in for real). Color codes drawn from each station's
// brand palette but rendered as tiny squares with monogram, no logos.
const stationChip = (name, { size = 22 } = {}) => {
  const map = {
    MOYA:    { bg: '#e30613', fg: '#fff', label: 'M' },
    BP:      { bg: '#009900', fg: '#ffe700', label: 'BP' },
    ORLEN:   { bg: '#e30613', fg: '#fff', label: 'O' },
    CIRCLEK: { bg: '#ff5b00', fg: '#fff', label: 'CK' },
    SHELL:   { bg: '#fbce07', fg: '#dd1d21', label: 'S' },
    MOL:     { bg: '#003594', fg: '#fff', label: 'M' },
    AVIA:    { bg: '#e30613', fg: '#fff', label: 'A' },
  };
  const s = map[name] || { bg: '#666', fg: '#fff', label: '?' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: 4, background: s.bg, color: s.fg,
      fontFamily: 'JetBrains Mono, monospace', fontSize: size * 0.4, fontWeight: 700,
      flexShrink: 0,
    }}>{s.label}</span>
  );
};

const StatusPill = ({ status }) => {
  const map = {
    'Aktywny':     { bg: '#dcfce7', fg: '#166534', dot: '#22c55e' },
    'W serwisie':  { bg: '#fef3c7', fg: '#854d0e', dot: '#eab308' },
    'Wolny':       { bg: '#e0e7ff', fg: '#3730a3', dot: '#6366f1' },
    'Uszkodzony':  { bg: '#fee2e2', fg: '#991b1b', dot: '#ef4444' },
    'Wypożyczony': { bg: '#fae8ff', fg: '#86198f', dot: '#a855f7' },
  };
  const s = map[status] || { bg: '#f4f4f5', fg: '#52525b', dot: '#a1a1aa' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 9px 3px 7px', borderRadius: 999, background: s.bg, color: s.fg,
      fontSize: 12, fontWeight: 600, letterSpacing: -0.1,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: s.dot }} />
      {status}
    </span>
  );
};

const ActivePill = ({ active }) => (
  <StatusPill status={active ? 'Aktywny' : 'Nieaktywny'} />
);

// License-plate looking element
const Plate = ({ children, size = 'md' }) => {
  const sizes = {
    sm: { fs: 11, py: 2, px: 6, flag: 9 },
    md: { fs: 13, py: 3, px: 8, flag: 11 },
    lg: { fs: 16, py: 5, px: 11, flag: 13 },
  }[size];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'stretch', borderRadius: 4,
      background: '#fff', border: '1.5px solid #18181b', overflow: 'hidden',
      fontFamily: 'JetBrains Mono, monospace', fontWeight: 700,
      fontSize: sizes.fs, letterSpacing: 0.5, color: '#18181b',
    }}>
      <span style={{
        background: '#1d4ed8', color: '#fbbf24', padding: `0 ${sizes.flag * 0.4}px`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: sizes.fs * 0.65, fontWeight: 800, letterSpacing: 0,
      }}>PL</span>
      <span style={{ padding: `${sizes.py}px ${sizes.px}px`, display: 'flex', alignItems: 'center' }}>{children}</span>
    </span>
  );
};

// Initials bubble
const Avatar = ({ name, size = 32 }) => {
  const initials = (name || '?').split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
  // Stable color based on name
  let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 360;
  const hue = h;
  return (
    <span style={{
      width: size, height: size, borderRadius: '50%',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: `oklch(0.92 0.05 ${hue})`, color: `oklch(0.35 0.12 ${hue})`,
      fontSize: size * 0.4, fontWeight: 700, letterSpacing: -0.2, flexShrink: 0,
    }}>{initials}</span>
  );
};

// Modal shell
const Modal = ({ open, onClose, title, subtitle, children, footer, width = 480 }) => {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(12,10,9,0.45)', backdropFilter: 'blur(2px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50, padding: 24,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: '#fff', borderRadius: 8, width, maxWidth: '100%',
        boxShadow: '0 24px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05)',
        display: 'flex', flexDirection: 'column', maxHeight: '90%',
      }}>
        <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid #f1f0ee' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.3, color: '#18181b' }}>{title}</div>
              {subtitle && <div style={{ fontSize: 13, color: '#71717a', marginTop: 2 }}>{subtitle}</div>}
            </div>
            <button onClick={onClose} style={{ ...btnGhostStyle, padding: 6, color: '#71717a' }}>
              <Icon name="x" size={18} />
            </button>
          </div>
        </div>
        <div style={{ padding: 24, overflow: 'auto', flex: 1 }}>{children}</div>
        {footer && <div style={{ padding: '14px 24px', borderTop: '1px solid #f1f0ee', display: 'flex', gap: 8, justifyContent: 'flex-end' }}>{footer}</div>}
      </div>
    </div>
  );
};

// Buttons
const btnPrimaryStyle = {
  display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px',
  background: '#f59e0b', color: '#18181b', border: '1px solid #d97706',
  fontWeight: 700, fontSize: 13, letterSpacing: -0.1, borderRadius: 6,
  cursor: 'pointer', fontFamily: 'inherit', transition: 'background .12s, transform .06s',
};
const btnSecondaryStyle = {
  display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px',
  background: '#fff', color: '#18181b', border: '1px solid #e4e4e7',
  fontWeight: 600, fontSize: 13, letterSpacing: -0.1, borderRadius: 6,
  cursor: 'pointer', fontFamily: 'inherit', transition: 'background .12s',
};
const btnGhostStyle = {
  display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 8px',
  background: 'transparent', color: '#52525b', border: 'none',
  fontWeight: 500, fontSize: 13, borderRadius: 5,
  cursor: 'pointer', fontFamily: 'inherit', transition: 'background .12s, color .12s',
};
const btnDangerStyle = {
  ...btnPrimaryStyle, background: '#fee2e2', border: '1px solid #fecaca', color: '#991b1b',
};

const Btn = ({ variant = 'primary', icon, children, ...props }) => {
  const styles = { primary: btnPrimaryStyle, secondary: btnSecondaryStyle, ghost: btnGhostStyle, danger: btnDangerStyle };
  return (
    <button {...props} style={{ ...styles[variant], ...(props.style || {}) }}
      onMouseEnter={(e) => { if (variant === 'primary') e.currentTarget.style.background = '#fbbf24'; if (variant === 'secondary') e.currentTarget.style.background = '#fafaf9'; if (variant === 'ghost') e.currentTarget.style.background = '#f4f4f5'; }}
      onMouseLeave={(e) => { if (variant === 'primary') e.currentTarget.style.background = '#f59e0b'; if (variant === 'secondary') e.currentTarget.style.background = '#fff'; if (variant === 'ghost') e.currentTarget.style.background = 'transparent'; }}>
      {icon && <Icon name={icon} size={15} />}
      {children}
    </button>
  );
};

// Field
const Field = ({ label, hint, children, required }) => (
  <label style={{ display: 'block' }}>
    <div style={{ fontSize: 12, fontWeight: 600, color: '#3f3f46', marginBottom: 6, letterSpacing: 0.1, textTransform: 'uppercase' }}>
      {label}{required && <span style={{ color: '#dc2626', marginLeft: 2 }}>*</span>}
    </div>
    {children}
    {hint && <div style={{ fontSize: 12, color: '#71717a', marginTop: 4 }}>{hint}</div>}
  </label>
);

const inputStyle = {
  width: '100%', padding: '9px 12px', fontSize: 14, color: '#18181b',
  background: '#fff', border: '1px solid #d4d4d8', borderRadius: 6,
  fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
  transition: 'border-color .12s, box-shadow .12s',
};

const Input = (props) => (
  <input {...props} style={{ ...inputStyle, ...(props.style || {}) }}
    onFocus={(e) => { e.target.style.borderColor = '#f59e0b'; e.target.style.boxShadow = '0 0 0 3px rgba(245,158,11,0.15)'; props.onFocus && props.onFocus(e); }}
    onBlur={(e) => { e.target.style.borderColor = '#d4d4d8'; e.target.style.boxShadow = 'none'; props.onBlur && props.onBlur(e); }} />
);

const Select = ({ children, ...props }) => (
  <div style={{ position: 'relative' }}>
    <select {...props} style={{
      ...inputStyle, appearance: 'none', paddingRight: 32, cursor: 'pointer',
      ...(props.style || {}),
    }}
      onFocus={(e) => { e.target.style.borderColor = '#f59e0b'; e.target.style.boxShadow = '0 0 0 3px rgba(245,158,11,0.15)'; }}
      onBlur={(e) => { e.target.style.borderColor = '#d4d4d8'; e.target.style.boxShadow = 'none'; }}>
      {children}
    </select>
    <div style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: '#71717a' }}>
      <Icon name="chevDown" size={16} />
    </div>
  </div>
);

Object.assign(window, {
  Icon, stationChip, StatusPill, ActivePill, Plate, Avatar, Modal,
  Btn, Field, Input, Select, inputStyle,
  btnPrimaryStyle, btnSecondaryStyle, btnGhostStyle, btnDangerStyle,
});