/* ============================================================================
 * TRANSPORTISTAS
 * ============================================================================
 * Empresas de transporte con las que se manda mercadería por encomienda a
 * provincia.
 *
 * No son unidades vehiculares y tienen su propio catálogo: una unidad es un
 * vehículo nuestro, con placa, y un transportista es una empresa ajena.
 * Mezclarlos obligaría a inventar placas falsas y arruinaría cualquier reporte
 * por vehículo.
 * ========================================================================== */

function Transportistas() {
  const toast = useToast();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editando, setEditando] = React.useState(null);
  const [eliminando, setEliminando] = React.useState(null);

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try { setRows((await Api.get('/transportistas')).data); } catch (err) { toast.error(err.message); } finally { setLoading(false); }
  }, []);

  React.useEffect(() => { cargar(); }, [cargar]);

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/transportistas/${form.id}`, form);
      else await Api.post('/transportistas', form);
      toast.success('Transportista guardado');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/transportistas/${eliminando.id}`);
      toast.success('Transportista eliminado');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Transportistas</div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nuevo transportista</button>
        </div>
        <p className="text-muted" style={{ margin: '0 2px 14px', fontSize: 13 }}>
          Empresas con las que se envía por encomienda a provincia. Se registran acá para poder
          ver después con cuál se demora o se pierde más mercadería.
        </p>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'nombre', header: 'Empresa' },
              { key: 'ruc', header: 'RUC', mono: true },
              { key: 'contacto_nombre', header: 'Contacto' },
              { key: 'contacto_telefono', header: 'Teléfono', mono: true },
              { key: 'estado', header: 'Estado', render: (r) => <span className="tag-chip">{r.estado}</span> },
              { key: 'acciones', header: '', render: (r) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="icon-btn" onClick={() => setEditando(r)}><IconEdit size={14} /></button>
                  <button className="icon-btn" onClick={() => setEliminando(r)}><IconTrash size={14} /></button>
                </div>
              ) },
            ]}
            rows={rows}
            emptyTitle="Sin transportistas registrados"
            emptyHint="Regístralos para poder enviar luces por encomienda a provincia."
          />
        )}
      </div>

      {editando && <TransportistaModal transportista={editando} onClose={() => setEditando(null)} onSave={guardar} />}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar transportista"
        message={`¿Eliminar "${eliminando?.nombre}"? Si tiene envíos registrados, no podrá eliminarse: desactívalo en su lugar.`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function TransportistaModal({ transportista, onClose, onSave }) {
  const [form, setForm] = React.useState({
    id: transportista.id,
    nombre: transportista.nombre || '',
    ruc: transportista.ruc || '',
    contacto_nombre: transportista.contacto_nombre || '',
    contacto_telefono: transportista.contacto_telefono || '',
    observaciones: transportista.observaciones || '',
    estado: transportista.estado || 'ACTIVO',
  });

  // El RUC peruano tiene 11 dígitos. Se avisa acá para no llegar al servidor
  // con algo que la base va a rechazar igual.
  const rucValido = !form.ruc.trim() || /^[0-9]{11}$/.test(form.ruc.trim());

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">{transportista.id ? 'Editar transportista' : 'Nuevo transportista'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body stack-y">
          <div className="field">
            <label>Empresa</label>
            <input
              value={form.nombre}
              onChange={(e) => setForm({ ...form, nombre: e.target.value })}
              placeholder="Ej. Transportes Shalom"
              maxLength={150}
              autoFocus
            />
          </div>
          <div className="field">
            <label>RUC</label>
            <input
              value={form.ruc}
              onChange={(e) => setForm({ ...form, ruc: e.target.value.replace(/[^0-9]/g, '') })}
              placeholder="11 dígitos"
              maxLength={11}
            />
            {!rucValido && (
              <p className="scan-hero__hint" style={{ margin: '4px 0 0', opacity: .8 }}>
                El RUC debe tener exactamente 11 dígitos.
              </p>
            )}
          </div>
          <div className="field">
            <label>Contacto</label>
            <input
              value={form.contacto_nombre}
              onChange={(e) => setForm({ ...form, contacto_nombre: e.target.value })}
              placeholder="Nombre de la persona de contacto"
              maxLength={150}
            />
          </div>
          <div className="field">
            <label>Teléfono</label>
            <input
              value={form.contacto_telefono}
              onChange={(e) => setForm({ ...form, contacto_telefono: e.target.value })}
              placeholder="Ej. 999888777"
              maxLength={30}
            />
          </div>
          <div className="field">
            <label>Observaciones</label>
            <input
              value={form.observaciones}
              onChange={(e) => setForm({ ...form, observaciones: e.target.value })}
              placeholder="Ej. Cubre la ruta norte, agencia en Trujillo"
            />
          </div>
          {transportista.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activo</option>
                <option value="INACTIVO">Inactivo</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button
            className="btn btn-primary"
            onClick={() => onSave({ ...form, ruc: form.ruc.trim() || undefined })}
            disabled={!form.nombre.trim() || !rucValido}
          >
            Guardar
          </button>
        </div>
      </div>
    </div>
  );
}