// Header component — date presets + refresh
(function () {
  const { useState, useRef, useEffect } = React;

  const PRESETS = [
    { id: 'today',     label: 'Hoy' },
    { id: 'yesterday', label: 'Ayer' },
    { id: '7d',        label: '7d' },
    { id: '30d',       label: '30d' },
    { id: '90d',       label: '90d' },
    { id: '180d',      label: '6m' },
    { id: '365d',      label: '1a' },
    { id: 'custom',    label: '···' },
  ];

  function timeAgo(iso) {
    if (!iso) return null;
    const diffMs  = Date.now() - new Date(iso).getTime();
    const diffMin = Math.round(diffMs / 60000);
    if (diffMin < 1)   return 'ahora mismo';
    if (diffMin < 60)  return `hace ${diffMin} min`;
    const diffH = Math.round(diffMin / 60);
    if (diffH < 24)    return `hace ${diffH}h`;
    return `hace ${Math.round(diffH / 24)}d`;
  }

  function fmtDate(iso) {
    if (!iso) return null;
    const d = new Date(iso);
    return d.toLocaleString('es-ES', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
  }

  function Header({ preset, onPreset, title, loading, backendOnline, onRefresh, onSyncHistorico, lastSyncAt }) {
    const [showCustom, setShowCustom] = useState(false);
    const [from, setFrom]             = useState('');
    const [to, setTo]                 = useState('');
    const panelRef = useRef(null);

    useEffect(() => {
      function close(e) {
        if (panelRef.current && !panelRef.current.contains(e.target)) setShowCustom(false);
      }
      document.addEventListener('mousedown', close);
      return () => document.removeEventListener('mousedown', close);
    }, []);

    function pick(id) {
      if (id === 'custom') { setShowCustom(s => !s); return; }
      setShowCustom(false);
      onPreset(id);
    }

    function apply() {
      if (!from || !to) return;
      onPreset(`custom:${from}:${to}`);
      setShowCustom(false);
    }

    const active = preset?.startsWith('custom') ? 'custom' : preset;
    const online    = backendOnline === true;
    const syncedAgo = lastSyncAt ? timeAgo(lastSyncAt) : null;

    return React.createElement('header', { className: 'app-header' },
      React.createElement('div', { className: 'header-left' },
        React.createElement('h1', { className: 'header-title' }, title),
        React.createElement('span', { className: 'header-range' },
          syncedAgo ? `Actualizado ${syncedAgo}` : 'Sin sincronizar'
        )
      ),

      React.createElement('div', { className: 'header-right' },
        // Online dot
        React.createElement('div', { className: `header-dot ${online ? 'online' : 'offline'}` }),

        // Presets
        React.createElement('div', { className: 'presets', ref: active === 'custom' ? panelRef : null },
          PRESETS.map(p =>
            React.createElement('button', {
              key: p.id,
              onClick: () => pick(p.id),
              className: `preset-btn${active === p.id ? ' active' : ''}`,
            }, p.label)
          )
        ),

        // Custom date panel
        showCustom && React.createElement('div', { ref: panelRef, className: 'date-panel' },
          React.createElement('p', { className: 'date-panel-title' }, 'Rango personalizado'),
          React.createElement('label', { className: 'date-label' }, 'Desde'),
          React.createElement('input', { type: 'date', value: from, onChange: e => setFrom(e.target.value), className: 'date-input' }),
          React.createElement('label', { className: 'date-label', style: { marginTop: 8 } }, 'Hasta'),
          React.createElement('input', { type: 'date', value: to, onChange: e => setTo(e.target.value), className: 'date-input' }),
          React.createElement('button', { onClick: apply, className: 'btn-apply' }, 'Aplicar')
        ),

        // Histórico sync
        onSyncHistorico && React.createElement('button', {
          onClick: onSyncHistorico,
          className: 'preset-btn',
          title: 'Sincronizar histórico (365 días)',
          style: { fontSize: 11 },
        }, 'Histórico'),

        // Refresh
        React.createElement('button', {
          onClick: onRefresh,
          className: `icon-btn${loading ? ' spin' : ''}`,
        }, '↻')
      )
    );
  }

  window.Header = Header;
})();