// GuinchoFlow — Shared Components

// ── Icons (inline SVG via lucide-style paths) ──────────────────────────────
const Icon = ({ name, size = 20, color = 'currentColor', className = '' }) => {
  const paths = {
    home: 'M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z M9 22V12h6v10',
    truck: 'M1 3h15v13H1zM16 8h4l3 3v5h-7V8z M5.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM18.5 21a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
    alert: 'M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z M12 9v4 M12 17h.01',
    search: 'M11 19a8 8 0 100-16 8 8 0 000 16z M21 21l-4.35-4.35',
    calendar: 'M3 4h18v18H3z M16 2v4 M8 2v4 M3 10h18',
    check: 'M22 11.08V12a10 10 0 11-5.93-9.14 M22 4L12 14.01l-3-3',
    x: 'M18 6L6 18 M6 6l12 12',
    bell: 'M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 01-3.46 0',
    user: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2 M12 11a4 4 0 100-8 4 4 0 000 8z',
    users: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75',
    dollar: 'M12 1v22 M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6',
    chart: 'M18 20V10 M12 20V4 M6 20v-6',
    settings: 'M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z',
    eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 12a3 3 0 100-6 3 3 0 000 6',
    edit: 'M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z',
    trash: 'M3 6h18 M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6 M10 11v6 M14 11v6 M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2',
    plus: 'M12 5v14 M5 12h14',
    menu: 'M3 12h18 M3 6h18 M3 18h18',
    close: 'M18 6L6 18 M6 6l12 12',
    chevronRight: 'M9 18l6-6-6-6',
    chevronDown: 'M6 9l6 6 6-6',
    logout: 'M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4 M16 17l5-5-5-5 M21 12H9',
    clipboard: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2 M9 5a2 2 0 002 2h2a2 2 0 002-2 M9 5a2 2 0 012-2h2a2 2 0 012 2',
    map: 'M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4 M8 2v16 M16 6v16',
    camera: 'M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z M12 17a4 4 0 100-8 4 4 0 000 8z',
    fileText: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
    wrench: 'M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z',
    trendUp: 'M23 6l-9.5 9.5-5-5L1 18 M17 6h6v6',
    trendDown: 'M23 18l-9.5-9.5-5 5L1 6 M17 18h6v-6',
    building: 'M6 2h12a2 2 0 012 2v18H4V4a2 2 0 012-2z M9 22V12h6v10 M9 6h.01 M15 6h.01 M9 10h.01 M15 10h.01',
    download: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3',
    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
    key: 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4',
    battery: 'M1 9h18v6H1z M23 13v-2',
    zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
    phone: 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z',
    mail: 'M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z M22 6l-10 7L2 6',
  };
  const d = paths[name] || paths.alert;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      {d.split(' M').map((seg, i) => (
        <path key={i} d={i === 0 ? seg : 'M' + seg} />
      ))}
    </svg>
  );
};

// ── Status Badge ──────────────────────────────────────────────────────────
const StatusBadge = ({ status }) => {
  const map = {
    aberta:      { label: 'Aberta',         bg: 'rgba(59,130,246,0.12)',  color: '#2563EB' },
    atendimento: { label: 'Em Atendimento', bg: 'rgba(245,158,11,0.15)',  color: '#B45309' },
    agendada:    { label: 'Agendada',       bg: 'rgba(139,92,246,0.12)',  color: '#7C3AED' },
    finalizada:  { label: 'Finalizada',     bg: 'rgba(16,185,129,0.12)', color: '#047857' },
    cancelada:   { label: 'Cancelada',      bg: 'rgba(239,68,68,0.12)',  color: '#DC2626' },
    disponivel:  { label: 'Disponível',     bg: 'rgba(16,185,129,0.12)', color: '#047857' },
    ativo:       { label: 'Ativo',          bg: 'rgba(16,185,129,0.12)', color: '#047857' },
    inativo:     { label: 'Inativo',        bg: 'rgba(148,163,184,0.15)',color: '#64748B' },
    manutencao:  { label: 'Manutenção',     bg: 'rgba(245,158,11,0.15)', color: '#B45309' },
    entrada:     { label: 'Entrada',        bg: 'rgba(16,185,129,0.12)', color: '#047857' },
    saida:       { label: 'Saída',          bg: 'rgba(239,68,68,0.12)',  color: '#DC2626' },
  };
  const s = map[status] || map.inativo;
  return (
    <span style={{
      display: 'inline-block', padding: '3px 10px', borderRadius: 6,
      background: s.bg, color: s.color, fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap'
    }}>{s.label}</span>
  );
};

// ── Avatar ────────────────────────────────────────────────────────────────
const AVATAR_COLORS = ['#3B82F6','#8B5CF6','#F59E0B','#10B981','#EF4444','#EC4899','#14B8A6'];
const Avatar = ({ initials, size = 32 }) => {
  const idx = (initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % AVATAR_COLORS.length;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: '50%',
      background: AVATAR_COLORS[idx], color: '#fff',
      fontSize: size * 0.36, fontWeight: 700, flexShrink: 0,
      fontFamily: 'DM Sans, sans-serif', userSelect: 'none'
    }}>{initials}</span>
  );
};

// ── Card ──────────────────────────────────────────────────────────────────
const Card = ({ children, style = {}, className = '', ...rest }) => (
  <div className={className} style={{
    background: '#fff', borderRadius: 16,
    boxShadow: '0 1px 3px rgba(0,0,0,0.07)', border: '1px solid #E2E8F0',
    ...style
  }} {...rest}>{children}</div>
);

// ── Modal ─────────────────────────────────────────────────────────────────
const Modal = ({ open, onClose, title, children, width = 680, noPad = false }) => {
  if (!open) return null;
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)',
      zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 'max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px)',
      backdropFilter: 'blur(2px)'
    }} onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal-inner" style={{
        background: '#fff', borderRadius: 20, width: '100%', maxWidth: width,
        maxHeight: '90vh', display: 'flex', flexDirection: 'column',
        boxShadow: '0 20px 60px rgba(0,0,0,0.18)',
        animation: 'modalIn 0.2s ease'
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 24px', borderBottom: '1px solid #E2E8F0', flexShrink: 0
        }}>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#0F172A', fontFamily: 'DM Sans, sans-serif' }}>{title}</h2>
          <button onClick={onClose} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 6,
            borderRadius: 8, color: '#64748B', display: 'flex', transition: 'background 0.15s'
          }} onMouseEnter={e=>e.currentTarget.style.background='#F1F5F9'}
             onMouseLeave={e=>e.currentTarget.style.background='none'}>
            <Icon name="close" size={18} />
          </button>
        </div>
        <div style={{ padding: noPad ? 0 : 24, overflowY: 'auto', flex: 1 }}>{children}</div>
      </div>
    </div>
  );
};

// ── Toast ─────────────────────────────────────────────────────────────────
let _toastFn = null;
const Toast = () => {
  const [toasts, setToasts] = React.useState([]);
  _toastFn = (msg, type='success') => {
    const id = Date.now();
    setToasts(t => [...t, { id, msg, type }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3200);
  };
  const colors = { success: '#10B981', error: '#EF4444', warning: '#F59E0B', info: '#3B82F6' };
  return (
    <div style={{
      position: 'fixed',
      top: 'calc(env(safe-area-inset-top) + 20px)',
      right: 'calc(env(safe-area-inset-right) + 20px)',
      zIndex: 9999, display: 'flex', flexDirection: 'column', gap: 8
    }}>
      {toasts.map(t => (
        <div key={t.id} style={{
          background: '#fff', border: `1px solid ${colors[t.type]}30`,
          borderLeft: `4px solid ${colors[t.type]}`, borderRadius: 10,
          padding: '12px 16px', boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
          fontSize: 14, color: '#0F172A', minWidth: 280, maxWidth: 380,
          animation: 'slideIn 0.25s ease', fontFamily: 'Inter, sans-serif'
        }}>{t.msg}</div>
      ))}
    </div>
  );
};
const showToast = (msg, type='success') => _toastFn && _toastFn(msg, type);

// ── SignaturePad (assinatura digital responsiva) ──────────────────────────
const SignaturePad = ({ label, onSign, height = 160 }) => {
  const canvasRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [drawing, setDrawing] = React.useState(false);
  const [hasSign, setHasSign] = React.useState(false);

  // Ajuste de DPI e largura responsiva
  React.useEffect(() => {
    const setupCanvas = () => {
      const canvas = canvasRef.current;
      const container = containerRef.current;
      if (!canvas || !container) return;
      const dpr = window.devicePixelRatio || 1;
      const w = container.offsetWidth;
      canvas.width = w * dpr;
      canvas.height = height * dpr;
      canvas.style.width = w + 'px';
      canvas.style.height = height + 'px';
      const ctx = canvas.getContext('2d');
      ctx.scale(dpr, dpr);
      ctx.strokeStyle = '#0F172A';
      ctx.lineWidth = 2.5;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
    };
    setupCanvas();
    window.addEventListener('resize', setupCanvas);
    return () => window.removeEventListener('resize', setupCanvas);
  }, [height]);

  const getPos = (e) => {
    const canvas = canvasRef.current;
    const r = canvas.getBoundingClientRect();
    const src = e.touches && e.touches[0] ? e.touches[0] : e;
    return { x: src.clientX - r.left, y: src.clientY - r.top };
  };
  const start = (e) => {
    e.preventDefault();
    setDrawing(true);
    const pos = getPos(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
  };
  const move = (e) => {
    if (!drawing) return;
    e.preventDefault();
    const pos = getPos(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
    if (!hasSign) setHasSign(true);
  };
  const end = (e) => {
    if (!drawing) return;
    e && e.preventDefault();
    setDrawing(false);
    if (hasSign && onSign) onSign(canvasRef.current.toDataURL('image/png'));
  };
  const clear = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    setHasSign(false);
    if (onSign) onSign(null);
  };

  return (
    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <label style={{ fontSize: 13, fontWeight: 600, color: '#374151' }}>{label}</label>
        <button onClick={clear} type="button" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, color: '#EF4444', fontFamily: 'Inter, sans-serif', fontWeight: 600 }}>Limpar</button>
      </div>
      <canvas ref={canvasRef}
        onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
        onTouchStart={start} onTouchMove={move} onTouchEnd={end}
        style={{
          border: `2px dashed ${hasSign ? '#3B82F6' : '#E2E8F0'}`,
          borderRadius: 10, background: '#F8FAFC', cursor: 'crosshair',
          width: '100%', height: height, touchAction: 'none', display: 'block'
        }} />
      {!hasSign && <span style={{ fontSize: 11, color: '#94A3B8', textAlign: 'center' }}>Assine acima usando o mouse ou o dedo</span>}
    </div>
  );
};

// ── Input ─────────────────────────────────────────────────────────────────
const Input = ({ label, placeholder, value, onChange, type = 'text', style = {} }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, ...style }}>
      {label && <label style={{ fontSize: 13, fontWeight: 500, color: '#374151' }}>{label}</label>}
      <input
        type={type} value={value} onChange={onChange} placeholder={placeholder}
        onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
        style={{
          padding: '9px 12px', borderRadius: 8, fontSize: 14, color: '#0F172A',
          border: `1px solid ${focused ? '#3B82F6' : '#E2E8F0'}`,
          outline: 'none', background: '#fff', fontFamily: 'Inter, sans-serif',
          boxShadow: focused ? '0 0 0 3px rgba(59,130,246,0.12)' : 'none',
          transition: 'all 0.15s'
        }}
      />
    </div>
  );
};

// ── Select ────────────────────────────────────────────────────────────────
const Select = ({ label, value, onChange, options = [], style = {} }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 6, ...style }}>
    {label && <label style={{ fontSize: 13, fontWeight: 500, color: '#374151' }}>{label}</label>}
    <select value={value} onChange={onChange} style={{
      padding: '9px 12px', borderRadius: 8, fontSize: 14, color: '#0F172A',
      border: '1px solid #E2E8F0', outline: 'none', background: '#fff',
      fontFamily: 'Inter, sans-serif', cursor: 'pointer', appearance: 'none',
      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
      backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center',
      paddingRight: 36
    }}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  </div>
);

// ── Btn ───────────────────────────────────────────────────────────────────
const Btn = ({ children, onClick, variant = 'primary', size = 'md', icon, disabled = false, style = {} }) => {
  const [hov, setHov] = React.useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 6, cursor: disabled ? 'not-allowed' : 'pointer',
    border: 'none', borderRadius: 8, fontWeight: 600, fontFamily: 'DM Sans, sans-serif',
    transition: 'all 0.15s', opacity: disabled ? 0.6 : 1, ...style
  };
  const sizes = { sm: { padding: '6px 12px', fontSize: 13 }, md: { padding: '9px 16px', fontSize: 14 }, lg: { padding: '12px 20px', fontSize: 15 } };
  const variants = {
    primary: { background: hov ? '#E08E00' : '#F59E0B', color: '#0F172A', boxShadow: hov ? '0 4px 12px rgba(245,158,11,0.35)' : '0 1px 4px rgba(245,158,11,0.25)' },
    secondary: { background: hov ? '#F1F5F9' : '#F8FAFC', color: '#374151', border: '1px solid #E2E8F0' },
    danger: { background: hov ? '#DC2626' : '#EF4444', color: '#fff' },
    ghost: { background: hov ? '#F1F5F9' : 'transparent', color: '#64748B' },
    blue: { background: hov ? '#2563EB' : '#3B82F6', color: '#fff', boxShadow: hov ? '0 4px 12px rgba(59,130,246,0.35)' : 'none' },
  };
  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ ...base, ...sizes[size], ...variants[variant] }}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
    </button>
  );
};

// ── Pagination ────────────────────────────────────────────────────────────
const Pagination = ({ page, total, perPage, onChange }) => {
  const pages = Math.ceil(total / perPage);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
      <Btn variant="ghost" size="sm" onClick={() => onChange(Math.max(1, page-1))} disabled={page===1}>← Anterior</Btn>
      {Array.from({length: Math.min(pages, 5)}, (_, i) => {
        const p = pages <= 5 ? i+1 : page <= 3 ? i+1 : page >= pages-2 ? pages-4+i : page-2+i;
        return (
          <button key={p} onClick={() => onChange(p)} style={{
            width: 32, height: 32, borderRadius: 6, border: 'none',
            background: p === page ? '#F59E0B' : 'transparent',
            color: p === page ? '#0F172A' : '#64748B',
            fontWeight: p === page ? 700 : 400, cursor: 'pointer', fontSize: 14
          }}>{p}</button>
        );
      })}
      <Btn variant="ghost" size="sm" onClick={() => onChange(Math.min(pages, page+1))} disabled={page===pages}>Próximo →</Btn>
    </div>
  );
};

// ── Empty State ───────────────────────────────────────────────────────────
const EmptyState = ({ icon = 'clipboard', title = 'Nenhum dado encontrado', subtitle = 'Tente ajustar os filtros ou adicione um novo registro.' }) => (
  <div style={{ textAlign: 'center', padding: '60px 20px', color: '#94A3B8' }}>
    <div style={{ marginBottom: 16, opacity: 0.5 }}><Icon name={icon} size={48} /></div>
    <div style={{ fontSize: 16, fontWeight: 600, color: '#64748B', marginBottom: 6 }}>{title}</div>
    <div style={{ fontSize: 14, color: '#94A3B8' }}>{subtitle}</div>
  </div>
);

// ── Skeleton ──────────────────────────────────────────────────────────────
const Skeleton = ({ w = '100%', h = 16, rounded = 4, style = {} }) => (
  <div style={{ width: w, height: h, borderRadius: rounded, background: 'linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite', ...style }} />
);

// Export
Object.assign(window, { Icon, StatusBadge, Avatar, Card, Modal, Toast, showToast, Input, Select, Btn, Pagination, EmptyState, Skeleton, AVATAR_COLORS });