/* flota.jsx — Módulo 2: Flota & Choferes (datos maestros). Registra window.CR.screens.Flota
   v2: suma columna de CAPACIDAD (volumetría) a la grilla de vehículos + capacidad en el form. */
(function () {
  var React = window.React;
  var ui = window.CR.ui, store = window.CR.store, K = window.CR.const;

  function vacioVehiculo() {
    return { tipoUnidad: 'CAM', patente: '', antiguedad: 0, estado: 'activo' };
  }
  function vacioChofer() {
    return { nombre: '', zonaOrigen: 'N', desempeno: 80, telefono: '',
      esAgencia: false, contactoAgencia: '', estado: 'disponible', ack: 'pendiente' };
  }

  function Flota() {
    window.CR.useStore(); // re-render reactivo

    var tabState = React.useState('vehiculos');
    var tab = tabState[0], setTab = tabState[1];

    var modalState = React.useState(null); // null | objeto en edición/alta
    var modal = modalState[0], setModal = modalState[1];

    function abrirAlta() {
      setModal(tab === 'vehiculos' ? vacioVehiculo() : vacioChofer());
    }
    function editar(obj) { setModal(Object.assign({}, obj)); }
    function cerrar() { setModal(null); }
    function setCampo(k, v) {
      setModal(function (m) { var n = Object.assign({}, m); n[k] = v; return n; });
    }
    function guardar() {
      store.upsert(tab, modal);
      setModal(null);
    }

    // ---- Tab Vehículos ----
    function renderVehiculos() {
      var rows = store.list('vehiculos');
      var cols = [
        { key: 'patente', label: 'Patente', render: function (r) {
            return React.createElement('b', { className: 'tnum' }, r.patente || '—'); } },
        { key: 'tipoUnidad', label: 'Tipo', render: function (r) { return K.labelTipo(r.tipoUnidad); } },
        { key: 'capacidad', label: 'Capacidad', align: 'right', render: function (r) {
            return React.createElement('span', { className: 'tnum' }, K.capacidad(r.tipoUnidad) + ' paquetes'); } },
        { key: 'antiguedad', label: 'Antigüedad', align: 'right', render: function (r) {
            return React.createElement('span', { className: 'tnum' }, (r.antiguedad || 0) + ' años'); } },
        { key: 'estado', label: 'Estado', render: function (r) {
            var color = r.estado === 'activo' ? 'ok' : r.estado === 'eventual' ? 'info' : 'warn';
            var lbl = r.estado === 'activo' ? 'Activo' : r.estado === 'eventual' ? 'Eventual' : 'En taller';
            return React.createElement(ui.Badge, { color: color, dot: true }, lbl); } },
        { key: 'acc', label: '', align: 'right', render: function (r) {
            return React.createElement('div', { style: { display: 'flex', gap: '6px', justifyContent: 'flex-end' } },
              React.createElement(ui.Button, { size: 'sm', variant: 'ghost', onClick: function () { editar(r); } }, 'Editar'),
              React.createElement(ui.Button, { size: 'sm', variant: 'danger',
                onClick: function () { store.remove('vehiculos', r.id); } }, 'Baja')); } }
      ];
      return React.createElement('div', null,
        React.createElement(ui.Toolbar, null,
          React.createElement(ui.Button, { variant: 'primary', onClick: abrirAlta }, 'Agregar vehículo')),
        React.createElement(ui.DataTable, {
          columns: cols, rows: rows, rowKey: 'id',
          empty: 'Todavía no cargaste vehículos. Dale a “Agregar vehículo” para arrancar.'
        }));
    }

    // ---- Tab Choferes ----
    function barraDesempeno(v) {
      var n = Math.max(0, Math.min(100, v || 0));
      var color = n >= 80 ? 'var(--ok, #22c55e)' : n >= 60 ? 'var(--accent)' : 'var(--warn, #f59e0b)';
      return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', minWidth: '120px' } },
        React.createElement('b', { className: 'tnum', style: { width: '28px', textAlign: 'right' } }, n),
        React.createElement('span', {
          style: { flex: 1, height: '6px', borderRadius: '99px', background: 'var(--line, rgba(255,255,255,.12))', overflow: 'hidden', display: 'inline-block' } },
          React.createElement('span', {
            style: { display: 'block', height: '100%', width: n + '%', background: color, borderRadius: '99px' } })));
    }

    function renderChoferes() {
      var rows = store.list('choferes');
      var cols = [
        { key: 'nombre', label: 'Nombre', render: function (r) {
            return React.createElement('b', null, r.nombre || '—'); } },
        { key: 'zonaOrigen', label: 'Zona', render: function (r) { return K.labelZona(r.zonaOrigen); } },
        { key: 'desempeno', label: 'Desempeño', render: function (r) { return barraDesempeno(r.desempeno); } },
        { key: 'telefono', label: 'Teléfono', render: function (r) {
            return React.createElement('span', { className: 'tnum' }, r.telefono || '—'); } },
        { key: 'tipo', label: 'Tipo', render: function (r) {
            return r.esAgencia
              ? React.createElement(ui.Badge, { color: 'info' }, 'Agencia')
              : React.createElement(ui.Badge, { color: 'neutral' }, 'Directo'); } },
        { key: 'estado', label: 'Estado', render: function (r) {
            return r.estado === 'disponible'
              ? React.createElement(ui.Badge, { color: 'ok', dot: true }, 'Disponible')
              : React.createElement(ui.Badge, { color: 'muted', dot: true }, 'Licencia'); } },
        { key: 'acc', label: '', align: 'right', render: function (r) {
            return React.createElement('div', { style: { display: 'flex', gap: '6px', justifyContent: 'flex-end' } },
              React.createElement(ui.Button, { size: 'sm', variant: 'ghost', onClick: function () { editar(r); } }, 'Editar'),
              React.createElement(ui.Button, { size: 'sm', variant: 'danger',
                onClick: function () { store.remove('choferes', r.id); } }, 'Baja')); } }
      ];
      return React.createElement('div', null,
        React.createElement(ui.Toolbar, null,
          React.createElement(ui.Button, { variant: 'primary', onClick: abrirAlta }, 'Agregar chofer')),
        React.createElement(ui.DataTable, {
          columns: cols, rows: rows, rowKey: 'id',
          empty: 'Todavía no cargaste choferes. Dale a “Agregar chofer” para arrancar.'
        }));
    }

    // ---- Modal de formulario ----
    function formVehiculo() {
      return React.createElement('div', { style: { display: 'grid', gap: '12px' } },
        React.createElement(ui.Field, { label: 'Patente' },
          React.createElement(ui.Input, { value: modal.patente, placeholder: 'AB 123 CD',
            onChange: function (v) { setCampo('patente', v.toUpperCase()); } })),
        React.createElement(ui.Field, { label: 'Tipo de unidad' },
          React.createElement(ui.Select, {
            value: modal.tipoUnidad,
            onChange: function (v) { setCampo('tipoUnidad', v); },
            options: K.TIPOS.map(function (t) { return { value: t.k, label: t.label + ' (cap ' + t.cap + ')' }; })
          })),
        React.createElement('p', { className: 'muted', style: { margin: '-4px 0 0', fontSize: '12px' } },
          'Capacidad de la unidad: ',
          React.createElement('b', { className: 'tnum' }, K.capacidad(modal.tipoUnidad) + ' paquetes')),
        React.createElement(ui.Field, { label: 'Antigüedad (años)' },
          React.createElement(ui.Input, { type: 'number', value: modal.antiguedad,
            onChange: function (v) { setCampo('antiguedad', v === '' ? '' : parseInt(v, 10) || 0); } })),
        React.createElement(ui.Field, { label: 'Estado' },
          React.createElement(ui.Select, {
            value: modal.estado,
            onChange: function (v) { setCampo('estado', v); },
            options: [
              { value: 'activo', label: 'Activo' },
              { value: 'eventual', label: 'Eventual' },
              { value: 'taller', label: 'En taller' }
            ]
          })));
    }

    function formChofer() {
      return React.createElement('div', { style: { display: 'grid', gap: '12px' } },
        React.createElement(ui.Field, { label: 'Nombre' },
          React.createElement(ui.Input, { value: modal.nombre, placeholder: 'Nombre y apellido',
            onChange: function (v) { setCampo('nombre', v); } })),
        React.createElement(ui.Field, { label: 'Zona de origen' },
          React.createElement(ui.Select, {
            value: modal.zonaOrigen,
            onChange: function (v) { setCampo('zonaOrigen', v); },
            options: K.ZONAS.map(function (z) { return { value: z.k, label: z.label }; })
          })),
        React.createElement(ui.Field, { label: 'Desempeño (0–100)' },
          React.createElement(ui.Input, { type: 'number', value: modal.desempeno,
            onChange: function (v) {
              if (v === '') { setCampo('desempeno', ''); return; }
              var n = parseInt(v, 10) || 0;
              setCampo('desempeno', Math.max(0, Math.min(100, n)));
            } })),
        React.createElement(ui.Field, { label: 'Teléfono' },
          React.createElement(ui.Input, { value: modal.telefono, placeholder: '+54 9 11 …',
            onChange: function (v) { setCampo('telefono', v); } })),
        React.createElement(ui.Field, { label: 'Tipo de contratación' },
          React.createElement('label', { style: { display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' } },
            React.createElement('input', {
              type: 'checkbox', checked: !!modal.esAgencia,
              onChange: function (e) { setCampo('esAgencia', e.target.checked); }
            }),
            React.createElement('span', null, 'Es de agencia'))),
        modal.esAgencia && React.createElement(ui.Field, { label: 'Contacto de la agencia' },
          React.createElement(ui.Input, { value: modal.contactoAgencia, placeholder: 'Referente / teléfono de la agencia',
            onChange: function (v) { setCampo('contactoAgencia', v); } })),
        React.createElement(ui.Field, { label: 'Estado' },
          React.createElement(ui.Select, {
            value: modal.estado,
            onChange: function (v) { setCampo('estado', v); },
            options: [
              { value: 'disponible', label: 'Disponible' },
              { value: 'licencia', label: 'De licencia' }
            ]
          })));
    }

    function modalAbierto() {
      if (!modal) return null;
      var esVehiculo = tab === 'vehiculos';
      var esEdicion = !!modal.id;
      var titulo = (esEdicion ? 'Editar ' : 'Agregar ') + (esVehiculo ? 'vehículo' : 'chofer');
      var footer = React.createElement('div', { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' } },
        React.createElement(ui.Button, { variant: 'ghost', onClick: cerrar }, 'Cancelar'),
        React.createElement(ui.Button, { variant: 'primary', onClick: guardar }, 'Guardar'));
      return React.createElement(ui.Modal, { open: true, title: titulo, onClose: cerrar, footer: footer },
        esVehiculo ? formVehiculo() : formChofer());
    }

    return React.createElement(ui.Page, { title: 'Flota & Choferes', subtitle: 'Datos maestros de unidades y conductores.' },
      React.createElement(ui.Tabs, {
        value: tab,
        onChange: function (v) { setTab(v); setModal(null); },
        tabs: [
          { value: 'vehiculos', label: 'Vehículos' },
          { value: 'choferes', label: 'Choferes' }
        ]
      }),
      React.createElement('div', { style: { marginTop: '16px' } },
        tab === 'vehiculos' ? renderVehiculos() : renderChoferes()),
      modalAbierto());
  }

  window.CR.screens = window.CR.screens || {};
  window.CR.screens.Flota = Flota;
})();